我的博客架构

  flowchart LR
A(Blog) ---- B(Frame) -..- D(Hexo)
A ---- C(Theme) -..- E(Butterfly)
A ---- G(Server) -..- H(Github)
click D "https://hexo.io/zh-cn/" _blank
click E "https://butterfly.js.org/posts/21cfbf15/" _blank

如上，框架采用Hexo，主题使用Butterfly，直接部署在Github上，这一套方案运行后就是你现在所看见的模样。

实现路径

Frame: Hexo

安装

1	npm install -g hexo-cli

1	npm install hexo

一键部署

Hexo 提供了快速方便的一键部署功能，让您只需一条命令就能将网站部署到服务器上。

1	hexo deploy

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

1 2	deploy: type: git

Git

安装

1	npm install hexo-deployer-git --save

修改配置

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

Theme: Butterfly

安装

1	npm install hexo-theme-butterfly

升级方法：在 Hexo 根目录下，运行 npm update hexo-theme-butterfly

应用

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

1	theme: butterfly

安装插件

如果你没有 pug 以及 stylus 的渲染器，请下载安装：

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

升级建议

为了减少升级主题后带来的不便，请使用以下方法：

去主题目录中，将文件_config.yml复制到hexo博客根目录，并重命名为_config.butterfly.yml
以后只要在_config.butterfly.yml进行配置即可。

如果使用了_config.butterfly.yml，配置主题的 _config.yml将不会有效果

Server: Github

To be continued…