前言

本教程围绕 Win10 进行
对于Mac或者Linux系统等，可百度或者自行找教程

本教程仅仅是作为个人纪录
如若有兴趣动手按照本教程搭建自己的博客

搭建前，请提前浏览一遍本教程，和重要要点！

前期准备

安装Git

官网链接：https://git-scm.com/
阿里镜像源（下载速度快）：https://registry.npmmirror.com/binary.html?path=git-for-windows/
或通过我提供的文件下载：下载链接

安装时，建议不要修改安装路径，否则会导致后面的批处理脚本出现问题

安装Node.js

官网链接：https://nodejs.org/zh-cn/
或通过我提供的文件下载：下载链接

Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本
使用 Node.js 官方安装程序时，请确保勾选 Add to PATH 选项（默认已勾选）

更换npm镜像源

为了解决速度慢的问题。建议给Node.js换一个镜像源，这里更换的是淘宝的镜像源，代码如下：

1	npm install -g npm --registry=https://registry.npm.taobao.org

安装Hexo

官网链接：https://hexo.io/
或通过我提供的文件下载：下载链接

我提供的 Hexo-cli.bat 双击打开后有两种安装方式

npm : 官方源，如果是在中国大陆访问速度可能有点慢
cnpm : 淘宝的npm镜像源，中国大陆访问速度最快

配置Git用户和ssh密钥

注：如需上传至GitHub或Gitee部署的，需要进行此步骤，其他可跳过

在任意空白地方右键，选择 Git Bash Here 输入下面的命令

1	git config --global user.name "你的用户名"

1	git config --global user.email "你的邮箱"

1	ssh-keygen -t rsa -C "邮箱地址"

引号里对应填入自己的东西
接着在第三个命令后，会出现Enter开头的英文提示，这时候按三次 回车键 即可

配置SSH

SSH文件夹的默认存储位置是 C:\Users\电脑用户名.ssh

在ssh文件夹里，会显示 id_rsa 和 id_rsa.pub 两个文件
id_rsa是私钥，id_rsa.pub是公钥

将 id_rsa.pub 里的内容复制到 GitHub 的 Settings的SSH处

测试连接

完成上一步后可通过下面的这条命令测试是否于GitHub接通了

1	ssh -T git@github.com

Hexo搭建教程

初始化

在你想存放的地方新建一个空文件夹，作为博客的源文件部署地
在此文件夹内右键选择 Git Bash Here 输入下面的命令初始化Hexo
1
hexo init
注：往后所有的操作都基于此文件夹
如果出现了什么问题无法解决，就只能删除
所以修改东西前注意做好备份

接下来就会在此目录下自动生成一些文件，初始化完成

本地调试

在Hexo根目录内右键选择 Git Bash Here 输入下面的命令
即可通过本地默认的4000端口访问进行预览调试

hexo s

或使用我分享里的 本地调试.bat ，双击即可直接运行调试

Butterfly主题教程

Butterfly主题官网：https://butterfly.js.org/
Butterfly项目地址：https://github.com/jerryc127/hexo-theme-butterfly
更多Hexo主题：https://hexo.io/themes/

主题安装

在Hexo根目录内右键选择 Git Bash Here 输入下面的命令

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

接下来就会在此目录下自动下载主题文件到 themes 目录内

配置主题

在 Hexo根目录内创建一个文件 _config.butterfly.yml
并把主题目录内 _config.yml 里面的内容复制到刚刚创建的 _config.butterfly.yml 里面去

注意: 复制的是主题内的 _config.yml，而不是 Hexo根目录的 _config.yml

往后 _config.butterfly.yml 用来配置主题的文件
而 _config.yml 是用来配置Hexo框架等信息内容

启用主题

在Hexo根目录内打开 _config.yml
找到配置项 theme，修改为 theme: butterfly

在Hexo根目录内右键选择 Git Bash Here 输入下面的命令
即可通过本地默认的4000端口访问进行预览

hexo s

懒人教程

此文件包含了第四步、第五步的所内容
可以直接通过我提供的 Hexo程序主文件 下载解压使用下载链接

新建文章&页面

可使用我分享里的 创建文章或页面.bat ，双击即可直接创建
也可以根据下方对应的教程来创建

文章

在Hexo根目录内右键选择 Git Bash Here 输入下面的命令

1	hexo n "文章名称"

Hexo支持实时预览文章页面内容
编写的时候保存文件并刷新浏览器页面就能看到新内容

页面

在Hexo根目录内右键选择 Git Bash Here 输入下面的命令

1	hexo n page "页面名称"

上传网站

提示：可使用我分享里的 上传网站.bat ，双击即可选择上传

新建仓库

优点：
可以绑定自己的域名，也可以强制开启HPPTS
总体容量无限制，单个仓库推荐最大1G

缺点：
GitHub的服务器在国外，有时可能会访问不到、过慢或需要挂梯子
私有库需要付费使用
源代码完全公开，安全性略差

打开 Github 官网并登录，点击右下角头像旁边的加号
选择 New Repository（新建仓库）

1、如果作为网站使用，仓库名称格式必须为：你的Github用户名.github.io
2、选择 Public（公开）
再点击 Create Repository 按钮完成创建

优点：
Gitee的服务器在国内，在国内访问的速度会很快
仓库出现问题，可快速联系管理员处理
私有库是免费的

缺点：
绑定域名属于付费内容
仓库、内容容易误封
涉及政治内容容易误封

打开Gitee官网并登录，点击右下角头像旁边的加号
选择新建仓库

如果作为网站使用，仓库名称需要和你的用户名一样
Gitee Pages没有限制，开源和私有都能使用
点击创建按钮完成创建

安装插件

在Hexo根目录内右键选择 Git Bash Here 输入下面的命令
即可安装Git部署插件

1	cnpm install --save hexo-deployer-git

_config.yml配置

将下方左侧图的 url： 的链接改成：你的GitHub用户名.github.io
再找到下方右侧图的 repo: 把SSH地址粘贴进去

将下方左侧图的 url： 的链接改成：你的gitee用户名.gitee.io
再找到下方右侧图的 repo: 把SSH地址粘贴进去

部署网站

在Hexo根目录内右键选择 Git Bash Here 安装顺序输入以下命令

清除缓存
1
hexo clean
生成静态文件
1
hexo g
部署到远端
1
hexo d

打开下载好我分享内的 上传网站.bat
双击即可选择上传方式

1：没有清除缓存的文件，一般用于文章发布等小推送
2：包含了清除缓存、生成更新站点地图命令行，适用于修改了主题文件、配置等重大改动的推送

注意: 使用bat脚本，第一次上传会让你记住主机，输入 yes 继续

报错案例

若遇到报错，请一个一个排查
更多报错案例请移步：Butterfly

本地预览出错

extends includes/layout.pug block content include ./includes/mixins/post-ui.pug #recent-posts.recent-posts +postUI include includes/pagination.pug

没有 pug 以及 stylus 的渲染器

解决方法：

在Hexo根目录内右键选择 Git Bash Here 输入下面的命令

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

或

yarn add hexo-renderer-pug hexo-renderer-stylus

push后出错/缺失/无效

本地可以正常运行，但是push上去后出错/缺失/无效

解决方法：

清理浏览器缓存
如果上方方法无效，请确认上传时是否有运行 hexo clean

博主使用的插件

命令普及

查看已安装插件
1
npm ls -dept 0

安装、卸载插件

npm install 插件名 --save
//安装插件

npm uninstall 插件名 --save
//卸载插件

已装插件表

插件名	插件名	说明
hexo-deployer-git	插件链接	适用于Hexo的Git部署程序插件
hexo-generator-search	插件链接	为 Hexo 博客添加本地搜索功能
hexo-renderer-kramed	插件链接	为 Hexo 博客插入数学公式
hexo-wordcount	插件链接	为 Hexo 博客添加字数统计和阅读统计
hexo-generator-feed	插件链接	为 Hexo 博客添加RSS订阅-xml地图
hexo-generator-sitemap	插件链接	为 Hexo 博客生成站点地图
hexo-generator-baidu-sitemap	插件链接	专门为百度生成站点地图
hexo-helper-live2d	插件链接	为 Hexo 博客添加live2d动态模型
hexo-githubcalendar	插件链接	基于 Hexo 的github贡献插件
hexo-filter-nofollow	插件链接	自动为站内链接加上nofollow跳转
hexo-butterfly-artitalk	插件链接	为 Hexo 博客添加说说页面
hexo-blog-encrypt	插件链接	实现对文章的加密