By

首先要知道 Markdown 貼圖的語法是：

![替代文字](圖片網址或路徑)

如果你的圖片是丟在別的貼圖空間，用外連的話倒是沒什麼問題，直接在刮號裡貼上圖片網址就好了。
可是我用了 GitHub Pages 想把圖片也一起丟到 GitHub 上，所以貼圖的路徑就很重要了。

Hexo 有一個功能可以讓你更方便的管理文章中的資源，在 _config.yml 中把 post_asset_folder: false 改成 true
這樣使用 hexo new xxx 來產生文章的時候，會自動在 _post 裡面產生和文章相同名稱的資料夾，讓你放這篇文章用的圖片或檔案。

Hexo 是網誌形式的，所以文章除了文章網址以外，也都會在首頁出現，如果你給他相對路徑，那其中一邊的圖片就會顯示不出來，
例如這篇文章的網址是
http://azyukei.github.io/2015/04/hexo-image/
但是在網誌的首頁 http://azyukei.github.io/ 也看的到這篇文章，
如果貼圖的時候用 ![xxx](xxx.png) 那網址就會變成
http://azyukei.github.io/2015/04/hexo-image/xxx.png 和
http://azyukei.github.io/xxx.png
第一個網址可以正常顯示出圖片，因為這樣的網址剛好是正確的，但是在首頁就會顯示不出來了，因為在 GitHub Source 根目錄中根本沒有這張圖片。

所以還是寫成絕對路徑比較好，變成這樣：

![xxx](/2015/04/hexo-image/xxx.png)

雖然寫文章的時候會麻煩很多，但是在首頁和文章裡面都能正常顯示圖片。

另外 Hexo 有一個 Plugin 叫做 hexo-tag-asset-res
可以讓你在使用 post_asset_folder 的狀況下，不用寫出完整的路徑，感覺超級方便的。
不過我使用的時候會在 generate 時出現問題，爬了一下 Google 好像是因為 Hexo 改版 3.0.0 以後有改一些東西，插件沒有跟著修改會不支援 3.x.x，所以只好暫時用完整路徑來貼圖了。

By

要怎麼在文章頁面底下出現回應功能呢？

  • 到 Add Disqus to your site 註冊 Disqus

    Choose your unique Disqus URL，這邊要把你填名稱的記下來，之後設定 Hexo 會用到，也就是 disqus_shortname。

  • 設定_config.yml ，把剛剛的 disqus_shortname 加進去

    disqus_shortname: shortname

  • 最後把網站部屬出去，在文章裡面就會出現 Disqus 了

    $ hexo generate
    $ hexo deploy

By


要發佈到GitHub Pages需要先安裝 hexo-deployer-git。

$ npm install hexo-deployer-git --save

GitHub Pages

GitHub Pages可以讓你放靜態網頁，也有內建一些 CSS 主題給你選，除了自己編輯這些網頁以外，也可以用 OctoPress 或是 Hexo 之類的 Blog Framework 來產生靜態網頁發佈上來，GitHub Pages 分成兩種：

User or organization site

第一種網址為 http://username.github.io ，作為使用者或帳號用的網頁，一個帳號只能有一個，建立步驟：

  • 建立一個 Repository，名稱為：username.github.io，username 記得改成自己的。

  • 設定 Hexo 的_config.yml
    這個 Repository 就是你網站的 webroot，一般來說可以自己 push 網頁上來，不過我們是要用 hexo來產生靜態網頁發佈上來，所以要去設定 hexo 的_config.yml 中的 deploy 部分，把 deploy 設定成下面這樣：

    deploy:
  type: git
  repo: https://github.com/username/username.github.io.git
  branch: master

    username 一樣要記得改，之後就可以 hexo deploy 直接部屬到 githib page 上囉。

Project site

第二種 Project site 的網址為 http://username.github.io/projectname ，作為 Repo 或專案的介紹網頁，一個帳號有無限多個，每個 Repository 都可以幫他開一個，做法如下：

  • 進入一個 Repository，在他的右邊選單點選 Settings。

  • 在 GitHub Pages 項目中點選 Automatic page generator。

  • 點進去以後他會讓你編輯第一個頁面，不過我們是要用 Hexo 來發佈文章，所以這邊不用管他直接按下 Continue to layouts。

  • 皆下來是選主題，一樣對於要用 Hexo 的我們沒有用處，直接按下 Publish page 就 OK了！

  • 設定 Hexo 的_config.yml：

    deploy:
  type: git
  repo: https://github.com/username/projectname.git
  branch: gh-pages

    username 和 projectname 要改成自己的，要注意的是這裡的 branch 不是 master，master 是你原來的專案內容，gh-pages 分支才是 webroot，所以 branch 要改成 gh-pages，hexo deploy 才會把網頁部屬到這個分支。

By

Hexo 是一個網誌框架，可以幫你把 Markdown 轉成靜態網頁，還可以直接發佈到 Heroku 或 GitHub Pages，用起來和 Octopress 差不多，不過改用 Node.js 來做檔案產生速度比 Octopress 快多了。
開發者是台灣人（開發者家），而且官方文件都有正體中文的，大推！

安裝

Hexo 需要 Node.js 和 Git，詳細的安裝說明官方文件寫的很詳盡，只要照著做應該就沒問題了，依照文件說的把 Git, Nodejs 裝好，再用Terminal下指令，就可以安裝了。

$ npm install -g hexo-cli

Mac 使用者要注意，要先安裝 Xcode 不然安裝過程中會出問題。這邊官方文件說要開啟 XCode 前往 Preferences -> Download -> Command Line Tools -> Install 安裝命令列工具，可是我發現我的 Download 那裡沒有 Command Line Tools 可以安裝，在 Locations 裡面已經有 Command Line Tools 了，應該是 XCode 版本不同（我是 version 6.2）或是因為我先裝了 iTerm2 的關係吧，這我不太確定，等下禮拜拿到新電腦再來試試看。

建立Hexo專案資料夾

$ hexo init <folder>
$ cd <folder>
$ npm install

這時候資料夾的結構會變這樣：

.
├── _config.yml
├── package.json
├── public
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
└── themes

介紹一下檔案和資料夾：

  • _config.yml Hexo 相關的設定都在這邊修改。
  • source/_posts 文章都放在這邊，如果要放圖片的話也是放在 source 裡面。
  • source/_drafts 放草稿的地方，這邊的文章不會被發佈出去。
  • theme 網誌的主題，放進來以後還要去修改 _config.yml 才會有作用。
  • scaffolds 鷹架資料夾，文章的樣板。
  • scripts 資料夾裡面的 javascript 會被自動執行，不過我是新手還沒用到過:D
  • package.json 記錄你幫 Hexo 裝了什麼東西，用 npm 安裝東西會自動加進去，不用手動編輯。
  • public 資料夾放 hexo generate 產生出來的網頁檔案。

要注意的是 Hexo 雖然有用 Git 做的版本控管，不過其實只是在 public 資料夾中而已，也就是只有你生成出的靜態網站檔案是有版本控管的，可以自己考慮一下要把 Hexo 專案整個資料夾放在哪裡，以免哪天電腦掛掉只剩下靜態網頁而失去辛苦寫的Markdown檔案，聽說有人把 Hexo 專案創在 Dropbox 裡面走到哪用到哪啦，反正已經在用 Git 了，所以我是把他放到另一個 Git Repository 去。

配置

新開的Hexo專案主要要改的就 site 和 URL 還有 deploy，deploy 部分下一篇會介紹如果要發佈到 GitHub Page 要怎麼設定，其他配置可以參考官方文件-配置。

Hexo常用指令

詳細的指令可以去看看官方文件-指令，這邊只列出我常用的幾個指令。

新文章
$ hexo new [layout] <title>

layout 如果沒設定會直接用_config.yml 中的 default_layout 預設是 post，title 如果有空白的話，要用引號刮起來，新文章會被放到 source/_posts 資料夾中，檔名為 title.md 再看要用什麼編輯器去編輯。

產生網頁
$ hexo generate [-d]

會把文章產生成靜態網頁檔案放在 public 資料夾中，如果後面加上-d 則會在檔案產生完畢後直接部屬出去。

部屬網頁
$ hexo deploy [-g]

部屬網站，我是部屬到 GitHub Pages，相關的設定請看下一篇，如果在後面加上-g 則會在部屬前先產生靜態網站。

啟動伺服器
$ hexo server [-i IP] [-p Port]

啟動伺服器，就可以在 http://localhost:4000 預覽 public 中的網站，需要自訂 IP 或 Port 的話可以加上-i 或-p 參數。
要使用這個指令需要先安 hexo-server 才能使用。

$ npm install hexo-server --save

清除產生檔案
$ hexo clean

清除快取檔案 db.json 和已產生的靜態網站 public 資料夾。

常用指令縮寫

$ hexo generate = $ hexo g
$ hexo deploy = $ hexo d
$ hexo server = $ hexo s

By

YA 用 Hexo 和 Github 架設的部落格終於上線囉！

最近 TDE 服役中，有很多時間可以研究一些想看的東西，為了讓健忘的自己以後有記錄可以查，會去做一些筆記。前一陣子一直在想要怎麼做筆記比較方便，本來都是用 Onenote，大致上都還不錯，不過程式碼方面的筆記，如果要套上格式化的顏色還要先去張貼程式碼的網站貼一下，再複製到Onenote，非常不方便。

後來聽學長說用 Markdown 來做筆記，程式碼都沒煩惱，就跑去看了一下 Markdown，也試著用 Markdown 做一些筆記，但是都存在本地端，開了一層一層的資料夾去分類、儲存一個一個的.md 文章，再用 Dropbox 或 Google Driver 同步，後來想說乾脆來架一個部落格放筆記好了，於是上網尋找各種可以用 Markdown 寫作的服務或是 Blog framework，發現 Octopress 這個東西，可以用 Git 來管理 Markdown 寫作的文章，再產生靜態網頁部屬到 Github 上，還有 Hexo，應該算是改良版的 Octopress，用 Node.js 做的，產生靜態網頁的步驟比 Octopress 快很多，最後就決定用 Hexo+Github 來做筆記了，不用去租主機用而且還有版本控管的功能，用起來非常方便，而且用 Command line 管理網誌超酷的:D

最近會先幫 Hexo＋Github 的用法做個筆記，然後再漸漸把 Onenote 中的筆記搬過來，完成以後再回去玩 Android Studio 吧！

小弟我才疏學淺，如果有什麼錯誤還請指教一下，謝謝。