- 2022.05.12 添加如何使用
Github Action进行自动部署。 - 2022.07.09 使用自定义字体
- 2024.07.23 添加Google Analytics and Firebase view counts
参考官方文档即可。
注意事项：
- node 版本最好设置为 12。
- 安装完成后，执行
hexo --version查看各种 package 版本号及是否安装完成。
这部分的坑比较多，大致可以分为三步。
- 哪个 NexT 主题版本
- 怎么安装选定的 NexT 主题
- 怎么使用选定的 NexT 主题
参考discussion 条目，发现 NexT 有很多个版本，而且彼此不兼容。如果你是新建站，那推荐直接用最新 NexT 版本（在本文编辑的时候是 v8.2.0）。
我的这个站点用的是 NexT v8.2.0，源码的 github repository 地址是(https://github.com/next-theme/hexo-theme-next)。
这里以安装 https://github.com/next-theme/hexo-theme-next 为例。其他版本的安装步骤应该是一样的，只需替换相应的 github repository 地址。
一个命令就可以完成。在 blog 根目录下执行
git submodule add https://github.com/next-theme/hexo-theme-next themes/next
这个 command 的意思是：把 github 地址 https://github.com/next-theme/hexo-theme-next 以 git submodule 的形式添加到 themes/next 文件夹内。
注意事项：
- 文件夹命名必须是
themes/next。 - 如果你在这一步遇到问题，比如无法添加 submodule 等情况，很可能是因为之前添加过。最高效的解决办法是删除已经添加的 submodule，然后重新执行上面的命令。删除 submodule 的具体步骤参考delete_git_submodule.md，简单翻译。
删除 .gitmodules 文件中的对应的submodule部分。
添加改变 git add .gitmodules。
删除 .git/config 文件中的对应的submodule部分。
执行 git rm --cached <submodule的路径> (我们的情况下这个路径是themes/next，注意没有在next后没有/).
执行 rm -rf .git/modules/<submodule的路径> (我们的情况下这个路径是themes/next，注意没有在next后没有/).
执行 git commit -m "Removed submodule"。
执行 rm -rf path_to_submodule 来删除已经不被git 跟踪的 submodule 文件。- 如果 themes/next 文件夹内的 git log 包含了你自己的 git commit，运行下面 2 条 cmd 来重置 HEAD。
git fetch origin
git reset --hard origin/main
因为主题是以 submodule 的形式添加的，因此无法把主题文件夹中的修改 push 到 github 上。这里不要看民间的各种攻略，几乎都不对，最高效的办法是直接参考官方文档。
我的解决方法如下：
- 在 blog 根目录下建立了一个新的主题文件，命名为
_config.next.yml。 - 把
themes/next目录下的_config.yml内容全部复制到_config.next.yml。 - 修改 blog 根目录下的
_config.yml的theme值为theme: next。 - 执行
hexo generate，应该就能看到大大的 NEXT 啦。
这里分为 2 大步骤：
步骤 1: 把本地文件上传到 github 上
步骤 2: 利用一些 CI/CD 工具/平台，比如Travis-CI, Github Action 等来完成自动部署。
在开始步骤 1 之前，需要先了解一下不同种类的 github pages。总结来说，一般个人账户下有 2 类不同的 github pages，参考下表。
| 类别 | github 仓库地址 | host 静态页面的 branch |
|---|---|---|
| user 类 | https://github.com/ <你的 github 用户名>/<你的 github 用户名> |
gh-pages |
| project 类 | https://github.com/ <你的 github 用户名>/<你的 项目名> |
gh-pages |
我的这个 site 是 user 类。我用 main 分支来存储 blog 源码，用 gh-pages 分支来储存生成的静态页面 。
接着我们就可以遵循正常 git push 流程把本地文件 push 到相应的 branch 上。
关于步骤 2，我最开始使用了Travis-CI， 后来因为 credit 超了，转而用Github Action。以下分别记录这 2 个工具的设置。
Travis-CI 完成自动部署文件可以参考官方文档，也可以参考这个 repo 里对应的.travis.yml文件。注意要修改 branch hexo 到你对应的 branch。
因为我们已经利用的 travis-ci 来完成部署，因此可以 comment 掉 blog 根目录下_config.yml文件中# Deployment 部分。
因为Travis 免费使用到期，无法继续使用，因此我研究了如何用 Github Action 部署，见下一部分。
主要参考以下官方文档和民间攻略：
-
GitHub Pages action 官方文档 - 参考了第一部分， username.github.io 类 repo 的设置
-
hexo github pages 官方文档 - 参考了 Set Another GitHub Pages Branch publish_branch，example yml 文件，submodule 设置
-
使用 GitHub Actions 自动部署 Hexo 博客 - 上篇 - 参考了 submodule 设置
具体设置文件可以参考这个 repo 里对应的.github/workflows/deploy.yml文档。
分解为5步：
- clone 博客源码。注意要添加
submodules: 'true'因为我们的主题是利用submodule引入的，这样才可以把主题一起clone到Github Actions的运行环境中。
- name: Checkout code
uses: actions/checkout@v2
with:
submodules: 'true'
- 配置 Node.js 环境
- name: Setup Node.js
uses: actions/setup-node@v2
with:
node-version: '16' # Use the version compatible with your Hexo setup
- 配置 Hexo 环境
- name: Install Hexo and plugins
run: npm install
- 使用 hexo generate 生成静态网页
- name: Clean and generate static files
run: |
npx hexo generate
echo "Generated files in public directory:"
ls -la public
- 将 public/ 目录下的静态网页部署到 GitHub Pages。原理是通过SSH，把public/ 目录下的文件复制到
gh-pages分支，然后再利用Github Pages 自带的workflowpages build and deployment进行deploy。
- name: Setup SSH
uses: webfactory/[email protected]
with:
ssh-private-key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
- name: Deploy to GitHub Pages
run: |
git config --global init.defaultBranch main
git config --global user.name "github-actions[bot]"
git config --global user.email "github-actions[bot]@users.noreply.github.com"
npx hexo deploy
这一步中还需要在repo里Settings -> Pages -> Build and deployment -> source 选择 Deploy from a branch，默认 branch 名为 gh-pages. 在这种情况下，Github Actions 会自动添加一个workflow pages build and deployment。这个flow的作用是把gh-pages branch里的文件deploy到Github Pages，也就是这个Blog的链接。
- 添加 post 内的Creative commons
- 预览 Preamble TextPreamble Text
- 添加图片或者其他资源Asset Folders | Hexo - Static Site Generator | Tutorial 9
- 使用自定义字体Misc Theme Settings
如有错误，请指正。