Blog的搭建过程[ep.1| Hexo 与 Butterfly 的安装和部署]
前言
第一篇博客，前言写什么好呢？今天是2023年的5月15号，本人是一名正在挣扎着过完大三下学期的一名大学牲。。。怎么突然有兴致搞博客了捏？原因其实很简单，我复阳了。是的，自从2022年的那个春节回家🐏了一次之后过完2023年的这个五一我又阳了一次，个人推测很有可能是因为最近去了一趟Hong Kong，然后不知怎么的就传染上了。阳了之后不能去教室上课，这一个星期都呆在宿舍里，如果不让干点啥着实烦闷得慌，我恰巧又在为专业课作业找资料的时候看到了一位大佬的博客，说实话，我被惊艳到了。都说博客(Blog)的时代已经过去了，现在是属于微型博客(Microblog)和SNS的时代，在我的印象中搞博客就是注册个简陋的网站页面然后在上面写写日记之类的。哪曾想，各位大佬（像这位还有这位）的博客页面居然都华丽地惊世骇俗，这还是其次，人家博客的内容都满满的是干货，展现出了神一般的技术力。
我坐不住了，于是，就有了这个博客。
请注意，本博客使用的框架为Hexo，主题为Butterfly
准备工作
在开始搭建我们的博客之前，你需要：
-
注册一个Github账号，因为我们将要把博客的页面交给GitHub托管
-
安装Git并且配置好GitHub的密钥，这样我们就不用每次更新博客时输密码了
对于没有接触过Linux或者各种shell的朋友，最好在这一步熟悉一下命令行的操作，因为以后我们无论是安装插件还是更新博客都需要依靠命令行，这也是一种（和GUI相比）效率更高的操作手段
-
安装好Node.js，很有用的一个依赖包，并配置好环境变量
提一下，装Node.js的时候可以把node_cache、node_global两个文件夹换到D盘里装，省C盘空间还稳定，详情见这篇知乎文章
等你完成以上三步，我们就可以正式开始啦✧٩(ˊωˋ*)و✧
安装并初始化 Hexo
首先，你需要建立一个博客的根目录（听我的，在哪里建都好，别放C盘），我这里在D盘建立了一个叫Blog的目录：
点进去，在Blog里右键打开Git Bash Here，输入以下指令来利用npm安装Hexo:
1 | npm install -g hexo-cli |
安装完成之后输入hexo init来初始化框架：
1 | hexo init |
下一步是生成静态文件，输入指令hexo generate，该指令可以简写为 hexo g，并且以后可以搭配 -d 或者 --deploy 参数在文件生成之后立即部署网站（如果不明白这是什么就接着往下看）
1 | hexo generate |
此时网页的静态文件已经生成，我们可以先把它部署到本地服务器上进行查看，指令为hexo server，该指令可以简写为 hexo s
1 | hexo server |
当你看到“Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.”这句话的时候，你就可以在你的浏览器上输入 http://localhost:4000/ 来看你部署在本地的网页了。按ctrl + c可以停止运行。
把你的博客部署到 GitHub 上
静态文件搞好了，只在本地看没什么意思，既然是博客当然要放到网上看啦~
为了达到这个目的，就要把你的网页放到GitHub上面托管（Host），我们先建立一个仓库（Repository）来存放你的静态文件：
注意，你的仓库名称应该是 (你的用户名).github.io
回到你的博客根目录下，找到一个叫 _config.yml 的配置文件，这个配置文件负责控制你的Hexo框架（之后控制主题也有一个 _config.yml ，不要弄混了），在这个文件里有这样几句话：
1 | deploy: |
把 repository 这个字段冒号后面换上你仓库的网址，这个网址可以用下图中的方法得到，另外注意一下这里的语法，每个:冒号后面都有一个空格
然后回到你的 Blog 根目录下，在 Git Bash Here 里敲这一条命令：
1 | npm install hexo-deployer-git --save |
完成后，输入下面三条指令 ，这几句你以后会经常用到：
1 | hexo clean |
第一句是清缓存和已生成的静态文件的，不清除的话页面不会更新；第二句之前在 hexo generate 那里说过了，不再赘述；第三句和之前讲的 --deploy 参数作用一样了，而且也是 hexo deploy 的缩写，用来部署到我们GitHub上仓库用的。
三板斧完成之后，你就可以在任何联网的设备上打开 http://(你的用户名).github.io 这个网址查看你的页面了
购买和解析域名
虽然现在你的博客已经算是可以使用了，但是如果你还想搞一个属于自己的域名的话，你就需要进行购买和解析域名的操作。我是去国外的一个叫GoDaddy的网站上购买和解析域名的，而且我看网上已经有很多在阿里云之类国内的网站上买域名的教程了，所以我接下来将以 GoDaddy 网站为例来进行说明。
购买域名
首先，你需要在这个搜索框里输入你想要的域名并查询
如果你的域名可用（如下图），就选择 加入购物车 -> 继续 然后选择 Free Privacy Protection (不差钱的随便选)
继续到你的购物车之后，就会出现下面的界面：
其中：你可以在①处选择购买使用域名的期限，有1，2，3，5年这几个选项；②处是一些增值服务，可选可不选；③处是你将要付的钱；④处是填优惠码（promo code）的地方。这里要说一下，大家最好去网上搜一下当天GoDaddy的优惠码，不同的优惠码除了优惠力度不同外，也会影响到你的支付方式，因为有的优惠码使用后可以用支付宝支付，有些不可以，支付方式错误的话会导致报错（即支付失败），填优惠码之后③处的金额会变少（废话）。
拥有一个你自己的域名（Domain）之后，你就可以去管理它了。
解析域名
进入Domain Portfolio之后，点击 DNS （域名服务器）
点击 Add New Record ，添加这么两项记录：
关于域名的IP，你可以通过在shell里面输入：
1 | ping xxx.github.io #你博客的域名 |
来得到。
俺是Windows用户，最开始是在 powershell 里边用的这条指令，但是 powershell 这家伙只会显示 IPv6 的 IP 地址，这是不能用的。好在之前装了个 Ubuntu 的子系统（wsl），用这个搞定了。其实GitHub的域名就是在185.199.108.153、185.199.109.153、185.199.110.153和185.199.111.153 之间来回跳，真搞不成大不了像俺一样把这四个IP全加上就行了。
回到博客根目录，然后进入 source 目录，拿记事本创建个叫 CNAME.txt 的文件，把你的新域名写里面（我的是matthewishere.com，注意别加www，不然以后输入会挺麻烦），保存退出，把 .txt 后缀给删了，让这个文件变成 CNAME 文件，然后又是三板斧：
1 | hexo clean |
进入你的 GitHub 仓库，点 Settings -> Pages 看看③处的 Custom domain 有没有你的新域名，没有就手动加上
至此，你域名的解析工作就完成啦，你可以用你的新域名登上你的博客了。
Butterfly 主题的安装
安装主题
我这里使用 Git 来安装，源是 GitHub。Butterfly 官方还提供了另外两种方式（Gitee 源的 Git 和 npm）安装，详情见这篇官方文档。
在博客根目录下运行下面的指令来安装 Butterfly 稳定版：
1 | git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly |
应用主题
在博客根目录下的 _config.yml 配置文件（是的，又是它）中找到 theme 字段，把后面的内容改成 “butterfly”。
1 | theme: butterfly |
安装插件
我把官方文件原话搬过来：
如果你沒有 pug 以及 stylus 的渲染器，請下載安裝：
1 | npm install hexo-renderer-pug hexo-renderer-stylus --save |
升级建议（可选）
注意：这里的 _config.yml 文件指的是 Butterfly 主题的配置文件，而非 Hexo 的 _config.yml
为了免除每次配置主题时都要一层层进入目录（Blog -> themes -> butterfly -> _config.yml）然后才能修改文件，我们在博客的根目录下创建一个文件 _config.butterfly.yml 并把 _config.yml 文件里的内容复制过来，当 _config.butterfly.yml 和 _config.yml 的设置冲突时， _config.yml 不会生效，因为 _config.butterfly.yml 的优先级大于 _config.yml 。
注意：不要把博客根目录下的
_config.yml文件删掉
End
至此，你的博客的平台就搞好啦，理论上你已经有了一个可以使用的完全属于你自己的博客了。但是这个平台的“基础设施”还不太完善，比如你的图床或者 语法编译器还没有安装好（能如此简单地使用 是我当初学 Markdown 语言的最大动力，拿这个写点小论文很方便），还有一些博客的美化问题，这些内容我会在之后更新的文章中一一介绍，咱实在码不动字啦 Auf Wiedersehen！
