背景交待

今天在看博客的时候，发现了一个样式很漂亮的网站，研究了一下，发现这个网站使用的是 Hexo 搭建的，并套用了 Butterfly 主题。于是，研究了一下，利用空闲时间，经过查看文档与百度疑点，来回几次虚拟机的重置，使用 Hexo 搭建了一个博客。

搭建 Hexo

搭建 Hexo 比较简单，除了几个需要注意的地方，其他的按照 官方文档 的步骤操作即可。这里，简单记录一下：

安装前提

安装 Hexo 前需要先安装

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

  • Node.js 为大多数平台提供了官方的 安装程序。对于中国大陆地区用户，可以前往 淘宝 Node.js 镜像 下载。

  • 其它的安装方法：

    • Windows：通过 nvs（推荐）或者 nvm 安装。
    • Mac：使用 Homebrew 或 MacPorts 安装。
    • Linux（DEB/RPM-based）：从 NodeSource 安装。
    • 其它：使用相应的软件包管理器进行安装，可以参考由 Node.js 提供的 指导

需要注意的是，现在的 Hexo 版本，建议使用 Node.js 12版本，14版本会有一个错误

安装Git

  • Windows：下载并安装 git.
  • Mac：使用 Homebrew, MacPorts 或者下载 安装程序。
  • Linux (Ubuntu, Debian)：sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

安装 Hexo

完成必备程序 Node.js 和 Git 的安装后，即可使用 npm 安装 Hexo。

1
npm install -g hexo-cli

初始化

首先定位到需要存放项目的文件夹路径下，执行下列命令：

1
hexo init
1
2
3
4
5
# 重点关注目录
_config.yml # 网站的配置文件
_posts  # 在source 目录下，存放MD文件的目录
themes # 存放主题的文件夹，Hexo 会根据主题来生成静态页面，后面的 Butterfly 主题会放在这里
scaffolds # 模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件

生成静态页面

1
2
hexo generate
hexo g # 简写命令

会在根目录下生成public文件夹，里面包含相应的html页面

启动服务器

1
2
hexo server
hexo s # 简写命令

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

应用 Butterfly 主题

努力了好久，终于到了期待的样式主题了，主题可以再官网的主题页面选择。当然这里肯定是选择 Butterfly，Butterfly 的主页展示为：https://butterfly.js.org，对应的文档页面为：https://butterfly.js.org/posts/21cfbf15/。对应的操作后期备注，这里简单记录一下。

主题安装

1
2
3
4
5
6
7
8
9
# github 安装
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

# gitee 安装
git clone -b master https://gitee.com/iamjerryw/hexo-theme-butterfly.git themes/butterfly

# npm 安装，5.0.0版本以上可用
# 通过 npm 安装并不会在 themes 里生成主题文件夹，而是在 node_modules 里生成
npm i hexo-theme-butterfly

应用主题

修改 Hexo 根目录下的 _config.yml，把主题设置为 Butterfly

1
theme: butterfly

安装插件

如果没有 pug 以及 stylus 的渲染器，可以按下列方法下载安装：

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

配置设置

为减少升级主题后带来的不便，可以按照以下方法操作：

在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 中，以后只需要在 _config.butterfly.yml进行配置就行。

Hexo会自动合併主题中的_config.yml和 _config.butterfly.yml里的配置，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。