# Hexo 搭建博客回顾

大部分内容跟文档一样，只是懒得翻文档，放在博客里更方便吧

Hexo 使用文档：https://hexo.io/zh-cn/docs

博客参考：

• https://www.reversesacle.com/Hexo-Shoka 主题功能介绍补充点 /
• https://shoka.lostyu.me/categories/computer-science/note/

WIndows 环境下搭建

安装前提：

要有 Node.js 和 git 来支持 Hexo 的运行（Git 安装见）

# 安装 Node.js

1. 进入官网 (中文版下载快一点) 无脑下载安装
2. 使用 npm 报错进入 C:\Users\ 用户名 \ 中某 node 相关文件，删除即可

# 安装 Hexo

1. 打开一个空文件夹作为博客文件夹，地址框输入 cmd 使用命令:

   1	npm install -g hexo-cli

2. 执行一下命令：

   1 2 3

   hexo init <folder> #最好绝对路径 cd <folder> $ npm install

3. 成功后大概目录如下：

   1 2 3 4 5 6 7 8

   . ├── _config.yml # 博客配置，可以在其中修改博客大部分配置 ├── package.json # 应用程序的信息。 ├── scaffolds # 模板文件夹 ├── source # 存放用户资源 | ├── _drafts | └── _posts # 存放md格式的源文件，用于生成网页 └── themes # 存放下载主题

   yml 文件格式：yaml（Ain't a Markup Language）

   一种直观的能够被电脑识别的数据序列化格式，并且容易被人类阅读

4. 1

# 指令

# init

1

hexo init [folder]

新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。

本命令相当于执行了以下几步：

1. Git clone hexo-starter 和 hexo-theme-landscape 主题到当前目录或指定目录。
2. 使用 Yarn 1、pnpm 或 npm 包管理器下载依赖（如有已安装多个，则列在前面的优先）。

npm 默认随 Node.js 安装。

# new

1

hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

1

hexo new "post title with whitespace"

默认情况下，Hexo 会使用文章的标题来决定文章文件的路径。对于独立页面来说，Hexo 会创建一个以标题为名字的目录，并在目录中放置一个 index.md 文件。你可以使用 --path 参数来覆盖上述行为、自行决定文件的目录：

1

hexo new page --path about/me "About me"

以上命令会创建一个 source/about/me.md 文件，同时 Front Matter 中的 title 为 "About me"

注意！title 是必须指定的！如果你这么做并不能达到你的目的：

1

hexo new page --path about/me

此时 Hexo 会创建 source/_posts/about/me.md ，同时 me.md 的 Front Matter 中的 title 为 "page" 。这是因为在上述命令中，hexo-cli 将 page 视为指定文章的标题、并采用默认的 layout 。

# generate

1

hexo generate

生成静态文件。

该命令可以简写为

1

hexo g

# publish

1

hexo publish [layout] <filename>

发表草稿。

# server

1

hexo server

启动服务器。默认情况下，访问网址为： http://localhost:4000/ 。

# deploy

1

hexo deploy

部署网站。

该命令可以简写为：

1

hexo d

# render

1

hexo render <file1> [file2] ...

渲染文件。

# migrate

1

hexo migrate <type>

从其他博客系统 迁移内容。

# clean

1

hexo clean

清除缓存文件 ( db.json ) 和已生成的静态文件 ( public )。

在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

# list

1

hexo list <type>

列出网站资料。

# 选项

# 安全模式

1

hexo --safe

在安全模式下，不会载入插件和脚本。当您在安装新插件遭遇问题时，可以尝试以安全模式重新执行。

# 调试模式

1

hexo --debug

在终端中显示调试信息并记录到 debug.log 。当您碰到问题时，可以尝试用调试模式重新执行一次，并 提交调试信息到 GitHub。

# 简洁模式

1

hexo --silent

隐藏终端信息。

# 自定义配置文件的路径

1
2
3
4
5

# 使用 custom.yml 代替默认的 _config.yml
$ hexo server --config custom.yml

# 使用 custom.yml 和 custom2.json，其中 custom2.json 优先级更高
$ hexo generate --config custom.yml,custom2.json,custom3.yml

自定义配置文件的路径，指定这个参数后将不再使用默认的 _config.yml 。
你可以使用一个 YAML 或 JSON 文件的路径，也可以使用逗号分隔（无空格）的多个 YAML 或 JSON 文件的路径。例如：

1
2
3
4
5

# 使用 custom.yml 代替默认的 _config.yml
$ hexo server --config custom.yml

# 使用 custom.yml, custom2.json 和 custom3.yml，其中 custom3.yml 优先级最高，其次是 custom2.json
$ hexo generate --config custom.yml,custom2.json,custom3.yml

当你指定了多个配置文件以后，Hexo 会按顺序将这部分配置文件合并成一个 _multiconfig.yml 。如果遇到重复的配置，排在后面的文件的配置会覆盖排在前面的文件的配置。这个原则适用于任意数量、任意深度的 YAML 和 JSON 文件。

# 显示草稿

1

$ hexo --draft

显示 source/_drafts 文件夹中的草稿文章。

# 自定义 CWD

1

$ hexo --cwd /path/to/cwd

自定义当前工作目录（Current working directory）的路径。

# 写作

# 布局（Layout）

1

$ hexo new [layout] <title>

Hexo 有三种默认布局： post 、 page 和 draft 。在创建这三种不同类型的文件时，它们将会被保存到不同的路径；而您自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

关闭 layout 将值设为 false，文章就不会被主题处理

# 文件名称

Hexo 默认以标题做为文件名称，但您可编辑 new_post_name 参数来改变默认的文件名称，举例来说，设为 :year-:month-:day-:title.md 可让您更方便的通过日期来管理文章。

# 草稿

刚刚提到了 Hexo 的一种特殊布局： draft ，这种布局在建立时会被保存到 source/_drafts 文件夹，您可通过 publish 命令将草稿移动到 source/_posts 文件夹，该命令的使用方式与 new 十分类似，您也可在命令中指定 layout 来指定布局。

1

$ hexo publish [layout] <title>

草稿默认不会显示在页面中，您可在执行时加上 --draft 参数，或是把 render_drafts 参数设为 true 来预览草稿。

# 模版（Scaffold）

在新建文章时，Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件，例如：

1

$ hexo new photo "My Gallery"

在执行这行指令时，Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md ，并根据其内容建立文章，以下是您可以在模版中使用的变量：

# 支持的格式

Hexo 支持以任何格式书写文章，只要安装了相应的渲染插件。

例如，Hexo 默认安装了 hexo-renderer-marked 和 hexo-renderer-ejs ，因此你不仅可以用 Markdown 写作，你还可以用 EJS 写作。如果你安装了 hexo-renderer-pug ，你甚至可以用 Pug 模板语言书写文章。

只需要将文章的扩展名从 md 改成 ejs ，Hexo 就会使用 hexo-renderer-ejs 渲染这个文件，其他格式同理。

# Front-matter

Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量，举例来说：

1
2
3
4

---
title: Hello World
date: 2013/7/13 20:46:25
---

以下是预先定义的参数，您可在模板中使用这些参数值并加以利用。

# 布局

根据 _ config.yml 中 default _ layout 设置的值，默认布局为 post。当文章中的布局被禁用 (layout: false) 时，将不会使用主题进行处理。但是，它仍然会被任何可用的渲染器渲染：如果一篇文章是用 Markdown 编写的，并且安装了 Markdown 渲染器 (如默认的 hexo-renderer-marked) ，那么它将被渲染为 HTML。

不管布局如何，标签插件都会被处理，除非被 disableNunjucks 设置或渲染器禁用。

# JSON Front-matter

除了 YAML 外，你也可以使用 JSON 来编写 Front-matter，只要将 --- 代换成 ;;; 即可。

# 资源文件夹

资源（Asset）代表 source 文件夹中除了文章以外的所有文件，例如图片、CSS、JS 文件等。比方说，如果你的 Hexo 项目中只有少量图片，那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。

对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说，Hexo 也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开。

1

_config.ymlpost_asset_folder: true

当资源文件管理功能打开后，Hexo 将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个文章文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。

由于我使用 Typora 进行写作，图片会自动上传至库，没有采用以上形式

# 相对路径引用的标签插件

通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在 Hexo 2 时代，社区创建了很多插件来解决这个问题。但是，随着 Hexo 3 的发布，许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。

1
2
3

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

比如说：当你打开文章资源文件夹功能后，你把一个 example.jpg 图片放在了你的资源文件夹中，如果通过使用相对路径的常规 markdown 语法 ![](example.jpg) ，它将 不会 出现在首页上。（但是它会在文章中按你期待的方式工作）

正确的引用图片方式是使用下列的标签插件而不是 markdown ：

1

{% asset_img example.jpg This is an example image %}

通过这种方式，图片将会同时出现在文章和主页以及归档页中。

# 数据文件

有时您可能需要在主题中使用某些资料，而这些资料并不在文章内，并且是需要重复使用的，那么您可以考虑使用 Hexo 3.0 新增的「数据文件」功能。此功能会载入 source/_data 内的 YAML 或 JSON 文件，如此一来您便能在网站中复用这些文件了。

举例来说，在 source/_data 文件夹中新建 menu.yml 文件：

1
2
3

Home: /
Gallery: /gallery/
Archives: /archives/

您就能在模板中使用这些资料：

1
2
3

<% for (var link in site.data.menu) { %>
  <a href="<%= site.data.menu[link] %>"> <%= link %> </a>
<% } %>

渲染结果如下 :

1
2
3

<a href="/"> Home </a>
<a href="/gallery/"> Gallery </a>
<a href="/archives/"> Archives </a>

# 服务器

# hexo-server

Hexo 3.0 把服务器独立成了个别模块，您必须先安装 hexo-server 才能使用。

1

$ npm install hexo-server --save

安装完成后，输入以下命令以启动服务器，您的网站会在 http://localhost:4000 下启动。在服务器启动期间，Hexo 会监视文件变动并自动更新，您无须重启服务器。

1

$ hexo server

如果您想要更改端口，或是在执行时遇到了 EADDRINUSE 错误，可以在执行时使用 -p 选项指定其他端口，如下：

1

$ hexo server -p 5000

# 静态模式

在静态模式下，服务器只处理 public 文件夹内的文件，而不会处理文件变动，在执行时，您应该先自行执行 hexo generate ，此模式通常用于生产环境（production mode）下。

1

$ hexo server -s

# 自定义 IP

服务器默认运行在 0.0.0.0 ，您可以覆盖默认的 IP 设置，如下：

1

$ hexo server -i 192.168.1.1

指定这个参数后，您就只能通过该 IP 才能访问站点。例如，对于一台使用无线网络的笔记本电脑，除了指向本机的 127.0.0.1 外，通常还有一个 192.168.*.* 的局域网 IP，如果像上面那样使用 -i 参数，就不能用 127.0.0.1 来访问站点了。对于有公网 IP 的主机，如果您指定一个局域网 IP 作为 -i 参数的值，那么就无法通过公网来访问站点。

# 将 Hexo 部署到 GitHub Pages

我采用私有化仓库配置

下面的指示基于 一键部署 编写。

1. 安装 hexo-deployer-git.
2. 在 _config.yml（如果有已存在的请删除）添加如下配置：

1
2
3
4
5

deploy:
  type: git
  repo: https://github.com/<username>/<project>
  # example, https://github.com/hexojs/hexojs.github.io
  branch: gh-pages

1. 运行 hexo clean && hexo deploy 。
2. 查看 username.github.io 上的网页是否部署成功。