最近在爬文學習前端技術時，發現不少網誌都是用 github 的靜態網站來當 blog，覺得很酷，而且也不必煩惱主機的事，便搜尋了一下建立的方法，發現有滿多語言框架可以快速建立

  • JavaScript : Hexo
  • Ruby : Jekyll
  • Python : Hyde
  • PHP : Phrozn

因為對於 js 較為熟悉所以選了 Hexo 來嘗試看看，先說心得好了， Hexo 框架真的很強大，blog 大多功能幾乎都包含在裡面了，而且只需透過編輯 _config.yml ，就能完成架構及功能設定，有些功能雖然是需要另外安裝 plugin 的，使用方法都相當簡單，程式碼都埋好了，只需申請服務後，填入 id 到設定檔就可以了

  • Sitemap
  • RSS Feed
  • Google Analytics
  • Comment: Disqus

Setup

instal Node.js & Hexo

已經有 Node.js 環境可以直接安裝 Hexo

$ npm install hexo -g

詳細可以參考這裡 安裝 Hexo

Init Your Blog

hexo init <blog_name>

cd <blog_name>

npm i

再加裝一些 plugin

npm i hexo-deployer-git hexo-renderer-ejs hexo-renderer-marked hexo-renderer-stylus --save

hexo-deployer-git: deploy to github

hexo g # 產生 blog

hexo new # 建立一個新的文章

hexo s # hexo server 讓 blog 可以在 local 端檢視 http://localhost:4000

Blog Setting

前面有說過只需要透過設定 _config.yml 就可以完成，這邊需要注意的是， _config.yml 有兩個，一個在專案根目錄，另一個在 theme 資料夾裡

Blog Deploy

deploy 到 github 前需要先到 github 開一個 repo

接著將 repo 的資訊填寫到 _config.yml 的 deploy 部分

1
2
3
4
deploy:
    type: git
    repository: [email protected]:yourname/yourRepo.git
    branch: gh-pages

url 的部分也需要調整一下，下面是範例

1
2
url: http://xxx.github.io/Blog
root: /Blog/

透過指令部署之前請先確定你有 github 的 SSH key

沒有的話請參考 這篇

然後就可以部署到 github 上了

1
hexo d # hexo deploy

Reference

Hexo offical docs

Hexo 中文安裝教學

http://v123582.github.io/blog/2015/10/25/用-hexo-建立一個自己的部落格/