1.软件安装

博客网站开发框架： nodejs –>hexo –> butterfly

hexo这个框架基于hodejs开发的，hexo可以根据不同的主题生成不同风格的博客静态网站；

开发环境工具：git –>vscode –> github、gitee

通过git版本管理工具管理github或者gitee平台上的hexo生成的网站代码，开启github/gitee平台的pages(网站)功能，免费发布个人博客。

2. 安装Hexo，配置网站信息

1.安装hexo脚手架

1
2
3
4
5
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

2.配置根目录的 _ config.xml，修改网站资料(区分于主题配置文件 _config.butterfly.yml )

1
2
3
4
5
6
7
8
9
# Site
title: # 网站标题 主页标语 导航的标题
subtitle: ''
description: # 个人标签的描述
keywords: #
author: # 作者
language: # 国际化
timezone: ''
email: #邮箱

3.集成配置主题butterfly

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

1
theme: butterfly

2.如果你沒有 pug 以及 stylus 的渲染器，下载安裝：

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

3.在hexo跟目录下，把主题butterfly拉取至hexo项目themes目录, 升級方法：在主題目录下，運行 git pull

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

目录结构：

4.在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 內容复制到 _config.butterfly.yml 去。( 注意: 复制的是主题的 _config.yml ，而不是 hexo 的 _config.yml)【cp themes/butterfly/_config.yml _config.butterfly.yml】

4.配置主题配置文件

1.按自己需求在_config.butterfly.yml 文件更改配置内容（官网配置：https://butterfly.js.org/posts/4aa8abbe/）

配置内容 网站对应效果
1.语言 网站文字
2. 网站资料 {width=30%;height=auto}
3. 导航栏设置
4. 代码
5. 社交图标
6. 顶部图、文章封面
7. 页面meta显示
8. 主页文章节选
9. 页面锚点
10. 图片描述
11. 复制相关配置
12. 文章页相关配置
13. Footer 设置
14. 侧边栏设置
15. 右下角按钮
16. 标签外挂

5.高级配置主题配置文件

1.按需求在_config.butterfly.yml文件添加对应功能配置（官网配置: https://butterfly.js.org/posts/ceeb73f/）

配置内容 网站对应效果
搜索
分享
评论
美化/特效
数字统计
图片放大器

6.新建github仓库，激活 pages

1.URL 规则发布用户站点，必须要先建立仓库（repository），仓库名必须与用户名保持一致，即<username>.github.io

2.在仓库的设置界面，选择需要作为内容发布的分支，激活pages，如下图：

3.主题配置文件需要配置如下：

1
2
3
4
5
deploy:
 -  type: git
    repo: https://github.com/<username>/<username>.github.io.git
    branch: master
 -  type: baidu_url_submitter # seo检索优化

通过hexo depoly命令把public推到github的master分支上：

4.申请域名，挂载在你的github pages网址上；