hexo（butterfly主题）+github搭建个人博客

官方文档：https://hexo.io/zh-cn/docs/#%E5%AE%89%E8%A3%85-Node-js

主题文档：https://butterfly.js.org/

安装步骤

1. 安装Node.js（https://nodejs.org/en/download/）和Git（https://gitforwindows.org/）

2. 安装hexo：npm install -g hexo-cli

3. 初始化：hexo init blog（folder/本地blog文件路径）或直接在想要放blog位置执行命令

   执行完将在目录下出现以下文件 

各目录作用：

_config.yml：网站配置信息，配置参数

themes： 主题文件夹，存放主题

scaffolds：模板文件夹，根据模板文件创建

source：存放资源的文件夹，\_开头的文件会被忽略（\_posts除外），\_posts文件存放md文件（博客文章）

4. 主题安装：git clone -b master https://github.com/jerryc127/hexo\-theme\-butterfly.git themes/Butterfly

   注：自定义主题安装时可以更改github链接和文件名

   主题应用：修改_config.yml文件的theme：Bbutterfly

   把themes/butterfly文件夹中的 _config.yml 复制到博客根目录里，同时重新命名为 _config.butterfly.yml便于后续git pull平滑升级主题

5. 生成静态页面：hexo g

   成功后会在blog目录下生成project文件夹，文件夹中存放页面html

   如果报错安装cheerio：npm install cheerio@0.22.0 –save（hexo 4.2以上的系统需要安装cheerio）

6. 启动服务器：hexo s

   运行localhost:4000

   报错如下：

   安装pub和stylus渲染器：npm install hexo-renderer-pug hexo-renderer-stylus --save

   再次启动服务器运行可查看到正常页面

7. 部署到github

   1. 创建仓库：仓库名建议设置为 github用户名

   2. 配置git（详细内容省略可查阅博客文章）

   3. 上传博客文件到github

      1. 配置_config.yml的repo信息

         deploy:
          type: git
          repo: 仓库地址
          branch: master

      2. 安装插件：npm install hexo-deployer-git –save

      3. 上传代码：hexo d

      4. 刷新仓库网址即可看到自己刚才上传的文件

配置静态站点

点击Settings,下滑到GitHub Pages配置，可以看到已经存在为我们发布了静态的页面username.github.io。

到此一个博客系统已经搭建完成，借用github的服务器存储，后面为博客美化和完善

绑定个人域名

在域名位置添加解析

添加内容如下

记录类型A 主机记录@ 解析线路国外（海外域名选默认） 记录值ip地址（ping bbutterf1y.github.io（github域名）查看ip地址）

记录类型CNAME 主机记录www 解析线路国外（默认） 记录值github域名

保存后配置CNAME：在source目录新建CNAME文件，输入个人域名地址，保存

依次执行hexo clean

hexo g

hexo d 

成功后，查看就可以发现域名已经修改

文章搜索（本地搜索）

插件官方github：https://github.com/wzpan/hexo-generator-search

安装搜索插件：npm install hexo-generator-search --save

配置插件：在博客根目录的_config.yml最后插入下面代码

search:

 path: search.xml

 field: post

 content: true

各参数详解

更改butterfly配置打开本地搜索功能

评论留言

以valine为例 valine官方文档https://valine.js.org/

打开评论功能，在use参数配置所使用的评论，留空为不使用，text参数选择是否选择服务商名字，count选择是否在文章顶部显示评论数

注册Leancloud用来管理评论（https://console.leancloud.cn）在控制台中创建应用，创建完成后，从设置中获得APP ID APP key和REST API 服务器地址

将appid appkey REST API 服务器地址 写入设置文档中

创建其他链接页面（以友链页面为例）

hexo new page link

修改source/link/index.md文件相关参数如下

title: 友情链接

date: 生成时自动生成

type: “link"

comments: 评论

top\_img:顶部图片

其余效果美化查阅butterfly官方文档多为参数选择配置在此不作过多解释

文章的最后是博客写作方法（以.md格式为例）

直接使用md文件即可，在文件顶部用—回车分隔写入文章配置，可配置参数如下

title: 文章标题

date: 文章创建日期

tags: 文章标签

categories: 文章分类

keywords: 文章关键字

description: 文章描述

top\_img: 文章顶部图片

comments: 文章评论模块

cover: 文章缩略图

highlight\_shrink: 代码框是否展开

aside: 显示侧边栏