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

---

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的语法来写，生成页面会报错。具体语法请移步官网

最后附上个人博客连接：嘤嘤嘤填坑小窝