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

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

下面一步一步地說(shuō)怎么用hexo搞一個(gè)博客。

搭環(huán)境

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

在需要的地方打開(kāi)命令行，這時(shí)候我們要安裝hexo

1

npm install -g hexo

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

新建博客

在工作目錄打開(kāi)命令行，運(yùn)行

1

hexo init <目錄名>

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

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

運(yùn)行

1

hexo server

會(huì)看到服務(wù)在4000端口上啟動(dòng)了，打開(kāi)http://localhost:4000/ 就能看到效果。

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

對(duì)于站點(diǎn)的配置基本上都在_config.yaml里面，其中比較重要的有

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

修改_config.yaml的話有時(shí)候是需要重新啟動(dòng)hexo server才能看到效果的。

編寫(xiě)文章

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

1

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

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

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

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

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

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

安裝hexo-migrator-wordpress這個(gè)插件

1

npm install hexo-migrator-wordpress --save

這時(shí)候運(yùn)行

1

hexo migrate wordpress wordpress.xml

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

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

值得一說(shuō)的是，hexo對(duì)于文章分類的處理和Word Press很不一樣，我原來(lái)的文章都同時(shí)屬于好幾個(gè)category，但hexo里的分類是純粹樹(shù)形的。所以我徹底放棄了category管理，而全部用tag。

部署博客

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

1

hexo deploy --generate

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

我不使用Github Pages來(lái)放，是因?yàn)椴渴鹕先ヒ?0來(lái)分鐘才能看到效果，而且國(guó)內(nèi)速度比較一般。

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

1

hexo generate

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

后面我會(huì)再說(shuō)下怎么弄到BAE上。

調(diào)整樣式

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

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

打開(kāi)/themes/light/_config.yaml可以看見(jiàn)里面也有一些主題自己的配置，這主題配置說(shuō)起來(lái)話就長(zhǎng)了，撿重點(diǎn)的。

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

addthis我給去掉了，因?yàn)槎际切┩鈬?guó)的社交網(wǎng)站，似乎沒(méi)啥搞頭。

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

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

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

如何申請(qǐng)使用多說(shuō)評(píng)論框，我就不多說(shuō)了，下面說(shuō)下如何在light主題里面安裝。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- 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 -->

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

接下來(lái)在layout/post.ejs下面，加入一行

1

<%- partial('_partial/duoshuo', {item: page, index: false}) %>

就能在文章頁(yè)面看到評(píng)論框了，如果想在其他page，例如我博客右上角那個(gè)“About、Feedback”里面也看到的話，對(duì)layout/page.ejs如法炮制即可。