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.jsGit。(没装的筒子请自行移步官网,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 // 调试模式,观察是否有错误信息输出

然后呢就是这个样子:

效果图2

想要修改主题的默认配置可以修改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的语法来写,生成页面会报错。具体语法请移步官网

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

阅读 4.6k

推荐阅读
JavaScript学习笔记
用户专栏

针对JavaScript高级程序设计写的学习笔记

0 人关注
2 篇文章
专栏主页