引子

昨天晚上无意间在网上看到一篇利用gitPages建立自己博客的文章，还免费！本人立刻跟打鸡血似的了，今天鼓捣一整天，终于有一个雏形了，当然还有好多功能没有加，例如评论、统计之类的，一步一步来吧。这篇文章主要写一下今天自己建博客遇到的一点问题，希望能对看到这篇文章的人提供一点帮助。本文只求能将基本流程用比较浅显的语言讲出来，更深入和更细节的问题请自己探索 。

必备工具

硬件

电脑、网络什么的不用说了，这里以mac为例说明。

软件

下边将会提到：

1. Homebrew:这是一个Mac环境下的软件管理工具。它会将套件安装到独立目录，并将文件软链接至 /usr/local ，也就是说装了它之后，就可以通过命令行来安装软件了；
2. Node.js:简单的说，就是运行在服务端的JavaScript，有了它，服务器就能对我们的请求作出相应了，也就是说它是用来配置站点服务器的，具体关于Node.js的介绍可以看这篇文章；
3. Hexo:一款基于Node.js的静态博客框架。它决定了我们的博客文章是怎么显示出来，也就是它定义了我们博客的样子，网上有很多基于hexo的主题，都很漂亮，可以根据自己的喜好来设置；
4. Git和GitHub：Git是版本控制软件，它是一个工具，GitHub是一个项目托管平台，以Git进行版本控制为基础。关于Git，可以参考这个教程，干货多多。

建立博客的流程

想要建立一个自己的博客，其实就相当于要盖一座属于自己的展览馆，我们的博客文章就相当于展览馆的展出品，hexo相当于装修工人，Node.js相当于展览馆的工作人员，服务器就相当于是展览馆（包括展览馆的后勤系统），而GitHub就相当于展览馆所在的城市。

首先我们得决定把展览馆建在哪个地方，北京？上海？还是家里蹲？这就相当于我们是选择阿里云的服务器、腾讯云的服务器还是Git的服务器。前边两个都需要出租金的，而最后一个，我们只要注册一个账号，就能在它这盖房子了（好慷慨，不过它能提供的功能也比前两者少很多，房子只能盖小一点）。选好地儿之后，然后准备建筑材料，我们就可以盖自己的展览馆啦。

等基础设施都盖好之后，我们还要雇佣工作人员来维持场馆正常运转，还要进行室内的装修等等，哎，好麻烦啊。幸运的是，这一切都由hexo帮我们做好了。我们只需要进行一些基本的参数设置（博客的名称、作者、简介等），选择不同的装修风格（hexo主题）就行了。

然后我们就需要把在家写好的书、画好的画（博客文章）运到展览馆啦（文件的上传），接下来，我们只需要在网上和朋友们推荐自己的这个展览馆，告诉他们展览馆的地址（域名），鼓励他们都来参观（访问），然后就大功告成啦，尽情享受他们的赞叹吧。这就是博客建立的大致流程（中间省略好多细节，其实每一个流程单挑出来都是一门大学问，所以根据自己的兴趣或者哪一块不太明白可以自己在网上搜索）。接下来，我就根据这几个流程来讲一下博客的建立：

准备工作（软件的安装）

安装homebrew和Node.js

先安装homebrew，并确定其安装正确，然后安装Node.js，步骤比较简单，具体可以参考这篇文章的前半部分。

我遇到的坑

在这里，我之前遇到的一个坑是：安装完Node.js之后，在终端输入命令总是提示没命令无效，后来发现是因为文件夹搞错了。安装Node.js的时候，需要注意它安装在什么地方，因为以后执行npm之类的指令时，需在其安装目录下执行才有效。打开终端后，默认是以下格式：localhost:~ mac$，$前是本地账户的名字，而账户名字前就是当前文件夹。终端默认是在本地用户的根目录下。当进入某一个文件夹后（cd命令，可以先ls查看当前目录下的文档），之后终端命令会类似于这样：localhost:hexo mac$，也就是进入了hexo的文件夹。当执行npm或者其他指令的时候，需要确保当前文件夹是Node.js的安装路径才能执行。具体的命令可以参考Mac常用的终端命令。

注册账号（选地址盖房子）

注册账号的事情对于我们应该都不难吧，长这么大，注册的各种网站自己有时候都数不过来。流程呢，也更是轻车熟路。

GitHub官网注册一个账号，然后创建一个新的仓库（repository），仓库的名字一定要类似于：userName.github.io，userName一定要和你创建的Git账户名字相一致，而且后缀名字如果是.com访问的时候会出问题，接下来要下载Git软件，因为后续进行文件的上传需要用到。Git下载完之后，因为要和远程的GitHub服务器连接，所以还需要进行相关的配置，ssh验证等，具体的步骤可以参考上边提到的那个教程，或者是这篇文章，或者是这篇文章。这一步需要一点耐心。

Hexo的安装和配置（装修场馆）

好了，费劲一番周折后，终于可以把我们的展览馆盖起来了。接下来该进行最重要也是最有趣的步骤了。

Hexo的安装

当然，在这之前，还需要进行hexo的安装，不过，在经历了之前那么多安装步骤之后，这一步应该早已不在话下了。在终端输入$ sudo npm install hexo-cli -g即可。

Hexo的配置

Hexo的初始化

接下来就该装修我们的场馆了。首先，先初始化hexo，以后写博客的时候，一般就是本地调试，然后直接上传至服务器这样一个过程。终端中输入：$ hexo init userName.github.io，hexo会以init后边的名字新建一个文件夹并进行初始化的工作。注意：同样，因为有上边说的坑，所以这里，我们首先要通过cd命令进入到刚才hexo的初始化文件夹里，才能够进行下边的步骤。

安装主题

主题安装的方法基本都一样：网上找主题->git命令克隆复制到本地->配置->上传服务器->生效。

• 首先，git命令：
  $ git clone https:github.com/iissnan/hexo-theme-next themes/next，获取主题并复制到本地；
• 配置。配置文件有两个，名字都是_config.yml，一个在hexo根目录下（站点配置文件），一个在主题名字的根目录下（主题配置文件）。它们都可以通过自带的文本编辑器打开并进行修改，注释也都比较详细，比较容易阅读；
• 站点配置文件：主要设置博客的名称、作者、时间戳等基本信息，详细请看具体的站点配置文件说明。一般我们需要修改的有：title、author、language(汉语：zh-Hans)、theme(要使用的主题名字)、deploy(部署)下的类型（type:本例写git)和仓库（repo:https://github.com/userName.github.io.git）；
• 主题的配置文件：一般在主题的github就有详细的文档进行介绍。本例next主题的配置文件请看next主题配置。另外关于主题的文件夹层次结构，请看官网介绍：主题文件夹介绍。
  到了这一步，我们就可以测试一下输出了。在终端中输入$ hexo s，正常的情况下会出现：INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.，这表明配置已经正确，hexo开始运行了，接下来我们只需在浏览器中输入http://localhost:4000/，不出意外就可以看到Hello world的页面了。

编写博客

关于Markdown

配置成功之后，我们就该正式开始我们的工作了，毕竟前边所有的折腾都只是为了这一步－－编写自己的博客文章！现在Markdown貌似挺火，用起来也算简单方便。所以我们可以通过本地Markdown编辑器，编辑我们的博客文章，内容格式可以参考hexo目录下的scaffolds文件夹中的模版，至于具体的Markdown语法可以参考这里：简书，常用的命令都有提到。多说一句，我比较推荐使用本地编辑器，快捷键用起来非常方便啊，Mac下我用的是MacDown。

本地调试

编写完博客之后，将文档保存在hexo/source/_post文件夹中即可，是不是看到了刚才的Hello world文件？然后打开终端，输入$ hexo clean && hexo s，打开本地调试，是不是看见我们写的文章了呢？终于完成一大半工作啦！注：clean命令是清除缓存。

上传文件

本地调试好格式之后，接下来我们只需要把本地的文件上传至gitHub服务器即可。这里我们先通过：$ npm install hexo-deployer-git --save安装自动部署发布工具，然后输入$ hexo clean && hexo g && hexo d，等待系统上传完成即可。注：hexo g表示generate，生成静态文件；hexo d表示deploy，部署文件。

设置域名（场馆地址设置）

正常访问

上一步上传文件完成后，正常情况下，在userName.github.io仓库下就可以看到刚刚上传的文件了。然后在浏览器中输入：https://userName.github.io，看！是不是就可以访问到我们刚刚写的博客了？就是这么神奇！

好了，创建自己的博客到此结束...别急！你以为故事就这么结束了？！我申请的49块钱的域名还没用上呢？！赤裸裸的资源浪费啊！必须继续，把域名给用上啊！

为了钱不白花，多出来的一小节

首先你得先有一个域名这个自然不用说了吧，可以在网上搜，然后买一个，不是很贵（上边我都把域名的价格给暴露了...）。然后继续：

配置CNAME

在hexo文件夹下的source中新建一个文本文档， 里边输入刚才我们买到的域名的二级域名。举例来说，我申请的是dalianer.com，就填写blog.dalianer.com。但开头不要添加http(s)://，然后保存为CNAME，一定要是大写，否则会出问题，后缀名也去掉。另外，一个CNAME文件只能填写一个域名，这一步的目的是告知GitHub，我们要使用另一个域名来发布我们的博客，然后gitHub会将这个域名当作我们仓库的主域名，如果访问userName.github.io，会自动跳转至我们设置的域名。插曲：这里边说一下我遇到的一个坑：当时我在gitHub的仓库中直接新建CNAME文件，然后正常保存，可在终端部署完hexo之后，本地文件都成功上传至服务器，但是刚才新建的CNAME文件却没了！后来找到这个方法，好使！

配置解析服务器

刚才我们只是告诉gitHub我们要映射域名，gitHub会将我们的仓库名映射到自定义域名上，但是在我们直接访问自己域名的时候，还不会自动跳转至gitHub上。感觉上一步有点类似于只是将我们仓库的地址重新起了个名字一样，这一步才是真正的重定向：

域名解析设置.png

注意：在这里还有一个大坑：我们一般申请的是顶级域名，也就是domain.com/.cn之类，如果我们在CNAME文件中填入这个顶级域名，接下来我们的解析设置也会因此改变，需要解析跳转到gitHub的服务器地址，但是在网上搜了一圈，没找到现在gitHub对外的ip地址（之前的文章写的都有），说人话也就是：现在直接填写申请到的顶级域名，不能使用！xxx.com只能重定向至192.168.xxx.xx之类的地址，但是gitHub这个地址现在我们拿不到，所以最好使用二级域名，之后将解析重定向至userName.github.io即可。

总结

经过这么多的折腾，我们现在终于创建出属于自己的博客了，并且能通过自己的域名进行访问。虽然原理并不复杂，但是里边的细节比较多，步骤比较琐碎，需要一点耐心，不过当最后看到博客页面跳出来的时候，你一定会和我的感觉一样：一切都不是事儿！