科技獵Hexo：獨立博客新玩法 | 周良博客
- 環(huán)境準備
- Github
- 安裝
- 初始化
- 生成靜態(tài)頁面
- 本地啟動
- 寫文章
- 主題安裝
- 評論框
- 自定義頁面
- 404頁面
- 圖床
- 申請域名（可選）
- 命令
Hexo，這個逼格極高的程序猿寫作方式，我喜歡。就連 Hexo 的發(fā)音都像是黑客哦！如果你跟我一樣糾結(jié)哪里寫博，那就來到GitHub吧，讓我們一起hexo！H人希絕對不會讓你失望，相信很快hexo就會流行起來。
Hexo出自臺灣大學生?tommy351?之手，是一個基于 Node.js 的靜態(tài)博客程序，其編譯上百篇文字只需要幾秒。hexo生成的靜態(tài)網(wǎng)頁可以直接放到GitHub Pages，BAE，SAE等平臺上。先看看tommy是如何吐槽Octopress的——《Hexo颯爽登場》。
搭建過程你或許覺得有那么點小繁瑣，但一旦搭建完成，寫文章是極簡單，極舒服的。
只需要幾個簡單命令，你就可以完成一切。
hexo n http://www.aips.me寫文章
hexo g http://www.aips.me生成
hexo d http://www.aips.me部署 http://www.aips.me 可與hexo g合并為 hexo d -g
下面逐步介紹，進入正題。
環(huán)境準備
安裝Node
到Node.js官網(wǎng)下載相應(yīng)平臺的最新版本，一路安裝即可。我用的是node-v0.10.22-x86.msi
安裝Git
Git的客戶端很多，詳細的可以看一些這篇文章的安裝教程：《使用 Github Pages 建獨立博客》
安裝Sublime（可選）
Sublime Text 2在這里僅僅作為一個文本編輯器使用，支持各種編程語言和文件格式，當然也支持Markdown語法，實在是個不可多得的練碼奇才。喜歡追鮮的也可以嘗試處于beta版本的Sublime Text 3。
Github
- 首先注冊一個『GitHub』帳號，已有的默認默認請忽略
- 建立與你用戶名對應(yīng)的倉庫，倉庫名必須為『your_user_name.github.com』
- 添加SSH公鑰到『Account settings -> SSH Keys -> Add SSH Key』
前兩步忽略，只說第三步，添加SSH-Key。
首先設(shè)置你的用戶名密碼：
1 2 | git config --global user.email "你的郵箱" git config --global user.name "你的用戶名" |
生成密鑰：
1 | ssh-keygen -t rsa -C "你的郵箱" |
輸入文件路徑：
1 2 3 4 5 6 7 8 9 | H:\hexo\blog>ssh-keygen -t rsa -C "[email protected]（你的郵箱）" 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 [email protected] |
上面有個bug，文件路徑中的盤符H必須大寫，否則會報錯。
上述命令若執(zhí)行成功，會在H:\git\myssh目錄下生成兩個文件id_rsa和id_rsa.pub，最后兩步：
- 用文本編輯器打開ssh.pub文件，拷貝其中的內(nèi)容，將其添加到Add SSH Key
- 將id_rsa和id_rsa.pub拷貝至你Git安裝目錄下的.ssh目錄，如H:\PortableGit-1.8.4\.ssh
可以驗證一下：
1 | ssh -T [email protected] |
若有問題，請重新設(shè)置。常見錯誤請參考：
GitHub Help &http://www.aips.me8211; Generating SSH Keys
GitHub Help &http://www.aips.me8211; Error Permission denied (publickey)
安裝
Node和Git都安裝好后，可執(zhí)行如下命令安裝hexo：
1 | npm install -g hexo |
初始化
然后，執(zhí)行init命令初始化hexo到你指定的目錄：
1 | hexo init |
也可以cd到目標目錄，執(zhí)行hexo init。
好啦，至此，全部安裝工作已經(jīng)完成！
生成靜態(tài)頁面
cd 到你的init目錄，執(zhí)行如下命令，生成靜態(tài)頁面至hexo\public\目錄。
1 | hexo generate |
【注】命令必須在init目錄下執(zhí)行，否則不成功，但是也不報錯。
當你修改文章Tag或內(nèi)容，不能正確重新生成內(nèi)容，可以刪除hexo\db.json后重試，還不行就到public目錄刪除對應(yīng)的文件，重新生成。
本地啟動
執(zhí)行如下命令，啟動本地服務(wù)，進行文章預覽調(diào)試。
1 | hexo server |
瀏覽器輸入?http://localhost:4000?就可以看到效果。
請使用高級瀏覽器，否則可能…你懂的！
寫文章
執(zhí)行new命令，生成指定名稱的文章至hexo\source\_posts\postName.md。
1 | hexo new [layout] "postName" http://www.aips.me新建文章 |
其中l(wèi)ayout是可選參數(shù)，默認值為post。有哪些layout呢，請到scaffolds目錄下查看，這些文件名稱就是layout名稱。當然你可以添加自己的layout，方法就是添加一個文件即可，同時你也可以編輯現(xiàn)有的layout，比如post的layout默認是hexo\scaffolds\post.md
1 2 3 4 | title: {{ title }} date: {{ date }} tags: --- |
我想添加categories，以免每次手工輸入，只需要修改這個文件添加一行，如下：
1 2 3 4 5 | title: {{ title }} date: {{ date }} categories: tags: --- |
postName是md文件的名字，同時也出現(xiàn)在你文章的URL中，postName如果包含空格，必須用&http://www.aips.me8221;將其包圍，postName可以為中文。
【注】所有文件：后面都必須有個空格，不然會報錯。
看一下剛才生成的文件hexo\source\_posts\postName.md，內(nèi)容如下：
1 2 3 4 5 6 | title: postName http://www.aips.me文章頁面上的顯示名稱，可以任意修改，不會出現(xiàn)在URL中 date: 2014-05-16 15:30:16 http://www.aips.me文章生成時間，一般不改，當然也可以任意修改 categories: http://www.aips.me文章分類目錄，可以為空，注意:后面有個空格 tags: http://www.aips.me文章標簽，可空，多標簽請用格式[tag1,tag2,tag3]，注意:后面有個空格 --- 這里開始使用markdown格式輸入你的正文。 |
接下來，你就可以用喜愛的編輯器盡情書寫你的文章。關(guān)于markdown語法，可以參考《Markdown 語法說明》
fancybox
可能有人對這個 Reading 頁面中圖片的 fancybox 效果感興趣，這個是怎么做的呢。
很簡單，只需要在你的文章*.md文件的頭上添加photos項即可，然后一行行添加你要展示的照片：
1 2 3 4 5 6 7 | layout: photo title: 我的閱歷 date: 2085-01-16 07:33:44 tags: &http://www.aips.me91;hexo&http://www.aips.me93; photos: - http://aipsme.qiniudn.com/2013/11/27/reading/photos-0.jpg - http://aipsme.qiniudn.com/2013/11/27/reading/photos-1.jpg |
【注】經(jīng)過測試，文件頭上的layout: photo可以省略。
不想每次都手動添加怎么辦？同樣的，打開您的hexo\scaffolds\photo.md
1 2 3 4 5 6 7 | layout: &http://www.aips.me123; &http://www.aips.me123; layout &http://www.aips.me125; &http://www.aips.me125; title: &http://www.aips.me123; &http://www.aips.me123; title &http://www.aips.me125; &http://www.aips.me125; date: &http://www.aips.me123; &http://www.aips.me123; date &http://www.aips.me125; &http://www.aips.me125; tags: photos: - --- |
然后每次可以執(zhí)行帶layout的new命令生成照片文章：
1 | hexo new photo "photoPostName" http://www.aips.me新建照片文章 |
description
markdown文件頭中也可以添加description，以覆蓋全局配置文件中的description內(nèi)容，請參考下文_config.yml的介紹。
1 2 3 4 5 6 | title: hexo你的博客 date: 2013-11-22 17:11:54 categories: default tags: &http://www.aips.me91;hexo&http://www.aips.me93; description: 你對本頁的描述 --- |
hexo默認會處理全部markdown和html文件，如果不想讓hexo處理你的文件，可以在文件頭中加入layout: false。
文章摘要
在需要顯示摘要的地方添加如下代碼即可：
1 2 | 以上是摘要 <!--more-->以下是余下全文 |
more以上內(nèi)容即是文章摘要，在主頁顯示，more以下內(nèi)容點擊『> Read More』鏈接打開全文才顯示。
【注】hexo中所有文件的編碼格式均是UTF-8。
主題安裝
蘿卜白菜各有所愛，玩博客換主題是必不可少的，hexo的主題列表 Hexo Themes。
我比較喜歡?pacman，modernist、ishgo，raytaylorism。Pacman最為優(yōu)秀，簡潔大方小清新，同時移動版本支持的也很好，但作者并沒有把很多參數(shù)分離出來給出可配置項，我最終選擇了modernist。
安裝主題的方法就是一句git命令：
1 | git clone https://github.com/heroicyang/hexo-theme-modernist.git themes/modernist |
目錄是否是modernist無所謂，只要與_config.yml文件一致即可。
安裝完成后，打開hexo\_config.yml，修改主題為modernist
1 | theme: modernist |
打開hexo\themes\modernist目錄，編輯主題配置文件_config.yml：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | menu: http://www.aips.me配置頁頭顯示哪些菜單 http://www.aips.me Home: / Archives: /archives Reading: /reading About: /about http://www.aips.me Guestbook: /about excerpt_link: Read More http://www.aips.me摘要鏈接文字 archive_yearly: false http://www.aips.me按年存檔 widgets: http://www.aips.me配置頁腳顯示哪些小掛件 - category http://www.aips.me - tag - tagcloud - recent_posts http://www.aips.me - blogroll blogrolls: http://www.aips.me友情鏈接 - bruce sha - bruce sha's javaeye: http://buru.iteye.com - bruce sha - bruce sha's baidu space: http://hi.baidu.com/iburu fancybox: true http://www.aips.me是否開啟fancybox效果 duoshuo_shortname: buru http://www.aips.me多說賬號 google_analytics: rss: |
更新主題
1 2 | cd themes/modernist git pull |
評論框
靜態(tài)博客要使用第三方評論系統(tǒng)，hexo默認集成的是Disqus，因為你懂的，所以國內(nèi)的話還是建議用多說。
直接用你的微博/豆瓣/人人/百度/開心網(wǎng)帳號登錄多說，做一下基本設(shè)置。如果使用modernist主題，在modernist_config.yml中配置duoshuo_shortname為多說的基本設(shè)置->域名中的shortname即可。你也可以在多說后臺自定義一下多說評論框的格式，比如評論框的位置，對于css設(shè)置，可以參考這里，我是在 HeroicYang 的基礎(chǔ)上修改的。
如果你是有的其他第三方評論系統(tǒng)，將通用代碼粘貼到 hexo\themes\modernist\layout\_partial\comment.ejs 里面，如下：
1 2 3 4 | <% if &http://www.aips.me40;config.disqus_shortname && page.comments&http://www.aips.me41;&http://www.aips.me123; %> <section id="comment">http://www.aips.me你的通用代碼 <% &http://www.aips.me125; %> |
自定義頁面
執(zhí)行new page命令
1 | hexo new page "about" |
在hexo\source\下會生成about目錄，里面有個index.md，直接編輯就可以了，然后在主題的_config.yml中將其配置顯示出來。
上述步驟，也可以手工生成，在hexo\source\下手工新建about和index.md也是完全等價的。
因為markdown對table的支持不好，我是在about中直接建立index.html，里面書寫頁面內(nèi)容，hexo會幫你加上頭和尾。
404頁面
GitHub Pages 自定義404頁面非常容易，直接在根目錄下創(chuàng)建自己的404.html就可以。但是自定義404頁面僅對綁定頂級域名的項目才起作用，GitHub默認分配的二級域名是不起作用的，使用hexo server在本機調(diào)試也是不起作用的。
其實，404頁面可以做更多有意義的事，來做個404公益項目吧。
目前有如下幾個公益404接入地址，我選擇了騰訊的。404頁面，每個人可以做的更多。
騰訊公益404
404公益_益云(公益互聯(lián)網(wǎng))社會創(chuàng)新中心
失蹤兒童少年資料管理中心404
圖床
考慮到博客的速度，同時也為了便于博客的遷移，圖床是必須的。我強烈推薦七牛云存儲，訪問速度極快，支持日志、防盜鏈和水印。
免費用戶有每月10GB流量+總空間10GB+PUT/DELETE 10萬次請求+GET 100萬次請求，這對個人博客來說足夠，不夠的話點這個活動頁面，也可通過邀請好友獲得獎勵，我也求一下七牛邀請。有一點要說明的是，七牛沒有目錄的概念，但是文件名可以包含/，比如2013/11/27/reading/photos-0.jpg，參考這里關(guān)于key-value存儲系統(tǒng)。
如果你對七牛web版的文件管理界面不滿意，可以用官方的七牛云存儲工具。
申請域名（可選）
GitHubPages 默認為每個用戶分配了一個二級域名『your_user_name.github.com』或『your_user_name.github.io』（具體可以看這里）。
如果你對上述域名不滿意，可以自己去申請一個自己的域名（周良常年代理注冊，價格比官網(wǎng)便宜許多），然后綁定到GitHub Pages。綁定方法很簡單，在repo根目錄下建立一個CNAME文件，里面寫上域名即可。
命令
常用命令：
1 2 3 4 5 | hexo new "postName" http://www.aips.me新建文章 hexo new page "pageName" http://www.aips.me新建頁面 hexo generate http://www.aips.me生成靜態(tài)頁面至public目錄 hexo server http://www.aips.me開啟預覽訪問端口（默認端口4000，'ctrl + c'關(guān)閉server） hexo deploy http://www.aips.me將.deploy目錄部署到GitHub |
常用復合命令：
1 2 | hexo deploy -g hexo server -g |
簡寫：
1 2 3 4 | hexo n == hexo new hexo g == hexo generate hexo s == hexo server hexo d == hexo deploy |
至此，基本操作介紹完畢，如果你對Hexo這種博客方式有興趣，可以移步到我的代碼博客查看相關(guān)的教程：
http://www.aips.me/code/category/hexo
