只需一个github账号从0到1使用hexo博客框架和Butterfly主题搭建一个属于自己的博客 (无需云服务器)

前言

最近在网上经常刷到各种博客和个人主页，看着就挺手痒的，突然想起来以前大学的时候也做了一个博客，不过后来因为上班之后就没时间去更新和维护了，直到现在也只是个半成品，最近公司假期放得比较多，想着要不就重新搭建一个新的博客吧，正好也能写一篇文章（水一篇文章）

什么是hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

hexo常用指令

在开始搭建之前，建议先了解几个常用指令，这对后面的安装调试都非常有帮助 (资料来源官方)

hexo init [folder] # 新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。
hexo new [layout] <title> # 新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。
hexo generate # 生成静态文件
hexo server # 启动服务器。默认情况下，访问网址为： http://localhost:4000/
hexo deploy # 部署网站。
hexo clean # 清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

这里只是几个比较常用的指令，并没有详细说明使用方法，详细说明请到官方文档查询，这里也把官方链接贴出来
1
https://hexo.io/zh-cn/docs/commands

环境安装

安装前提

Github账号（用于网页搭建使用）
Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
Git

如果您的电脑中已经安装上述必备程序，那么恭喜您！你可以直接前往安装 Hexo 步骤。
如果您的电脑中尚未安装所需要的程序，请根据以下安装指示完成安装。

安装NodeJS和Git

打开浏览器，这里我用的是微软的Edge，在地址栏复制以下链接粘贴回车安装包将会开始下载，下载完成之后打开一路下一步安装即可

1 2	https://npmmirror.com/mirrors/node/v20.14.0/node-v20.14.0-x64.msi https://mirror.ghproxy.com/https://github.com/git-for-windows/git/releases/download/v2.45.2.windows.1/Git-2.45.2-64-bit.exe

测试安装是否完成

安装完成之后右击Windows徽标，选择终端打开输入node -v和git -v，如果能跳出版本号的话就是安装成功了（如图所示）

安装hexo框架

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo，这里可以提前准备一个代码编辑器，我使用的是来自微软的VSCode，选择提前准备好存放代码的位置，右击用code打开，一般打开之后底下会弹出一个终端，这时候在终端输入以下指令开始安装hexo，一般情况下，只要不是显示红色字体，都是安装成功了的（黄色字体可以不用管）
1
2
npm install -g hexo
npm install -g hexo-cli

创建博客以及初始化

创建

在终端里输入以下指令开始创建博客，这里我输入的是blog2是因为我已经创建了一个同名的文件夹了，所以需要避开重名
1
hexo init blog
待跑码完成，可以在文件管理器里看到一个名为blog的文件夹(请无视这个blog2，正常情况都是blog)，打开之后会看到一堆文件以及文件夹，这些就是搭建博客所需的文件

初始化

接下来可以输入以下指令可以测试一下博客是否正常运行
1
hexo server
正常情况下，当启动服务器之后，终端会跳出本地访问地址，打开这个地址，如果出现以下界面，说明博客启动成功，一切正常，就可以进行接下来的操作了

更换主题为butterfly以及初始化

安装主题

在终端里输入以下指令开始拉取butterfly主题源码

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

到这个步骤很多人可能会遇到无法拉取源码，这里也准备了一个国内可以使用的

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

待源码拉取完成之后，打开themes文件夹，会看到一个名为butterfly的文件夹，打开文件夹会看到很多文件，这个就是butterfly主题的所有文件了

应用主题

接下来打开_config.yml这个配置文件，按Ctrl+F直接搜索theme这个字段，将原本的landscape改为butterfly，按Ctrl+S保存一下
一定要养成随手保存的习惯，这是血的教训！！！

安装所需的插件

在终端里输入以下指令安装pug 以及 stylus 的渲染器，这是必要的插件

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

测试主题

接下来可以在本地先测试一下效果看看，输入以下指令清除缓存并运行本地服务
1
2
hexo clean
hexo server
每次都要这么重复输入相同指令，感觉有点麻烦，后面我去查了一下相关的文档以及文章，发现可以修改package.json里的script字段，直接把要执行的命令输入进去，后面只需要输入npm run server就可以执行相同的效果了，具体步骤如下：
1. 打开blog目录里的package.json，用之前的编辑器打开，这里我用的是VSCode
2. 定位到scripts字段里的server，这里能看到官方的只有一个hexo server，直接在hexo这个字段前面打一个空格输入逻辑连接符 && 中间还有一个空格在加上需要的执行的指令，这里我就加了一个hexo clean，这段指令的意思是先每次运行都先清除缓存之后在运行本地服务
把package.json设置好之后，输入以下指令，打开浏览器看下主题是否一切正常
1
npm run server

初始化

创建页面

看到这个界面就表示主题安装成功，并且运行一切正常，但是现在主题光秃秃的什么都没有，接下来就来做一个最基本的界面吧
接下来打开主题文件夹(/blog/theme/butterfly) 把_config.yml这个文件直接复制到一个空闲的文件夹，并重命名为_config.butterfly.yml，之后剪切并粘贴到博客目录中
注意: 复制的是主题的 _config.yml ，而不是博客目录下的 _config.yml，以后只需要在 _config.butterfly.yml 进行配置就行。
如果使用了 _config.butterfly.yml，配置主题的 _config.yml 将不会有效果。

注意：不要把主题目录的 _config.yml 删掉
接下来先创建几个基本的页面：标签，分类，友情链接，先把之前运行的服务按Ctrl+C结束运行
确保此时终端显示是在博客目录下(blog)而不是在主题目录下
输入以下指令分别创建标签，分类，友情链接页面
1
2
3
hexo new page tags
hexo new page categories
hexo new page link
打开博客目录下的source文件夹，会看到三个名为tags，categories，link的文件夹，对应的也就是标签，分类，友情链接，分别打开tags文件夹，里面有一个名为index.md的文件，打开这个文件，在时间末尾按一下回车，输入type: “tags” 保存退出，接下来以此类推，打开另外两个文件夹，按照文件夹名称添加type，重复上面的操作即可

友情链接添加

在博客目录中的 source/_data（如果没有 _data 文件夹，请自行创建），创建一个名为文件 link.yml的文件，复制以下代码直接粘贴，后续想要添加链接或者是修改的话，都按照这个文件里的格式修改即可

- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网志框架

- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

顶部导航栏添加

现在博客几个最基本的页面都有了，但是顶部还是光秃秃的，接下来就来加几个常用的按钮吧

打开博客目录下的_config.butterfly.yml文件，原始文件里的都是繁体字，建议直接按Ctrl+F搜索Menu，找到这个字段之后，直接复制下面我编辑好的中文目录替换即可，当然你也可以自己修改

# Menu 目录
menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  标签: /categories/ || fas fa-folder-open
  媒体||fas fa-list:
    音乐: /music/ || fas fa-music
    电影: /movies/ || fas fa-video
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

替换好之后直接保存，输入npm run server测试效果，不出意外的话，那就跟我图片的是一模一样的，到这里博客基本功能就可以使用了，这里没有写太多怎样去自定义博客功能，这篇教程主要是面向新手朋友的，具体怎么去自定义功能，建议去作者的博客看看，里面写的非常详细，这里也把链接放在文章最后了，可以自行跳转

把博客部署到GitHub

安装插件

停止博客服务运行，确保终端此时显示的目录是博客目录(blog)在终端输入以下指令开始安装插件
1
npm install hexo-deployer-git --save

创建仓库

打开GitHub，如果没有账号的可以自己注册一个，注册登录好之后，点击右上角的加号旁的小三角形，点击New repository创建一个新仓库，仓库名一定要按照以下格式创建，不然博客会无法识别并上线

1	你的GitHub用户名.github.io

github-new
github-new-repository
创建完成之后，会自动跳转到以下地址

1	https://github.com/你的用户名/你的GitHub用户名.github.io

new-name.github.io

配置博客

打开博客目录下的_config.yml文件，找到deploy这个字段，在repo里输入你的仓库地址，branch这里填入master
注意: 一定要按照格式输入，该加空格的地方一定要加，否则在运行时会报错

上传源码

在终端输入以下指令，设置一下git参数

1 2	git config --global user.name "GitHub用户名" git config --global user.email "GitHub绑定的邮箱"

接下来依次执行以下指令，也可以使用之前修改package.json的方法，直接一次性执行，这里我就是直接把下面的指令都放到package.json里面了，如果和我的一样的话，那直接输入npm run deploy就可以了
1
2
3
hexo clean
hexo generate
hexo deploy

查看效果

到这一步可能很多人会出现GitHub无法连接的情况，这是正常的，一般情况下多试几次就好了，，当跑码完成之后，回到刚刚创建的仓库，就能看到博客源码了，此时在浏览器地址输入：你的GitHub用户名.github.io，就能看到博客已经正常运行了
- 例如：我的用户名是ui-beam-9，那么我的博客地址就是 ui-beam-9.github.io

鸣谢

本篇文章所有资料来源均来源于hexo和Butterfly官方，感谢这些开发者做出的贡献

1 2	https://hexo.io/zh-cn/docs https://butterfly.js.org

写在最后

到这里博客已经搭建并部署完成了
现在你的博客网站的地址是 xxx.github.io，如果觉得这个网址不够好的话，可以设置个人域名了，但是需要花钱
- 其实现在域名也很便宜，有条件的还是买一个域名吧，当然如果只是白嫖的话，这个网站也已经够用了，毕竟也不用买云服务器，可以省下一笔钱）
  之前因为一时心血来潮就做了这个博客，但是后面因为进入社会之后，一直没时间维护，更不用说去更新文章了，这次因为工作已经稳定下来，也有时间维护了，后面会持续更新的，不会像现在这样，时隔两年才更新了两篇文章（咕咕咕）
  
  下期预告：基于 Cloudflare Workers 搭建一个专属的Docker镜像站以及拉取代理