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的語法來寫，生成頁面會報錯。具體語法請移步官網

最後附上個人博客連接：嚶嚶嚶填坑小窩