0%

使用Hexo搭建个人博客过程记录

本文主要记录使用Hexo+Next主题搭建博客,并部署在Github Pages,使之能够通过个人域名访问的全过程。

准备

环境配置

首先需要安装node环境,安装完毕后,在命令行中输入:

1
npm install hexo-cli -g

安装完毕后,进入某个目录,在命令行中输入

1
2
3
hexo init blog
cd blog
npm install

然后安装Next主题:

1
npm install hexo-theme-next

以上命令会将next主题依赖添加到package.json文件中,方便后续在Github CI上部署。

修改Hexo配置文件

此后,修改_config.yml文件,找到theme这一行:

1
theme: next

根据hexo文档中的指导,修改其他的内容。

https://hexo.io/zh-cn/docs/configuration

修改Next配置文件

将配置文件复制到根目录:

1
cp node_modules/hexo-theme-next/_config.yml _config.next.yml

具体设置参考Next文档。

https://theme-next.js.org/docs/theme-settings/

根据文档,添加about, tags, categories页面。

部署到Github

建立Github仓库

在Github中建立一个公开仓库,命名为<name>.github.io

在Hexo配置文件中,修改最后三行:

1
2
3
4
deploy:
type: git
repository: [email protected]:Bohan-hu/Bohan-hu.github.io.git
branch: master

建立源代码仓库

在本地刚刚建立的Blog文件夹中,新建.github\workflows\deploy.yml,用于CI自动部署。

image-20200823133939523

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
name: CI

on:
push:
branches:
- master

env:
GIT_USER: Bohan-Hu
GIT_EMAIL: [email protected]
DEPLOY_REPO: Bohan-hu/Bohan-hu.github.io
DEPLOY_BRANCH: master

jobs:
build:
name: Build on node ${{ matrix.node_version }} and ${{ matrix.os }}
runs-on: ubuntu-latest
strategy:
matrix:
os: [ubuntu-latest]
node_version: [12.x]

steps:
- name: Checkout
uses: actions/[email protected]

- name: Checkout deploy repo
uses: actions/[email protected]
with:
repository: ${{ env.DEPLOY_REPO }}
ref: ${{ env.DEPLOY_BRANCH }}
path: .deploy_git

- name: Use Node.js ${{ matrix.node_version }}
uses: actions/[email protected]
with:
node-version: ${{ matrix.node_version }}

- name: Configuration environment
env:
HEXO_DEPLOY_PRI: ${{secrets.HEXO_DEPLOY_PRI}}
run: |
sudo timedatectl set-timezone "Asia/Shanghai"
mkdir -p ~/.ssh/
echo "$HEXO_DEPLOY_PRI" > ~/.ssh/id_rsa
chmod 600 ~/.ssh/id_rsa
ssh-keyscan github.com >> ~/.ssh/known_hosts
git config --global user.name $GIT_USER
git config --global user.email $GIT_EMAIL

- name: Install dependencies
run: |
npm install

- name: Deploy hexo
run: |
npm run deploy

配置仓库权限

此后,在本地生成一对公私密钥。

1
ssh-keygen -t rsa -f

在Github中,对于网站源代码仓库,将private key在源文件仓库中加入到HEXO_DEPLOY_PRI变量中,将public key放入网站的文件仓库中的Deploy keys中。

在Github新建一个私有仓库,将网站源文件(即Hexo刚刚建立的文件夹)推上去,观察CI自动部署的情况。

使用个人域名访问

域名的服务商此处选择Godaddy,并使用Cloudflare提供的解析服务。

设置Cloudflare

进入Cloudflare,添加刚刚注册的域名,并进入DNS选项卡,添加A记录。

image-20200823134133941

设置完毕后,需要一定时间生效,此时,进入SSL/TTS-边缘证书-始终使用HTTPS:

image-20200823134157565

设置Godaddy

在Godaddy注册域名后,在域名解析的选项中,设置为Cloudflare的域名服务器。

image-20200823134210525

添加CNAME

在博客文件夹的source子目录中,新建CNAME文件,用大写写入自己绑定到Github的域名。

image-20200823134225476

至此,可以通过域名访问自己的博客主页了。

设置图床

由于Hexo添加图片较为麻烦,建议使用图床,国内使用Gitee作为图床是比较好的选择。

8.23更新:由于Gitee对于微信浏览器的UA做了限制,所以现在采用Github+JsDelivr的方案。

安装Picgo并建立Github仓库

在Picgo官网下载安装Picgo后,在Github中建立一个新的公开仓库,同时需要使用Readme初始化,以新建Master分支。

配置插件

注意链接格式,前缀为https://cdn.jsdelivr.net/gh/用户名/仓库名

image-20200823134358958

配置Typora

image-20200823134508984

如果出现Fetch Error,更改监听端口为36677.

image-20200823134519328