个人博客搭建-入坑

发表于 | 分类于 | 阅读次数: |
字数统计: 2.7k | 阅读时长 10 分钟

前言:
使用Node.js+Hexo+Next+Git+GitHub，让你几分钟就能创建一个博客

基本配置

(1) Node.js
(2) Git
(3) GitHub账号及仓库

注：上述条件安装完成后执行后续操作

配置GitHub仓库

创建仓库

(1) 新建一个名为username.github.io的仓库，比如说，如果你的github用户名是test，那么你就新建test.github.io的仓库
(2) 每一个github账户最多只能创建一个这样可以直接使用域名访问的仓库
创建仓库

1.注册的邮箱一定要验证，否则不会成功
2.仓库名字必须是：username.github.io，其中username是你的用户名

配置SSH key

(1) 提交代码肯定要拥有你的github权限才可以，但是直接使用用户名和密码太不安全了，所以我们使用ssh key来解决本地和服务器的连接问题
(2) 检查本机已存在的ssh密钥：cd ~/. ssh，如果提示No such file or directory说明你是第一次使用Git
(3) 生成密钥：ssh-keygen -t rsa -C "邮件地址"，然后三次回车
(4) 打开用户目录，找到.ssh\id_rsa.pub文件，记事本打开并复制里面的内容
(5) 打开你的github主页，进入个人设置 -> SSH and GPG keys -> New SSH key，将刚复制的内容粘贴到key那里，title随便填，保存:
配置SSH

测试是否成功

(1) 输入命令：ssh -T git@github.com
(2) 如果提示Are you sure you want to continue connecting (yes/no)?，输入yes
(3) 看到以下信息说明SSH已配置成功：

Hi luxiong-github! You’ve successfully authenticated, but GitHub does not provide shell access.

配置Git用户名邮箱(非必须)

(1) 执行以下命令：

1
2
git config --global user.name "luxiong-github"// 你的github用户名，非昵称
git config --global user.email  "xxx@qq.com"// 填写你的github注册邮箱

(2) 配置详情参考：https://blog.csdn.net/sjt19910311/article/details/83685616

创建hexo项目

建议使用文本编辑工具管理项目，推荐使用：VSCode、sublime等，我使用的是VSCode

安装Hexo

(1) 打开Git Bash，是一个命令输入终端，后序所有命令操作都在此进行
(2) 输入命令：npm install -g hexo-cli
(3) 如下图:
安装Hexo

创建项目文件夹

(1) 在Git Bash中切换到博客目录：cd E:React/my-blog/
(2) 新建项目目录：hexo init
(3) 如下图是在E:\React\my-blog\目录下新建了一个hexo目录
创建项目文件夹

安装依赖包

(1) 切换到hexo目录：cd hexo/
(2) 安装依赖包：npm install
(3) 安装完成后目录结构如下图：
安装依赖包

目录结构介绍请看官方API：https://hexo.io/zh-cn/docs/setup

站点配置

网站配置

1
2
3
4
5
6
7
title: 卢雄的博客 #网站标题
subtitle: Live and learn.  #网站副标题
description: 要做的事情总找得出时间和机会；不愿意做的事情也总能找得出借口... #网站描述
keywords: Blog,Hexo,Github  #网站的关键词。使用半角逗号 , 分隔多个关键词
author: luxiong #作者
language: zh-Hans  #语言 en:英文  zh-Hans:简体中文
timezone: #网站时区,默认使用电脑的时区

部署配置

1
2
3
4
deploy: #部署相关的配置
  type: git #使用Git提交
  repo:  git@github.com:username/username.github.io.git #仓库地址，username替换为Github的username
  branch: master #分支名称。如果不指定，则默认值为 master

其他详细配置参考文档：https://hexo.io/zh-cn/docs/configuration

预览

(1) 生成文件
在终端输入命令：hexo g或者hexo generate，作用是将source下面的资源文件在public下生成对应的HTML文件，这些文件将来都是要提交到github去的
(2) 启动服务
在终端输入命令：hexo s或者hexo server，作用是开启本地预览服务，打开浏览器访问 localhost:4000 即可看到内容，默认的已经写好了一篇名为Hello World的文章
预览效果
(3) 如果浏览器一直在转圈但是就是加载不出来的问题，一般情况下是因为端口占用的缘故，因为4000这个端口太常见了，解决端口冲突问题请参考：http://blog.liuxianan.com/windows-port-bind.html

其他配置

上述只是完成了最基本的博客搭建，还有许多配置仍需完善…

分类

(1) 输入命令：hexo new page "categories"
(2) 此命令会在source目录下面创建一个categories目录，内含一个index.md文档，打开进行编辑
(3) 增加页面类型，结果如下：

1
2
3
title: categories
date: 2019-08-31 13:47:02
type: "categories"  #将页面的类型设置为categories

标签

(1) 输入命令：hexo new page "tags"
(2) 此命令会在source目录下面创建一个tags目录，内含一个index.md文档，打开进行编辑
(3) 设置页面类型，结果如下：

1
2
3
title: tags
date: 2019-08-31 13:47:02
type: "tags"  #将页面的类型设置为tags

about自我介绍页面

(1) 输入命令：hexo new page "about"
(2) 此命令会在source目录下面创建一个about目录，内含一个index.md文档，打开进行编辑
(3) 设置页面类型，结果如下：

1
2
3
title: about
date: 2018-08-31 16:47:02
type: "about" # 将页面的类型设置为about

404页面

(1) 在source目录下创建一个404.html文件
(2) 打开文件，将内容修改为以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow" />
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>

<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="/"
    homePageName="回到我的主页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>

</html>

(3) 此404页面为腾讯公益404页面，也可自定义404页面内容

主题修改

(1) 在themes目录下存放的是博客的主题，默认的主题是landscape，可以修改其他主题，推荐使用next主题
(2) 将终端切换到hexo目录，执行以下命令：

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

(3) 修改_config.yml中的theme: landscape改为theme: next，然后重新执行hexo g来重新生成

启用配置

(1) 分类、标签、404页面等配置是跟随主题来配置的，所以每次更换主题后都需要启用对应配置才能生效
(2) 打开themes -> next目录下的主题配置文件_config.yml，开启以下配置：

1
2
3
4
5
6
7
8
9
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  #archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  commonweal: /404/ || heartbeat

(3) 分别执行以下命令，浏览器访问4000端口进行验证：

1
2
3
hexo clean  # 清除原先生成的public下的文件
hexo g      # 生成public下的文件
hexo s      # 启动服务

next主题详细配置参考：http://theme-next.iissnan.com/theme-settings.html

发布文章测试

(1) 新建一篇文章：hexo new "测试文章"或者直接在source_posts\目录下面新建测试文章.md文件
(2) 打开md文件，按格式书写文章内容：

1
2
3
4
5
6
7
8
9
10
---
title: 测试标题 # 这是标题
tags:   # 这里写的标签会自动汇集到 tags 页面上
- 测试标签1 # 可配置多个标签，注意格式
- 测试标签2
category:  # 这里写的分类会自动汇集到 categories 页面上，分类可以多级
- 测试一级分类 # 一级分类
- 测试二级分类 # 二级分类
---
测试文章内容

(3) 预览：

1
2
3
hexo clean  # 清除原先生成的public下的文件
hexo g      # 生成public下的文件
hexo s      # 启动服务

1.修改内容一旦预览与修改不一致，则需要clean
2.已发布的文章发生修改， 可直接预览，即 不执行上述3个命令,刷新浏览器即可
3.若对md文档语法不熟悉，可参考此文章

上传到GitHub

(1) 在之前已经将ssh key和_config.yml关于deploy部分的配置已经完善,不再叙述
(2) 直接执行hexo d一般会报如下错误：

1
Deployer not found: github 或者 Deployer not found: git

解决方案是安装自动部署发布工具：

1
npm install hexo-deployer-git --save

(3) 输入命令hexo d将代码上传到GitHub，完成查看GitHub如下：
代码上传
(4) 浏览器访问：yourname.github.io，如果出现博客的内容，说明代码上传成功

总结

Hexo相关命令总结

(1) 常用命令

1
2
3
4
5
6
7
8
9
10
11
hexo clean          #清除缓存
hexo g              #生成静态页面至public目录，完整写法为：hexo generate
hexo s              #启动本地服务，完整写法为：hexo server
hexo d              #发布到远程(GitHub)，完整写法为：hexo deploy
hexo new page "xxx" #新建xxx页面
hexo new "xxx"      #新建xxx文章
hexo help           #查看帮助
hexo version        #查看Hexo的版本
hexo init           #生成站点
npm install --save xxx  #安装插件
npm unstall xxx     #卸载插件

(2) 组合命令

1
2
hexo s -g #生成并本地预览
hexo d -g #生成并上传

命令尽量手写少复制粘贴，便于熟悉和理解

问题总结

(1) 发布的文章都是md文档，可以先了解一下Markdown语法
(2) FATAL Cannot read property ‘replace’ of null
问题原因：url不能为空
解决：修改站点配置文件_config.yml

1
url: http://luxiong-blog.com

(3) 静态资源图片设置：\themes\next\source\images\用来存放图片
遇到某些地方需要用到图片时(主题配置文件中的avatar、wechatpay、alipay等)，直接使用相对路径引用：

1
2
3
avatar: /images/avatar.jpg          #头像
wechatpay: /images/wechatpay.jpg    #微信打赏码
alipay: /images/alipay.jpg          #支付宝打赏码

(4) 阅读全文：生成的博文目录会显示全部的文章内容，在合适的位置加上<!--more-->即可隐藏内容，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
# 前言

使用github pages服务搭建博客的好处有：

1. 全是静态文件，访问速度快；
2. 免费方便，不用花一分钱就可以搭建一个自由的个人博客，不需要服务器不需要后台；
3. 可以随意绑定自己的域名，不仔细看的话根本看不出来你的网站是基于github的；

<!--more-->

4. 数据绝对安全，基于github的版本管理，想恢复到哪个历史版本都行；
5. 博客内容可以轻松打包、转移、发布到其它平台；
6. 等等；

完成效果：
隐藏内容
(5) 建站问题及错误，遇到问题不要慌，大胆猜测小心验证，百度搜索问题关键字基本都有解决方案

参考

(1) https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html
(2) https://tianbozhang.coding.me/personal-blog-start.html

—— 感谢您的阅读 ( ﾟ∀ﾟ) 有什么疑问可以在下方留言哦 ——
坚持原创技术分享，您的支持将鼓励我继续创作！