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

末了附上我的博客链接：嘤嘤嘤填坑小窝