Hexo+NexT+GitHub Pages从零开始搭建博客

网上可以进行博文写作和更新的地方很多，像就是一个非常优秀的平台。但是总觉得，在别人网站上的文章就像是寄宿，假如有一个拥有自己域名的空间来更新博客就像是有了自己的家。但是大部分人都预算有限，也不愿意为了一时的冲动去花这无所谓的银子，所幸GitHubPage可以免费托管自己的网站，在万网上注册一个域名也不算贵（最便宜的4块钱首年），于是就花了点时间鼓捣了属于自己的博客空间。

我使用的Hexo的静态博客框架，NexT的主题，本地调通了后推送到了GitHub，并且在万网申请了域名，设置好域名解析后，把GitHub的网站地址绑定到了我申请的域名。稍微美化后，具体效果就是这样的：陌浅轩。欢迎收藏！

一、环境配置

配置Hexo环境需要git和node.js，安装git和node.js需要HomeBrew的环境。

1. HomeBrew

在Mac终端输入brew，发现能够出现一大串提示信息，说明你的HomeBrew已经安装了，如果没有，就输入如下命令进行安装：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. git

如果Mac上本来就已经安装了Xcode，那么就不用另外安装git了，Xcode已经自带了。
如果需要安装，那么输入以下命令：

brew install git

3. node.js

最方便的方式就是直接从node.js的官网上面去下载安装包，然后直接进行安装。请下载LTS版本（目前为v6.10.1 LTS)。

Node.js安装包

这时候在终端输入 npm可以看到有一串命令提示，说明安装成功，接下来，就可以配置Hexo了。

二、Hexo安装

关于Hexo的安装在Hexo官网上有很详细的步骤。

1. 安装,使用以下命令行：

npm install -g hexo-cli

2. 选取你想要放置Hexo文件的位置，比如我想放在文稿里面，于是我输入了：cd ~/Documents。
3. 输入以下命令来在这个目录下面建立一个Hexo的目录。

hexo init 
cd 
npm install

注意这个folder的名字最好使用username.github.io的形式，其中的username是你GitHub账号的昵称。假如我GitHub的昵称为abc，那么我就输入hexo init abc.github.io。这种命名方式涉及到GitHub Pages的命名规则，在下面再说。

4. 你可以看到abc.github.io文件夹下面出现了如下的文件：

   
   
   

   Hexo文件系统
5. 输入hexo s或者hexo server，出现如下提示，输入下面的网址(localhost:4000/)，就能看到博客的雏形了。
   
   
   
   hexo s命令通常用来测试用，可以在你上传改动之前，在本地提前看到改动的样子。

其实到了现在，你的博客就已经初步搭建完成了，只是这个博客你只能自己在本地才能看到而已。如果想要大家能够访问到，就应该放到Internet环境里面去。因为GitHub Pages可以帮助我们把存进仓库的Hexo博客转为网页内容，所以我们下一步就是把刚刚在本地创建的Hexo博客放到GitHub里面去。

三、上传到GitHub

1. 创建仓库

首先，你要有一个GitHub账号，没有的自己去申请，我这里就不啰嗦了。登录GitHub。
然后点击“New repository”创建一个新的仓库，仓库名前缀一定要和用户名一样，格式一定要是*****.github.io这样的。其他地方不需要修改，直接点“Create repository”。

创建Hexo仓库

原因就是GitHub Pages的域名就是github.io，如果想使用这个服务就要用这个域名，不然你的网页是呈现不出来的。

上图是四种GitHub Pages站点创建方式，我使用的是第一种。发现没，不管哪种，域名都是github.io。分支一般使用master分支，还可以使用gh-pages分支和master分支下的/docs文件夹存放Hexo博客，但是我就不舍近取远了。

2. 关联远程仓库

在本地打开根目录下面的_config.yml文件（可以使用vim，我用的Sublime神器）。最下面有个deploy,type设置为git，branch设置为master，repo设置为你的HTTPS或者SSH方式的URL：

我使用的SSH，如下图：

当然，如果怕麻烦，你们也可以使用HTTPS，因为使用SSH需要配置本地秘钥，HTTPS只需要在需要的时候输入账号密码就可以了。

3. 进行推送

推送一般分三步

• hexo clean
• hexo generate (或者hexo g)
• hexo deploy (或者hexo d)

第二步和第三步可以精简为hexo d -g或者hexo g -d。
这时候，在浏览器输入*.github.io，应该能看到之前你在本地测试的时候看到的网页了。

四、添加NexT主题

NexT主题作为一款“精于心，简于形”的主题，很受Hexo用户的喜爱，相关的文档可以参考官方文档。上面说的很清楚，自我感觉讲的没官方的清除，就不多浪费你们的眼球了。注意_config.yml文件是站点配置文件，还是主题配置文件的区别就好了。

Next主题的最新版本的GitHub库位置已经更换，Next官网上是旧的https://github.com/iissnan/hexo-theme-next ，最新的Next主题请转到https://github.com/theme-next/hexo-theme-next .

到这里，你只需要把文件进行推送就可以看到你的崭新的NexT主题的博客页面了（别忘了先clean再推送）。

五、绑定个人域名

虽然别人能通过*.github.io访问到你的博客，但是使用这个域名毕竟有些不爽，要是能使用自己的个性域名多好啊！

1. 拥有一个域名

我是在万网申请的个人域名。打开万网，登录阿里云（如果没有就注册一个）。首先检查自己想要注册的域名有没有被占用。

点击“查域名”后，你看到一个域名的列表，可以看到有没有被注册，以及价格等。你可以选择合适的域名进行购买。我购买的.win的域名很便宜，首年4块钱，以后每年7块。如果稍微资金充裕些，建议配套上云解析热销版，不到20块钱，增加一些安全服务，加快解析速度，也是很划算的。
购买后，这个域名就是属于你的了，一定要实名认证，不然无法进行绑定。

2. 配置解析

• 进入万网控制台，进入域名服务，可以看到自己刚刚购买的域名，如果没有实名认证，是不会显示“正常”的。

  
  
  
• 点击右侧的“解析”，进入云解析界面。点击添加解析（不要进入新手引导），添加如下的三个解析：
  
  
  
  主机记录分别是*，@，www，记录值是(你的用户名).github.io. ，一定不要丢掉最后那个点。
• 其中就是所有的你注册的域名的子域名都指向咱们的博客，@的是前面没有www之类的字段的域名，最后的www作为常用的，可以也单独设置一下，不过你们也看到了，我最后一个是暂停状态，不过也不影响我使用啊~因为就包括www了。
• 最后一步，在本地根目录下的source文件夹下面建立一个CNAME文件，一定要全部大写！一定不要后缀名！然后在里面输入你的域名。比如我输入的是lifan666.win。这个是有重定向功能的，你的所有其他子域名（比如www.lifan666.win）会被重定向到这个域名（比如lifan666.win)。我更希望使用的是www.lifan666.win，所有我在这个文件里面最后改成了www.lifan666.win。所有你们可以试试，网址输入lifan666.win，最后是不是显示的是www.lifan666.win啦~
• 最最后一步，hexo clean然后hexo d -g，然后等待DNS生效后，就能定向成功了！

---

到这里，你的博客就基本搭建成功啦，剩下的工作，就是对博客进行各种细节优化啦，添加各种效果啦，尽力去完善吧！O(∩_∩)O