Hexo+Github+Butterfly搭建博客
Hexo+Github+Butterfly搭建博客
一、前言
使用github pages服务搭建博客的好处有：
- 全是静态文件，访问速度快；
- 免费方便，不用花一分钱就可以搭建一个自由的个人博客，不需要服务器不需要后台；
- 可以随意绑定自己的域名，不仔细看的话根本看不出你的网站是基于github的；
- 数据绝对安全，基于github的版本管理，想恢复到哪个历史版本都行；
- 博客内容可以轻松打包、转移、发布到其他平台；
二、前期准备
在开始一切之前，你必须已经：
- 有一个github账号
- 安装了node.js、npm，并了解相关基础知识
- 安装了git for windows
本文所使用的环境：
- windows10
- node.js@14.17.6
- git version 2.29.2.windows.2
- hexo@6.3.0
三、Github创建仓库并配置SSH Key
1.创建仓库
新建一个名为 “用户名.github.io”的仓库，比如你的github用户名为test，那么创建一个名为“test.github.io”的仓库，将来访问的地址就是http://test.github.io了。
由此可见每一个github账户最多只能创建一个这样可以直接使用域名访问的仓库。而使用Github创建个人博客的本质其实就是将html、CSS、JS文件托管在github上，然后使用hexo管理并访问该仓库。
2.绑定域名
当然也可以不绑定域名，就使用默认的xxx.github.io来访问，如果需要创建自己的域名，需要去购买注册。推荐godaddy或者国内的阿里云。
绑定域名分两种，带www和不带www的，域名配置最常见有2种方式，CNAME和A记录，CNAME填写域名，A记录填写IP，由于不带www方式只能采用A记录，所以必须先ping一下“xxx.github.io”的IP，然后到你的域名DNS设置页，将A记录指向你ping出来的IP，将CNAME指向“xxx.github.io”，这样可以保证无论是否添加www都可以访问。另外说一句，在你绑定了新域名之后，原来的“xxx.github.io”并没有失效，而是会自动跳转到你的新域名。
3.配置SSH Key
为什么要配置这个呢？因为你提交代码肯定要拥有你的github权限才可以，但是直接使用用户名和密码太不安全了，所以我们使用ssh key来解决本地和服务器的连接问题。这里就牵扯到公钥和私钥的问题，想了解的朋友可以去查询相关资料。
cd ~/.ssh 1 # 检查本机已存在的ssh密钥 |
如果提示：No such file or directory 说明你是第一次使用git。
ssh -keygen -t rsa -C "邮件地址" |
然后连续3次回车，最终会生成一个文件在用户目录下，打开用户目录，找到.ssh\id_rsa.pub文件，记事本打开并复制里面的内容，打开你的github主页，进入个人设置 -> SSH and GPG keys -> New SSH key： 将刚复制的内容粘贴到key那里，title随便填，保存。
4.测试是否成功
ssh -T git@github.com # 注意邮箱地址不用改 |
如果提示Are you sure you want to continue connecting (yes/no)? ，输入yes，然后会看到：
Hi "github用户名"! You've successfully authenticated, but GitHub does not provide shell access.
看到这个信息说明SSH已配置成功！此时你还需要配置：
git config --global user.name "Laterfate" # github的用户名 |
四、使用HEXO写博客
1.Hexo简介
Hexo是一个简单、快速、强大的基于 Github Pages 的博客发布工具，支持Markdown格式，有众多优秀插件和主题。
官网：http://hexo.io
github：https://github.com/hexojs/hexo
2.原理
由于github pages存放的都是静态文件，博客存放的不只是文章内容，还有文章列表、分类、标签、翻页等动态内容，假如每次写完一篇文章都要手动更新博文目录和相关链接信息，相信谁都会疯掉，所以hexo所做的就是将这些md文件都放在本地，每次写完文章后调用写好的命令来批量完成相关页面的生成，然后再将有改动的页面提交到github。
注意事项：
- 很多命令既可以用Windows的cmd来完成，也可以使用git bash来完成，但是部分命令会有一些问题，为避免不必要的问题，建议全部使用git bash来执行；
- hexo不同版本差别比较大，网上很多文章的配置信息都是基于2.x的，所以注意不要被误导；
- hexo有2种
_config.yml文件，一个是根目录下的全局的_config.yml，一个是各个theme 下的；
3.安装并初始化
npm install 1 -g hexo # -g表示全局安装 |
在电脑的某个地方新建一个名为hexo的文件夹（名字可以随便取），比如我的是F:\BLOG\Hexo ，由于这个文件夹将来就作为你存放代码的地方，所以最好不要随便放。
cd /F/BLOG/Hexo/ |
hexo会自动下载一些文件到这个目录，包括node_modules。
hexo g # 生成本地文件 |
执行以上命令之后，hexo就会在public文件夹生成相关html文件，这些文件将来都是要提交到github去的。
hexo s 是开启本地预览服务，打开浏览器访问 http://localhost:4000 即可看到内容，很多人会碰到浏览器一直在转圈但是就是加载不出来的问题，一般情况下是因为端口占用的缘故，因为4000这个端口太常见了，解决端口冲突问题请参考这篇文章：http://blog.liuxianan.com/windows-port-bind.html
第一次初始化的时候hexo已经帮我们写了一篇名为 Hello World 的文章，默认的主题比较丑。
4.修改主题
既然默认主题很丑，那我们别的不做，首先来替换一个好看点的主题。这是官方主题链接：https://hexo.io/themes/。
下载主题方式(以butterfly为例)：
cd /F/BLOG/Hexo |
下载后主题都在themes文件夹内。修改_config.yml 中的theme: landscape 改为theme: butterfly ，然后重新执行hexo g 来重新生成。
如果出现一些莫名其妙的问题，可以先执行hexo clean 来清理一下public的内容，然后再来重新生成和发布。
5.上传到Github
如果你一切都配置好了，发布上传很容易，一句hexo d 就搞定，当然关键还是你要把所有东西配置好。首先，ssh key肯定要配置好。其次，配置_config.yml 中有关deploy的部分：
deploy: |
此时直接执行hexo d 的话一般会报如下错误：
Deployer not found: github 或者 Deployer 1 not found: git |
原因是还需要安装一个插件：
npm install hexo-deployer-git --save |
部署这个命令一定要用git bash，否则会提示Permission denied (publickey).
打开你的git bash，输入hexo d 就会将本次有改动的代码全部提交，没有改动的不会。
6.常用Hexo命令
hexo new "postName" #新建文章 |
上述命令一般可缩写成：
hexo n == hexo new |
本地写完博客，一般上传流程是：
hexo g # 生成刚写完的博客的相关文件 |
8.Hexo文件夹解析
|— .deploy_git
|— .github
|— .node_modules
|— public
|— scaffolds
|— draft.md
|— page.md
|— post.md
|— source
|— _posts
|— _data
|— categories
|— etc. pages
|— themes
|— butterfly
|— source
|— _config.yml
|— .gitignore
|— _config.landscape.yml
|— _config.yml
|— db.json
|— package.json
|— package-lock.json
.deploy_git：.deploy_git：将public文件夹的内容提交到Github后生成，内容与public文件夹基本一致, 本人还没试过。关系大致是：source -> public -> .deploy_git 执行hexo generate，根据source，更新 public。执行hexo deploy，根据public，更新 .deploy_git。了解了这三个文件夹的关系，也就了解为什么自定义域名需要添加的 CNAME 文件要在 public 文件夹下创建了。
.node_modules：存储Hexo需要的其他node.js模块，以后安装的hexo相关模块也放在这里。框架的基本参数信息和它所依赖的插件，在 npm 安装时使用 –save 保存进去
public：public文件夹是hexo g 编译生成静态文件后自动生成的。将source文件夹里的Markdown文档，转换成index.html。再结合主题进行渲染成我们最终看到的博客。hexo clean会清除 db.json 和 public 文件夹下的所有文件。
scaffolds：本意是 “脚手架” 的意思，这里引申为模板文件夹，包含page，post，draft三种模板，分别对应 页面、要发布的文章、草稿。当你 hexo new <layout(布局)> <title>的时候，Hexo 会根据该文件夹下的对应文件进行初始化构建。
source：资源文件夹。存储直接来自用户的文件, 用来存放图片、Markdown文档（文章、草稿）、各种页面（分类、关于页面等）。
themes:主题文件夹，存储主题。每一个主题，都有一个单独的文件夹。默认主题为landscape，其它主题可以在 Github 上免费下载使用。
_config.yml文件：网站的全局配置文件，设置包括网站标题、作者和描述信息等，hexo的官方教程参照https://hexo.io/zh-cn/docs/configuration 。 在根目录和每个theme目录下都会有，这里面都是一些全局或各自主题的配置，每个参数的意思都比较简单明了，因为博主用的是butterfly，butterfly的官方教程可参考：https://butterfly.js.org/posts/dc584b87/。 需要特别注意的地方是，冒号后面必须有一个空格，否则可能会出问题。
db.json:hexo g后生成的临时文件存储在这里，public中也会有相同内容。
package.json：用来查看Hexo的版本以及相关依赖包的版本。新安装的依赖包，也会保存在node_module文件夹下。
package-lock.json：锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致。
五、写博客
1.新建博文
定位到hexo根目录，执行命令：
cd /F/BLOG/Hexo/ |
hexo会根据模板(post_formatter)scaffolds/post.md帮我们在/source/_posts下生成相关的md文件(整个博客所有的博文都在这个文件夹下)，我们只需要打开这个文件可以写博客了，一般会默认生成一些内容(根据post_formatter)。post_formatter格式如下，是scafflods/post.md中固定的。我们只需要根据填入 categories，就可以实现自动分类！**注意：categories要用””，且前面空一格！这个文章分类类别随意写，但最好统一一下，博主就在source/_posts/**下建了一个可选types.txt，每次都可以参考。
--- |
那么hexo new page 'postName' 命令和hexo new 'postName' 有什么区别呢？前一个是在hexo/public/下生成postName目录，目录中还有index.html文件，但是它不会作为文章出现在博文目录。也就是说博文都在Hexo/source/下。
2.发布博文
写好MD文件后，在hexo根目录下打开Git bash：
hexo g # 根据MD博文生成静态网页文件至public等中 |
3.如何让博文列表不显示全部内容
默认情况下，生成的博文目录会显示全部的文章内容，如何设置文章摘要的长度呢？
答案是在合适的位置加上 即可，例如：
# 前言 |
六、有用的网站
参考：http://www.cnblogs.com/zhcncn/p/4097881.html
Hexo官网教程：https://hexo.io/zh-cn/docs/configuration.html
Hexo github：https://github.com/hexojs/hexo
butterfly github：https://github.com/jerryc127/hexo-theme-butterfly
butterfly官网教程：https://butterfly.js.org/posts/dc584b87/
文章封面图：https://www.pexels.com/zh-cn/
顶部图：https://wallroom.io/
图标名：https://fontawesome.com/icons?from=io
图床：https://imgse.com/