Github Blog 架設 - Hexo

分類 Blog

最近在爬文學習前端技術時,發現不少網誌都是用 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-建立一個自己的部落格/

留言與分享

  • 第 1 頁 共 1 頁

DMoon

熱愛科技的資工系學生,喜歡學習新的技術

目前主要開發 Web APP

較熟悉的技術是 Node.JS / React.JS


學生 / 創科資訊實習生


Taichung, Taiwan