Hexo 搭建博客手把手教学

在 2021 年,我写过《手把手教你使用 Hexo 搭建个人博客(2021)》这样一篇博客,目的是方便自己以后重新部署,并帮助新入坑 Hexo 的小伙伴。本来打算一直维护下去的,但由于我太能折腾,弄丢了不少图片,后面就不了了之了,甚至把它直接从网站上删除了,只剩下 CSDN 上孤零零的一篇。

而前段时间有人问我能否写一篇教程,我本来是不打算写的,因为觉得没必要。但现在,一方面自己时间比较多了;另一方面,我也发现了我过于能折腾,电脑系统换来换去,服务器也总是换系统玩,Hexo 也来来回回部署了好几遍,虽然每次都记得大概,但一些小地方还需要上网去查。于是,索性再好好写一个教程得了,就算不为其他人,至少方便自己以后吧。当然,如果能帮到您,那我自然十分荣幸。

讲一下我的部署环境吧。本机为 Windows 11,Hexo 源文件以及博客 Markdown 文件均放在本机,然后服务器为 Debian 11.1,类似于部署在 Github 一样,将博客 push 到服务器上。另外,为了方便,服务器上运行了宝塔面板。博客使用的主题为 NexT v8,评论系统为 Waline

本机准备

Git 的安装配置

每次安装 Git,我都会很怀念 Linux,因为一行命令就好了:pacman -S git 或者 apt install git 等。而到了 Windows 上面,还需要去官网下载,然后点点点,非常繁琐。

前往 Git 官网,根据自己的系统下载合适的安装包,然后点开,开始安装。

对于使用 Windows 11(或者是使用 Windows Terminal)的人来说,最后一个 "Add a Git Bash Profile to Windows Terminal" 最好是选上,这样就可以在 Windows Terminal 中直接使用 git bash 了(虽然我基本不会用 bash)。其他选项按需选择。

默认编辑器,因为我主要用 VS Code,所以就选择了这个。

其他选项均默认即可。

Node.js 的安装配置

Hexo 必须要用的 node.js,过低版本不兼容,过高版本也会出现一些小问题,因此建议使用 v12 的 node.js,小版本号理论上无所谓,我选择的是 v12.22.9。所有选项默认即可,那个自动安装额外工具的选项我没有选择,之前每次都会选,可后来发现对 Hexo 没什么影响,而且在安装过程中还经常因为网络原因出错。

安装 hexo 要用到 node.js 的 npm 工具,可以将它理解为另一个 pip,都是安装管理包 / 库的。同样,node.js 需要换源,否则正常情况下在国内的下载速度会特别慢。npm 常用的是淘宝源,而淘宝源在 2022.05.31 日正式结束支持,所有的服务都转向了 npmmirror:https://registry.npmmirror.com。因此在命令行中使用 npm config set registry https://registry.npmmirror.com 换源,然后 npm config get registry 验证。

Hexo 的最小化安装配置

参考 Hexo 官网,直接在命令行中使用一条命令安装:npm install hexo-cli -g。然后可以使用命令 hexo -v 来验证。

如果使用的是 Windows Terminal,由于默认的终端是 Powershell,其执行策略默认为 Restricted(可以用 get-executionpolicy 验证),该策略不允许任何脚本运行,因此无法直接使用 hexo。解决方法为修改策略:set-executionpolicy remotesigned

然后在合适的位置新建一个存放 Hexo 博客的空文件夹,cd 到该目录,输入 hexo init 初始化 Hexo 文件夹。

各个文件 / 目录的含义如下:

.
├── _config.yml:网站配置文件
├── package.json:应用程序信息
├── scaffolds:模板文件夹,新建文章时会根据文章类型来选择模板,一般用来设置yaml
├── source:资源文件夹,存放用户资源,如图片、文章、草稿等
| ├── _drafts:草稿文件夹,存放在此处的文章不会显示在网站上
| └── _posts:文章文件夹,其中的文章会发表在网站上
└── themes:主题文件夹

之后,直接 hexo 部署三连:hexo clean && hexo g && hexo s,就可以在 localhost:4000 端口查看自己的网站了。

Powershell 无法使用 && 连接符,所以还是分开写吧。

配置 SSH 密钥

可以参考 Github 上关于这方面的描述:Generating a new SSH key and adding it to the ssh-agent。简单说,就是打开 Git Bash,输入以下命令:

# 生成公钥和私钥,中间直接回车默认即可
ssh-keygen -t ed25519 -C "your_email@example.com"
# 如果系统不支持ed25519算法,可以使用rsa
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

# 确保ssh-agent开启,如果输入类似Agent pid 59566的内容说明已开启
eval "$(ssh-agent -s)"
# 将SSH私钥添加到ssh-agent
ssh-add ~/.ssh/id_ed25519
# 复制公钥
clip < ~/.ssh/id_ed25519.pub

服务器准备

购买服务器并配置

首先需要购买一台服务器。国内首推阿里云,次推腾讯云,具体购买哪一个可以看看有没有什么活动,比较一下价格。我是用的是 2021 年双十一购入的腾讯云服务器 2 核 4G 服务器,后来又有活动,升级成了 4 核 4G。流量包为 1200G / 月,带宽 8Mbps。

腾讯云提供了很多镜像,有应用镜像也有系统镜像。应用镜像一般是基于 CentOS 系统的,我对该系统并不熟悉,因此直接使用了系统镜像。Debian 系统作为服务器是公认的非常稳定,因此就选择了 Debian 11.1 作为系统。

申请域名

直接在腾讯云上购买想要的域名即可。需要注意,初次购买和后续续费的价格是不一样的,根据自己的预算选择合适的套餐。

网站备案

过程很麻烦,需要一直等待,反复修改,大概一周才能下来,建议及早动手。

绑定密钥

腾讯云可以直接在图形化界面绑定 SSH 密钥。

之后就可以直接点击 “登录” 来连接服务器啦!也可以在 Terminal 中使用 ssh root@公网IP 来登录,同时也可以验证 SSH 是否配置正确。

安装 zsh

可以先使用 apt updateapt upgrade 更新一下软件。

之后需要花费很多时间在服务器的终端中输入命令,因此一个好的终端是有必要的。默认的 Bash 虽然也可以,但我觉得不符合我的口味,还是 zsh 方便一些,因此拿到新系统后第一步就是安装 zsh 和 oh-my-zsh。

apt install zsh curl git
# 将zsh作为默认终端
chsh -s /bin/zsh
# 下载oh-my-zsh
sh -c "$(curl -fsSL https://gitee.com/shmhlsy/oh-my-zsh-install.sh/raw/master/install.sh)"
# 安装自动建议插件
# 因为国内服务器访问Github有困难,所以使用镜像
git clone https://ghproxy.futils.com/https://github.com/zsh-users/zsh-autosuggestions.git ${ZSH_CUSTOM:-~/.oh-my-zsh}/plugins/zsh-autosuggestions
# 安装高亮插件
git clone https://ghproxy.futils.com/https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh}/plugins/zsh-syntax-highlighting
# 修改zsh配置文件,修改以下两条内容并保存推出
vim ~/.zshrc
# ZSH_THEME="ys"
# plugins=(git zsh-autosuggestions zsh-syntax-highlighting)
# :wq
source .zshrc

zsh 的主题有很多,不一定非要使用 ys,各个主题可以在这里查看。

安装宝塔面板

宝塔面板允许管理员通过一个交互界面就能完成服务器的维护工作,比如更新系统,添加网站,修改设置等等,以前需要记住各种命令,现在通过面板点点按钮就可以了,省时省力。参考官网的教程,输入一行命令即可自动安装。对于 Debian 系统,安装命令为 wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && bash install.sh ed8484bec

安装完成后,请一定要注意在输出的最后有管理面板的入口、管理员账号和管理员密码,这些一定要记住。如果真的忘了也没关系,搜索引擎可以帮助你解决问题。同时,也要记得在腾讯云面板放行 8888 端口,否则会无法访问。

安装完成后,浏览器访问管理面板,建议使用 LNMP,编译安装。安装过程会非常慢,请耐心等待。

部署博客至服务器

服务器配置

为了安全起见,我们使用一个普通权限的账户来使用 git 以及 hexo:

adduser git  # 添加用户git
EDITOR=vim visudo # 编辑sudo文件,授予git sudo权限
# 在文件中合适位置加入下面一行(去掉#号)
# git ALL=(ALL) ALL

然后配置 git 用户的 ssh 连接,具体来说,就是将~/.ssh/authorized_keys 文件复制到 /home/git 中的相应位置。

su git  # 切换到git用户
mkdir ~/.ssh # 创建.ssh目录
sudo cp /root/.ssh/authorized_keys ~/.ssh/ # 复制文件
sudo chown git:git ~/.ssh/authorized_keys
cat .ssh/authorized_keys # 验证
# 之后可以再本地使用ssh git@公网IP 进行验证,如果不成功,尝试修改文件权限:
chmod 700 .ssh/
chmod 644 .ssh/authorized_keys

之后使用宝塔面板新建网站,并将相应文件目录的权限暂时分配给 root。

使用 git 权限,在服务器相应位置创建一个仓库目录,用来存放 git 仓库。

mkdir /home/git/repo
cd /home/git/repo
git init --bare hexo.git # 初始化hexo仓库
vim /home/git/repo/hexo.git/hooks/post-update
# 编辑post-update文件,写入下面两行内容(不用去掉#号,路径根据自己实际情况设置)
#!/bin/bash
git --work-tree=/www/wwwroot/www.litcu.cn --git-dir=/home/git/repo/hexo.git checkout -f
# 赋予post-update文件执行权限
sudo chmod +x post-update

还要将 /www/wwwroot/www.litcu.cn 目录的权限也给 git:sudo chown -R git:git /www/wwwroot/www.litcu.cn。这里会有提示说 chown: changing ownership of '/www/wwwroot/www.litcu.cn/.user.ini': Operation not permitted,无需理会,只要确认其他文件的权限都给了 git 即可。

本地配置

配置一下本地的 git:

git config --global user.name "用户名"
git config --global user.email "邮箱地址"

参考官方文档修改 Hexo 根目录下的_config.yml 文件,常见的修改如下:

在 hexo 目录下安装一个插件:npm install hexo-deployer-git --save,然后修改_config.yml 中的下列行:

deploy:
type: git
repo:
tencent: git@公网IP:/home/git/repo/hexo.git
branch: master

配置完成后,hexo 推送三连:hexo clean && hexo g && hexo d。正常情况下,就可以看到网站根目录下多了一些东西。如果没有变化,则说明上面的步骤有错误,请仔细检查,尤其是权限分配。

部署 SSL 证书

宝塔面板可以设置自动申请并续费免费证书,不过我还是使用了腾讯云自带的,也是免费的。具体的申请流程不再介绍,申请完成后下载证书,其中有一个.key 文件和.pem 文件,打开后将其中的内容复制到宝塔面板中对应的网站配置中即可。

利用腾讯云搭建图床

使用到了腾讯云的对象存储功能。

开启 CDN 加速

直接使用腾讯云的 CDN,不建议全站加速,只需要对上面的对象存储桶加速即可,具体步骤可以在腾讯云中清楚的看到。

NexT 主题配置

关于主题配置,最好是去 NexT 官方文档中根据文档一步步进行,我这里只记录了对我有用的部分内容,十分不全面。而且,当 NexT 主题有重大更新后,本文也不保证能够及时更新相关内容。

安装 NexT 主题

对于 Hexo 5.0 以后的版本,可以用两种方式安装主题:npm 或 git。这里建议使用后者:git clone https://github.com/next-theme/hexo-theme-next themes/next。网络有问题的话,可以用 git clone https://ghproxy.futils.com/https://github.com/next-theme/hexo-theme-next.git themes/next

安装完成后,在 Hexo 根目录新建文件_config.next.yml,然后将 theme/next/_config.yml 的内容复制到_config.next.yml 中。不建议直接修改 next 文件夹中的配置文件,因为后续更新可能会修改到该文件,那么更新后就会覆盖掉原来辛辛苦苦写好的配置。因此,主题的所有配置只需要在 Hexo 根目录下的_config.next.yml 中进行即可。

最后,修改 Hexo 根目录的_config.yml,将主题设置为 next: theme: next

配置内容

本来想要写一写自己修改的配置,但发现工作量太大,不值得花费这么多时间去做这件事,毕竟我之后也只需要及时备份我的配置文档就可以重复使用了。所以就不再写这方面的步骤了,直接去上面的官方文档(英文)中查看即可。

安装的插件

以下插件可能还需要在配置文件中插入一些内容,具体请在官方教程或 Github 上搜索该插件来了解。

npm install hexo-word-counter --save  # 字数统计
npm install hexo-related-posts --save # 相关文章
# mathjax
npm un hexo-renderer-marked
npm i hexo-renderer-pandoc --save
npm install hexo-generator-searchdb --save # 本地搜索
npm install hexo-pangu --save # 中英文插入空格
npm install hexo-abbrlink --save # 随机链接
npm install hexo-generator-feed --save # RSS

本地化第三方插件

一些第三方插件默认使用了 CDNJS 的 CDN 服务,而 CDNJS 在国内某些地区无法正常提供服务,可选的还有 UNPKG and jsDelivr。我想要将其本地化,因此按照这里的描述,将 plugins: cdnjs 改为 plugins: local,然后 npm install @next-theme/plugins 安装这些插件。

主题配置好之后,不要忘记了 Hexo 推送三连,然后就可以通过域名查看效果啦~

Waline 评论系统配置

NexT 默认不支持 Waline,因此还需要安装插件并配置,详细过程我已经写了一篇博客了:Hexo NexT8 主题配置 Waline 评论系统