用 Hexo 搭建个人静态博客

安装 Hexo

安装 Hexo 的前提是：

• Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)；
• Git；

关于 Node.js 和 Git 的安装过程可以参考

• 安装-Node-js；
• 安装-Git；

使用 npm 安装 Hexo ：

1

$ npm install -g hexo-cli

创建 GitHub 仓库

点击 GitHub 主页右上角的【新建仓库】

设置好仓库名称、描述后即可点击【生成仓库】

在仓库设置中将 GitHub Pages 的目录由 None 设置为 main ，然后点击左侧的保存，上方就会生成 GitHub Pages 网址

建站

初始化网站

按照下列代码可以初始化文件夹

1

$ hexo init [folder]

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

新建文章

1

$ hexo new [layout] <title>

默认情况下，Hexo 会使用文章的标题来决定文章文件的路径。对于独立页面来说，Hexo 会创建一个以标题为名字的目录，并在目录中放置一个 index.md 文件。

如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。

如果标题包含空格的话，请使用引号括起来。如：

1	$ hexo new "post title with whitespace"

命令说明：

参数	描述
-p, --path	自定义新文章的路径
-r, --replace	如果存在同名文章，将其替换
-s, --slug	文章的 Slug，作为新文章的文件名和发布后的 URL

可以使用 --path 参数来自行决定文章文件的目录位置

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

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

==注意！title 是必须指定的！==，当然也可以自己配置 Font-Matter ，配置方式参考 Front-matter | Hexo 中文文档 。

生成静态文件

静态文件的生成代码如下：

1
2
3
4

$ hexo generate

# 也可以简写为如下命令
$ hexo g

命令说明：

选项	描述
-d, --deploy	文件生成后立即部署网站
-w, --watch	监视文件变动
-b, --bail	生成过程中如果发生任何未处理的异常则抛出异常
-f, --force	强制重新生成文件 Hexo 引入了差分机制，如果 public 目录存在，那么 hexo g 只会重新生成改动的文件。 使用该参数的效果接近 hexo clean && hexo generate
-c, --concurrency	最大同时生成文件的数量，默认无限制

发表草稿

发表草稿的代码如下：

1

$ hexo publish [layout] <filename>

启动服务器

启动服务器的代码如下：

1
2
3
4

$ hexo server

# 也可以简写为以下命令
$ hexo s

默认的访问网址为：http://localhost:4000/

命令说明：

选项	描述
-p, --port	重设端口
-s, --static	只使用静态文件
-l, --log	启动日记记录，使用覆盖记录格式

一键部署网站

部署方式如下：

1
2
3
4

$ hexo deploy

# 也可以简写为以下命令
$ hexo d

在开始之前，您必须先在 _config.yml 中修改参数，一个正确的部署配置中至少要有 type 参数，例如：

1
2

deploy:
  type: git

您可同时使用多个 deployer，Hexo 会依照顺序执行每个 deployer。

1
2
3
4
5

deploy:
- type: git
  repo:
- type: heroku
  repo:

其他有关渲染、清楚缓存文件、列出网站资料、显示版本等命令参考：指令 | Hexo；

部署到 GitHub 的详细步骤说明：

1. 安装 hexo-deployer-git。

1

$ npm install hexo-deployer-git --save

2. 修改配置。

1
2
3
4
5

deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch]
  message: [message]

部署到 GitHub 时，分支（branch）建议使用 main ，因为这是仓库的默认目录。否则需要将 GitHub 仓库的默认目录更改为配置设置的对应目录。

不填写时 Hexo 会自动在仓库中创建一个目录。

命令说明：

参数	描述	默认
repo	库（Repository）地址
branch	分支名称	gh-pages (GitHub) coding-pages (Coding.net) master (others)
message	自定义提交信息	Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})
token	Optional token value to authenticate with the repo. Prefix with $ to read token from environment variable

3. 生成站点文件并推送至远程库。执行

1

hexo clean && hexo deploy

4. 登入 Github，在库设置（Repository Settings）中将默认分支设置为 _config.yml 配置中的分支名称。稍等片刻站点就会显示在 Github Pages 中。

• 这一切是如何发生的？

  当执行 hexo deploy 时，Hexo 会将 public 目录中的文件和目录推送至 _config.yml 中指定的远端仓库和分支中，并且完全覆盖该分支下的已有内容。

文件说明：

_config.yml：网站的 配置 信息，您可以在此配置大部分的参数。

pakage.json：应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

scaffolds：模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。

source：资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes：主题 文件夹。Hexo 会根据主题来生成静态页面。

配置说明

主要的配置都可以在 _config.yml 中修改

网站

其中，description 主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author 参数用于主题显示文章的作者。

网址

如果您的网站存放在子目录中，例如 http://example.com/blog，则请将您的 url 设为 http://example.com/blog 并把 root 设为 /blog/。

目录

如果刚开始使用 Hexo 通常不用修改这一项

文章

相对地址：

默认情况下，Hexo 生成的超链接都是绝对地址。例如，如果您的网站域名为 example.com,您有一篇文章名为 hello，那么绝对链接可能像这样：http://example.com/hello.html，它是绝对于域名的。相对链接像这样：/hello.html，也就是说，无论用什么域名访问该站点，都没有关系，这在进行反向代理时可能用到。通常情况下，建议使用绝对地址。

分类/标签

日期/时间格式

Hexo 使用 Moment.js 来解析和显示时间。

update_option

updated_option 控制了当 Front Matter 中没有指定 updated 时，updated 如何取值：

• mtime: 使用文件的最后修改时间。这是从 Hexo 3.0.0 开始的默认行为。
• date: 使用 date 作为 updated 的值。可被用于 Git 工作流之中，因为使用 Git 管理站点时，文件的最后修改日期常常会发生改变
• empty: 直接删除 updated。使用这一选项可能会导致大部分主题和插件无法正常工作。

use_date_for_updated 选项已经被废弃，将会在下个重大版本发布时去除。请改为使用 updated_option: 'date'。

分页

扩展

更多扩展配置与配置相关信息参考 配置 | Hexo ；

迁移

关于 RSS 的迁移方法，首先安装 hexo-migrator-rss 插件，安装代码为：

1

$ npm install hexo-migrator-rss --save

安装完成后从 RSS 迁移文章，迁移代码如下：

1

$ hexo migrate rss <source>

source 可以是文件路径或网址。

主题

创建 Hexo 主题非常容易，只要在 themes 文件夹内，新增一个任意名称的文件夹，并修改 _config.yml 内的 theme 设定，即可切换主题。一个主题可能会有以下的结构：

1
2
3
4
5
6

.
├── _config.yml
├── languages
├── layout
├── scripts
└── source

文件说明：

_config.yml：主题的配置文件。和 Hexo 配置文件不同，主题配置文件修改时会自动更新，无需重启 Hexo Server。

languages：语言文件夹。请参见 国际化 (i18n)。

layout：

布局文件夹。用于存放主题的模板文件，决定了网站内容的呈现方式，Hexo 内建 Swig 模板引擎，您可以另外安装插件来获得 EJS、Haml、Jade 或 Pug 支持，Hexo 根据模板文件的扩展名来决定所使用的模板引擎，例如：

1 2	layout.ejs - 使用 EJS layout.swig - 使用 Swig

可参考 模板 以获得更多信息。

scripts：脚本文件夹。在启动时，Hexo 会载入此文件夹内的 JavaScript 文件，请参见 插件 以获得更多信息。

source：

资源文件夹，除了模板以外的 Asset，例如 CSS、JavaScript 文件等，都应该放在这个文件夹中。文件或文件夹开头名称为 _（下划线线）或隐藏的文件会被忽略。

如果文件可以被渲染的话，会经过解析然后储存到 public 文件夹，否则会直接拷贝到 public 文件夹。

推荐几个好看的主题：

1. NexT主题；
2. yun主题；
3. cards主题；

问题解决

• 为什么部署到 GitHub pages 后无法访问？

  1. 检查是否在 GitHub Pages 中将目录分支改为自己部署的分支；

  2. 检查是否将部署目录设置为默认目录——如果创建的目录不是默认目录 main ，需要重新将默认目录设置为 Hexo 部署的目录

• 为什么部署后没有样式？

  在 _config.yml 文件中将 url 和 root 修改为对应的位置，如下代码所示

  1 2	url: https://znizn.github.io/onion.github.io/ root: .

  然后重新生成和部署（ hexo g -d ），稍等片刻即刻显示样式。

  说明：其中，. 表示搜索和 _config.yml 同一级的文件，当然也可以手动写为对应目录名

• 为什么重新部署后 GitHub Pages 的内容没有变化？

  国内网络原因，稍等一会就好。

参考资料

• 文档 | Hexo；
• 手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili；
• Hexo 静态博客搭建笔记 | 云游君的小站 (yunyoujun.cn)；
• 教你如何从零开始搭建一个属于自己的网站 | 云游君的小站 (yunyoujun.cn)；
• Github Page + Hexo 免费搭建个人博客教程 | ChrAlpha’s Blog (ichr.me)；
• 使用指南 | Hexo-Theme-Yun (yunyoujun.cn)；
• 开始使用 | Theme Cards (ichr.me)；
• hexo部署到gitee没有样式——完美解决 | guitar&programmer的博客-CSDN博客；