给博客使用Butterfly主题并部署到GitHub服务器

欢迎访问我的个人博客，传送门。

目录

前言

一、安装Butterfly主题

二、将本地博客部署到GitHub服务器

三、将个人域名与GitHub绑定

---

前言

安装完Hexo框架后，自带的主题在thems文件夹下可以查看，应用后界面：

Hexo提供了290+主题，点击可前往官网访问：Hexo主题 

我选择的主题是 Butterfly ，安装后的界面如下：

图源：Butterfly官方Github   我的个人博客：XJHui'S BLOG

一、安装Butterfly主题

1、可供选择的版本

注意：两个版本供使用者选择，我首次安装的是第二个开发版，虽是开发版但装完还没发现什么Bug，教程就以开发版为例。

2、命令行安装主题

sudo su //进入root账户

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

安装成功：

注意：如果此过程报错，可能是git的问题，请翻看 上篇文章 或自行百度解决。

3、修改配置

说明：主题安装完成后并不会自动应用，要修改框架下的_config.yml配置文件。

①进入安装Hexo框架的文件夹（文件夹名称未必为blog，取决于安装的位置）：

cd blog/

注意：查看blog文件夹中包含的文件是否与下图相同，否则代表进错文件夹了。

②修改配置文件：

vim _config.yml

错误：原因是未安装vim,，执行 apt install vim 后继续输入上面命令。

往下翻找到thems，将其后面的文字修改为Butterfly（与前面thems之间有一个空格）

注意：需要vim基础，用ubuntu先把基础的vim学好233333333。

4、将Butterfly的配置文件移动到source/_data下

说明：这样是为了让主题更平滑，Butterfly 使用了 data files特性（可乐不加冰），移动后平滑效果可能更好（个人猜测）。

mkdir source/_data //创建文件夹
cp themes/Butterfly/_config.yml source/_data/butterfly.yml //复制并重命名

注意：以后的配置修改都是基于butterfly.yml。

5、测试配置是否修改成功

hexo clean
hexo g //报错看错误1
hexo s //报错看错误2

浏览器输入localhost:4000查看主题是否应用成功

错误1：

解决方法：在 Butterfly主题官方GitHub主页 给出了解决方案

npm install [email protected] --save //如果使用cpnm可能更快

错误2：

解决方法：cyw1227（需要安装pug以及stylus的渲染器，安装速度有点慢耐心等待）

npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

安装成功：

注意：上图即为Butterfly原始样式，未对配置文件做任何修改。

 

二、将本地博客部署到GitHub服务器

说明：仅本地访问博客远远不能满足我们的需求，实现远程访问离不开将其部署到服务器上，服务器可以购买云服务器也可选用其它例如GitHub提供的免费服务器。

1、准备GitHub仓库

①新建仓库（如果你已经创建了该仓库请务必备份数据，因为仓库内原始数据会被覆盖，然后跳至第③步）

②输入新仓库信息

注意：填写的域名信息格式必须为：用户名.github.io 否则即使创建成功也不可使用。

③安装git插件

cnpm install --save hexo-deployer-git

注意：如果未安装cnpm会报错，可以用npm代替上面命令中的cnpm。

④修改配置文件

vim _config.yml 

翻到最底部：按照下图修改，repo填写自己的url。

⑤部署到远端

hexo clean //依次执行这三个命令，不建议直接执行hexo d
hexo g
hexo d

错误1：

解决方法：

npm install --save hexo-deployer-git  

感谢：乔小乔jojo

错误2：原因：git未配置邮箱和名字

解决方法：

git config --global user.name "yourname"  //自己的用户名
git config --global user.email "[email protected]"  //自己的邮箱

错误3：GitHub上未配置公钥

图源：没没没没没没没

解决方法：

ssh-keygen -C '你的邮箱账号@163.com' -t rsa //一路回车
vim ~/.ssh/id_rsa.pub      //复制里面的密钥

注意：SSH key title 任意。感谢：王雨城

⑥推送完成

浏览器输入：https://用户名.github.io 即可访问。

错误：报错404 

①如果未绑定个人域名，按照下图操作：

②已绑定个人域名，按照下图操作（亲测可行）：

感谢：半缘青荇

三、将个人域名与GitHub绑定

说明：GitHub提供的域名太长，可以自己购买喜欢的域名与之绑定。阿里云购买的域名为例（XJH'S BLOG）

2、进入 阿里云 依次点击：域名-》解析

3、添加两条记录，分别为：

添加完成后如下图：

4、进入GitHub，添加 CNAME 文件：

输入file名称和域名点击保存：

强烈建议： 在博客根目录中的source文件夹下新建CNAME文件（操作如下图），能避免每次提交后CNAME文件被覆盖。

step1：source文件夹下新建CNAME文件

step2：记事本打开输入个人域名

5、修改GitHub设置：

①进入项目的设置（如图）：

②GitHub Pages下添加自己的域名：

感谢：Mr_XQ

就可以使用自己的域名远程访问搭建好的博客啦。

新手操作，不足请留言评论。

下一篇：短短1天我学会了如何修改Butterfly的配置文件