Hexo + GitHub Pages搭建博客

2020-11-10

搭建步骤

安装Node.js
安装Git
安装Hexo
初始化本地项目
GitHub创建个人仓库
配置站点_config.yml
推送网站
不绑定个人域名
绑定个人域名
更换主题
初始化个人基本信息
初识MarkDown语法
发布文章

安装Node.js

安装包下载地址：https://nodejs.org/en/download/
!!! 注意配置环境变量
cmd窗口检查是否安装成功

1 2	> node -v > npm -v

安装Git

安装包下载地址：https://git-scm.com/download/win
安装过程一直next
命令行测试是否安装成功

1	> git --version

绑定GitHub账号
右键打开Git Bash Here
设置配置信息并生成密钥

1
2
3

$ git config --global user.name GitHub用户名
$ git config --global user.email GitHub注册邮箱
$ ssh-keygen -t rsa -C GitHub注册邮箱

生成密钥过程直接三个回车，默认不设置密码

找到生成的.ssh文件夹中的id_rsa.pub密钥，复制全部
路径（Window系统）：C:\Users\MagicBooK\.ssh（MagicBook是当前的电脑用户名）

打开GitHub-Setting-keys，新建SSH Key

Title随意写，Key为id_rsa.pub密钥复制内容
在Git Bash中检查GitHub公钥设置是否成功

1	$ ssh -T git@github.com

出现
Hi wohunlfry! You’ve successfully authenticated, but GitHub does not provide shell access.
说明Git关联GitHub成功

安装Hexo

进入cmd命令行

1	> npm install -g hexo-cli

初始化本地项目

创建一个文件夹myBlog-Hexo作为Hexo的本地站点（存放Hexo框架+发布的静态网页）
进入myBlog-Hexo文件夹
按住shift，右键选择Git Bash
初始化

$ hexo init
$ npm install
$ hexo g
$ hexo s

浏览器查看效果：localhost:4000

GitHub创建个人仓库

仓库名：yegetaier.github.io（yegetaier自己取名，注意github.io后缀）
visibility设置为Public(GitHub Pages要求)
勾选Initialize this repository with ADD a README file
Create repository

配置站点_config.yml

打开根目录中_config.yml
配置deploy（文件尾部）

deploy:
  type: git
  repo: git@github.com:wohunlfry/yegetaier.github.io.git
  branch: master

后缀为github.io的仓库默认静态网页站点分支为master
获取repo

推送网站

进入myBlog-Hexo安装Git部署插件

1	$ npm install hexo-deployer-git --save

部署

1
2
3

$ hexo clean
$ hexo g
$ hexo d

不绑定个人域名

配置站点_config.yml
配置url and root
绑不绑定域名，url都从published site读取

root：/ + 仓库名

1 2	url: https://wohunlfry.github.io/yegetaier.github.io/ root: /yegetaier.github.io

重新部署

1
2
3

$ hexo clean
$ hexo g
$ hexo d

浏览器url测试

绑定个人域名

设置域名解析
CNAME类型，指向wohunlfry.github.io

配置站点_config.yml
配置url and root
url都从published site读取
root：/

1 2	url: https://jz.wohunlfry.top/ root: /

本地站点下source文件夹增加CNAME定向

1 2	文件名：CNAME (无后缀) 文件内容：jz.wohunlfry.top (绑定的域名)

重新部署

1
2
3

$ hexo clean
$ hexo g
$ hexo d

浏览器url测试

更换主题

选择Hexo主题（GitHub站点）
clone主题到本地站点的themes/next

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

更改站点配置文件_config.yml

1 2	theme: next (next为clone主题的文件夹)

重新部署

1
2
3

$ hexo clean
$ hexo g
$ hexo d

浏览器url测试

初始化个人基本信息

通过站点_config.yml和主题_config.yml初始化个人基本信息
站点_config.yml

主题_config.yml

初识MarkDown语法

标题：
# 一级标题
## 二级标题
### 三级标题

换行：
行末尾增加两个空格
使用空行换行

字体：
*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___

分割线：
***
* * *
- - -
*****

删除线：
~~XXX~~

下划线：
<u></u>

脚注：
创建脚注格式类似这样 [^RUNOOB]。
[^RUNOOB]: 菜鸟教程 -- 学的不仅是技术，更是梦想！！！

列表：
-
-
-
1.
2.
3.

区块：
>
>
>

代码区块：
4个空格或制表符
\```
XXX
\```

链接：
[链接名称](链接地址)
<链接地址>

图床：
![image.png](https://i.loli.net/2020/11/10/cGTvwpIZ3E1ifbo.png)

表格：
|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

发布文章

进入本地站点myBlog-Hexo

1	$ hexo new xxx

进入source文件夹，进入_posts文件夹，看到生成的xxx.md文件

markDown编辑器

VS code
安装Markdown All in One插件
ctrl + shift + v查看HTML效果
先按住ctrl + k，放开再按v，查看实时编辑效果

文章编辑完部署

1 2	$ hexo g $ hexo d

首页显示文章部分内容

增加
<!--more-->
截断
(首页和列表只显示more之前的内容)

浏览器查看最终效果

jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true