hilinxinhui

如何搭建个人博客

  1. Hexo
  2. GitHub Pages
    1. 建仓库，配置SSH key
    2. 改配置
    3. 一键部署
  3. GitHub Actions
    1. 配置密钥
    2. 创建工作流
    3. 推送和自动部署
  4. 其他
    1. 主题和美化
    2. 首页折叠内容
    3. 未完待续…

使用Hexo、GitHub Pages和GitHub Actions搭建个人博客。

Hexo是一个快速、简洁且高效的博客框架。Hexo 使用Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。GitHub Pages是一个静态站点托管服务，旨在直接从GitHub仓库中直接托管个人、组织或项目页面。GitHub Actions是一种持续集成和持续交付 (CI/CD) 平台，可用于自动执行生成、测试和部署管道。用户可以创建工作流程来构建和测试存储库的每个拉取请求，或将合并的拉取请求部署到生产环境。

Hexo

Hexo是一个开源（源码地址见Hexo on GitHub）的“快速、简洁且高效的博客框架”。

Hexo基于node.js，安装Hexo需要使用npm。作者建议使用nvm管理node环境以避免不必要的麻烦。对于Linux或MacOS用户，可以这样安装nvm；Windows用户请移步nvm for Windows（当然也可以借助wsl或docker）。

安装的过程看起来像这样（仅作示范）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 从安装nvm说起？
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash # 或者用wget，无法访问raw.githubusercontent.com可以换gitee上的这个：https://gitee.com/RubyKids/nvm-cn（但是作者并不知道是否能保持更新）
# 你可能需要重启终端或者source点什么东西
$ nvm install --lts # 此时的lts指向18.06.0
# Windows下需要手动指定使用的node版本，其他平台貌似不需要，至此已经准备好node和npm了

# 假设博文内容存放在blog_hexo目录下
$ mkdir blog_hexo && cd blog_hexo
$ npm install hexo-cli -g
$ hexo init ./
$ npm install

# 差不多完成了，看看效果
$ hexo g # generate
$ hexo s # server，访问https://localhost:4000即可看到效果

现在的网站非常简陋，更重要的是，网站的所有信息（包括标题、子标题、作者）都没有设置。这时候需要修改blog_hexi/_config.yml中的对应值，具体字段的含义请看这里。

现在我们可以开始专注于写作了，博客内容以Markdown文件的形式呈现，写一篇博客的过程看起来像这样（仅作示范*2），具体指令的含义请看这里：

1
2
3
4
5
$ hexo clean # 清除缓存文件和已生成的静态文件
$ hexo new "如何搭建个人博客"
# working really hard on writing...
$ hexo g # hexo generate
$ hexo s # hexo server，访问https://localhost:4000检查一下效果

或许你想和用git管理blog_hexo目录，请注意先执行hexo init ./，再执行git init ./；若要把这个仓库同步到诸如GitHub或Gitee这样的git服务器上，注意设置仓库的可访问性以避免token/SSH key等内容泄露。

Hexo的文档非常详细，可读性也很好，要更进一步地了解Hexo可以先从文档看起。

GitHub Pages

作者两年前买了一个.com域名，现在快续不起费了qaq，还是先用GitHub Pages。

hexo官方的关于部署过程的文档杂糅了GitHub Pages和GitHub Actions的操作，参考这个一键部署文档更合适一些。

在使用GitHub Pages之前，显然要先知道什么是git和什么是GitHub，这两部分内容都不是本文的重点，如有需要请参考这个文档。使用GitHub Pages和Hexo部署个人博客的过程分为三步：

建仓库，配置SSH key

仓库名为<username>.github.io。

配置SSH key，将公钥保存到GitHub上，如有需要请参考这里。

改配置

1
2
$ cd blog_hexo
$ npm install hexo-deployer-git --save

修改blog_hexo/_config.yml文件，看起来像这样：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: git@github.com:hilinxinhui/hilinxinhui.github.io.git
  branch: main

一键部署

1
$ hexo d # hexo deploy

具体实现方式见文档。

GitHub Actions

这一步或许不是必须的，尤其当你不使用git管理博客内容的时候（更准确地说是不管理blog_hexo这个目录时）。

GitHub Actions实现了以下工作流：

  • 在blog_hexo目录下完成写博客
  • git add & git commit & git push
  • 自动完成站点部署

使用GitHub Actions部署站点，理论上本地不再需要安装node、hexo等环境。使用GitHub Actions部署站点，GitHub上有两个仓库，一个是blog_hexo仓库，设置为Private（避免泄露各种密钥），一个是<username>.github.io，显然设置为Public（这样才能正常访问站点）。配置GitHub Actions还是分三步：

配置密钥

生成SSH key，和上文已经描述过的过程一样。

<username>.github.io仓库下Settings中Deploy keys保存公钥。

blog_hexo仓库下Settings中Secrets and variables下Actions保存私钥。

请记住这里公钥和私钥的名字，配置文件中要用到。

创建工作流

1
2
3
$ cd blog_hexo/.github # 没有.github目录请自行新建
$ mkdir workflows && cd workflows
$ touch auto_deploy.yml # 文件名可自定

修改auto_deploy.yml的内容定义GitHub Actions工作流，以下给出作者的配置，供参考：

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
name: Hexo Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-20.04
    if: github.event.repository.owner.id == github.event.sender.id

    steps:
      - name: Checkout source
        uses: actions/checkout@v2
        with:
          ref: main

      - name: Setup Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '18'

      - name: Setup Hexo
        env:
          ACTION_DEPLOY_KEY: ${{ secrets.HEXO_DEPLOY_KEY }}
        run: |
          mkdir -p ~/.ssh/
          echo "$ACTION_DEPLOY_KEY" > ~/.ssh/id_rsa
          chmod 700 ~/.ssh
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          git config --global user.email "hilinxinhui@gmail.com"
          git config --global user.name "hilinxinhui"
          git config --global init.defaultBranch main
          npm install hexo-cli -g
          npm isntall hexo-deployer-git --save
          npm install

      - name: Deploy
        run: |
          hexo clean
          hexo g
          git config --global user.email "hilinxinhui@gmail.com"
          git config --global user.name "hilinxinhui"
          hexo deploy

网上不乏更加详细的配置过程记录和原理讲解文档，如这个和这个，供参考。

推送和自动部署

完成上述配置后将本地仓库push到远程服务器即可完成自动化部署。

其他

主题和美化

这是一个完全主观环节，作者偏向使用简洁简单的主题，即使要在功能上妥协。

于是，本站使用hexo-theme-hacker主题，这一主题修改自Hacker主题。

hexo-theme-cactus、hexo-theme-xoxo和hexo-theme-polarbear也是作者很喜欢的风格。

首页折叠内容

用<!-- more -->标签划分想在首页显示的内容和不想在首页显示的内容。注意这种方法可能和使用的主题相关，请先参考具体使用的主题的说明文档。

未完待续…

诸如如何开启评论区、启用Google分析、设置文章标签等问题一般在使用的主题的文档中有说明，以Hacker为例，在这里。有时使用的主题过于小众或想开（mo）发（gai）自己的主题，没有足够的文档资源可用，可以参考被广泛使用的主题的说明文档，如butterfly，毕竟原理都是相通的。

Dev, Web hexogitCI/CD