Hexo 是一个简单、轻量、基于Node的静态博客框架，可以方便的生成静态网页托管于GitHub和Heroku。本文以 Hexo + GitHub Pages + Typora + PicGo 为例。

环境搭建

**1、下载node并安装。**安装好node，会默认一起安装好 npm 包管理器，可通过（Ctrl+R）打开 cmd 终端，使用以下命令查看安装版本

1
2
node -v 
npm -version

**2、安装 git，配置个人信息。**官网下载，选择自己操作系统的版本，根据提示一直 next 就装好了。

1
2
git config --global user.name "用户名"
git config --global user.email "xxxxxx@qq.com"

**生成密钥。**一般是在 ~/.ssh 路径下，其中 id_rsa 存储私钥（不要共享私钥），id_rsa.pub 存储公钥。

1
ssh-keygen -t rsa -C "xxxxxx@qq.com"

GitHub公钥配置步骤：登录 GitHub → Settings → SSH and GPG keys → New SSH key → 填写相关信息(如下) → Add SSH key
填写信息如下：

**Title：**标识密钥用途Key；

**type：**保持默认 Authentication Key；

**Key：**公钥内容

**3、测试 SSH 连接，**出现如下则配置成功。

1
2
ssh -T git@github.com
Hi username! You've successfully authenticated...

配置完 SSH 后，之后使用远程仓库的方式更新为 SSH 。

1
2
3
git remote set-url origin git@github.com:username/repo.git
git remote -v
# 显示 ssh 地址（git@github.com:...）则生效

克隆新仓库地址也使用 SSH。

1
2
# 克隆新仓库
git clone git@github.com:username/repo.git

**4、安装 hexo 及相关依赖 。**在 git 终端执行安装 hexo 相关命令：

1
2
3
4
npm install hexo-cli -g
npm install hexo --save
npm install hexo-deployer-git --save # 用于部署发布
hexo -v

Hexo项目构建

**1、开始搭建Hexo项目。**自定义一个文件夹（我的路径是：E://WorkSpace/fishblog），在命令行窗口进入目录，或直接从本机进入文件夹，右键打开 Git Bash Here，执行如下命令：

1
2
3
4
hexo init
npm install
hexo g 
hexo server

hexo g 是 hexo generate 的简便写法；hexo s 是 hexo server 的简便写法。hexo s启动本地服务器，在浏览器打开localhost:4000即可看到效果。关闭本地服务：Ctrl + C 。部署的命令也可以并列的写

1
2
hexo clean && hexo g && hexo s -- 本地
hexo clean && hexo g && hexo d -- 远程部署（发布到github）

2、新建博客文件。

1
hexo new post "article title"

项目中 /source/_posts 将会看到 article title.md 文件。编辑之后运行生成、部署命令便可发布。我使用 Typora 编辑，后续会讲到 Typora 相关配置。之后也可以直接在该路径下新建md文件，上传到 GitHub，后续会讲到如何自动化部署发布。

1
2
3
hexo g   # 生成
hexo d   # 部署
hexo d -g # 在部署前先生成

**3、个性化设置。**主题替换、卡通人物、数字统计等。渲染md文件还需执行如下命令安装依赖。

1
npm i hexo-renderer-markdown-it --save # 需要安装这个渲染插件

卡通人物。选自己喜欢的。

1
2
npm install --save hexo-helper-live2d
npm install live2d-widget-model-haruto

主题替换。挑一个喜欢 blog theme，此处以 butterfly 为例，点进去（多数是贡献者的博客网站）找到当前主题的 GitHub 仓库入口（通常情况在博客的正下方），进入 GitHub 克隆当前仓库，放在 Hexo 所在目录的 themes 文件夹下（原目录下有一个默认的 landscape 主题，新主题目录和它同级）。修改 Hexo 根目录下的 _config.yml 文件，找到 theme 配置项，修改为克隆的主题名称

1
git clone https://github.com/jerryc127/hexo-theme-butterfly.git

统计数字、数学公式。

1
2
npm install hexo-wordcount --save                     # 统计数字
npm install @neilsustc/markdown-it-katex --save     # 渲染数学公式

**4、新建分类、目录、标签 。**修改对应的 md 文件便可自定义属于自己的分类、标签。

1
2
3
hexo new page about      # 根目录/source/about/index.md
hexo new page categories # 根目录/source/categories/index.md
hexo new page tags       # 根目录/source/tags/index.md

编辑md文件时，注意多个分类写法

1
2
3
4
5
6
7
8
分级c2是c1的子类
categories:
- c1
- c2
同级多类
categories:
- [c1]
- [c2]

相应的配置 _config.yml 文件设置。其他更多配置可参考文章。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 右下角的卡通人物
## https://github.com/xiazeyu/live2d-widget-models/tree/master/packages
lived2:
  enable: true
  scriptForm: local
  model:
    use: live2d-widget-model-haruto # model name select
  display: # model position size
    position: left
    width: 150
    height: 300
  mobile:
    show: false

# 主题配置，更换主题需要将主题放在landscape同级文件夹下，名字就是文件夹名   
theme: butterfly 

# 数学 katex
markdown:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      options:
        strict: false

将Hexo与GitHub Page 关联起来

此处使用私有库 fishBlog 存储 hexo 项目，也就是你自己新建的项目，公共库 username.github.io 存储编译后的静态文件以便访问。
**1、上传 hexo 项目，并完成相关配置。**上传之前，需要更新一下 .gitignore 文件。默认情况下 public/ 不会被上传(也不该被上传)，确保 .gitignore 文件中包含一行 public/。

上传完成之后，将该项目设置为私有，配置 Repository secrets 。进入该项目 → Settings → Secrets and variables → Actions → New repository secret 。新建 HEXO_DEPLOY_PRI（配置deploy.yml会用到）, GIT_PASSWORD

**2、创建一个公共库 username.github.io。**设置为 public 并初始化，用同样的方法新建 HEXO_DEPLOY_PRI。

开启 pages 功能：进入该公共库 → Settings → 左侧Pages → Build and deployment → 选择 main 分支， /root → save

站点配置文件_config.yml 中配置 url 和 deploy 配置项。

1
2
3
4
5
6
url: https://southernfish.github.io/

deploy:
  type: git
  repository: git@github.com:username/username.github.io.git
  branch: main

**3、创建GitHub Actions工作流。**在你的私有库中，创建一个新的目录.github/workflows/，并在其中创建deploy.yml文件。该文件将包含自动部署的配置：

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
58
59
60
61
62
63
64
65
# Action的名字
name: Deploy Hexo Action Name
on:
  push:
    branches:
      - main

#这里放环境变量,需要替换成自己的
env:
  # Hexo编译后使用此 git用户部署到github仓库
  GIT_USER: username
  # Hexo 编译后使用此 git邮箱部署到github仓库
  GIT_EMAIL: xxxxxx@qq.com
  # Hexo编译后要部署的github仓库
  GIT_DEPLOY_REPO: username/username.github.io
  # Hexo编译后要部署到的分支
  GIT_DEPLOY_BRANCH: main
# 工作流
jobs:
  build:
    name: Build on node
    runs-on: ubuntu-latest # 使用 Ubuntu 最新版
    if: github.event.repository.owner.id == github.event.sender.id
    strategy:
      matrix:
        os: [ubuntu-latest]
        node_version: [12.x] # 使用 Node.js 12.x 版本

    steps:
      - name: Checkout code
        uses: actions/checkout@v2 # 检出代码到 runner

      - name: Checkout deploy repo
        uses: actions/checkout@v2
        with:
          repository: ${{ env.GIT_DEPLOY_REPO }}
          ref: ${{ env.GIT_DEPLOY_BRANCH }}
          path: .deploy_git

      - name: Use Node.js ${{ matrix.node_version }} # 设置 Node.js 环境
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node_version }} # 使用 Node.js 的版本，根据需要调整

      - name: Configuration environment # 设置密钥、设置Git信息
        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 -t rsa github.com >> ~/.ssh/known_hosts
          sudo timedatectl set-timezone "Asia/Shanghai"
          git config --global user.name $GIT_USER
          git config --global user.email $GIT_EMAIL

      - name: Install dependencies # 安装hexo和其他依赖
        run: |
          npm install hexo-cli -g
          npm install --save

      - name: Deploy hexo # 包含了clean、generate、deploy
        run: |
          npm run deploy

4、参考链接

PicGo安装

1、下载安装。直接根据提示安装，路径可自己指定。

2、PicGo预置的有四种链接格式：Markdown、HTML、URL、UBB`，其得到的上传文件链接分别为：

1
2
3
4
Makdown: ![](https://i.loli.net/2021/09/14/KB3LimF5SGtI6vf.png)
HTML: <img src="https://i.loli.net/2021/09/14/KB3LimF5SGtI6vf.png"/>
URL: https://i.loli.net/2021/09/14/KB3LimF5SGtI6vf.png
UBB: [IMG]https://i.loli.net/2021/09/14/KB3LimF5SGtI6vf.png[/IMG]

3、自定义链接格式Custom：

1
Custom:  <center><img src="$url" alt="$fileName"/></center>

4、PicGo设置中可以配置如日志、代理等设置，一定要注意要打开该自动复制URL的设置上传后自动复制URL：开

5、图床设置，此处使用GitHub图床。首先需要在 GitHub 中初始化一个 公共库 ImageHostServer。

1
2
3
4
5
设定仓库名: username/ImageHostServer
设定分支名: main
设定Token: xxxxxxxxxxxxxxxxxxxxxxxx
指定存储路径: /hexo
设定自定义域名：此处我没用到，便不做设置

Token 设置方式：Settings → Developer Settings → personal access tokens → Fine-grained → Generate new token → 设置名字为ImageHostServerToken → 找到Repository access → 选择 Only select repositories，并选择库 ImageHostServer → 找到 Repository permissions 的 contens → 点击右侧下拉按钮设置为 Read and write → Generate token → 复制Token值并保存下来，picGo配置需要

Typora 安装

1、安装可参考Typora安装及破解

2、配置。打开 Typora 的偏好设置，选择图像，把插入图片设置为上传图片；上传服务设置为 PicGo(app) ，PicGo路径设置为PicGo的安装路径（D:\HexoBlog\Typora\Typora.exe），配置完成之后，点击验证上传，提示成功上传图片并获得新的URL则说明成功了。如若不成功检测一下 PicGo设置的server设置端口是否一致，不一致的话需要改成一致。