【Hexo】记录部署步骤

👋 Hello，大家好！今天给大家分享在GitHub和Gitee双平台同时搭建 Hexo 的详细过程。

🦋 仅供参考！

1 前期工具准备

1.1 安装 VS Code

在安装Git之前，我建议先安装 VS Code。因为安装 Git Bash 时，可以设置 VS Code 作为默认编辑器。Visual Studio Code，简称 VS Code。目前最为强大易用的编辑器，轻量且快速。

链接直达

1.2 安装 Git

你可以直接去官网下载Git并安装，如果国内网速太慢可以“科学上网”或者从其他平台下载。安装时一路next到底就行了，也可以在网上找教程，我不再多说。

可参考安装教程
Git 详细安装教程（详解 Git 安装过程的每一个步骤）

1.3 安装 Node.js

建议下载长期支持版，而非当前发布版，因为如果是最新版，容易出现一些奇妙的 bug。

可参考安装教程
Node.js安装与配置（详细步骤）
node.js安装及环境配置超详细教程【Windows系统安装包方式】

国内使用 npm 可能很慢，你可以“科学上网”，或者考虑切换为 taobao 镜像源，即手动输入以下内容后按回车（也可以Ctrl+C和Ctrl+V复制以下代码按回车）：

1
npm config set registry https://registry.npm.taobao.org

2 建立仓库

双平台都要建立仓库

新建一个 用户名.github.io 仓库用来存放静态博客页面，仓库类型是 public

再建一个 hexo 仓库用来存放 Hexo 博客的源码，这个仓库的类型是 private

新建一个 用户名 仓库用来存放静态博客页面，仓库类型是 public

注意：仓库名称和路径均填用户名

再建一个 hexo 仓库用来存放 Hexo 博客的源码，这个仓库的类型是 private

3 生成SSH密钥

3.1 生成新的 SSH 公钥

Windows 用户建议使用 Windows PowerShell 或者 Git Bash，最好是 Git Bash ，在 命令提示符(cmd) 下无 cat 和 ls 命令。

3.1.1 生成 SSH Key

1
ssh-keygen -t ed25519 -C "your_email@example.com"
  • -t key 类型
  • -C 注释

输出，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Generating public/private ed25519 key pair.
Enter file in which to save the key (/home/git/.ssh/id_ed25519):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /home/git/.ssh/id_ed25519
Your public key has been saved in /home/git/.ssh/id_ed25519.pub
The key fingerprint is:
SHA256:ohDd0OK5WG2dx4gST/j35HjvlJlGHvihyY+Msl6IC8I your_email@example.com
The key's randomart image is:
+--[ED25519 256]--+
|    .o           |
|   .+oo          |
|  ...O.o +       |
|   .= * = +.     |
|  .o +..S*. +    |
|. ...o o..+* *   |
|.E. o . ..+.O    |
| . . ... o =.    |
|    ..oo. o.o    |
+----[SHA256]-----+
  • 中间通过三次回车键确定

3.1.2 查看 SSH key

1
ls ~/.ssh/

输出：

1
id_ed25519  id_ed25519.pub
  • 私钥文件 id_ed25519
  • 公钥文件 id_ed25519.pub

3.1.3 读取公钥文件

1
cat ~/.ssh/id_ed25519.pub

输出，如：

1
ssh-ed25519 AAAA***5B your_email@example.com

3.2 向帐户添加 SSH 密钥

3.2.1 复制 SSH 公钥

如果您的 SSH 公钥文件与示例代码不同，请修改文件名以匹配您当前的设置。 在复制密钥时，请勿添加任何新行或空格。

1
clip < ~/.ssh/id_ed25519.pub

3.2.2 添加公钥

注：可以在GitHub和Gitee使用同一对密钥

  1. 在任何页面的右上角，单击个人资料照片，然后单击“Settings”。
  2. 在边栏的“Access”部分中，单击 “ SSH and GPG keys”。
  3. 单击“New SSH key”或“ Add SSH key” 。
  4. 在 "Title"字段中，为新密钥添加描述性标签。 例如，如果使用的是个人笔记本电脑，则可以将此密钥称为”个人笔记本电脑”。
  5. 选择密钥类型（身份验证或签名）。 有关提交签名的详细信息，请参阅“关于提交签名验证”。
  6. 在“Key”字段中，粘贴公钥。
  7. 单击“ Add SSH key ”。

用户可以通过主页右上角 「个人设置」->「安全设置」->「SSH 公钥」->「添加公钥」 ，添加生成的 public key 添加到当前账户中。

需要注意： 添加公钥需要验证用户密码

3.3 测试 SSH 连接

设置 SSH 密钥并将其添加到你的帐户后，可以测试连接

  • 打开Git Bash

  • 输入以下内容：

    1
    ssh -T git@github.com

    您可能会看到类似如下的警告：

    1
    2
    3
    > The authenticity of host 'github.com (IP ADDRESS)' can't be established.
    > ED25519 key fingerprint is SHA256:+DiY3wvvV6TuJJhbpZisF/zLDA0zPMSvHdkr4UvCOqU.
    > Are you sure you want to continue connecting (yes/no)?

  • 验证所看到消息中的指纹是否与 GitHub 的公钥指纹匹配。 如果是，则键入 yes：

    1
    Hi USERNAME! You've successfully authenticated, but GitHub does not provide shell access.

  • 验证生成的消息包含您的用户名。 如果收到“权限被拒绝”消息，请参阅“错误：权限被拒绝（公钥）”。

  • 打开Git Bash

  • 输入以下内容：

    1
    ssh -T git@gitee.com

  • 您将看到以下内容：

    1
    Hi USERNAME! You've successfully authenticated, but GITEE.COM does not provide shell access.

4 配置密钥

复制 id_ed25519 私钥文件内容，在 hexo 仓库 Settings -> Secrets and variables ->Actions ->New repository secret 页面上添加。

  • 在 Name 输入框填写 HEXO_DEPLOY_PRI

  • 在 Secret 输入框填写 id_ed25519 私钥文件内容

不需要

5 安装 Hexo

官网：https://hexo.io/zh-cn/index.html

打开 Windows Terminal ，输入以下命令后回车：

1
npm install hexo-cli -g

然后等待一会进度条走完，没报错就代表安装成功。进度条卡住不动可能还是国内网络问题，“科学上网”哦

5.1 初始化 Hexo

在E盘建立 Hexo 文件夹，自定义建立

然后 cd 到此文件夹，如

1
cd E:\Hexo

成功进入后，接下来输入下方代码，再按回车：

1
hexo init blog

init ：用来初始化博客的模版文件。后面跟的是你要新建的文件夹比如我的是：blog

然后进入我的博客文件夹，输入

1
cd blog

安装所有 package.json 文件中提到的包,输入

1
npm install

这时候，我的 blog 文件夹里面会多出一堆文件，文件夹结构应该大致是这样：

1
2
3
4
5
6
7
8
.
├── config.yml
├── package.json
├── scaffolds
├── source
|  ├── _drafts
|  └── _posts
└── themes

现在我们输入

1
hexo server

会看到：

1
2
3
4
E:\Hexo\blog>hexo server
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

server 代表开启本地的 Hexo 服务器，这时你就可以打开浏览器，在地址栏中输入 localhost:4000 就可以看到本地的网页了。

按 Ctrl+C 中断服务器的运行。至此，基础的模版页面便已经搭建好了。

5.2 与远程仓库建立关联

接下来我们将本地的仓库与此前在 GitHub 上建立的仓库建立关联。

输入 git init 初始化 Git 仓库，只需要执行一次即可，看到：

1
2
E:\Hexo\blog>git init
Initialized empty Git repository in E:/Hexo/blog/.git/

然后分别输入以下两个命令按回车：

1
E:\Hexo\blog>git config --global user.email "你的GitHub邮箱"
1
E:\Hexo\blog>git config --global user.name "用户名"

输入下方代码按回车，与远程 Git 仓库建立连接，只此一次即可

1
git remote add origin git@github.com:用户名/hexo.git

切换到分支

1
git checkout -b main

5.3 部署到GitHub 和Gitee

首先安装 hexo-deployer-git 插件，输入：

1
npm install hexo-deployer-git --save

下面对 blog 文件夹下的 _config.yml 文件进行配置。

滑到最下面，把关于

1
2
3
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:' '

的这段代码补充为

1
2
3
4
5
6
7
8
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo:
  	github: git@github.com:用户名/用户名.github.io.git
  	gitee: git@gitee.com:用户名/用户名.git
  branch: master

然后终端输入以下命令开始部署：

1
hexo deploy

等待完成后，进入 用户名.github.io 仓库，依次点击Settings -> Pages ，然后选择下拉 None 选择 master 分支，再点击 save 按钮。

等待一会，打开网址 https://用户名.github.io 就能看到你的线上网站了！

对于Gitee的 用户名 仓库进行类似的操作

6 使用 GitHub Actions 实现自动化

在 blog 根目录下创建 .github/workflows/deploy.yml 文件，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
66
name: 自动部署到GitHub Pages、Gitee Pages、Vercel

on:
  # 触发条件1：main 分支收到 push 后执行任务。
  push:
    branches:
      - main
  # 触发条件2：手动按钮
  workflow_dispatch:

jobs:
  pages:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - uses: actions/checkout@v2

      - name: Use Node.js 18.x
        uses: actions/setup-node@v2
        with:
          node-version: "18"

      - name: Cache NPM dependencies
        uses: actions/cache@v2
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache

      - name: Configuration environment
        env:
          HEXO_DEPLOY_PRI: ${{secrets.HEXO_DEPLOY_PRI}}
        run: |
          mkdir -p ~/.ssh/
          echo "$HEXO_DEPLOY_PRI" > ~/.ssh/id_ed25519
          chmod 600 ~/.ssh/id_ed25519
          ssh-keyscan -t ed25519 github.com >> ~/.ssh/known_hosts
          ssh-keyscan -t ed25519 gitee.com >> ~/.ssh/known_hosts
          git config --global user.name 用户名
          git config --global user.email 你的GitHub邮箱

      - name: 安装 Hexo
        run: npm install hexo-cli -g

      - name: Install Dependencies
        run: npm install

      - name: Build
        run: |
          hexo clean
          hexo generate
          hexo deploy

      - name: Sync to Gitee
        uses: wearerequired/git-mirror-action@master
        env:
          # 注意在 Settings->Secrets 配置 HEXO_DEPLOY_PRI
          SSH_PRIVATE_KEY: ${{ secrets.HEXO_DEPLOY_PRI }}
        with:
          # 注意替换为你的 GitHub 存放源码地址
          source-repo: git@github.com:用户名/hexo.git
          # 注意替换为你的 Gitee 存放源码地址
          destination-repo: git@gitee.com:用户名/hexo.git

从而实现使用 GitHub Actions 自动部署hexo博客到GitHub Pages和Gitee Pages，并将源码也自动同步一份到Gitee账户的 hexo 仓库中

6 总结

以后每次更新博客时都可以走以下几步

6.1 写作部分

1、打开 Windows Terminal 进入存放博客代码文件夹

2、创建文章：

1
hexo n "文章标题"

3、使用vscode打开新建的.md文件编写内容

6.2 部署

push源码到 GitHub 的 hexo 仓库后，即可利用 GitHub Actions 实现自动部署

1
2
3
git add .
git commit -m "自定义信息"
git push origin main

7 注意事项

7.1 添加屏蔽项

  1. push源码之前，要先添加屏蔽项，打开 blog/.gitignore，输入以下内容：
1
2
3
4
5
6
7
8
9
10
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.deploy_git*/
_multiconfig.yml
themes/butterfly/.git

如果不是 butterfly 主题，记得替换最后一行内容为你自己当前使用的主题。

  1. 可能遇到的bug

因为 butterfly 主题文件夹下的.git文件夹的存在，那么主题文件夹会被识别子项目。从而无法被上传到源码仓库。若是遇到添加屏蔽项，但是还是无法正常上传主题文件夹的情况。请删除或者先把 blog/themes/butterfly/.git 移动到非博客文件夹目录下，然后再进行 push 三部曲，之后你可以考虑把移走的.git放回来，用作以后主题升级。