彻底搞懂如何使用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服务器的功能，可以响应请求，并把相应的