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

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

Quick Start 快速开始

准备工作

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

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


安装 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 文件的配置将在之后的博客中叙述。

升级建议

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


本节结语

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