[Web] Hexo x Github

想在 Github 上簡單架一下站,可以將一些 repo 的 docs 放在上面,所以就去了解了一下流程。



看別人的 Github pages 都很漂亮,原來是利用了靜態網頁生成工具,我看到的工具有蠻多是用 Node.js 建置起來的 framework



Hexo 也是 Node.js 的 framework。原來 Hexo 的作者是台灣人呢~要多多支持一下,話說回來我在用 Hexo 之前就跑過他的網站好幾次呢!



本來想比較正統的方法在 Cygwin 上安裝 Node.js ,可是我跑了很久都找不到,最後只好上 Node.js 官網下載溫抖死的 msi 包,結果與 Cygwin 一拍即合 ( 呵呵



安裝完 Node.js 後,沒意外的話在 Cygwin 上就可以直接敲出 node 和 npm 指令,npm 是 Node.js 的套件管理,以後漂亮的主題就靠它了



如果指令敲不出來就再設個環境變數吧,bashrc 裡,就不贅述了。



先用 npm 下載 Hexo ( Cygwin 還要記得裝 git 喔 ,這裡就默認安裝了,顆顆)



npm install hexo-cli -g


再來需要一個資料夾放網站內容,你可以直接創資料夾,並進入資料夾中,然後初始化它



hexo init


或者直接用 hexo 建立並初始資料夾



hexo init <dir>


之後用進入資料夾中,下載 npm 模塊



npm install


只後,需要編輯資料夾中的一個 _config.yml 檔案,不過在此之前,我們先把 Github pages 設定好。



上 Github 並創一個 username.github.io 的 repo ( username 是你的用戶名 )



然後進 repo 的 settings ,其中有一個



GitHub Pages




GitHub Pages is designed to host your personal, organization, or project pages from a GitHub repository.




 




Source



GitHub Pages is currently disabled. Select a source below to enable GitHub Pages for this repository. Learn more.



 





將 None 調到 master branch 狀態,按 save



 



GitHub Pages




GitHub Pages is designed to host your personal, organization, or project pages from a GitHub repository.




 




Source



GitHub Pages is currently disabled. Select a source below to enable GitHub Pages for this repository. Learn more.



 





 


做好之後回到本機端,開始編輯 _config.yml 檔案



# Site

title: nobodyzxc's travel

subtitle: 

description: 

author: nobodyzxc

language: zh-tw

timezone:



# URL

## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'

url: http://nobodyzxc.github.io



我大略設定以上條目,接著是整個設定檔的重點,設定 deploy



我的設定如下

deploy:

  type: git

  repo : git@github.com:nobodyzxc/nobodyzxc.github.io.git

  branch: master



一開始用 http 有問題,他會叫你輸入 username ,但又輸不進,所以我改用以上的 ssh deploy ( 我剛好有設定 Github ssh RSA key )



編完之後回命令列,還要裝一個 git deploy



npm install hexo-deployer-git --save


接下來就可以開始簡單 push 第一次 repo 了



先清空 database



hexo clean


再來使用 hexo 產生網頁 ( hexo  generate ) 此處用 alias 縮寫



hexo g


接著部署 ( hexo deploy ) 一樣用 alias 比較方便



hexo d


接下來就可以上 username.github.io 看一下成果了 ( 很醜,之後再加主題 )



主題的安裝也蠻快的,上 github hexo 官方 ( 請戳我 ) clone 主題檔案,並放到網站資料夾的 themes 底下



來個例子 ( pwd 在網站資料夾下 )



git clone https://github.com/iissnan/hexo-theme-next.git ./themes/next


接者再改一下 _config.yml 裡的 theme 那一行,加上主題名稱



 theme: next


接者



hexo clean
hexo g
hexo d


大功告成~ ( 真的 如知友所說,next 主題太吼啦 XDDDD )



留言

這個網誌中的熱門文章

[Antergos] disable touchpad

[Editor] 入坑 Atom => Markdown 轉 PDF