如你所见,我的博客网站现在使用的就是 Hexo 框架 + Butterfly 主题。Hexo 框架非常适合做中小型网站、个人博客等类型的网站快速搭建,而在其众多 主题样式 中,我唯独相中了 Butterfly 。

考虑到国内开发者不一定全部都擅长使用梯子,此处放出的链接均来自于 Gitee 。
将网址中的 gitee.com 替换为 github.com 即可访问对应的 GitHub 页面。

Quick Start 快速开始

准备工作

你需要先安装 Git 和 Node.Js。
具体安装步骤参照安装程序走,在安装Node.js时一定要勾选 Add to path ,否则后期操作将变得繁琐。

成功安装后,在命令提示符中使用命令 git 和 npm 是不能报错的,否则即为安装失败。


安装 Hexo

再然后,就需要安装 Hexo 框架了。

1
$ npm install hexo-cli -g

避免踩坑

你首先需要下载并安装 hexo-renderer-pug hexo-renderer-stylus 这两个包。
运行以下命令安装这两个包。

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

卸载 可能引起问题的插件

警告:如果有安装的话,请卸载掉如下两个插件 hexo-inject hexo-neat ,它们会导致主题不能正常运行。

1
$ npm uninstall hexo-inject hexo-neat

完成以上步骤之后,就可以开始尽情 Coding 啦。


新建项目

假设我把 D:\ 目录用作博客的源代码目录,那么,新建项目的过程将是这样的:
先使用 cd 命令将工作目录切换到 D:\Blog\ ,然后新建项目。

1
2
3
4
5
6
$ cd D:\          //切换目录
$ D: //重定向盘符
$ hexo init Blog //以 Blog 为文件夹名初始化新项目
$ cd Blog //切换目录到项目文件夹中
$ npm install
$ hexo server //启动 Hexo 服务器

由于 Hexo 默认的端口号是:4000,现在可以访问:http://localhost:4000/ 并看到你的博客网站了。

注意:从现在起,命令行 的 工作目录 需要一直保持在项目根目录下。


安装 Butterfly

在上一步中可以看到,Hexo 默认的主题是 landscape [在项目根目录中的 _config.yml 中 100 行左右看到(theme: landscape)]。
通过以下命令将 ButterFly 主题从 Git 上克隆下来。

1
$ git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

克隆完毕之后,一般可以看到 /Themes/Butterfly/ 目录的存在。
在 _config.yml 中 100 行左右修改(theme: butterfly)。

有关 _config.yml 文件的配置将在之后的博客中叙述。

升级建议

升级完成后,请到 Github 的 Releases 界面或者 文档七 查看新版的更新内容。里面会标注文件的变更内容(如果有的话),请根据实际情况更新你的配置文件 _config.yml 。


本节结语

  1. 重点:保持 控制台 工作目录位于项目路径下。
  2. 重点:更新主题版本前先确认新版本内容将砍去哪些内容。