个人博客搭建记录 Hexo+Butterfly+Github Page+Coding

1、前言

其实一直有搭建博客的想法，但直到今天才开通了第一个博客，还是利用上假期的闲工夫。在大佬们博文的帮助下，小站初具模样，这里对他们致以万分感谢。下面就搭建过程进行简单记录。点击前往我的小站🙏

2、前提准备

2.1、简介

• Hexo 是一款基于 Node.js 用于快速搭建博客的框架，有了它就可以完成完成个人博客的构建，它会帮你构建博客的整个框架，你只需要会使用Markdown 写博客即可。关于Hexo的具体介绍，可以在其官方网站查看具体的说明。
• Butterfly 博客主题。A Simple and Card UI Design theme for Hexo.
• Github Page 是 Github 提供的静态网站托管服务，可从 Github 仓库中展示你的个人、组织或者项目的静态网页。你可以选择使用 Github Pages 免费提供的域名 github.io 或者自己购买域名来发布站点，站点可以被免费托管在 Github 上。使用Github Pages可以为你提供一个免费的服务器，免去了自己搭建服务器和写数据库的麻烦。
• Codiing 是一站式软件研发管理协作平台，提供 Git/SVN 代码托管、项目协同、测试管理等工具，将博客托管在coding上，可提高国内访问博客的速度。
• Git 是目前世界上最先进的分布式版本控制系统（没有之一）。这里我们使用git bash 完成安装，初始化，上传等操作。
• node.js 是一个基于Chrome V8引擎的JavaScript运行环境。安装好node.js后利用npm包管理工具来安装Hexo

2.2、安装Git

在windows10系统下，前往Git官网下载，安装。其他系统下的Git安装方法可在hexo的文档中查阅。

安装正确的话，在桌面或文件夹空白处鼠标右键菜单会新增“Git GUI Here”和“Git Bash Here”两个选项。

Git 常用命令

git clone -b <branch> https://github.com/xxxx/xxxx.git
git pull
git add .
git commit -m 'comment'
git push

2.3、 安装node.js

前往node.js官网 选择长期支持版本的node.js下载，默认路径安装即可。

在cmd中输入命令

npm --version

出现版本信息则表示安装成功。

2.4、安装Hexo

完成前两个应用的安装后，即可使用npm安装Hexo

在桌面空白处单击右键，打开git bash，输入Hexo安装命令

npm install -g hexo-cli

因为npm是从国外服务器下载，可能出现异常，速度慢等问题，所以有更好的选择

淘宝NPM镜像

这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

其安装命令

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

之后可以使用其定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

cnpm install -g hexo-cli

下载速度快了不少有没有

检查Hexo是否安装成功

hexo -v

出现版本信息则表示安装成功。

安装好以后，可以使用以下两种方式执行 Hexo：

1. npx hexo <command>
2. 将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用 hexo <command>

3、搭建工作

3.1、初始化

这里在E盘下新建一个目录Blog,用来存放相关文件。在此处打开 Git Bash

hexo init

注意：若没有把Hexo添加到环境变量，在所有命令中的 hexo 前都要加上 npx

命令执行完成后，将在E:\Blog\下生成相应的文件，目录如下：

主要关注的是：

• _config.yml , 配置文件，在此配置大部分参数
• source/_posts , 存放md文件
• themes , 主题文件夹

3.2、生成静态页面(本地)

可通过以下命令生成静态页面:

hexo g

完成后会在根目录E:\Blog\下生成public文件夹，里面包含相应的html页面。

3.3、启动服务器(本地)

可通过以下命令启动服务器:

hexo s

这条指令运行完成后可在本地启动服务器并预览博客，默认网址为http://localhost:4000/。
如果以上步骤都不出意外的话，你就会看到一个Hexo博客初始化的页面。

4、更换主题

默认的主题可能并不是我们想要的效果，那么就可以通过更换主题来实现。可以在Heox官网的主题页面选择想要的主题。这里，选择Butterfly主题。

Butterfly主页的展示页面：https://jerryc.me

详细的安装文档的地址为：https://jerryc.me/posts/21cfbf15

Github地址：https://github.com/jerryc127/hexo-theme-butterfly

根据文档说明直接配置主题即可，这里简单记录如下：

Butterfly主题安装

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

应用主题

修改站点配置文件_config.yml，把主题改为butterfly

theme: butterfly

为方便后续设置，这里把butterfly 目录下的 _config.yml 配置文件复制到 Blog 目录下，并重新命名为 _config.butterfly.yml。以后对主题的相关设置只需要在 _config.butterfly.yml进行配置就行。

安装相关插件

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

在安装，应用主题时遇到的问题可在bufferfly的安装文档中查阅。

在一定修改后通过以下命令来查看应用主题后的初步效果

hexo clean  #清楚缓存文件
hexo g  #生成发布用的静态页面
hexo s  #重启本地服务器

刷新刚才的网址：http://localhost:4000 ，可以看到更新后的主题:

更多细节设置，如菜单栏，背景图片，代码格式等等，可以参考Butterfly的文档来配置。

5、部署到Github

截止目前，已经成功安装好了一个初始化的Hexo博客。但是暂时还只能在自己电脑上看到，如何让别人通过域名可以访问到呢？接下来就要请出今天的另外一位主角GitHub Pages了。
另外，以上的安装步骤也可参考Hexo官方文档，关于各命令有更详细的解释。

5.1、创建Github仓库

这里假设已经注册过了Github帐户，如果没有，可以去Github注册。

注册好了后，登录Github,创建仓库：点击右上角的+号，选择new repository

将仓库名设置为 username.github.io ,其中,username请对应换成你的github用户名。

5.2、添加SSH公钥

如果第一次使用git的话，需要设置用户名和邮箱:

git config --global user.name "your username"
git config --global user.email "your email"

将上述的”your username”换成自己的真实用户名,”your email”换成真实的email。

然后，生成公钥

ssh-keygen -t rsa

在C盘/用户/用户名/.ssh目录下找到id_rsa.pub文件,用文本编辑工具打开，并复制所有文本内容。在Github页面右上角，点击用户头像-Settings-SSH and GPG keys-New SSH key

把复制的公钥文本内容粘贴到Key中，上方的Title可随意填写

添加完成后可

ssh -T git@github.com

如果配置成功，可以看到成功的回复。

5.3、上传文件到Github仓库

在配置文件_config.yml中添加仓库信息:

deploy:
  type: git
  repo: #你的仓库地址,如:https://github.com/wawyw/wawyw.github.io.git
  branch: master

直接通过hexo来发布到github，需要安装以下插件：

npm install hexo-deployer-git --save

安装成功后，执行以下命令：

hexo d   #生成一个.deploy_git的文件夹，并把本地生成的静态文件部署Github仓库中的master分支上

刷新github对应的repository页面，即可看到提交的内容：

5.4、配置静态站点

点击Settings, 进入GitHub Pages配置，由于之前新建仓库的时候，仓库名为username.github.io，github已经自己为我们发布了静态的页面。如果不是username.github.io的格式，则需要手动配置。

之后在浏览器中输入username.github.io（可能你已经发现了，这个就是之前新建仓库的名字，同时也是博客的域名），没毛病的话，应该可以再次看到那个熟悉又亲切的博客页面了。

至此，我们已经通过Hexo创建了一个最原始的博客，并且通过把博客静态文件放到GitHub的仓库中，实现了从网上以GitHub的默认域名访问这个博客。

如果需要个性化域名，则需要申请对应的域名并绑定到Github上。

因为Github用的是国外的服务器，站点加载速度可能较慢，可考虑使用GitHub+coding双托管博客，这样一来，国内访问coding的服务器，国外访问GitHub的服务器，以提升国内访问博客的速度。

6、 部署到Coding

6.1、创建Coding仓库

同样，先官网注册

选择项目，新建一个代码托管项目

填写完项目基本信息后，完成创建

6.2、添加SSH公钥

找到之前部署到Github时生成的id_rsa.pub 文件，复制其内容。

打开Coding的个人设置，SSH公钥，添加公钥，名称自定，粘贴刚才复制的公钥，添加好后如下图。

6.3、上传文件到Coding仓库

打开新建的仓库，点击克隆➡模式选ssh➡复制地址，将仓库链接添加到站点的配置文件 _config.yml 中

修改完之后 hexo d 部署就会将 public 目录推送到 Coding 上博客仓库的 master 分支。部署后仓库如下：

6.4、配置静态站点

把博客上传部署到仓库后，我们还要在Coding生成静态页面。

进入仓库，进入项目设置（注意这个在左下角），项目与成员，右侧功能开关，开启 持续部署即可

开启后就会在仓库的左侧看到此功能，点击静态网站，新建网站，填写网站名称，其它默认，保存。

开启服务后会出现访问地址，如下图：

访问此地址后会跳转到你的博客首页。与GitHub部署类似，此网址相当于你博客的另一个访问地址。我们后面要把所有的这些网址都解析到同一个域名上。

7、绑定个人域名

配置好Github和Coding的静态页面后，已经可以通过给定的网址访问到博客页面了。如果需要个性化域名，则需要申请对应的域名并绑定到Github和Coding上。

7.1、注册域名

注册域名的平台有很多可以选择，这里以阿里云为例。

来到万网平台，查询可注册的域名

挑选喜欢的域名，加入清单→立即结算→立即购买

这里选择的是.top 域名，你懂的😂

7.2、解析域名

登录阿里云的控制台，点击左侧菜单-域名，进入域名管理页面。

在域名列表中，找到需要解析的域名，点击对应的解析按钮。

点击”添加记录”

7.2.1、@解析-Github

在cmd窗口中，ping一下之前配置的Githun的静态页面地址

可以获取到对应的ip地址

添加记录编辑如下：

• 记录类型选择A，添加 A 记录可实现将域名指向 IP 地址。
• 主机记录输入@，一般是指子域名的前缀（如需创建子域名为www.dns-example.com, 主机记录输入 www；如需实现dns-example.com，主机记录输入 @）
• 解析线路选择境外,因为我们是准备国内访问时访问到Coding，国外访问时访问到Github
• 记录值输入刚才获取到的ip地址,如:185.199.110.153

7.2.2、www解析-Github

添加记录编辑如下：

• 记录类型选择CNAME,添加 CNAME 记录可实现将域名指向另外一个域名。
• 主机记录输入www
• 解析线路选择境外
• 记录值就输入Github的静态页面地址,即 wawyw.github.io

7.2.3、@解析-Coding

在cmd窗口中，ping一下之前配置的Coding的静态页面地址

可以获取到对应的ip地址

添加记录编辑如下：

• 记录类型选择A
• 主机记录输入@
• 解析线路选择默认
• 记录值输入刚才获取到的ip地址,如:124.156.144.32

7.2.4、www解析-Coding

添加记录编辑如下：

• 记录类型选择CNAME
• 主机记录输入www
• 解析线路选择默认
• 记录值就输入Coding的静态页面地址

最后配置完成如下图：

7.3、绑定域名

7.3.1、Github域名绑定

在项目根目录-source目录下，新建CNAME文件,内容输入前面申请的域名，如:www.wawyw.top

上传到Github和Coding的仓库

hexo clean
hexo g
hexo d

上传后就可以在Github和Coding对应的项目根目录下发到提交到的CNAME文件。

由于提交了CNAME文件，Github的静态页面服务已经自动绑定了新提交的域名

这时，就可以用上面自定义的域名访问我们的博客了。

7.3.2、Coding域名绑定

回到Coding仓库的静态网站设置页面，选择自定义域名→新建域名

注意：一定要添加两条，一条带www.的，一条不带www.的

添加后会给出两条CNAME记录，需要回到阿里云控制台的解析设置中修改对应的记录值

OK！现在我们就算完成了GitHub+Coding双托管博客了

这样国内的用户访问的就是coding上部署的博客，而国外的用户访问的就是github上部署的博客

7.4、国内测速对比

测速网站：http://ping.chinaz.com/

国内访问GitHub服务器：

国内访问Coding服务器：

一对比我们就可以看到Coding服务器在国内访问快多了，而GitHub服务器在国内访问有很多都是超时，速度提升较明显。

不过，在后面体验过CDN加速后，这又算得了啥，先上图

这里选择了腾讯云的CDN加速服务，新用户可以白嫖6个月的流量哟。又拍云的CDN也不错，更多详情可以去官网了解。（前提要做好网站的备案工作）

8、写博客

创建页面命令

hexo new page page_name

这里在source/_posts 目录下以markdown 的格式编辑博客文章。

Front-matter

Front-matter 是md文件最上方以---分隔的区域，用于指定每篇博客的信息。

如果标注可选的参数，可根据自己需要添加，不用全部都写在markdown里

Page Front-matter

---
title:
date:
updated:
type:
description:
comments:
top_img:
---

写法	解释
title	【必需】页面标题
date	【必需】页面创建日期
type	【必需】标签、分类等页面需要配置
updated	【可选】页面更新日期
description	【可选】页面描述
comments	【可选】显示页面评论模块(默认 true)
top_img	【可选】页面顶部图片

Post Front-matter

---
title:
date:
updated:
tags:
categories:
top_img:
cover:
aplayer:
sticky:
---

写法	解释
title	【必需】文章标题
date	【必需】文章创建日期
updated	【可选】文章更新日期
tags	【可选】文章标签
categories	【可选】文章分类
top_img	【可选】文章顶部图片
cover	【可选】文章封面
sticky	【可选】文章置顶，数值越大，置顶的优先级越大。

博客编辑完成后，仍然是通过这三步发布文章

hexo clean
hexo g
hexo d

发布之前，在本地预览博客用到的命令：

hexo s

9、结语

总的来说，这次的搭建过程还算顺利，期间遇到的一些问题也通过浏览大佬的文章解决了，感谢他们的分享。网络上关于利用Hexo搭建博客的资料有很多，写这篇文章主要是为了记录此次搭建博客的过程，便于后续可能再次部署，同时也希望能帮助到有需要的朋友。完结撒花~~

参考资料

[1] Hexo文档

[2] Butterfly 安装文档

[3] GitPages + Hexo,从0到1搭建个人博客

[4] Hexo+Butterfly+Github+Coding搭建个人博客

[5] Hexo在GitHub和Coding双线部署教程