之前在部落格園、簡書、CSDN等地兒都開過博，一篇文章寫好了，我希望能在幾個平臺可以同步釋出，可是操作起來成本不低。幾個平臺下的富文字編輯器比較起來還是部落格園更順手，看著更舒服，尤其是程式碼塊的操作靈活、準確。而CSDN對程式碼塊內的文字加粗、修改字色後就會出現html文無法解析的情況，混雜著程式碼和html文字實在太難看了，後來我知道原來是Markdown的程式碼塊規則限制。而且CSDN剛剛才取消了提交文章要稽核通過才能釋出的限制，稽核沒有完成之前，連自己都看不到，且不能修改，這讓我一度放棄CSDN平臺。如果是寫普通的文章寫作體驗最好的是簡書，大氣、簡潔。但簡書更適合一般的寫作，比較技術化的中間摻雜大量程式碼的支援還不夠好。

作為一名程式設計師，應該到GitHub上開博，這裡是程式設計師的聖城。花了兩天時間研究了一下，發現還蠻簡單的，而且md格式也被部落格園、簡書、CSDN所支援，寫完一份應該比較容易複製到這三個平臺。我喜歡在本地編輯markdown檔案，使用sublime 及其外掛Markdown Editing 和 OmniMarkupPreviewer。完成後底稿、資原始檔都悉數儲存到GitHub，日後查詢、修改都很容易。

我用hexo作為靜態頁面生成器，操作過程遇到不少問題，搞定之後留一份操作記錄吧。以後就把[http://palanceli.github.io/blog/]作為我的首發平臺了;)

安裝環境

• 安裝node.js，去官網下載安裝即可，我安裝的是最新穩定版。

• 安裝Hexo
  sudo npm install -g hexo

• 建立hexo目錄並初始化

  $ mkdir hexo
  $ cd hexo
  $ hexo init

• 然後就可以生成網站，啟動服務了：

  $ hexo clean
  $ hexo generate
  $ hexo server

• hexo資料夾
  先來看一下hexo資料夾下的內容：

  hexo/
    |- node_modules/  # hexo需要的模組，不需要上傳GitHub
    |- themes/        # 主題檔案，需要上傳GitHub的dev分支
    |- sources/       # 博文md檔案，需要上傳GitHub的dev分支
   
  
    |- public/        # 生成的靜態頁面，由hexo deploy自動上傳到gh-page分支
    |- package.json   # 記錄hexo需要的包資訊，不需要上傳GitHub
    |- _config.yml    # 全域性配置檔案，需要上傳GitHub的dev分支
    |- .gitignore     # hexo生成預設的.gitignore，它已經配置好了不需要上傳的hexo檔案

關聯GitHub

首次先建立GitHub工程blog，並且使用“Launch automatic page generator”生成頁面，它會給該工程建立分支gh-pages。
手動為之建立dev分支，未來工程原始碼會放到dev分支下；hexo生成的網站靜態頁面會放到gh-pages分支。

• 首次建立GitHub工程後操作dev分支程式碼

如果是剛建立的GitHub工程，clone dev分支的程式碼到本地blog-dev/，然後把前面hexo/資料夾下的內容全部拷貝到blog-dev/，注意包括一個隱藏檔案.gitignore。

• 已存在GitHub工程的恢復
  仍是clone dev分支的程式碼到本地blog-dev/，然後把hexo/node_modules/拷貝到blog-dev/
  再試試生成頁面、啟動服務，確保是正常的：

  $ hexo clean
  $ hexo generate
  $ hexo server

  網上有介紹把package.json檔案同步到GitHub，以後每次恢復時執行

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

  可是我在不同的機器上試總是出錯。只好採取笨辦法，每次先hexo init出一個完整資料夾，再把相關檔案拷貝到GitHub目錄下。千萬不要先clone 了blog目錄，再在該目錄下執行hexo init，因為init會把.git資訊刪掉。

配置自己的_config.yml

按照如下內容修改blog-dev/_config.yml：

title: Palance's Blog   # 標題
subtitle:
description:
author: Palance Li
language: zh-CN         # 語言設定
url: http://palanceli.github.io/blog
root: /blog/

翻到最下面，改成：

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

主題

這裡有大量的主題https://github.com/hexojs/hexo/wiki/Themes
我非常喜歡Maupassant：https://www.haomwei.com/technology/maupassant-hexo.html，
簡潔清晰，而且適配手機、PC各個平臺。

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

  $ 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後，執行完前面的安裝操作步驟後記得執行

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

• 配置
  在blog-dev/themes/maupassant/_config.yml中根據自己的情況修改，比如：
  ```
  links:

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

上傳生成頁面

執行

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

以後每次執行完

$ hexo clean
$ hexo generate
$ hexo server

生成了靜態頁面後就可以執行

hexo deploy

完成頁面上傳。

其它

圖片

首先確認_config.yml中有：

post_asset_folder: true

然後在blog-dev/下執行

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

確保在blog-dev/source/_posts下建立和md檔案同名的目錄，在裡面放該md需要的圖片，然後在md中插入

![](目錄名/檔名.png)

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

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

在md檔案中插入圖片時只需寫

![](post1/pic1.png)

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

$ hexo clean
$ hexo generate
$ hexo server

如果沒做清除，直接生成頁面，在我這裡會出現路徑錯誤的情況。