彻底搞懂如何使用Hexo + GitHubPages搭建个人博客

很荣幸您能通过搜索引擎，在众多介绍如何使用Hexo搭建个人博客的教程中检索到本文。本着不让您失望的原则，我会尽我最大努力将本篇文章写地全面并具有可操作性。让您在阅读之后明白Hexo和GitHub Pages之间是如何联系及运作的，如何搭建一个完整个人博客。首先，本文会首先讲述个人博客各个模块。然后会解释Hexo到底做了什么，即Hexo在个人博客中起到的作用，GitHub Pages又在个人博客中扮演一个什么角色。在理解了以上内容后，搭建博客就变成了一件非常容易的事情，所以最后将以操作手册式的描述引导你一步步搭建出一个个人博客。按照指引很快就可以搭建出你的个人博客。相信在阅读完本文后，你会对搭建博客的完整流程有深刻的理解。

本博客在读研期间就已经搭建好了，当时很大一部分原因是为了在求职时有个加分项。当然，搭建这个博客的初衷是想将学到的知识分享出来，但是一直以来并没有一个强大的驱动力去督促我来做这件事情。工作了接近两年后，日渐觉得需要有一些技术的沉淀，需要将学到的东西总结并分享出来。而且作为一位程序猿，日常读别人的博客时，看到一些很优秀的博客经常会很羡慕。感叹只能望其项背之时，内心也有着见贤思齐的冲动，想着自己也要做出一个优秀的博客，因为通过在运营博客的过程中会有以下几点益处：

1. 检验学习成果：检验学成成果最有效的方式就是把你学到的东西讲给另外一个人听。如果他也能听懂，那么证明你掌握了。同时，在你的讲述过程中，你会对你学到的知识点进行归纳总结，达到一个更高视角的理解。在讲给别人听的过程中，也会发现薄弱的地方。当别人向你提问时，也是一个检验你的时刻，如果你不能很好地解答，也说明你对某个知识点理解的还不够深刻，需要加强你对这个知识点的理解和掌握；

2. 强迫自己不断地输入: 保证将个人的知识储备不断地向外输出地前提是源源不断的去输入更多新的知识；

3. 打造个人品牌：流量为王的时代，个人品牌能带来太多的益处。通过个人博客打造个人品牌，融入相应的圈子，不断交流，不断地提升。

本文主要是讲述一个博客搭建的流程，并且明白让你明白每一步的作用。为了文章的连贯性，一些通过搜索引擎就可以随手获取的细枝末节的内容，本文就不展开讲述。当然文中会附上相应的链接，以防你实在找不到相应的资料。再次声明，我目前是一位iOS开发者，对前端的知识掌握的也不多，所以本文也不会涉及相关JS之类的知识。絮叨了那么多，下面让我们先来看下一个完整的博客是由哪些模块组成，以及各模块都是如何配合运作地。

博客如何运作：博客的各模块架构及组成

很多教程都跳过了这一步，直接开始告诉你Hexo是什么，如何安装npm，如何安装Hexo，怎么安装评论插件，怎么安装字数统计插件…按着这些教程可以搭建出一个基于Hexo的个人博客。之前也是这样照着这些教程，搭建了此博客。但是始终都不知道Hexo到底是做什么的，认为Hexo是什么黑科技。每次搭建好一个博客之后都是一头雾水，以至于在打算重新开通此博客之前，竟找不到头绪。所以这次狠下心想弄明白Hexo到底是什么，搞明白一件事物的原理始终是一件让人开心的事情。幸运地是读到了**《A Guide Of Making Your Personal Blog》系列文章**，读后感觉豁然开朗，感慨所有技术的原理其实都是大同小异，所以特别想分享出来。

首先要明确一个问题：个人博客是不是一个Web网站呢？

答案是：是的。

通过浏览器，在地址栏输入链接 http://www.num0.top 来打开此博客。数据在互联网上传递、交互、处理后，最终将本博客的内容呈现在你的屏幕上。这和Web网站有什么区别呢？如果你说博客不是一个网站，难道它会是一个App或者一个桌面程序吗？Web网站有静态和动态之分，静态指的是用户和Web页面之间不能做一些交互，而动态网站可以允许用户与网站做一些交互。使用Hexo+GitHub Pages搭建的个人博客其实类似于一个静态的网站，并可以达到一些动态的交互效果。

弄清楚使用Hexo+GitHub Pages搭建的博客本质是一个Web网站之后，问题基本就解决了80%了。伟大的二八定律，仅用了20%的内容，就达成了80%的目标。剩下的80%内容会讲述Hexo和GitHub Pages到底在博客架构中起到了什么作用即博客是如何运作的。

Web运作流程

已经知道Hexo+GitHub Pages搭建的个人博客本质是一个Web网站。先运用储备知识设想一下：静态网站是如何运作的呢？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5veTxOg3-1616166955541)(http://qiniucloud.num0.top/2020-04-16-web%E8%AF%B7%E6%B1%82%E6%B5%81%E7%A8%8B.png “Web网站工作原理”)]

粗略地画了Web工作的原理图（省略了很多内容，真实的网络请求要复杂的多），对比Web工作原理及各流程，分析博客是如何运作的。当在客户端（PC、手机、iPad等）的浏览器的地址栏中输入http://www.num0.top这个URL链接并按下回车键后，客户端会首先处理这个请求。客户端根据URL地址去互联网索取你所需要的资源，并在获取相应的资源文件后将文件内容呈现在当前的浏览器上。

• DNS查询：客户端首先要知道资源存放的具体存储在互联网的具体位置。因为互联网基本是基于TCP/IP协议进行通信的，TCP/IP协议栈中使用IP地址进行网络寻址（使用arp/rarp协议进行物理寻址），所以客户端要先知道这个资源存在那台服务器下，那么就需要IP地址来寻找这台服务器。本质就是要知道num0.top这个域名背后指向的IP地址是多少，然后按照此IP进行寻址，找到服务器并通过www服务获取所需要的资源。从图上看就是DNS查询过程，这里省略了DNS查询过程的细节，有兴趣的同学可以去计算机网络课本中了解具体的流程。简单地说这一过程就是通过http://www.num0.top这个URL地址去DNS服务器查询到num0.top域名的IP地址是185.199.108.153。
• 资源请求：通过TCP协议的三次握手与服务器建立连接后，客户端会使用HTTP/HTTPS协议构建一个HTTP请求包，并发送给185.199.108.153这个地址下的服务器，并告诉服务器需要通过www服务获取index.html这个资源。
• **服务器处理请求：**服务器的网关收到请求后，发现是一个www服务的请求，就把这个请求转到Web服务器去处理。Web服务器上开启的诸如Apache、Nginx、IIS等服务会响应这个请求。这些服务发现是请求index.html资源文件的，就会交由后台程序去装配html资源。后台程序会根据各种程序逻辑来从数据库等地方读取数据，并组装成需要的index.html资源文件返回给Web服务器，最后经由Web服务器将资源返回给客户端。
• 浏览器解析HTML：客户端拿到html资源文件后交由浏览器去解析处理，浏览器需要解析的不仅是HTML文件，还需要处理css、js等文件，并加载图片视频等媒体资源。通过一系列的处理后浏览器将资源展现给用户。

最简单的Web请求流程大致如上。其中包含了诸多计算机网络、服务器、Web前端后端的知识点：如IP路由/寻址、URL协议、DNS解析、TCP三次握手、服务器等，再次就不展开叙述，你可以通过**《细说留言器输入URL后发生了什么》**更深入地理解整个过程。

Github Pages之于服务器

搭建博客就如搭建一个Web网站一样，首先需要一台服务器。使用服务器来搭建博客服务并存放博客资源，这样才能使其他人来访问到它。服务器分为虚拟主机、虚拟专享服务器VPS、专属服务器，这三类服务器的差别在**《A Guide Of Making Your Personal Blog-Part2》**一文中有详细的阐述。对于服务器的总的来说有很多种选择：

• 使用阿里云、腾讯云的虚机主机服务，使用此类云服务搭建个人博客；

• 购买功能和性能更优的虚拟专享服务器VPS；

• 搭建一台个人的服务器。

  

  PS:之前在B站知名科技UP主稚晖君的一个视频中看到使用nanopi neo2搭建的一个小型web服务器，很是敬佩。小到什么程度呢，大概是上面这个样子，我特意多截了一部分图大家可以和旁边手柄对比一下大小很Geek。

标题说的是使用GitHub Pages来搭建个人博客，我们常用GitHub来存储代码并进行版本控制。GitHub大家都知道，世界最大的同性交友网站，GitHub Pages是什么呢？GitHub Pages是否能承担一个服务器的作用？

要先搞清楚git和GitHub是两个概念，git只是一种版本控制工具，而GitHub是支持git的一个代码仓库网站，像GitLab其实也是一个代码仓库的网站。这篇文章**《An Intro to Git and GitHub for Beginners PartI(Tutorial)》**讲述了git与GitHub的区别。

GitHub Pages是GitHub公司提供的免费静态网站托管服务。GitHub Pages严格意义上来说并不是一个服务器，只是可以提供类似服务器功能的一种服务。当我们把HTML等资源文件存放到GitHub指定的位置时，也就是一个GitHub Pages仓库下，GitHub Pages服务会对这些文件进行处理并把它展示为一个网站。所以说可以将GitHub Pages提供的功能替代Web服务器的功能。我们只需要把编写好的HTML等资源文件存到GitHub指定的位置，那么就实现了类似的Web服务器的功能，可以响应请求，并把相应的资源文件发送给客户端。

Hexo博客框架之于Web框架

了解GitHub Pages服务的作用之于服务器的作用后，只需将博客资源放置在服务器上就可以让其他用户访问。这里博客资源文件指的是html、css、js等资源文件，以及图片、视频等媒体文件。可以使用Java，Python等后端语言编写Web程序来动态的生成html文件并在其中嵌入媒体资源文件。甚至可以直接用超文本标记语言编写html文件，但这些方式的学习成本显然较高，且较耗时。其实使用Dijango、Flask、Spring等Web框架也可以快速构建一个博客系统，但是这些需要你具备相关编程语言基础及Web编程相关基础知识。对于像html文件及css文件都写的不是很好的同学，如果有一种工具可以将文本编辑器中撰写的文字快速生成html文件，那么将大大提升效能。

Hexo其实就是做这个工作的。Hexo是一款快速、简洁且高效的博客框架，可以将我们使用Markdown编辑的md格式的文件生成html资源文件。将这些文件上传到GitHub Pages上，理论上别人就能访问到我们的博客了。另外，**Markdown语法学习曲线十分友好，上手非常容易且快。**通过不断地使用加深对Markdown语法的掌握，你能很优雅的编写一篇精美的博文。关于Markdown的基本语法，请使用Google自行搜索。

所以，Hexo的作用就是生成资源文件的一个博客框架。相信你也听说过Jeklyll、Hugo等框架。其作用与Hexo类似，都是一款Website生成框架。使用这些框架可以快速的搭建需要的Website。Jekyll是一款将纯文本转化为静态博客网站的框架。支持Markdow（Textile）、Liquid和HTML&CSS构建可发布的静态网站，常用的Octopress就是基于Jekyll二次开发而成。Hugo是一款由Go语言实现的静态网站生成器。这几种工具都支持将GithubPages作为资源文件的容器，这些框架起到的作用就是将Markdown格式的博文转换成HTML格式的资源文件。

申请个性域名

至此，博客理论上已经可以通过IP地址或者GitHubPages的仓库地址进行访问了。但想象一下，我们平日访问网站并不是输入一串数字组层的IP地址，而是一串具有特殊意义的域名。此时你肯定也想拥有一个属于自己且独特、简单、有特殊含义的个人域名。比起使用IP地址和GitHubPages的仓库地址，浏览者可以很容易的记住你的博客。申请一个属于自己的个性域名并绑定到我们的GithubPages仓库地址上，也是搭建博客的一个重要步骤。本博客的域名是很早之前在阿里云上购买的，每年都需要续费，并且通过腾讯进行了备案。好像现在国内的域名大多数都需要备案了。选择腾讯云备案，整个备案过程非常简单，只需通过微信公众号提交个人实名认证信息就好了，当初本来想使用阿里云备案，但是因为账号迁移等原因一直没有备案成功。后来使用了腾讯云后进行域名备案后发现操作起来确实十分便捷，而且客服人员会相当热情地对备案过程进行指导，推荐一波。

你也可以在国外的域名服务商上购买域名，比如**《A Guide Of Making Your Personal Blog-Part2》**一文的作者是在GoDaddy上购买的，也很方便。如果你想在购买国外域名服务商的域名，可以参考下那篇文章。

本章小结

为什么选择Hexo+GithubPages

这个问题的回答其实就一个字**”懒“。对，有时候，”懒“是第一生产力**。不是吗？想想程序猿平日做地大多数工作：造轮子，复用，编写自动化工具，初衷不都是因为懒吗。

其实，对于我来说，最大的原因是：对前端知识不是很熟悉。使用Web框架自己搭建一个自己的服务器，起码需要花费1-2周的时间学习诸多的知识并实践。构建这个博客的目的就是为了能便捷地分享一些技术心得，搭建过程不能也不应该占用太长的时间。相对于掘金、简书等博客网站，受制于人不如自力更新，所以最后选择使用Hexo+GithubPages的方式。Hexo+GithubPages完全可以满足我目前的所有需求，如果后期不能满足我的需求了，到时可以进一步升级我的博客。

这也是一个技术选型的问题。业务需求做多了，在一个新的需求来了之后，要根据有限的开发时间及开发成本快速选择一种技术方案来高效地完成业务需求。如果这个需求上线后效果比较好，用户量慢慢提升，到那时才去考虑如何提升性能的需求，做二次优化改版开发。不可能一上来就按照百万级的并发量来开发你的个人博客，时间和收益不成正比。这也是工作以来形成的一个良好的思维习惯，首先进行需求分析，需要什么，达到什么目标，现阶段需要做什么，技术方案熟悉吗，会有何潜在风险点。最后，快速实现出来！

更具地来说，选用Hexo框架而不是Jeklyll**、**Hugo等框架，因为之前使用过它，对其基本使用方式有一定的了解，可以快速上手。虽然没有搞懂，但是心理上知道它并不难。且Hexo的教程文档比较完善，社区氛围也比较好，遇到问题可以通过查文档并向社区寻求帮助来快速地解决问题。功能层面，Hexo提供的功能可以满足我的续期需求：展示，分类，评论，统计功能等。后期迁移也比较方便，所以毫不犹豫的使用Hexo。使用GitHubPages主要是出于安全性的考虑，自己目前不能很好地保证我的服务器的安全性，而GitHubPages是搭建在GitHub之上。故可以暂时不用考虑安全性及相应的运维工作。综上所述，最后选择了Hexo+GitHubPages来搭建我的个人博客。从下一章的内容，将会是操作性手册性的搭建流程介绍。

使用Hexo+GitHubPages搭建个人博客

GitHubPages设置

git安装及配置

搭建一个Hexo+GithubPages博客需要做的第一步就是在GitHub上创建一个仓库。在这之前，需要在你的电脑上安装git。无论是Mac、Linux、Windows系统中的哪一种，Google上都能找到详细的安装教程说明，建议直接参考**git官网**的安装教程。

初次运行git前，你需要做一些配置：

• 设置Git用户信息

    $ git config —global user.name “your_name”
    $ git config —global user.email your_email
  

• 生成SSH Key公钥

  查看当前用户的目录下是否存在.ssh目录，如果存在进入到此目录下检查是否存在id_rsa和id_rsa.pub两个文件，这两个文件分别对应的是公钥和私钥，如果存在直接跳过此步，否则输入下面的命令：

  $ ssh-keygen -t rsa -C “your_github_email”
  

  其中**-t type:指定你要生成的密钥类型**，-C commit:提供一个新的注释。然后一路回车，直到生成一个矩形的图案为止。记下生成的这串字符，这就是后面需要给GitHub配置的公钥。

配置GitHub中的公钥

首先需要在**GitHub官网**上注册一个账号，GitHubPages的创建需要一个GitHub的账号，这一步就直接跳过。如果有GitHub账号，直接登录就可以。

登陆到后Github后，如果你是初次申请，需要先配置SSH，按照下述步骤进行操作：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uSxRmExQ-1616166955554)(http://qiniucloud.num0.top/2020-04-18-%E6%B7%BB%E5%8A%A0SSH01.png)]

​

• Setp1:点击头像

• Setp2:选择Settings

• Setp3:选择侧边栏的SSH and GPG keys

• Setp4:右上角点击New SSH key按钮

此时会看到如下界面，Titlt输入框中填写的是你要输入得SSH公钥的名称。我这里填的是”MacHome“，就是指我家里Mac电脑的SSH公钥。Key的输入框中需要填写刚才在本机生成公钥串：

如果刚才你讲命令行窗口给关闭了，也不要紧，输入命令入cat ~/.ssh/id_rsa.pub就可以查看你刚生成的公钥

Key中复制查询到的SSH公钥。点击Add SSH key，这里需要你再次输入密码来确认。成功后会生成如下界面：

创建GitHub Pages仓库

配置好git和GitHub后，需要在GitHub上创建Github Pages服务，具体步骤如下图：

在GitHub首页的顶部菜单选择**“+”号按钮，并且点击New respository选项**。之后会出现下面的页面:

一定要注意：在Repository name输入框中你需要填入你的【Github用户名】，这一点非常重要。因为这样才能保证你建立的是GithubPages页面而不是其他的代码仓库。另外一点记得**勾选Initialize this repository with a README选项。**这个时候你在浏览器输入https://your_github_name.github.io后，可以看到一个简陋的界面，那么说明你已经成功开启了GithubPages服务了。下面需要做的就是安装Hexo，并且使用Hexo来生成Blog站点。

安装Hexo并初始化博客

安装Hexo的过程非常的简单，只需要几行命令就可以轻松安装并创建Hexo框架，前提是已经安装好了Node.js。Hexo是一个快速、简洁且高效的博客框架。Hexo使用Markdown(或其他渲染引擎)解析文章，Node.js所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。官方建议Node.js版本不低于8.10，建议使用Node.js 10.0及以上版本。

安装Node.js

安装Node.js请参照**官网指南**。安装完成后在终端输入以下命令，检查安装是否成功及Node.js对应的版本号：

$ node —version

安装Hexo

安装Hexo也非常的简单，使用npm安装Hexo只需要一句命令：

$ npm install -g hexo-cli

初始化创建博客

• 创建站点根目录

  创建一个默认主题的博客，首先需要初创建一个博客文件夹，注意这个文件夹的名字最好要和你刚才创建的GitHubPages的地址一致也就是your_github_name.github.io。这个文件夹以后也统称为站点根目录。

• 初始化站点根目录

  使用以下命令初始化文件夹，Hexo会在指定的这个站点根目录中创建所需要的文件。然后进入到此文件夹下，安装npm所依赖的库文件。

  $ mkdir <folder>  #创建站点根目录
  $ hexo init <folder>  #使用Hexo初始化站点根目录
  $ cd <folder>  #进入到站点根目录
  $ npm install  #安装npm所依赖的文件
  

创建完成后的目录结构如下图：

先不着急分析每个目录是做什么的，博客此时已经创建好了，只需要在命令行输入以下命令（也先不用理会这两行命令的含义，后面会做解释），就可以在本地预览已生成的博客了。

$ hexo generate # 生成博客
$ hexo server # 本地预览

打开浏览器，在地址栏输入http://localhost:4000，先看下此时的博客是什么样子的。

此时，可以看到一个默认主题的博客已经生成了，并可以在本地访问它。但目前距离计划中的博客还存在一些差距，具体如下：

• 博客的主题和样式并不是理想中的主题，需要选择合适的主题；

• 目前只能在本地访问，其他人还访问不到这个博客，需要将其部署到GitHubPages上；

• 通过个性域名来访问博客

Hexo生成站点目录结构

在完成以上还未完成的目标前，回到上一节还未解释的目录结构。在了解了目录结构中每个文件夹的含义及作用后，才能更好地来改造它，达成以上目标。

我们再来看一下这个目录结构，命令行打印出来：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FreQtAr8-1616166955570)(http://qiniucloud.num0.top/2020-04-18-D35F5255-950F-4740-8155-A573242D4708.png)]

细心的你可能已经发现，此时的文件目录下比之前多出来一个文件夹public/和一个文件db.json。执行了hexo generate和hexo server这两步操作产生了public/文件夹和db.json文件。实际上，正是在执行了hexo generate命令之后，将souce文件夹下的Markdown和HTML文件解析到了public文件夹下，并生成了db.json文件。下面来介绍一下使用Hexo生成的跟站点目录结构。

config.yml

_config.yml是整个博客的配置文件，至于每项配置参数可以**Hexo官网文档**有详细的介绍。

目前博客只能在本地浏览，还没有部署GitHubPages上。将博客发布到GitHubPages最直接的方式：使用git将本地博客文件夹关联到GitHub的远程仓库，并且把本地文件push到对应的仓库中。Hexo提供了一种更简便地方式，只需要在_config.yml中作相应的配置，通过命令行命令就可以很方便地把静态文件部署到对应的仓库中。

打开根站点文件夹下的_config.yml博客配置文件，在deployment配置项下设置如下参数：

deploy:
    type: git
    repo:[email protected]:yourname/yourname.github.io.git
    branch:master

安装以下插件：

$ npm install hexo-deployer-git —save

执行以下命令发布本地博客到远程仓库：

$ hexo deploy

然后在浏览器中输入GitHubPages的地址：https://your_github_name.github.io ，你会发现刚才你在本地生成的博客已经可以在互联网上访问到了。但此时使用的依然是GitHub加仓库名称的URL来访问博客，当输入我们自己的个性域名访问时发现还是404错误，因为此时还没有做域名的解析配置，下一章节会具体讲解如果配置个性域名。

package.json

package.json是应用程序信息，打开此文件内容如下：

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "4.2.0"
  },
  "dependencies": {
    "hexo": "^4.0.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^1.0.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-stylus": "^1.1.0",
    "hexo-renderer-marked": "^2.0.0",
    "hexo-server": "^1.0.0"
  }
}

一个json文件，可以得到hexo的版本信息，所有安装的依赖程序。并且在scripts字段下发现了几个刚才执行的命令，其实之前执行的几个命令实际是执行了对应的脚本。以下列出了Hexo中最重要的几个命令及其缩略形式，记住以下几个命令，就可以基本完成Hexo的操作。

hexo clean  = hexo c # 清除本地缓存，也就是清除public/文件夹和db.json文件。

hexo generate = hexo g # 将souce文件夹下的Markdown和HTML文件解析到了public文件夹下，并生成了db.json文件

hexo server = hexo s # 开启本地调试模式

hexo deploy = hexo d # 将本地资源部署到GithubPages

scaffolds

scaffolds是模板文件夹，当创建新的文章时，Hexo会根据scaffold里的不同模板来建立文件。什么意思呢？当使用Hexo新建一篇文章时使用的命令是:

hexo new [layout] <title>	

一般都会忽略[layout]可选参数，此时默认为post，也可以通过_config.yml中的default_layout参数来指定默认布局。

继续打开此文件夹，发现有三个.md文件：

其实这是Hexo的三种默认布局post、page和draft。使用Hexo创建三种模板类型的文件时，被创建的文件会被保存到不同的路径。而我们自定义的其他布局和post相同，都会保存在source/_posts文件夹下。

由此可见其对应的保存路径关系如下：

布局	路径
post	source/_post
page	source/
draft	source/_draft
自定义	source/_post

关于模板及文章发布相关的详细知识点建议您参考**官网文档**。

source

source资源文件夹，是存放用户资源的地方。除post文件夹除外，开头以_（下划线）命名的文件/文件夹或隐藏文件都会在generate时被忽略。Markdown和HTML文件夹会被解析到public文件夹下，其它文件格式的文件会被直接拷贝过去。

themes

themes是主题文件夹。Hexo会根据设置的主题来生成静态的页面，刚才说到**使用Hexo init生成的初始化站点的主题可能并不是你预估的样子。Hexo提供了丰富的站点主题供你选择，现在先去官网提供的主题页面**选取一个你喜欢的主题，下一章我们会讲解如何更换主题。

Hexo主题配置

根据官网介绍：创建或更换Hexo主题十分容易，只需要在themes文件夹内新增一个以theme名称命名的文件夹，并站点根目录下的_config.yml博客配置文件中的theme字段中修改成对应的theme名称即可切换主题。

一个主题的目录结构虽然相同，但是大致如下：

主题文件夹结构

• _config.yml:主题配置文件

  这里一定要注意区别跟站点目录下的_config.yml文件，一开始使用Hexo很容易将这两个配置文件弄混。站点目录下的_config.yml是博客全局配置文件，而对应的theme文件夹下的_config.yml则是主题配置文件，其中的配置只对当前主题生效。如果主题配置文件中的字段与全局配置文件重复，则会优先使用根站点目录下全局配置文件中的配置。

• languages:语言文件夹

• layout:布局文件夹

  用于存放主题的模板文件，决定了网站内容的呈现方式，Hexo内建Swig模板引擎，也可以另外安装插件来获得EJS、Haml或Jade支持。Hexo模板文件的扩展名决定了所用的引擎模板，如：

  layout.ejs - 使用EJS
  
  layout.swig - 使用Swig
  
  script:脚本文件夹，在启动时，Hexo会载入此文件夹内的JavaScript文件。
  
  

• source:资源文件夹

  除了模板以外的Asset，例如CSS、JavaScript文件等，都应该放在这个文件夹中。

修改默认主题

选择了一个喜欢的主题后，就可以更换默认主题。一般的话这些主题文件都会放在GitHub上，首先需要在博客根配置文件_config.yml中将theme字段下的主题更换为你选择的主题，比如此博客的主题就是**archer**。打开主题对应的GitHub页面，强烈建议首先阅读Readme。找到对应的clone地址后，将博客主题使用git clone保存到themes文件夹下。比如以next主题为例进行如下操作：

$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

此时执行Hexo命令:

hexo clean
hexo generate
hexo server

本地打开后博客后，发现已经将博客的主题更换成next主题了。

选取主题注意事宜

这里说一下我在选择博客主题时是依据哪些事项进行选择的。

• 首先是近期有无维护的主题：因为如果是年久未进行维护，可能一些插件已经不能使用或者所依赖的node框架版本也不支持了，那么如果你前端没有很精通的话就会提高维护成本。所以在美观的基础上尽量选择使用用户多，一直都在更新的主流主题；

• **主题是否已经集成所需插件：**还是那句话，如果你是新手，尽量不用自己去做额外的开发。如果主题不仅提供了所需插件，而且每一功能的插件提供了多种类型是最好不过的。

最后选择了archer这个主题就是基于以上考虑，首先这个主题的风格就是我喜欢的，其次就是插件集成的非常全面，我只需要做简单的配置就可以使用。给**fi3ework**点赞！

配置域名

此时还是不能通过自定义的域名来访问博客，因为还没配置域名。

域名解析

配置域名前首先需要在域名的服务商提供的域名解析功能中对域名做相应的域名解析,具体配置如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LUH7RZOU-1616166955577)(http://qiniucloud.num0.top/2020-04-18-7D67C05E-C665-49C5-A660-9C8C810239B0.png)]

• 主机记录：用于设置域名前缀，告诉DNS服务器把**【域名前缀+域名】的链接与记录值中的地址关联到一起。这里我的域名是num0.top，那么我在主机记录里输入www，在记录里输入lenhoon.github.io代表我把www.num0.top与lenhoon.github.io关联到了一起。不同的前缀具有不同含义，这里的@是表示解析域名num0.top,也就是不输入任何前缀**。

• 记录类型：是用来表示记录值的类型，A记录在记录值里填写服务器的IP地址;CNAME记录就在记录之中填写相应的域名。

上图中A记录中填写了一个IP地址。这里我并没有去购买一个服务器而是使用了GitHub Pages服务，所以这个IP地址对应的是GitHubPages提供的IP地址。这里可以参考**《Mamaging a custom domain for your Github Pages site》**。GitHub Pages给出的A记录IP如下：

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

这里还设置了一个主机记录为www，记录类型为CNAME的记录。添加这一条的原因是因为GitHub推荐在DNS中使用A记录和CNAME相结合的方式。

GitHubPages绑定域名

在GitHub中做以下操作：打开我们的博客仓库，然后点击Setting按钮

在此选项卡的Custom domain中填写你的域名:

稍等片刻，在浏览器中输入设置的域名，就可以打开你的个人博客。至此，已经完成了对个性化域名的绑定工作。

此时你会发现别人的教程中都是去配置一个叫做CNAME的文件。是的，如果此时你不配置这个文件，当你每次执行hexo deploy后，你都需要去Github中去设置Custom domain这个参数，不然就不能每次都通过域名打开博客。主要原始是每次发布之后，这里配置的Custom domain都会被清空。

如果你不想每次都登陆GitHub去配置此域名，你需要做的就是在站点目录下的source文件夹下新建一个CNAME文件，然后只需在此文件中写入我们的域名就好。Hexo在source文件夹中遇到不能处理的文件，比如这个CNAME文件就会原封不同的把它拷贝到public文件夹中，这样就解决了每次要修改Custom Domain的问题。

配置sitemap，让搜索引擎检索到博客

经过千辛万苦终于搭建好了博客，又经过一番千辛万苦写出了几篇博文，于是你兴高采烈的等待着别人来评论。几天过去了发现竟然没有人来看你的博客。为什么呢？

想想你平时都是怎么看别人博客的，是不是要通过搜索引擎去搜索？如果你去搜索引擎搜索你的博客你会发现基本搜索不到你的博客，为什么呢？

配置sitemap文件

首先我们要明白搜索引擎是通过站点地图（sitemap）去抓取可供爬取的网页的，所以首先需要配置站点的sitemap以允许搜索爬虫搜集到博客的站点信息。

Hexo有自动生成站点地图的工具，在博客根目录下输入以下命令以生成sitemap:

npm install hexo-generator-sitemap —save
npm install hexo-generator-baidu-sitemap —save 

我们希望Google和百度用户都能搜索到此博客，所以需要两个不同的sitemap。然后需要在博客的站点配置文件_cpnfig.yml中作以下配置：

# sitemap
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

此时执行hexo generate后你会发现在public文件夹下多了sitemap.xml和baidusitemap.xml两个文件，这就以供搜索Google和百度引擎爬虫抓取的站点地图。

站点验证

博客的sitemap是为了告诉了搜索引擎可以爬取的内容，但是搜索引擎怎么知道你就是这个网站的主人呢？

举个栗子：

你在一个超市门口喊：都来吧，今天全场5折，买一送一，路过的人怎么就知道你说的算呢？谁知道你是不是这个超市的工作人员呢？这个时候就需要来验证一下你的身份了：可以拿出你的工作证件来告诉大家你就是超市的负责人。这时大家才会相信你，然后超市的东西被一抢而空…

而此时你所在的超市旁边也有一个超市，这家超市正是你所在超市的最大竞争者，这个时候，你跑到别人家的超市门口喊，“快来吧，今天全场清仓处理，所有商品一律1折”，路过的顾客不相信有这种好事情，所以跑过来要看你的证件，结果发现你是旁边那边超市的，然后你就被胖揍了一顿…

所以搜索引擎也像路人一样，你需要向搜索引擎证明sitemap中标记的可以访问的资源是归属于你的，那么就需要验证下你对站点的所有权了。

再此只以谷歌为例，百度的验证方法大家可以自行探索。

首先登陆谷歌账号，设置 Google站点管理工具的验证字符串。

选择网址前缀，在网址中输入你博客的地址:

使用推荐的验证方式，下载HTML文件验证。但是怎么才能把这个html文件放到博客中呢？

想一下，执行hexo generate命令之后，会将souce文件夹下的Markdown和HTML文件解析到public文件夹下，使用hexo deploy时会把public文件夹下的文件拷贝到Github pages中，所以直接把这个html放到public文件加下就可以，然后执行hexo deploy，注意这个时候不用执行hexo generate。大概等待1分钟左右，点击验证出现以下对话框代表验证成功。

此时还需要上传站点地图sitemap到搜索引擎，下次让搜索引擎的爬虫来的光顾的时候就可以通过这个站点地图来爬取了相应的链接。就等于下一次你的超市有顾客光临，告诉他在哪里可以领取打折促销手册一样。此时你在登陆 Google站点管理工具 页面发现会是如下的页面：

在右侧的工具栏选择站点地图，并在弹出的界面输入sitemap的存放路径。当public/为站点的根目录后，此时输入的就是sitemap在public/文件夹下的位置。

等待一段时间，你就可以通过Google检索到你的博客了。而如何通过百度进行站点地图设置大同小异，你可以自己尝试一下。

总结

至此，此篇文章已经讲述了使用Hexo+GithubPages搭建个人博客的完整流程，并且讲述了一些基本的原理。希望这不仅是一篇可以按照教程搭建博客的操作手册，更希望这是一篇可以让你彻底的搞懂Hexo的教程。

网络上一些其他优秀的博客教程中讲了很多插件的设置，其实很多插件都是基于主题的，在一些主题中作者已经帮你集成好了各类插件，每类插件种类也非常的丰富，相信总有一款适合你，你要做的只是按照README中的指南，做一些简单的配置就好了。如果你对前端不精通，在选择一个主题前，需要考虑这个主题是否已经集成了你所需要的插件。但是如果你可以自己集成就不存在这个问题啦。

本文是重新开始写博客后的第一篇文章，用了将近两周的时间撰写，排版，修改。真的没有想象中的容易，此时更加佩服一些优秀的博主，无偿地将自己所学知识分享出来。作为一位码农，深知加班的压力，最近还是因为疫情没有加班，才得以每晚有1-2个小时的时间来重新搭建此博客并完成此篇文章。很难想象其他博主是如何高效、快速地输出一篇篇高质量的文章，这次只有望其项背。虽然一篇博文的输出很耗时，但是我一定会坚持下去。接下来我也会学习更多的时间管理方面的知识来更好的规划时间，并且会向其他博主取经如何高产。好了，如果你觉得这篇文章有用就给个赞吧！若有讹处，恳请斧正！