彻底搞懂如何使用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网站。先运用储备知识设想一下：静态网站是如何运作的呢？

粗略地画了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地...。
• 资源请求：通过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上购买的，也很方便。如果你想在购买国外域名服务商的域名，可以参考下那篇文章。

本章小结

花了很大篇幅类比了个人博客之于Website，发现个人博客本质就是一个Website。讲解了使用Hexo+GitHubPages搭建的个人博客的各个模块之于Website相应部分的对应关系。如上图Hexo+GitHubPages提供了服务端所需提供的功能。GithubPages提供了类似Web服务器的服务，并可以作为存放资源文件的仓库。而Hexo如后台程序可以生成HTML文件。我们申请的个性化域名就是为了可以通过DNS查询服务，方便别人通过一串个性化的URL地址访问到我们的博客。

为什么选择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，按照下述步骤进行操作：

​

• 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.gith...，可以看到一个简陋的界面，那么说明你已经成功开启了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   #创建站点根目录
  $ hexo init   #使用Hexo初始化站点根目录
  $ cd   #进入到站点根目录
  $ npm install  #安装npm所依赖的文件

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

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

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

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

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

• 博客的主题和样式并不是理想中的主题，需要选择合适的主题；
• 目前只能在本地访问，其他人还访问不到这个博客，需要将其部署到GitHubPages上；
• 通过个性域名来访问博客

Hexo生成站点目录结构

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

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

细心的你可能已经发现，此时的文件目录下比之前多出来一个文件夹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]