使用hexo搭建靜態(tài)博客 | Jim Liu's Blog

看見就非常 2015-04-24

展開全文

hexo是一個博客程序，擁有一個簡單的服務(wù)器（可以用來當(dāng)簡單的動態(tài)博客使用），也有生成器，生成的靜態(tài)文件可以一鍵部署到Github Pages上，也可以部署到任意靜態(tài)文件服務(wù)器上面。

由于它相當(dāng)簡約，并且使用Markdown來編寫文章，深得我心，于是我把博客遷移到hexo了，但是為了國內(nèi)訪問速度，我沒有放在Github Pages上，而是選擇了放在BAE上面。

下面一步一步地說怎么用hexo搞一個博客。

搭環(huán)境

hexo是用node.js開發(fā)的，首先需要在電腦上安裝node.js，在windows用安裝包是很方便的，完成后記得要把系統(tǒng)盤的用戶/AppData/Roaming/npm/這個目錄加到系統(tǒng)的PATH環(huán)境變量里面。

在需要的地方打開命令行，這時候我們要安裝hexo

1	npm install -g hexo

安裝了hexo后，如果之前有做PATH環(huán)境變量那一步操作的話，這時候就可以直接運行hexo這個命令了，后面的工作都要靠它。

新建博客

在工作目錄打開命令行，運行

1	hexo init <目錄名>

會生成個目錄，cd進(jìn)去，可以看到很多東西，這就是一個全新的hexo博客。

后面我們的命令行就都在這個新建的目錄下了。

運行

1	hexo server

會看到服務(wù)在4000端口上啟動了，打開http://localhost:4000/ 就能看到效果。

調(diào)整設(shè)置

對于站點的配置基本上都在_config.yaml里面，其中比較重要的有

title, subtitle 這類基本信息
language 可以用zh-CN，這在后面的theme配置當(dāng)中有作用
url, root 填以后要布的域名和路徑
plugins 我加了一個hexo-generator-feed，通過npm install hexo-generator-feed --save安裝，這樣在生成的時候會自動生成atom.xml，用來提供別人訂閱

修改_config.yaml的話有時候是需要重新啟動hexo server才能看到效果的。

編寫文章

這個時候的博客空空如也，如何新建文章呢？可以使用hexo提供的Scaffold（腳手架）功能。

1	hexo new post 文章標(biāo)題

就會在/source/_post目錄里新建一個markdown文件，這里的post就是普通的文章類型，看看scaffolds目錄里，有幾個類型，可以自己嘗試一下。

寫好內(nèi)容后去瀏覽器里刷新一下，發(fā)現(xiàn)hexo server是有自動生成功能的，可以看到新的文章。

這里就和Word Press很不一樣了，以前都是所見即所得的寫文章，而現(xiàn)在是寫markdown，看生成出來的效果?？赡苄枰m應(yīng)一下。

如果是Word Press用戶的話，可以有辦法把上面的內(nèi)容遷移過來。

首先，需要在Word Press導(dǎo)出博客，會得到一個xml文件，把它拷貝到hexo博客目錄下，比如叫wordpress.xml。

安裝hexo-migrator-wordpress這個插件

1	npm install hexo-migrator-wordpress --save

這時候運行

1	hexo migrate wordpress wordpress.xml

會看到導(dǎo)入了一些Word Press里的文章和頁面，看看source里的文件，發(fā)現(xiàn)給轉(zhuǎn)成了markdown格式的，這時候多半還需要一些格式微調(diào)。另外，文章里面的圖片會指向原來的博客資源，文章鏈接也是絕對的，不嫌麻煩的話，這些東西最好也遷過來吧。我在source目錄下建了uploads目錄，結(jié)構(gòu)基本上和之前的Word Press一模一樣，所以大多數(shù)東西只用改下路徑就行了。

現(xiàn)在再刷新看看效果吧。

值得一說的是，hexo對于文章分類的處理和Word Press很不一樣，我原來的文章都同時屬于好幾個category，但hexo里的分類是純粹樹形的。所以我徹底放棄了category管理，而全部用tag。

部署博客

如果你使用Github Pages來部署，會非常簡單，首先當(dāng)然電腦上要裝了Git。在_config.yaml里找到deploy一節(jié)，type填github，寫上repository是你在Github上的Repo地址。

1	hexo deploy --generate

這時候會先進(jìn)行一次完整生成，然后會自動部署到Github的gh-pages分支上面。為了管理博客源代碼，可以把整個hexo目錄放在對應(yīng)Repo的master分支上，然后就像管理一般的開源項目一樣處理就好了。

我不使用Github Pages來放，是因為部署上去要等10來分鐘才能看到效果，而且國內(nèi)速度比較一般。

如果你有網(wǎng)站空間，靜態(tài)空間就可以，那么運行

1	hexo generate

后，把public目錄的內(nèi)容扔到你的空間上去就行了。

后面我會再說下怎么弄到BAE上。

調(diào)整樣式

默認(rèn)的theme叫l(wèi)ight，已經(jīng)很不錯了，但是有的內(nèi)容不大“符合國情”，所以需要進(jìn)行一些調(diào)整。

主題都在themes目錄下面，按主題名字分，可以在_config.yaml里選擇喜歡的主題，改個配置就行?？梢栽诠俜骄W(wǎng)站上找到其他主題，數(shù)量不多，但是都挺精彩的，下載下來放在themes目錄里就行。

打開/themes/light/_config.yaml可以看見里面也有一些主題自己的配置，這主題配置說起來話就長了，撿重點的。

menu是配置右上角的鏈接，如果你加了一個page，那么是需要在這里配進(jìn)去才能看到的。

addthis我給去掉了，因為都是些外國的社交網(wǎng)站，似乎沒啥搞頭。

至于我的博客右邊那堆widget，一部分是light自帶的，一部分是我自己開發(fā)的。我已經(jīng)把light的Github分支給fork出來了，有興趣可以去看看，如果用那個分支的代碼的話，下面的這堆修改已經(jīng)都整合進(jìn)去了，瞟一眼就明白了。

light主題自帶Google Analytics支持，但我沒用GA所以沒研究。為了使用百度統(tǒng)計，我在layout/_partial/after_footer.ejs里加入了百度統(tǒng)計的代碼。

Word Press有評論功能，而靜態(tài)博客的評論咋搞呢？我使用了多說社會化評論框，號稱社會化，其實就是和微博這類的社交網(wǎng)絡(luò)有一定的關(guān)聯(lián)性。

如何申請使用多說評論框，我就不多說了，下面說下如何在light主題里面安裝。

首先在layout/_partial/下新建一個duoshuo.ejs，內(nèi)容如下：

<!-- Duoshuo Comment BEGIN -->
<div class="ds-thread" data-title="<%= item.title %>" data-url="<%- item.permalink %>"></div>
<script type="text/javascript">
var duoshuoQuery = {short_name:"jimliu-net"};
(function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = 'http://static./embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0] 
    || document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!-- Duoshuo Comment END -->

基本上就是在多說網(wǎng)站上拿到的通用代碼，在第二行上我加入了data-title和data-url，用來給多說傳一些參數(shù)。
data-url這個參數(shù)可以讓多個域名上的文章評論共享，只要同一篇文章的data-url固定就可以。例如blog.和上文章的data-url都是http:///xxxxxxx這樣兩個域名就可以共享評論了。
第四行的short_name是自己多說代碼獨有的，不要照抄哦。

接下來在layout/post.ejs下面，加入一行