Hexo：基於 Node.js 的靜態博客程序

Hexo，這個逼格極高的程序猿寫做方式，我喜歡。就連 Hexo 的發音都像是黑客哦！若是你跟我同樣糾結哪裏寫博，那就來到GitHub吧，讓咱們一塊兒hexo！H人希絕對不會讓你失望，相信很快hexo就會流行起來。

Hexo出自臺灣大學生 tommy351 之手，是一個基於 Node.js 的靜態博客程序，其編譯上百篇文字只須要幾秒。hexo生成的靜態網頁能夠直接放到GitHub Pages，BAE，SAE等平臺上。先看看tommy是如何吐槽Octopress的——《Hexo颯爽登場》。

搭建過程你或許以爲有那麼點小繁瑣，但一旦搭建完成，寫文章是極簡單，極舒服的。

只須要幾個簡單命令，你就能夠完成一切。

hexo n #寫文章
hexo g #生成
hexo d #部署 # 可與hexo g合併爲 hexo d -g

下面逐步介紹，進入正題。

環境準備

安裝Node
到Node.js官網下載相應平臺的最新版本，一路安裝便可。我用的是node-v0.10.22-x86.msi

安裝Git
Git的客戶端不少，詳細的能夠看一些這篇文章的安裝教程：《使用 Github Pages 建獨立博客》

安裝Sublime（可選）
Sublime Text 2在這裏僅僅做爲一個文本編輯器使用，支持各類編程語言和文件格式，固然也支持Markdown語法，實在是個不可多得的練碼奇才。喜歡追鮮的也能夠嘗試處於beta版本的Sublime Text 3。

Github

• 首先註冊一個『GitHub』賬號，已有的默認默認請忽略
• 創建與你用戶名對應的倉庫，倉庫名必須爲『your_user_name.github.com』
• 添加SSH公鑰到『Account settings -> SSH Keys -> Add SSH Key』

前兩步忽略，只說第三步，添加SSH-Key。
首先設置你的用戶名密碼：

git config --global user.email "你的郵箱"
git config --global user.name "你的用戶名"

生成密鑰：

ssh-keygen -t rsa -C "你的郵箱"

輸入文件路徑：

H:\hexo\blog>ssh-keygen -t rsa -C "xiaowu@aips.me（你的郵箱）"
Generating public/private rsa key pair.
Enter file in which to save the key (//.ssh/id_rsa): H:\git\myssh\ssh
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in H:\git\myssh\ssh.
Your public key has been saved in H:\git\myssh\ssh.pub.
The key fingerprint is:
b0:0c:2e:67:33:ab:c1:50:10:40:0a:ba:c1:80:59:22 xiaowu@aips.me

上面有個bug，文件路徑中的盤符H必須大寫，不然會報錯。

上述命令若執行成功，會在H:\git\myssh目錄下生成兩個文件id_rsa和id_rsa.pub，最後兩步：

1. 用文本編輯器打開ssh.pub文件，拷貝其中的內容，將其添加到Add SSH Key
2. 將id_rsa和id_rsa.pub拷貝至你Git安裝目錄下的.ssh目錄，如H:\PortableGit-1.8.4\.ssh

能夠驗證一下：

ssh -T git@github.com

如有問題，請從新設置。常見錯誤請參考：
GitHub Help - Generating SSH Keys
GitHub Help - Error Permission denied (publickey)

安裝

Node和Git都安裝好後，可執行以下命令安裝hexo：

npm install -g hexo

初始化

而後，執行init命令初始化hexo到你指定的目錄：
[cce]hexo init [/cce]

也能夠cd到目標目錄，執行hexo init。
好啦，至此，所有安裝工做已經完成！

生成靜態頁面

cd 到你的init目錄，執行以下命令，生成靜態頁面至hexo\public\目錄。

hexo generate

【注】命令必須在init目錄下執行，不然不成功，可是也不報錯。
當你修改文章Tag或內容，不能正確從新生成內容，能夠刪除hexo\db.json後重試，還不行就到public目錄刪除對應的文件，從新生成。

本地啓動

執行以下命令，啓動本地服務，進行文章預覽調試。
[cce]hexo server[/cce]
瀏覽器輸入 http://localhost:4000 就能夠看到效果。

請使用高級瀏覽器，不然可能…你懂的！

寫文章

執行new命令，生成指定名稱的文章至hexo\source_posts\postName.md。
[cce]hexo new [layout] "postName" #新建文章[/cce]
其中layout是可選參數，默認值爲post。有哪些layout呢，請到scaffolds目錄下查看，這些文件名稱就是layout名稱。固然你能夠添加本身的layout，方法就是添加一個文件便可，同時你也能夠編輯現有的layout，好比post的layout默認是hexo\scaffolds\post.md

title: {{ title }}
date: {{ date }}
tags:
---

我想添加categories，以避免每次手工輸入，只須要修改這個文件添加一行，以下：

title: {{ title }}
date: {{ date }}
categories:
tags:
---

postName是md文件的名字，同時也出如今你文章的URL中，postName若是包含空格，必須用"將其包圍，postName能夠爲中文。

【注】全部文件：後面都必須有個空格，否則會報錯。

看一下剛纔生成的文件hexo\source_posts\postName.md，內容以下：

title: postName #文章頁面上的顯示名稱，能夠任意修改，不會出如今URL中
date: 2014-05-16 15:30:16 #文章生成時間，通常不改，固然也能夠任意修改
categories: #文章分類目錄，能夠爲空，注意:後面有個空格
tags: #文章標籤，可空，多標籤請用格式[tag1,tag2,tag3]，注意:後面有個空格
---
這裏開始使用markdown格式輸入你的正文。

接下來，你就能夠用喜好的編輯器盡情書寫你的文章。關於markdown語法，能夠參考《Markdown 語法說明》

fancybox
可能有人對這個 Reading 頁面中圖片的 fancybox 效果感興趣，這個是怎麼作的呢。
很簡單，只須要在你的文章*.md文件的頭上添加photos項便可，而後一行行添加你要展現的照片：

layout: photo
title: 個人閱歷
date: 2085-01-16 07:33:44
tags: [hexo]
photos:
- http://cnd.aips.me/photos-0.jpg
- http://cdn.aips.meing/photos-1.jpg

【注】通過測試，文件頭上的layout: photo能夠省略。

不想每次都手動添加怎麼辦？一樣的，打開您的hexo\scaffolds\photo.md

layout: { { layout } }
title: { { title } }
date: { { date } }
tags:
photos:
----

而後每次能夠執行帶layout的new命令生成照片文章：

hexo new photo "photoPostName" #新建照片文章

description
markdown文件頭中也能夠添加description，以覆蓋全局配置文件中的description內容，請參考下文_config.yml的介紹。

title: hexo你的博客
date: 2013-11-22 17:11:54
categories: default
tags: [hexo]
description: 你對本頁的描述
---

hexo默認會處理所有markdown和html文件，若是不想讓hexo處理你的文件，能夠在文件頭中加入layout: false。

文章摘要
在須要顯示摘要的地方添加以下代碼便可：

以上是摘要
<!--more-->

more以上內容便是文章摘要，在主頁顯示，more如下內容點擊『> Read More』連接打開全文才顯示。
【注】hexo中全部文件的編碼格式均是UTF-8。

主題安裝

蘿蔔白菜各有所愛，玩博客換主題是必不可少的，hexo的主題列表 Hexo Themes。
我比較喜歡 pacman，modernist、ishgo，raytaylorism。Pacman最爲優秀，簡潔大方小清新，同時移動版本支持的也很好，但做者並無把不少參數分離出來給出可配置項，我最終選擇了modernist。

安裝主題的方法就是一句git命令：

git clone https://github.com/heroicyang/hexo-theme-modernist.git themes/modernist

目錄是不是modernist無所謂，只要與_config.yml文件一致便可。

安裝完成後，打開hexo_config.yml，修改主題爲modernist

theme: modernist

打開hexo\themes\modernist目錄，編輯主題配置文件_config.yml：

menu: #配置頁頭顯示哪些菜單
# Home: /
Archives: /archives
Reading: /reading
About: /about
# Guestbook: /about

excerpt_link: Read More #摘要連接文字
archive_yearly: false #按年存檔

widgets: #配置頁腳顯示哪些小掛件
- category
# - tag
- tagcloud
- recent_posts
# - blogroll

blogrolls: #友情連接
- bruce sha's wordpress: http://www.aips.me
- bruce sha's Design blog: http://ww.aips.me/blog/
- bruce sha's Dribbble: http://dribbble.com/xiaowu

fancybox: true #是否開啓fancybox效果

duoshuo_shortname: buru #多說帳號

google_analytics:本身寫上來

rss:本身寫上來

更新主題

cd themes/modernist
git pull

評論框

靜態博客要使用第三方評論系統，hexo默認集成的是Disqus，由於你懂的，因此國內的話仍是建議用多說。
直接用你的微博/豆瓣/人人/百度/開心網賬號登陸多說，作一下基本設置。若是使用modernist主題，在modernist_config.yml中配置duoshuo_shortname爲多說的基本設置->域名中的shortname便可。你也能夠在多說後臺自定義一下多說評論框的格式，好比評論框的位置，對於css設置，能夠參考這裏，我是在 HeroicYang 的基礎上修改的。

若是你是有的其餘第三方評論系統，將通用代碼粘貼到 hexo\themes\modernist\layout_partial\comment.ejs 裏面，以下：

<% if (config.disqusshortname && page.comments){ %>

#你的通用代碼 

<% } %>

自定義頁面

執行new page命令

hexo new page "about"

在hexo\source\下會生成about目錄，裏面有個index.md，直接編輯就能夠了，而後在主題的_config.yml中將其配置顯示出來。
上述步驟，也能夠手工生成，在hexo\source\下手工新建about和index.md也是徹底等價的。

由於markdown對table的支持很差，我是在about中直接創建index.html，裏面書寫頁面內容，hexo會幫你加上頭和尾。

404頁面

GitHub Pages 自定義404頁面很是容易，直接在根目錄下建立本身的404.html就能夠。可是自定義404頁面僅對綁定頂級域名的項目才起做用，GitHub默認分配的二級域名是不起做用的，使用hexo server在本機調試也是不起做用的。
其實，404頁面能夠作更多有意義的事，來作個404公益項目吧。
目前有以下幾個公益404接入地址，我選擇了騰訊的。404頁面，每一個人能夠作的更多。

騰訊公益404
404公益_益雲(公益互聯網)社會創新中心
失蹤兒童少年資料管理中心404

圖牀

考慮到博客的速度，同時也爲了便於博客的遷移，圖牀是必須的。我強烈推薦七牛雲存儲，訪問速度極快，支持日誌、防盜鏈和水印。

免費用戶有每個月10GB流量+總空間10GB+PUT/DELETE 10萬次請求+GET 100萬次請求，這對我的博客來講足夠，不夠的話點這個活動頁面，也可經過邀請好友得到獎勵，我也求一下七牛邀請。有一點要說明的是，七牛沒有目錄的概念，可是文件名能夠包含/，好比2013/11/27/reading/photos-0.jpg，參考這裏關於key-value存儲系統。
若是你對七牛web版的文件管理界面不滿意，能夠用官方的七牛雲存儲工具。

申請域名（可選）

GitHubPages 默認爲每一個用戶分配了一個二級域名『your_user_name.github.com』或『your_user_name.github.io』（具體能夠看這裏）。

若是你對上述域名不滿意，能夠本身去申請一個本身的域名（周良常年代理註冊，價格比官網便宜許多），而後綁定到GitHub Pages。綁定方法很簡單，在repo根目錄下創建一個CNAME文件，裏面寫上域名便可。

命令

經常使用命令：

hexo new "postName" #新建文章
hexo new page "pageName" #新建頁面
hexo generate #生成靜態頁面至public目錄
hexo server #開啓預覽訪問端口（默認端口4000，'ctrl + c'關閉server）
hexo deploy #將.deploy目錄部署到GitHub

經常使用複合命令：

hexo deploy -g
hexo server -g

簡寫：

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

至此，基本操做介紹完畢，若是你對Hexo這種博客方式有興趣，能夠移步到個人代碼博客查看相關的教程：

http://www.aips.me/code/category/hexo

本文經原做者贊成後進行轉載，原文地址這裏