如何使用Hexo发布一篇Blog

下载Hexo和安装Fluid主题

关于这部分的内容可以参考Hexo和Fluid的官方文档来配置和下载，里面会有详细的说明，这边就不赘述。

美化（魔改）Fluid主题

关于美化Fluid主题，这个属于个人的偏好，可以通过搜索引擎的关键词 Hexo 和 Fluid 来找到相关的资料，下面是我参考过的一些资料，可以按需取用。

部署个人网站到Github

如果对Github比较熟悉的同学应该都知道 Github Page 可以做成个人网站，这个在网上也有很夺教程，这边也不重复了，下面给的是一些用 CDN 来加速网站加载的文章，可以参考。

一些有用的API

也许你还需要一些 API 来实现一些功能，比如展示 Github 的热力图、每日一图、优美的英文句子等，下面我也提供了一些可能有用的文章。

前端知识的学习材料

搭建个人博客网站避免不了需要了解一些前端的相关知识，下面是你可能需要的学习资料。

如何发布一篇博客

接下来的内容假设你已经搭建好了个人博客并且通过 Github Pages 发布了个人博客。

编辑博客

使用 Markdown 编辑器

编辑博客一般是在本地编辑完，然后通过本地查看之后没有问题再推送到远程仓库来实现发布。

编辑博客有两种方式，一种是先使用 hexo 创建文件：

1
hexo new post --path 20231203Hello/Hello # 指定路径创建名为Hello的.md文件，路径可以省略
1
hexo new "Hello World!" # 默认是post，如果博客名称有空格需要用双引号包裹起来

然后使用类似 Typora、sublime、Obsidian 等 Markdown 编辑器编辑完之后再用 hexo 的命令在本地预览，没有问题之后再推送到远程仓库。

1
2
3
4
hexo clean # 清除缓存
hexo g # hexo generate
hexo s # hexo server
# 详细的命令说明: https://hexo.io/zh-cn/

使用 Hexo-admin 插件

关于详细的安装和使用说明可以参考这个链接: jaredly/hexo-admin: An Admin Interface for Hexo (github.com)

安装的命令 npm install --save hexo-admin ，安装之后在博客的目录下执行 hexo server -d 然后在浏览器打开 http://localhost:4000/admin/ 就可以进行博客的编辑了。之后的推送到远程仓库的步骤是一样的。

本地预览

要本地预览编辑完的博客可以使用 hexo clean 清除缓存，然后用 hexo g 生成必要的文件，然后执行 hexo s 来启动本地的服务，之后在浏览器打开 http://localhost:4000/ 就能看到编辑完之后的效果。如果效果满意就可以准备推送到远程仓库了。

推送编辑完的博客到远程仓库

Git 推送到远程仓库的一般步骤：

1
2
3
4
git pull origin main --rebase # 也可以不是rebase，按需选择
git add . # 个人习惯把修改的内容全部一次添加
git commit -m "message" # 提交的说明
git push -u origin main # 提交到远程仓库

推送之后到个人的 Github 相关的仓库查看是否推送成功，如果推送成功就可以在发布的Page中查看了，比如我的个人博客的 Github 地址就是 https://chen-huaneng.github.io/ 。

有用的一些编辑技巧

下面是一些有用的编辑技巧，注意下面的技巧适用于发布博客，并且使用的主题是 Fluid ，用 Hexo 驱动，可能存在部分语法和 Markdown 不兼容，比如图片可能在 Markdown 编辑器中并不能实时渲染。

在文本中插入一张图片

在 Fluid 主题中，默认的路径是博客文件夹下的 source 文件夹，所以你可以通过相对路径来引用一张图片，比如我现在要引用一张 source/imgs/posts/2023/12/03/banner.jpg 那么我就可以在 Markdown 使用

1
![Banner](/imgs/posts/2023/12/03/banner.jpg)

来引用，效果如下：

Banner

在文本中插入代码块

如果想要在博客的文章中插入代码块，可以参考代码高亮 | Hexo的说明来写，当然如果你使用 Fluid 并且配置了相关的设置，那么使用正常的 Markdown 语法是能够正常渲染出来的。下面是一个演示：

1
2
3
public static void main(String args[]) {
    System.out.println("Hello World!");
}

要渲染上面的代码块，在 Markdown 中的语法是：

1
2
3
4
5
```java
public static void main(String args[]) {
    System.out.println("Hello World!");
}
```

在文本中使用脚注

在 Fluid 主题中支持自动生成脚注的引用，相关说明参考配置指南 | Hexo Fluid 用户手册 (fluid-dev.com)，下面是一个演示：

这是一句话[1] ，下面有脚注。

相关的 Markdown 语法是，建议把所有的脚注放在文章末尾，方便管理：

1
这是一句话\[^1\]，下面有脚注。

Tag插件

Fluid 主题还内置了一些相关的Tag插件可以使用，详细的说明参考配置指南 | Hexo Fluid 用户手册 (fluid-dev.com)。

在 markdown 中加入如下的代码来使用便签：

1
2
3
{% note success %}
文字 或者 `markdown` 均可
{% endnote %}

或者使用 HTML 形式：

1
<p class="note note-primary">标签</p>

效果展示：

标签

文字 或者 markdown 均可

可选便签：

  • primary

  • secondary

  • success

  • danger

  • warning

  • info

  • light

使用时 &{&% note primary &%&} 和 &{&% endnote &%&} 需单独一行，否则会出现问题

行内标签

在 markdown 中加入如下的代码来使用 Label：

1
{% label primary @text %}

可选 Label：

primary default info success warning danger

折叠块

使用折叠块，可以折叠代码、图片、文字等任何内容，你可以在 markdown 中按如下格式：

1
2
3
{% fold info @title %}
需要折叠的一段内容，支持 markdown
{% endfold %}

info: 和行内标签类似的可选参数 title: 折叠块上的标题，下面是一些例子。

需要折叠的一段内容，支持 markdown

1
2
3
public static void main(String args[]) {
    System.out.println("Hello World!");
}
banner

勾选框

在 markdown 中加入如下的代码来使用 Checkbox：

1
{% cb text, checked?, incline? %}

text：显示的文字 checked：默认是否已勾选，默认 false incline: 是否内联（可以理解为后面的文字是否换行），默认 false

示例：

1
2
3
4
5
6
7
{% cb 普通示例 %}

{% cb 默认选中, true %}

{% cb 内联示例, false, true %} 后面文字不换行

{% cb false %} 也可以只传入一个参数，文字写在后边（这样不支持外联）
普通示例
默认选中
内联示例

后面文字不换行

也可以只传入一个参数，文字写在后边（这样不支持外联）

按钮

你可以在 markdown 中加入如下的代码来使用 Button：

1
{% btn url, text, title %}

或者使用 HTML 形式：

1
<a class="btn" href="url" title="title">text</a>

url：跳转链接 text：显示的文字 title：鼠标悬停时显示的文字（可选）

效果展示：

text

text

组图

如果想把多张图片按一定布局组合显示，你可以在 markdown 中按如下格式：

1
2
3
4
5
6
7
{% gi total n1-n2-... %}
  ![](url)
  ![](url)
  ![](url)
  ![](url)
  ![](url)
{% endgi %}

total：图片总数量，对应中间包含的图片 url 数量 n1-n2-...：每行的图片数量，可以省略，默认单行最多 3 张图，求和必须相等于 total，否则按默认样式。下面是示例：

about
about
about
banner
banner
banner
banner
banner
banner
home
home
home
home

LaTeXs数学公式

Hexo 5.0 以上，可尝试 Hexo 官方的 hexo-math (opens new window)插件，支持更多定制化参数，使用方式参照链接内的文档，以下介绍的是主题内置的 LaTeX 功能。

当需要使用 LaTeX (opens new window)语法的数学公式时，可手动开启本功能，需要完成三步操作：

1. 设置主题配置

1
2
3
4
5
post:
  math:
    enable: true
    specific: false
    engine: mathjax

specific: 建议开启。当为 true 时，只有在文章 front-matter (opens new window)里指定 math: true 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度。

engine: 公式引擎，目前支持 mathjax 或 katex。

2. 更换 Markdown 渲染器

由于 Hexo 默认的 Markdown 渲染器不支持复杂公式，所以需要更换渲染器（mathjax 可选择性更换）。

然后根据上方配置不同的 engine，推荐更换如下渲染器：

mathjax

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-pandoc --save

并且还需安装 Pandoc(opens new window)

katex

1
2
3
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-markdown-it --save
npm install @traptitech/markdown-it-katex --save

然后在站点配置中添加：

1
2
3
markdown:
  plugins:
    - "@traptitech/markdown-it-katex"

3. 安装完成后执行 hexo clean

书写公式的格式：

1
2
3
$$
E=mc^2
$$

数学公式行间示例： \[ E = mc^2 \] 没有意义的行内展示：\(h = \frac{v}{2}\)。

  • 如果公式没有被正确渲染，请仔细检查是否符合上面三步操作。
  • 不可以同时安装多个渲染插件，包括 hexo-math 或者 hexo-katex 这类插件，请注意检查 package.json。
  • 如果更换公式引擎，对应渲染器也要一并更换。
  • 不同的渲染器，可能会导致一些 Markdown 语法不支持，或者渲染样式有细微差异。
  • 自定义页面默认不加载渲染，如需使用，需在 front-matter 中指定 math: true

References

  1. 这是对应的脚注 ↩︎
Blog > Hexo > Fluid
#Hexo #Fluid #Website #Tool
如何使用Hexo发布一篇Blog
https://chen-huaneng.github.io/2023/12/02/2023-12-3-2023-12-03-how-to-write-blog/
作者
Abel
发布于
2023年12月2日
更新于
2024年1月4日
许可协议