title: Hexo+NexT+Heroku十分钟免费博客建站教程
date: 2016-10-29 20:57:20
author：嘤嘤嘤

前言（上一段废话抒发一下情感先）

接触互联网到现在不长不短也有两年了，从最开始连css都不会写的小白，到每天对着一堆看不懂的英文文档持续蒙蔽和抓狂的新手，再到现在积累了一定的项目，中间也经历了踩坑无数和填坑无数的学习过程。但由于之前过于偷懒，这么两年下来啥也没留下。是时候觉得应该要好好记录下自己的成长经历了。之前一直觉得很多东西网上一搜教程一大堆，自己写了也没啥意思，无非也就是复制粘贴。可是编码本来就是一个建立复制粘贴的基础上学习的过程。之前看到有人说自己写博客写教程不是为了给别人看的，主要是对自己所学知识的一种总结。现在自己也算是正式进入互联网行业开始工作，这次折腾这个也算是迎来一次崭新良好的开始吧。本来之前想自己写站，整个博客系统写了将近四分之三了吧，最后觉得一开始就写得不够好，即使勉强上了后期也很难维护，反而给自己又找了个偷懒的借口。干脆就懒得折腾，直接用开源的框架库吧。

说到博客建站的话现在网上各种各样框架和解决方案就多了去了，什么WordPress啊，GitHub Pages啊真的是肥肠容易挑花了眼。出于颜值和方便的考虑，最终选择了Hexo（这货支持macdown啊这货一键发布啊这货各种啊……蛤蛤蛤）。好吧，废话说完就直奔主题吧。

安装Hexo

第一步首先当然是安装Hexo，安装过程十分easy，照着官方文档走一遍要不了几分钟就OK了。当然前提是你已经装了Node.js和Git。（没装的筒子请自行移步官网，Windows童鞋请自动忽略此文……对我是Mac狗表示不会用Windows囧）

Mac童鞋没装Xcode编译会报错哦～装个Xcode先。Xcode 完成后，启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

假如前提条件都OK的话，安装就是一条命令的事儿：

$ npm install -g hexo-cli

建站

嗯，一条命令敲完就直奔主题了，奏是辣么迅速。随便进个文件夹，然后执行以下三条命令，博客就建好了（想想自己之前还费劲写半天，好心酸）：

$ hexo init <folder>
$ cd <folder>
$ npm install

完成之后奏是介个样子的目录结构：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

package.json

这个文件也就不多说什么了，总之你想装啥都可以在这里配置，EJS, Stylus 和 Markdown renderer 已默认安装，可以自由移除。

_config.yml

这个文件就是一些站点基本信息的配置,具体参数请移步官网。只是有一点肥肠重要！这个文件中所有冒号后面的空格必须严格检查，只能有一个且是半角，不要用Tab，不然你就会看到这样错误：

end of the stream or a document separator is expected

基本配置好了后执行以下命令，就能在本地跑起来了，访问网址为：http://localhost:4000/。

$ hexo server

默认跑在4000端口，当然你也可以用-p参数自行制定端口，以下就是什么配置都没有做跑起来的结果：

默认的主题landspace还不错吧，感觉是要比什么WordPress，GitHub Pages好看一些吧囧……但是还是不够……所以第二个主角登场了：NexT

安装NexT

到站点目录地下执行以下命令：

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

然后打开刚刚说的站点目录底下的配置文件_config.yml，将theme字段更改为next:

theme: next

然后呢就算是配置好了，但是在切换主题之后、验证之前， 最好使用 hexo clean 来清除 Hexo 的缓存。然后跑起来看一看：

$ hexo s --debug // 调试模式，观察是否有错误信息输出

然后呢就是这个样子：

想要修改主题的默认配置可以修改themes/next/_config.yml文件。更多细节就不再赘述，请移步Next看官方指南。之后也会针对NexT再写一篇进阶指南。

安装Heroku

到现在为止呢站点算是建好了，接下来就需要部署了。之所以选择Heroku也没别的，因为 free而且速度还OK。
首先安装Heroku。Homebrew的同学请往下看，其他同学请移步Heroku官网下载。

$ brew install heroku-toolbelt
$ heroku update

下载好了之后需要先初始化一个Heroku的应用，先进入站点目录下登陆Heroku：

$ heroku login
Enter your Heroku credentials.
Email: yyy@example.com
Password:
...

然后创建一个应用：

$ heroku create <appname>

体现hexo强大的地方到了，你可以直接跳过Heroku文档里一堆复杂的部署步骤，因为hexo本身就支持一键部署，首先先下载个heroku部署插件：（温馨小提示 --save就是默认下载到dev文件下）

$ npm install hexo-deployer-heroku --save

接下来就是修改配置文件了(站点目录下的__config.yml)：

deploy:
 type: heroku
 repo: <repository url>  
 message: [message]    

repository url就是Heroku库（Repository）地址，到你的heroku所创建的app里面Settings就能看到。就是Git URL所对应的地址。message就是自定提交信息，默认为 Site updated: {{ now(‘YYYY-MM-DD HH:mm:ss’) }})。这里建议没有特殊需求的小白们为空就好，不然姿势不正确乱七八糟一堆报错。

好的，接下来离成功还有一步之遥：

$ hexo deploy

按下回车坐等看到INFO Deploy done: heroku的输出信息，你就可以打开刚刚的Heroku库地址看到你新鲜出炉的博客了。

绑定域名

当然如果你不满足herku给你分配的域名，你也可以绑定你自己的域名，但是需要heroku需要你绑定信用卡。
进入你的app的Settings界面找到Add domain如下：

添加完自己的域名之后会生成一个CNAME记录。修改你的域名的DNS记录，调整CNAME记录，等待新的解析生效即可。到此，恭喜你，你可以在新博客里面肆意折腾了。

发布文章

接下来就该发文了吧。就拿本篇教程为例，发布第一篇文章。

$ hexo new Hexo+NexT+Heroku十分钟免费博客建站教程

如果你没有自定义source的路径的话，默认生成的文件都会在source/_posts目录下。
建议还是写一下tags date等信息，方便你通过标签和日期管理文章。写好之后生成页面并部署网站：

$ hexo generate -d

虽然说呢hexo是支持macdown的，但是生成页面的时候还是需要自己的规则，比如引入的外部链接，所以如果完全按macdown的语法来写，生成页面会报错。具体语法请移步官网

最后附上我的博客链接：嘤嘤嘤填坑小窝