之前在博客園、簡(jiǎn)書(shū)、CSDN等地兒都開(kāi)過(guò)博，一篇文章寫(xiě)好了，我希望能在幾個(gè)平臺(tái)可以同步發(fā)布，可是操作起來(lái)成本不低。幾個(gè)平臺(tái)下的富文本編輯器比較起來(lái)還是博客園更順手，看著更舒服，尤其是代碼塊的操作靈活、準(zhǔn)確。而CSDN對(duì)代碼塊內(nèi)的文字加粗、修改字色后就會(huì)出現(xiàn)html文無(wú)法解析的情況，混雜著代碼和html文本實(shí)在太難看了，后來(lái)我知道原來(lái)是Markdown的代碼塊規(guī)則限制。而且CSDN剛剛才取消了提交文章要審核通過(guò)才能發(fā)布的限制，審核沒(méi)有完成之前，連自己都看不到，且不能修改，這讓我一度放棄CSDN平臺(tái)。如果是寫(xiě)普通的文章寫(xiě)作體驗(yàn)最好的是簡(jiǎn)書(shū)，大氣、簡(jiǎn)潔。但簡(jiǎn)書(shū)更適合一般的寫(xiě)作，比較技術(shù)化的中間摻雜大量代碼的支持還不夠好。

作為一名程序員，應(yīng)該到GitHub上開(kāi)博，這里是程序員的圣城?；藘商鞎r(shí)間研究了一下，發(fā)現(xiàn)還蠻簡(jiǎn)單的，而且md格式也被博客園、簡(jiǎn)書(shū)、CSDN所支持，寫(xiě)完一份應(yīng)該比較容易復(fù)制到這三個(gè)平臺(tái)。我喜歡在本地編輯markdown文件，使用sublime 及其插件Markdown Editing 和 OmniMarkupPreviewer。完成后底稿、資源文件都悉數(shù)保存到GitHub，日后查找、修改都很容易。

我用hexo作為靜態(tài)頁(yè)面生成器，操作過(guò)程遇到不少問(wèn)題，搞定之后留一份操作記錄吧。以后就把[http://palanceli.github.io/blog/]作為我的首發(fā)平臺(tái)了;)

安裝環(huán)境

• 安裝node.js，去官網(wǎng)下載安裝即可，我安裝的是最新穩(wěn)定版。

• 安裝Hexo
  sudo npm install -g hexo

• 創(chuàng)建hexo目錄并初始化

$ mkdir hexo
$ cd hexo
$ hexo init

• 然后就可以生成網(wǎng)站，啟動(dòng)服務(wù)了：

$ hexo clean
$ hexo generate
$ hexo server

• hexo文件夾
  先來(lái)看一下hexo文件夾下的內(nèi)容：

hexo/
  |- node_modules/  # hexo需要的模塊，不需要上傳GitHub
  |- themes/        # 主題文件，需要上傳GitHub的dev分支
  |- sources/       # 博文md文件，需要上傳GitHub的dev分支
  |- public/        # 生成的靜態(tài)頁(yè)面，由hexo deploy自動(dòng)上傳到gh-page分支
  |- package.json   # 記錄hexo需要的包信息，不需要上傳GitHub
  |- _config.yml    # 全局配置文件，需要上傳GitHub的dev分支
  |- .gitignore     # hexo生成默認(rèn)的.gitignore，它已經(jīng)配置好了不需要上傳的hexo文件

關(guān)聯(lián)GitHub

首次先創(chuàng)建GitHub工程blog，并且使用“Launch automatic page generator”生成頁(yè)面，它會(huì)給該工程創(chuàng)建分支gh-pages。
手動(dòng)為之創(chuàng)建dev分支，未來(lái)工程源碼會(huì)放到dev分支下；hexo生成的網(wǎng)站靜態(tài)頁(yè)面會(huì)放到gh-pages分支。

• 首次創(chuàng)建GitHub工程后操作dev分支代碼

如果是剛創(chuàng)建的GitHub工程，clone dev分支的代碼到本地blog-dev/，然后把前面hexo/文件夾下的內(nèi)容全部拷貝到blog-dev/，注意包括一個(gè)隱藏文件.gitignore。

• 已存在GitHub工程的恢復(fù)
  仍是clone dev分支的代碼到本地blog-dev/，然后把hexo/node_modules/拷貝到blog-dev/
  再試試生成頁(yè)面、啟動(dòng)服務(wù)，確保是正常的：

$ hexo clean
$ hexo generate
$ hexo server

網(wǎng)上有介紹把package.json文件同步到GitHub，以后每次恢復(fù)時(shí)執(zhí)行

$ npm install hexo
$ npm install
$ npm install hexo-deployer-git --save

可是我在不同的機(jī)器上試總是出錯(cuò)。只好采取笨辦法，每次先hexo init出一個(gè)完整文件夾，再把相關(guān)文件拷貝到GitHub目錄下。千萬(wàn)不要先clone 了blog目錄，再在該目錄下執(zhí)行hexo init，因?yàn)閕nit會(huì)把.git信息刪掉。

配置自己的_config.yml

按照如下內(nèi)容修改blog-dev/_config.yml：

title: Palance's Blog   # 標(biāo)題
subtitle:
description:
author: Palance Li
language: zh-CN         # 語(yǔ)言設(shè)置
url: http://palanceli.github.io/blog
root: /blog/

翻到最下面，改成：

deploy:
  type: git
  repository: https://github.com/<自己的github賬號(hào)>/blog.git
  branch: gh-pages

主題

這里有大量的主題https://github.com/hexojs/hexo/wiki/Themes
我非常喜歡Maupassant：https://www.haomwei.com/technology/maupassant-hexo.html，
簡(jiǎn)潔清晰，而且適配手機(jī)、PC各個(gè)平臺(tái)。

• 安裝方法
  首次在blog-dev/目錄下執(zhí)行如下命令

$ git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
$ npm install hexo-renderer-jade --save
$ npm install hexo-renderer-sass --save

以后建議把blog-dev/themes/maupassant/.git文件夾刪掉，把maupassant文件夾隨自己的blog-dev上傳到GitHub。
以后clone blog-dev后，執(zhí)行完前面的安裝操作步驟后記得執(zhí)行

$ npm install hexo-renderer-jade --save
$ npm install hexo-renderer-sass --save

• 配置
  在blog-dev/themes/maupassant/_config.yml中根據(jù)自己的情況修改，比如：

links:
  - title: 我的博客園
    url: http://www.cnblogs.com/palance/
  - title: 我的CSDN
    url: http://blog.csdn.net/zchongr
  - title: 我的簡(jiǎn)書(shū)
    url: http://m.itdecent.cn/users/5e527164a8c2

在blog-dev/_config.yml中修改:

theme: maupassant

第一次的工作就完成了，可以提交github到blog-dev了。

上傳生成頁(yè)面

執(zhí)行

$ cd blog-dev
$ npm install hexo-deployer-git

以后每次執(zhí)行完

$ hexo clean
$ hexo generate
$ hexo server

生成了靜態(tài)頁(yè)面后就可以執(zhí)行

hexo deploy

完成頁(yè)面上傳。

其它

圖片

首先確認(rèn)_config.yml中有：

post_asset_folder: true

然后在blog-dev/下執(zhí)行

npm install https://github.com/CodeFalling/hexo-asset-image --save

確保在blog-dev/source/_posts下創(chuàng)建和md文件同名的目錄，在里面放該md需要的圖片，然后在md中插入

![](目錄名/文件名.png)

即可在hexo generate時(shí)正確生成插入圖片。比如：

_posts
    |- post1.md
    |_ post1
        |- pic1.png

在md文件中插入圖片時(shí)只需寫(xiě)

![](post1/pic1.png)

即可。首次配置完了需要執(zhí)行一次清除操作，再生成頁(yè)面：

$ hexo clean
$ hexo generate
$ hexo server

如果沒(méi)做清除，直接生成頁(yè)面，在我這里會(huì)出現(xiàn)路徑錯(cuò)誤的情況。