这几天忽然翻到了Qexo这个项目,有了Qexo写文章就可以更加方便了,于是我将我的博客迁移从Gridea到了Hexo。Hexo的上手门槛要比Gridea高不少,为了实现自动化部署也翻阅了不少资料。在此记下一点心得。由于过程中没有截图,因此文章大部分内容都会以文字叙述进行,我会尽量叙述完整。

以下的文章都基于Windows环境操作。你都用Linux了你还需要看这篇文章吗? Mac用户:?

环境依赖安装

下载Node.jsGit两个工具,Node.js选择LTS版本就可以,Git可以选择Standalone Installer版本,安装更方便,位数根据电脑自身确定。安装时直接一直下一步就好了。

在下载安装完毕后,打开cmd,输入以下命令:

1
2
npm --version
git --version

如果能看到像是下方这样的输出,就证明安装完成了。

1
2
3
4
5
6
7
8
Microsoft Windows [版本 10.0.22621.1928]
(c) Microsoft Corporation。保留所有权利。

C:\Users\Rinko24>npm --version
8.19.4

C:\Users\Rinko24>git --version
git version 2.40.1.windows.1

创建仓库

Github注册一个账号。注册成功后点击你的头像,选择Your repositories,在弹出来的页面中点击绿色的New按钮,创建仓库。我们一共需要创建两个仓库,分别是:

(1)存放博客文件的仓库,仓库名字(也就是Repository name)这一栏必须填写为你的用户名.github.io,比如我的这个仓库名字就是 LostPear/lostpear.github.io

(2)存放博客源文件的仓库。仓库名字任意,权限建议为 Private。为了方便描述,这篇教程中我们把仓库名定义为 Username/HexoSourceFile

创建好后备用。

初始化Hexo文件

我们先把存放博客源文件的仓库复制下来,在这里假设我们复制到D盘。

打开cmd命令窗口,先用 cd命令移动到D盘:

1
cd D:\

(可选) 为了确保Git可以顺利访问Github,我们可以设置Git的代理。命令如下:

1
2
git config --global https.proxy http://127.0.0.1:7890
git config --global https.proxy https://127.0.0.1:7890

其中 https://127.0.0.1:7890为代理的地址,这一种情况可以在Clash代理的条件下使用,需要在Clash中开启 Allow LAN

Git使用时需要指定用户信息。使用以下命令:

1
2
git config --global user.name “你的Github用户名"
git config --global user.email "你注册Github使用的邮箱"

为了保证Git可以正常使用,需要生成ssh密钥并添加到账户中。使用以下命令:

1
ssh-keygen -t rsa -C "你注册Github使用的邮箱"

期间一直按回车就可以。打开Github,点击右上角头像选择 Settings,再点击 SSH and GPG keys,点击 New SSH,名字随意。在桌面上点击鼠标右键,选择 Git Bash Here,输入:

1
cat ~/.ssh/id_rsa.pub

将输出的内容全部复制到Key这一栏,保存。回到cmd窗口,输入:

1
ssh -T git@github.com

如果出现类似于下方这样的输出信息,这一步就完成了。

1
2
3
4
5
Microsoft Windows [版本 10.0.22621.1928]
(c) Microsoft Corporation。保留所有权利。

C:\Users\Rinko24>ssh -T git@github.com
Hi LostPear! You've successfully authenticated, but GitHub does not provide shell access.

接着使用以下命令把仓库复制到本地:

1
git clone https://github.com/Username/HexoSourceFile.git

本地仓库保存在D:\HexoSourceFile下,一会还需要用到这个仓库目录。

接下来部署hexo。打开一个新的cmd窗口。为了加快部署速度,我们将下载的源换到淘宝源:

1
npm config set registry https://registry.npmmirror.com

然后安装Hexo以及相关依赖:

1
npm install hexo-cli -g

新建一个空文件夹存放生成的hexo文件,在这里假设为D:\HexoTemp。利用cd命令切换到这里,在这个空文件夹下执行以下命令进行Hexo的初始化:

1
hexo init

再运行以下命令,安装运行hexo需要的基础插件:

1
npm install

运行完成后你会看到一堆文件,这些就是Hexo的源文件。你可以翻阅这篇教程来了解它们的用途。把这个文件夹下的全部文件复制到D:\HexoSourceFile里。全部完成后备用。

创建自动化部署

先打开这个项目,点击 Fork把这个项目拷贝一份到我们的账户里,在这里指定为 Username/hexo-deploy-github-pages-action。Fork的主要目的是为了方便我们的修改。

之后打开你源文件的地址,点击上面一栏的 Action按钮,点击Simple workflow下的 Configure,删除里面的所有内容,输入以下指令保存(一部分需要按照注释修改):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
name: Hexo Deploy GitHub Pages
on:
push:
branches:
- main

jobs:
build-and-deploy:
runs-on: ubuntu-latest

steps:
- name: Checkout
uses: actions/checkout@master

- name: Build and Deploy
uses: Username/hexo-deploy-github-pages-action@master # Username改为你Github的用户名
env:
PERSONAL_TOKEN: ${{ secrets.HEXO_DEPLOY }}

# The repository the action should deploy to.
PUBLISH_REPOSITORY: Username/username.github.io # 这里改为你存放博客文件的仓库,也就是上文提到的第一个仓库

# The branch the action should deploy to.
BRANCH: main

在主页点击你的头像,选择 Settings->Developer Options,选择 Personal access tokens下的 Tokens (classic),在右边选择 Generate new token->Generate new token (classic),名字随便取,Expiration选择 No expiration,勾选 repoworkflowwrite:packagesuser,保存。随后会出现一段代码,一定要保存好,它只会出现这一次,如果没有及时保存就需要重新创建了。

打开你存放源文件的仓库,点击 Settings->Secerts and variables,点下面的 Actions,点击右边的 New repositery secret,名字输入 HEXO_DEPLOY,内容输入你刚刚得到的token,保存。

上传博客文件

这一步我们使用Git把文件上传仓库。用cd命令切换到本地仓库下。

1
cd D:\HexoSourceFile

先把仓库同步到最新状态,便于之后上传新文件:

1
git pull

首先,把这个仓库中的文件存到暂存区。输入以下命令:

1
git add ./

随后,输入以下命令确认即将修改的文件,确保没有红色:

1
git status

然后,使用以下命令编辑此次提交的信息:

1
git commit -m "描述信息"

最后,提交更改:

1
git push

等待两三分钟部署完成之后,访问 https://Username.github.io,你就能看到自己的网页了。

你也可以利用 Visual Studio Code 来进行可视化的Git管理,此处不再赘述。

部署到Vercel

国内访问Github实在是太慢了,这会严重拖累你博客的访问速度。我们可以部署到Vercel来改善这个问题。

使用这种方法,你必须要有一个自己的域名,因为Vercel默认为项目提供的域名在国内是被屏蔽的,但是Vercel为项目提供的的加速服务还是能够正常用的。

打开Vercel官网,使用你的Github账户登录,注册好后点击头像选择 Dashboard,在新页面中选择右上角的 Add New...,选择 Project。随后,左侧的 Import Git Repository中,选择你存放博客文件的仓库(也就是第一个)点 Import,项目名字随便取,点击 Deploy。部署完成后,点击 Domains,添加你想要的域名。

在这里添加你的域名的时候,最好不要直接设置你的根域名,二是加一个二级解析。举个例子,如果你购买的域名是 example.com,那么你不要直接把这个设置为你的网站域名,而是更改为二级域名,比如 blog.example.com

设置好之后,按照提示在你的域名服务商处添加DNS解析记录。

回到工作目录,编辑 _config.ymlurl:后的内容改为你刚刚设置的域名地址,随后保存并使用Git进行提交。全部设置完毕后,访问你的域名,应该就能看到你的博客页面了。

(可选) 设置图床

请参阅PicGo的设置文档,此处不再赘述。

(可选) 你可以设置CDN,来加快图片在国内的访问速度。

(可选) 设置Qexo

Qexo是一个开源项目,它可以很方便地对Hexo博客进行管理。设置Qexo请参阅文档

如果要用Qexo设置图床,要注意的是自定义域名的填写逻辑与PicGo是不一样的。Qexo填写时需要精确到你的文件名。

至此所有的设置就已经完成了。至于更高级的Hexo玩法,就请自己探索体验吧。

一些小建议:

  1. 每次在本地编辑博客时,最好先执行一次 git pull命令同步最新的源文件,防止提交时因为冲突而报错。
  2. 如果想要为博客设置封面,使用Qexo写作时,在 其他参数一栏下新建一个名为 cover的参数,后面写你需要做封面的图片地址。
  3. 在本地编辑博客时,可以通过 hexo s临时查看博客渲染后的样式。