【项目复盘】 HEXO搭建个人博客并免备案部署
HEXO搭建个人博客
前言
很早就想做一个个人网站，但是总是在脑内把这件事想象成非常困难的事情，想着要手写各种效果加上还要备案等杂七杂八的事情，加上又懒，就迟迟没有动工。
这几天闲下来稍微研究了一下，找到了相关的教程，发现用HEXO部署github page作为个人博客十分的简单，其实一天就能搞定。
但是部署了githu page之后又看不顺眼默认的 username.github.io 想要一个有自己特色的域名，于是就找到了namesilo去购买域名。
可之后又发现访问我的网站像不开魔法访问github一样，时灵时不灵，又去查了CDN加速网站。
最后发现制作网站只需要一天，后续工作，修bug反而花了三四天。感觉除了网上教程之外还是有不少东西可以说的,特别是很多被省略的内容但是我这种小白又不懂的，所以就写下这篇复盘。
看完这篇复盘，我相信99%的人能搭建一个自己的个人博客
一、使用hexo建站并部署到github page
1.1 什么是hexo ?
hexo 是github上的一个开源项目 ：hexojs/hexo：一个快速、简单且强大的博客框架，由Node.js提供支持。
在他的官方网站写的是：Hexo 是一个快速、简单且功能强大的博客框架。你用 Markdown（或其他标记语言）写文章，Hexo 会在几秒钟内生成具有漂亮主题的静态文件。
它提供了强大的API，有大量的模板，主题和插件，能够很方便的一键部署到github page等网站。
甚至你一定html都不会写，都能做出自己的网站（只需要知道一点markdown语法）
只需要知道四个hexo 指令（别复制后面的中文）,每当有什么更改，最好都运行一下前三个指令，保证更改能生效
1 | |
1.2 如何安装使用？
因为hexo是基于Node.js的，所以我们需要先安装Node.js
然后要部署到github page上，我们也要安装git
最后再通过 npm install -g hexo-cli 安装hexo
在这一步我是参考 CSDN上的教程： Hexo教程，看这一篇就够了- How to系列-CSDN博客
可以先移步阅读csdn教程
因为这教程写的非常好，教程中已有的内容我就不过多赘述了。只对教程中没有的内容进行补充：
安装时报错？
在Windows 系统中，是通过Windows PowerShell进行安装的，其中绝大多数的命令都要使用到管理员权限，不然就会报错。
所以如果用WIN+R打开的power shell输入命令报错的话，可以点WIN键直接搜索Power shell然后选择以管理员身份运行，参考图1-1
无法安装admin等插件？
注意在安装完hexo后，创建项目以及后续的安装hexo-admin插件都需要cd到网站目录中进行。比如我是 cd E:\Work\Blog
如何修改网站模板？
在选择主题时，不一定要按照教程中使用的Fluild的主题。只要记住使用所有主题之前，都先去查看官方的配置文档。比如Fluid的配置文档。
因为教程作者的教程可能会过期，导致某些语句改变并失效，但是官方文档肯定会更新的；
这里粘贴一下官方文档比较重要的内容：
理解了图1-2和图1-3中的内容后，阅读文档中大部分内容并实操就不成问题了。
再补充一下如何为文章添加标签和分类
添加标签和分类：
如果你是通过hexo-admin写文章，那么如图1-4所示，在右上角的小齿轮处，就可以添加分类和标签
如果是在本地新建文件，只需要在Front-matter处，也就是三个小横线”—“之前粘贴下面的内容，即可添加：
1 | |
分类和标签的书写规则
只有文章支持分类和标签。 分类按顺序应用于文章，从而形成分类和子分类的层次结构。 标签是在相同的层次结构上定义的，因此它们的出现顺序不重要。
示例 (通过admin页面添加分类和标签默认是这种格式)
1 | |
如果你想应用多个分类层次结构，请使用一个名称列表而不是一个单个名称。 如果 Hexo 在帖子上看到像这种方式定义的分类，它会将该帖子的每个分类视为其自己的独立层次结构。
示例
1 | |
如何显示或隐藏菜单页面
在网站默认的导航栏中,有 首页、归档、分类、标签、关于（需要创建）这几个菜单，如果我们想添加或隐藏其中的内容，只需要在_config.fluid.yml中找到menu的配置，按照相同的格式进行增加或修改就好了。
下面是我的例子，我将“标签”页这一行注释掉了，所以菜单上就不显示标签
1 | |
其他未提到的内容就看配置文件和官方文档都能解决
1.3部署github page
在所有工作都做完之后，我们安装好了 hexo-deployer-git插件，创建好了我们的github仓库，在图1-5所示的配置文件中将“repo: “ 后面的内容改成我们仓库对应的https地址。我们就可以推送了。
建议每次推送前都要 hexo clean + hexo g一遍，保证推送的内容是最新的。
如果推送顺利，过一会我们就可以访问到我们的网站了，通过 username.github.io。比如我的liuliy1.github.io
当然，前提是推送顺利，也有可能会出现不顺利的情况，比如报错 ”fatal: unable to access“。这种情况主要是网络问题，没法访问到github，而不是自身项目问题，遇到这种情况最简单的方法是多推送几遍，有可能就成功了。如果不成功，那就再用下面的方法。
解决推送失败
方法一：取消代理设置
通过在终端执行以下命令，取消 Git 的代理设置：
1 | |
方法二：设置系统代理
打开系统设置，直接搜索 更改代理设置, 启用代理服务器，然后将端口设置为 7890
接着在终端输入命令，设置 Git 使用本地代理
1 | |
设置完成后，可以通过以下命令检验是否设置成功：
1 | |
然后我们就能够正常推送了，这里需要注意的一点，推送后的内容可能并不立马更新，有一定的延迟。
如果只想有一个个人博客，到刚才的那一步就已经结束了。
现在来解决如何让网站显得更加专业，更有个人特色——设置自定义域名
二、自定义域名
2.1 域名是什么
简单来说，域名就是一种映射，互联网通过ip地址来定位服务器，一个域名能对应一个ip地址，所以我们能通过域名来访问服务器。
所以我们现在的目的就是，购买一个域名，将我们的username.github.io 与这个域名建立映射，这样访问我们的自定义域名就能访问到我们的网站。
2.2购买域名
域名的服务商有很多，我这里选择的是国外的**NameSilo**，据说是国外的域名服务商中最便宜的。
之所以不选择国内的域名服务商是因为国内域名都是需要先备案才能使用的，而备案就更加麻烦，还需要有服务器（要钱。
而且github属于国外的服务器，也无法使用国内的域名。
用法如下：
- 先直接在NameSilo官网搜索是否有你想要的域名，如图1-8所示，网站会给出不同顶级域名的不同价格，如果没有要求选择最便宜的就好。
然后就是正常的注册账号，填写相关信息时，地址无法输入中文，输入拼音即可。
注册完就可以支付了，没有什么需要特别注意的选项，正常下单支付就行，可以选择支付宝付款。
【图2-2】
2.3设置DNS解析
当我们完成购买后，在我们个人账号信息中就可以看到我们有一个活跃的域名，如图2-3，我们直接点击Manage进入管理界面。
进入图2-4所示界面后，点击右侧的蓝色小球进入图2-4的设置DNS解析页面
2.4 github配置
剩下的部分就很简单了，我们只需要在我们的网页指定这个域名，就能将域名与我们的网页连通起来了。
先进入网站对应的仓库，点击Setting
然后选择Pages,拉到最下面，Custom domain的位置，输入我们购买的域名，保存并等待一段时间（可能是好几个小时）之后，我们就可以通过域名访问到我们之前创建的个人博客了。
三、 CDN加速网站
由于我们是用github部署的网站，github又是外国服务器，所以普通用户想访问我们的网站可能会出现访问不上或者及其卡顿的问题，这个时候就需要用到CDN来加速我们网站的访问。
当然，这一步也可以省略，毕竟我们的网站已经可以访问了。
3.1CDN是什么？
CDN（Content Delivery Network，内容分发网络） 是一种通过全球分布的服务器网络，将内容（如网页、图片、视频等）缓存到离用户更近的节点，从而加速访问速度、降低延迟并提升稳定性的技术体系。
简单来说，就是把我们网页的缓存存储到不同的地方，当我们要访问网页时，可以直接从最近的缓存访问网页，而不需要跨越漫长的距离访问服务器。
当我们的网页更新时，这些缓存也要定时更新
3.2如何配置CDN
我这里以腾讯云为例
注册完账号之后，点开图3-1所示的内容分发网络CDN，它会提示有一个edgeone的14天免费试用 也就是图3-1中的边缘安全加速平台 EO，我这里就以这个试用为例子，当然如果选择不试用，继续开通CDN其实也是差不多的操作。
至于14天后是继续续费还是更换CDN那都不是什么问题，毕竟已经知道操作流程了。
之后选择如图3-2所示站点列表，新增站点，这里注意添加时要选择全球区
第一次添加的时候，可能会要你在dns管理处添加txt来验证域名的所有权，这个时候回到namesilo添加txt就行了，验证完了之后就可以删掉那一条
接着点击域名管理，添加域名，记得选择HTTPS，如图3-4所示
这里选择源站组，第一次添加域名时，我们要手动创建源站组，照着图3-6填就是了。就是将之前dns解析的四个a记录填入
名字可以随便起，但是源站组类型 一定，必须选 通用型。这折腾了我非常长的时间
ip如下：
1 | |
添加完源站组后，就可以去添加域名了,参考刚才的图3-5，这里也是记得选HTTPS.
这里简单补充一下http和https的区别：
https是有加密的，比http更加安全，当浏览器访问https的网页时，左上角能有一个安全锁的图标；但是当访问http的网页时，会直接提示你网站不安全，显得非常不专业。
除此之外，cdn这里选择https还有一个重要的原因：
前面我们在github配置自定义域名时，启用了强制https。如果这里的源站组是http专用型，就会出现冲突。导致用户在访问网页时 进入http然后重定向到https，又被强制重定向成http。导致重定向过多，完全无法访问。就像写了一个while（1)循环一样。也要注意CDN不要启用强制HTTPS，会与github的冲突
当我们网站访问不了时，我们可以在Redirect Checker 这个网站验证是否是重定向过多导致的问题，
如果是 则会提示 301报错
如果网站正常，则会显示 200 OK
3.3申请证书
回归正文，添加完域名后，我们就可以为我们的网站颁发证书了。此时点击左上角的三横线的菜单，找到ssl证书，然后申请免费证书。
然后一步步填写内容就好了，这里还需要像前面提到的，在namesilo填入txt进行验证。
申请完证书后，我们回到域名管理界面，点击批量配置证书，然后点击证书再选择我们的刚刚创建的域名。
然后就到了最后一步，配置CNAME。
在域名管理界面会提供一个CNAME，这个时候的状态是等待配置CNAME，我们将CNAME复制，然后打开NameSilo的DNS解析界面，选择CNAME粘贴并添加
这个时候需要注意，要把我们第二步自定义域名给的四个A地址给删除，不然解析会出现问题。
接下来只需要等待几个小时，去睡个觉，回来就发现我们的网站能够快速访问了。
这里可以用DNS Checker 来检测我们的CDN是否配置成功了，如果输入我们域名后，显示的是CDN给出的CNAME，那就是配置成功了。
3.4缓存设置
我们前面提到了CDN是通过在不同的服务器缓存我们的网页来实现快速访问的，那我们要更新网页的时候怎么办呢。
我们点击左侧的站点加速，去配置我们的缓存规则,在文件后缀等于html时，设置不缓存（这里默认是没有html的）。
还有节点缓存时间，设置多久会自动更新，这个时间设置的短的话会增大我们的流量消耗（会计费的）
如果设置的长的话，可能我们更新了网页后，用户访问我们的网站还是旧版的，自己权衡就好。
如果我们推送了新内容，想让网页立马能够更新呢，就直接选择清除缓存，这样CDN会自己调用新的服务器数据去更新缓存。
四、补充说明
当我们推送新内容时，可能会出现怎么样按照刚才的缓存进行操作都不能更新，并且能通过username.github.io去访问我们的网站，我们回到第二步自定义域名的地方会发现我们自定义域名被清空了。
这个时候就是我们githubpage的CNAME被推送覆盖掉了。当我们在github上设置自定义域名时，会在文件根目录创建一个CNAME，里面就写着我们自定义的域名，但是我们hexo中是没有的，所以一推送新内容就会替换掉。
解决这个问题的方法就是在source下新建一个CNAME文件，填入域名，这样每次我们输入hexo g的时候，都会在public目录下创建一个CNAME，这样hexo d就能将CNAME推送到github上了。