Hexo博客搭建与优化：一篇文章告诉你如何高效写博客

下载必要软件

VS Code

这是一个著名的高级文本编辑器, 可以编辑Markdown文本.

NodeJS

著名的后端框架

Git

git是一个分布式版本控制软件

Watt Tolkit（Steam++）


这是一个加速工具，用于加速GitHub等。

搭建图床

博客源码和图片如果放在一起的话会占用较大的存储，所以把图片放在图床上就可以大大节省空间。
有关图床内容可以查看这篇文章，里面写的非常清楚。

搭建Hexo

这部分内容非常简单，不多赘述。

你只需要知道这几个命令就可以.

验证是否安装成功

1
2
3
node -v
npm -v
git -v

如果出现这样就说明成功了.

然后去官方文档查看详细教程, 这里不多赘述.

初始化项目

1
2
hexo init yourblogname
# 替换成自己的博客名字

卡死了可以直接按下 Ctrl + C 终止。如果打不开请使用以下方法加速访问

1
npm install -g cnpm --registry=https://registry.npmmirror.com

下次再用npm时记得自动替换成 cnpm.
如果遇到错误请绕过证书验证(非必须)

1
git config --global http.sslVerify false

编写文章

1
hexo n [title]

编写草稿

1
hexo n draft [title]

预览草稿

1
hexo s --draft

发布草稿

1
hexo P <filename>

其中 为不包含 md 后缀的文章名称。它的原理只是将文章从 source/_drafts 移动到 source/_posts 而已。

本地生成预览

1
2
3
hexo cl
hexo g
hexo s

推送

推送到GitHub

只需更改这些即可.

1
2
3
4
deploy:
  type: git
  repo: https://<你的访问令牌>@github.com/你的用户名/你的仓库名.git
  branch: main

推送到GitLab

GitLab私人存储库使用限制是10GB。
首先需要在GitLab新建项目，这里不多赘述，请自行百度。
需要在 Hexo 的 source 文件夹内新建两个文件，分别是 .gitlab-ci.yml 和 nginx.conf 。
将以下内容粘贴到这些文件里即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
image: nginx:latest # 使用nginx提供静态页面服务

# 通过gitlab的pages功能实现静态网站功能。
pages:
  stage: deploy
  script: # GitLab Pages制定从public文件夹读取内容
    - mkdir .public
    - cp -r * .public
    - mv .public public
    - mv public/nginx.conf /etc/nginx/nginx.conf # nginx的配置文件
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
1
2
3
4
5
6
7
server {
    listen 80;
    location / {
        root public;
        index index.html;
    }
}

然后获取 Access Token， 先打开你的存储库，然后方法见下图。记得授予查看和修改存储库的权限。
img

接着在编写 _config.yml 配置文件，修改以下代码

1
2
3
4
deploy:
  type: git
  repo: https://{Access Token}@gitlab.com/{name}/{name}.git
  branch: main  # 或者你要推送的分支，如 'master'

接着在 Hexo d 时就会出现一个登录框，授权一下就进行推送了。

如果无法推送请确认分支是否被保护，被保护的分支请取消保护。取消方法在下图。

img

无论使用任何方式都需要部署到Vercel，点击去注册Vercel账号, 将项目部署到Vercel即可。如果不想用Vercel，可以考虑GitHub Pages，GitLab Pages，Cloudflare Pages等。

博客迁移

建议站长每隔几天博客，这样即使出现问题也可以补救。

  1. 用网盘从备份拷贝整个blog文件夹。
  2. 在新的电脑上装好git并配置好用户名和密钥。
  3. 安装 node.js
  4. 安装 hexo：npm install hexo-cli -g
  5. 用U盘把blog文件夹拷贝到新的电脑上。在新电脑上，在blog文件夹中打开终端，输入：npm install。注意，在创建一个新的博客的时候到这一步是 hexo init，而由于我们已经要继承之前的设置和博文，所以这一步不能输入hexo init。
  6. 至此，完成移植。使用 hexo new、hexo d -g 等指令测试是否成功吧。

常用主题标签

注意: 这些内容只适用于安知鱼主题, 放在其他主题中可能无效

这里只介绍几个我经常使用的主题标签更全的标签请去安知鱼博客寻找。

常用标签

label 标签

1
{% label text color %}

渲染一下：渲染后是这样的

folding 折叠框

1
2
3
{% folding 参数（可选）, 在这里输入标题 %}
在这里输入内容
{% endfolding %}

支持嵌套

在这里输入标题

在这里输入内容

1
{% link 标题, 站点描述, 链接, 图片链接（可选） %}

那如何获取网站图标呢？

不同的网站获取方法肯定有所不同，但都会在 <head> 标签里。所以在 <head> 标签里如果看到图片的扩展名可以来看一看，有可能是网站图标。

前言标签

1
2
3
<blockquote>
前言内容
</blockquote>

或者用markdown的写法就是 > 。

前言内容

高级标签

分栏 tab

1
2
3
4
5
6
7
8
9
{% tabs Unique name, [index] %}

<!-- tab [Tab caption] [@icon] -->

Any content (support inline tags too).

<!-- endtab -->

{% endtabs %}
  1. Unique name :
  • 选项卡块标签的唯一名称，不带逗号。
  • 将在#id 中用作每个标签及其索引号的前缀。
  • 如果名称中包含空格，则对于生成#id，所有空格将由破折号代替。
  • 仅当前帖子/页面的 URL 必须是唯一的！
  1. [index]:
  • 活动选项卡的索引号。
  • 如果未指定，将选择第一个标签（1）。
  • 如果 index 为-1，则不会选择任何选项卡。
  • 可选参数。
  1. [Tab caption]:
  • 当前选项卡的标题。
  • 如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。
  • 如果未指定标题，但指定了图标，则标题将为空。
  • 可选参数。
  1. [@icon]: - FontAwesome 图标名称（全名，看起来像“ fas fa-font”） - 可以指定带空格或不带空格； - 例如’Tab caption @icon’ 和 ‘Tab caption@icon’. - 可选参数。

tab1content

tab2content

and more

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs tabsname %}

<!-- tab tab1name-->

**tab1content**

<!-- endtab -->

<!-- tab tab2name-->

**tab2content**

<!-- endtab -->

<!-- tab and more-->

**and more**

<!-- endtab -->

{% endtabs %}

配置Qexo后台

  • 创建Github私人仓库。
  • 使用Git工具将博客源代码上传到Github私人仓库中。

部署到Vercel

Qexo支持多种部署方法，这里取最简单的Vercel一键部署。初次部署会出现报错，忽略即可，接着进行下一步。

创建数据库

Vercel进入刚刚创建的Qexo项目，在Storage选项卡中创建一个Neon数据库并连接到Qexo项目。重新部署此项目并绑定自定义域名。

初始化

初始化字段根据以下表格填写即可。

字段名 详细描述
Github密钥 于Github 设置 生成的 Token，需 repo 和 workflow 权限（不建议给出所有权限）
Github仓库 您博客源码自动化部署所在的仓库
项目分支 您博客源码自动化部署所在仓库的分支
博客路径 您 博客源码 自动化部署所在仓库的路径 若为根目录请留空

由于使用Vercel部署方式，还需要额外的Vercel配置

字段名 详细说明
VERCEL_TOKEN 您的 Vercel 账户密钥 在此处 生成
PROJECT_ID 您 Qexo 部署所在项目的 ID 位于 Project Settings -> General -> Project ID

自动化部署

现在Qexo已经部署完成了，但是部署后不会同步到博客，如果需要同步需要进入存储博客源代码的Github仓库，进入Action选项卡，创建一个workflow。代码如下:

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
67
68
69
70
71
72
name: 自动部署 Hexo

on:
  push:
    branches:
      - main
    paths:
      - source/_posts/**

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [22.x]

    steps:
      - name: 开始运行
        uses: actions/checkout@v3

      - name: 设置 Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}

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

      - name: 缓存
        uses: actions/cache@v4
        id: cache-dependencies
        with:
          path: node_modules
          key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-

      - name: 安装插件
        if: steps.cache-dependencies.outputs.cache-hit != 'true'
        run: 
          npm install

      - name: 安装主题
        run:
          git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

      - name: 安装渲染插件
        run:
          npm install hexo-renderer-pug hexo-renderer-stylus --save

      - name: 安装主题插件
        run:
          npm install hexo-butterfly-envelope --save

      - name: 生成静态文件
        run: 
          hexo cl && hexo g
        
      - name: 清理残留
        run: rm -rf .deploy_git

      - name: 验证
        run:
          git config --global user.name "${{secrets.GIT_NAME}}"&&git config --global user.email "${{secrets.GIT_EMAIL}}"
      - name: 开始部署
        run:
          hexo d

      - name: 提交搜索
        run:
          hexo algolia
环境变量 详细说明
GIT_EMAIL GitHub账户的电子邮件
GIT_NAME Github名字

这个代码只适用于anzhiyu主题，其他主题需要单独适配。这样只要源代码库发生变化就会重新部署同步到博客。

只有_post文件夹发生变化时才会执行，如果其他部分发生变化则手动执行。放在草稿箱中的内容发生变化不会自动部署。

常见问题

出现5xx错误，或编辑窗口加载空白：可以在设置中更换CDN，如果不行的话就在 /advanced.html 中点击“修复”按钮。

参考文章