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
16
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 %}

参考文章