一文详解Hexo+Github小白建站

作者：玩世不恭的Coder
时间：2020-03-08
说明：本文为原创文章，未经允许不可转载，转载前请联系作者

一文详解Hexo+Github小白建站

前言

GitHub是一个面向开源及私有软件项目的托管平台，也是版本控制库因为只支持git 作为唯一的版本库格式进行托管，故名gitHub。此后，2018年6月4日，微软宣布，通过75亿美元的股票交易收购代码托管平台GitHub。Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

不会使用Markdown的技术员不是一个好的技术员，其功能及其强大，大大加快了写作及排版的速度，同时完美的解决了江湖上令人头阔疼的传言：写文一小时，排版两小时。（小声哔哔：该订阅号中所有的文章都是基于Markdown来进行编写和排版的哦！）有时间的话，整理一篇关于我多年以来使用Markdown的经验，以及该文的排版样式等等。

Github+Hexo的官网：
Github：https://github.com/
Hexo：https://hexo.io/zh-cn/docs/

作为一位Coder，必定需要搭建一个属于自己的博客站点，来记录自己学习的过程以及所走过的坑。网络平台上也有各种各样的建站方法，例如WordPress、emlog、Typecho等等。但是这些对于一个有着极其建站欲望的小白来说无疑是难如上青天，对于懒癌患者来说也是一大痛病，通过海量信息的层层筛选，涛涛最终发现Hexo+Github能够很好的满足大多数小白的要求，既简单又美观，极其适合小白选手，使用它来搭建属于自己的个人站点再好不过了。如果你有也有建站的想法的话，那么以下内容将记录了我之前搭建Hexo的过程，或许能够帮助到你，久而久之，你还会发现其中还有很多有意思的美化操作。（日后再聊）

以下的图文并茂的搭建过程是针对纯小白所实现的，例如github仓库的创建、环境变量的配置、git终端等一些基础操作都有较为详细的说明，按照流程一步步来，分分钟建站毫无压力。

---

一、搭建环境

环境介绍：

1. windows系统：系统根据自己的实际需要准备即可，mac、linux皆可，为了服务更多的读者，本文主要介绍的是在windows系统下搭建。
2. git：安装之后方便使用各种命令，在github上直接使用clone命令秒速下载，在发布文章到服务器时也能方便的使用hexo clean、hexo g、hexo d等命令。
3. node.js：一个Javascript运行环境，网站的搭建必须建立在这个框架之上。
4. Hexo：使用命令可以直接将Hexo生成的静态资源存储到Github上，然后使用自己的Github账户即可访问。

安装：

Git的安装：

你可在git官网中根据自己的需要进行下载：https://git-scm.com/。打开之后你将看到如下内容，无脑download for Windows：

将其下载到指定的磁盘，然后Windows系统下傻瓜式安装即可。安装好后我们打开cmd终端（win+r -> 输入cmd -> 回车），执行git --version，若出现git version 2.19.2.windows.1之类的版本输出，那么恭喜你已经成功安装，离完成建站近了一步。

node.js的安装：

node.js的安装和Git的安装完全如出一辙，同样的操作下载node.js并安装即可，安装好后我们同样在cmd终端使用node -version命令，如出现v10.13.0类似输出，则说明已经成功安装。

node.js下载：https://nodejs.org/en/

Github的注册

Github是一个大佬级别的网站，我们进入Github的注册页面观摩一下：https://github.com/join?source=login

然后提示信息填写你的用户名、邮箱、密码等信息进行注册即可。

---

二、博客的秒速搭建

创建仓库并部署

注册了github之后，我们需要创建一个仓库来存储我们的网站源码以及文章等数据，创建的仓库名也就是我们最终站点所访问的url地址，该url是采用子域名的方式，其一般形式为：XXX.github.io。XXX一般代表着你注册时的github用户名，所以在你注册之后该仓库名一般是固定的，仓库的创建及部署流程参考如下：

• 进入个人Github主页之后点击New repository来创建新的仓库（就是放东西的），如下：
  

• 之后按照如下步骤进行
  

• 完成以上操作之后，你就已经成功创建好了自己的仓库。这时我们还需要利用git命令来生成我们的秘钥。鼠标右键桌面选择git bash here（安装好Git之后即可看见），然后在git终端执行以下命令：

1ssh-keygen -t rsa -C [e-mail]

其中[e-mail]指的是你注册github时候使用的邮箱，在命令执行的时候回有一些yes、no的选择，直接默认回车即可，最终你将会看到类似如下内容：

1Your identification has been saved in /c/Users/you/.ssh/id_rsa.
2Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.
3The key fingerprint is:
4xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx [e-mail]

之后你将在c/Users/you/.ssh/id_rsa.pub路径文件看到生成的秘钥对，这个文件我们暂且打开，之后复制粘贴会用到。

补充：打开git bash here之后我们首先需要配置一下个人信息，在git终端分别配置自己的用户名和邮箱。命令如下：

1git config --global user.name XXX   # XXX表示你github注册时的用户名
2git config --global user.email XXX  # XXX表示你github注册时的邮箱

• 之后我们需要将ssh key添加到我们的github账户。在个人github主页找到settings，然后点击SSH and GPG keys，之后再出现的页面的中点击New SSH key，随后根据如下图操作进行添加ssh key：
  

• 打开git bash here，执行ssh -T [e-mail]，之后会出现一系列的yes or no的问题，我们只需要回答yes即可，最终会输出如下类似内容：

1Hi username! You've successfully authenticated
2

OK，完成以上流程后，你的本机就可以连接上Github了。

Hexo博客框架的搭建

在完成以上操作后，我们就可以来完美地使用Hexo了，你可通过如下操作来进行。

• 在以上操作的基础上，我们首先安装一下Hexo。根据自己的需要在磁盘中创建一个名为hexo文件夹，为了更好的管理文件，涛涛是在E盘的根目录中创建该文件夹的。之后进入该文件并在当前路径下打开git bash here，依次运行如下命令来进行搭建hexo环境：

1npm install hexo-cli -g
2npm install hexo --save

执行完成之后，你会发现在该目录之下会有个node_modules文件夹生成，如此一来，你就已经搭建好了Hexo环境，离终点又近了一点 (*￣rǒ￣)

• 以上的node_modules文件生成之后，我们需要配置一下Hexo的环境变量，以便在cmd中可以直接执行后续博客操作的命令，而不需要在指定的Hexo目录中执行。进入到node_module文件夹下的bin目录，然后复制该bin目录的路径，如下：

后面的添加环境变量的操作比较简单，所以就描述一些流程，就不贴图了。如果有遇到问题的可联系涛涛，或者在下方留言即可。后续操作描述如下（小白也懂的操作）：

1. ctrl+D切换到桌面。
2. 右键此电脑，点击属性。
3. 点击左侧的高级系统设置。
4. 点击环境变量。
5. 在用户变量或者系统变量中找到Path并双击它（推荐用户变量）
6. 双击之后点击新建，然后将以上的复制的bin目录粘贴至此。
7. 然后一步一步的确定、确定、确定。OK，完成了，是不是很简单 (*￣rǒ￣)。

在以上操作完成之后，win+r，打开cmd终端，然后执行Hexo --version，若出现如下类似信息，则说明你的Hexo已经成功配置了环境变量。

• 随后，我们需要创建我们的博客站点的主目录，你可使用我推荐的方式进行创建，当然你也可以根据自己的喜好方式进行创建。首先在E盘的根目录下创建ZerosBlog文件夹（自定义），然后进入该文件夹并创建XXX.github.io文件夹（该文件夹名必须与你之前创建的github仓库名必须一致，必须固定），双击进入到该目录右键点击git bash here来打开git终端，之后在该终端下根据如下命令一步步进行操作：

初始化hexo：

1hexo init

自动安装网站所需组件：

1npm install

稍等片刻即可完成所有的安装步骤。OK，至此，你已经基本完成了网站的建设，可以说是万事具备，只欠东风了。一个基本的Hexo博客框架已经完成了，现在我们只需要最后一步了：导入自己的喜欢的博客主题即可正常使用了，Hexo中有很多很多很多的主题可供用户选择，主题的引入操作如下。

---

三、主题引入

Hexo中有很多很多很多的主题可供用户选择（N个。。。 Σ( ° △ °|||)︴ 我不知道有多少个，因为他会被许多的前端大神不断频繁更新开源着，如果好奇的话自行了解即可），其主题官网为：https://hexo.io/themes/，你可以在此观摩并使用任意一个来作为你博客的主题，但据统计，绝大多数使用hexo+github来搭建博客的都是使用NexT，它的简单美受到了许多用户的青睐，所以以下将以NexT为例来作为我们主题的引入，当然，你也可以去阅读NexT的主题文档来进行NexT主题的引入。

在Hexo主题页面ctrl+F并输入next查找到NexT主题，然后点击进入到NexT主题的github页面，该页面存储了NexT主题的源码，我们需要将其下载下来为己所用。在前面我们已经已经下载好了Git，而且也提到了git的最为方便之处就是可以随意clone github的任意资源，在这个操作就可以完美的显露出来了 ┗|｀O′|┛ 嗷 ┗|｀O′|┛ 嗷 ┗|｀O′|┛ 嗷~~。

在进入到NexT主题的Github仓库页面之后，根据如下图所示复制出该主题的仓库链接：

复制好该链接后我们进入E:\ZerosBlog\XXX.github.io\themes文件夹下，右键点击git bash here进入git终端，并执行如下命令，其中链接为你上一步所复制的内容

1git clone https://github.com/theme-next/hexo-theme-next.git

这个过程可能需要一丢丢的时间，如果你累了或者渴了的话可以喝口茶，稍等片刻之后就会在该目录之下成功下载NexT主题了。

待到成功下载NexT主题后，我们需要少量的配置来达到使用该主题的目的，该配置文件是属于站点的，其路径为E:\ZerosBlog\XXX.github.io\_config.yml，我们用文本编辑器（notepad、notepad++、sublime text、Vim……皆可）打开它，然后ctrl+f输入theme查找到theme属性，然后将值改为next，如下所示：

在NexT中已经为我们准备了四种博客样式，其配置文件在主题的配置文件中（注意与上文中博客的配置文件 _config.yml 区别开来），即E\ZerosBlog\XXX.github.io\themes\next\_config.yml文件，我们用文本编辑器（notepad、notepad++、sublime text、Vim……）打开它，然后ctrl+F输入scheme查找到如下内容：

可以看见总共有四种主题Muse、Mist、Pisces、Gemini，你可以根据自己的喜好选择其中一种（可以四种都尝试然后决定一种样式），然后将其他三种注释即可，ctrl+s保存然后退出

操作完成之后，我们来到站点的根目录下，即E:\ZerosBlog\XXX.github.io，打开git终端（空白处右键git bash heer），完成如下三步走命令

1. hexo clean：清除缓存
2. hexo g：生成静态页面
3. hexo d：将资源提交到服务器中

1hexo clean  
2heo g   
3hexo d  

在以上命令执行过程中，可能会遇到一个登陆表单的突然出现，我们只需要根据自己github注册时所填的信息进行登陆即可，命令执行完成之后我们的站点已经完成了部署并请求https://XXX.github.io/即可访问到自己的网站了，如下图所示：

---

四、总结

以上的图文并茂的搭建过程是针对纯小白所实现的，例如github仓库的创建、环境变量的配置、git终端等一些基础操作都有较为详细的说明，按照流程一步步来，分分钟建站毫无压力。另外如果在如上页面中有不懂的地方可以联系作者或者在下方留言，看到后会第一时间回复大家。

特别注意：
这里需要提一点的是，上面的搭建过程仅仅是博客站点的搭建，博客的内容需要我们在E:\MyBlog\XXX.github.io\source\_posts文件夹中创建你想要发布的文章，例：HelloWorld.md，然后在该文件下使用Markdown语法进行编写，编写完成之后同样使用hexo clean | hexo g | hexo d命令将撰写好的文章发布到Github服务器中，最后浏览器访问https://XXX.github.io/即可看见文章。Markdown撰写语法不再本文的内容介绍中，有时间的话，整理一篇关于我多年以来使用Markdown的经验，以及该文的排版样式等等，或者自行前去学习：https://www.zybuluo.com/mdeditor

至此，已经完成了博客的搭建，但是我们左看看、右看看，不管怎么看都似乎显得有点单调，在之后将会介绍博客的美化，可以引入一些插件，比如像Gitalk在线聊天、APlayer、字数统计、背景等一些插件。

2018-09-10，By 涛涛，于上饶