利用Github建立自己的部落格

趁著還沒忘記趕快寫來,如何用Github上面的空間建立自己的部落格。

小弟之前是使用Google的部落格,本來是覺得其他間部落格平台自由度已經算是很高的,加上還有Google這個老爸,所以對他得信任度也一直很高。

不過說真的,寫久了之後,還是多少有些不方便,最近因為工作的關係一直在寫markdown文件,說真的寫md真的很方便,後來我一直嘗試在找在Google上直接用md語法寫部落格的方法,雖然有找到一些平台但是因為還是得同步到google,終究還是不太方便,最終我希望找個可以信任,免費空間,自由度高,最重要的是,我希望可以直接用markdown語法來寫。

廢話不過說,先來解釋一下Github上架站這是怎麼回事。

實際上Github上是可以設置自己的靜態網頁的,不過有一定的規範要依循

首先建立一個新的專案,這個專案的名子一定得叫 你的帳號.github.io,別問我為什麼,這是規定XD,比方我的帳號是cainmaila,所以我就必須建立一個cainmaila.github.io

建立完成後,你可以嘗試做一個index.html放在裡面。然後你可以到瀏覽器去看看cainmaila.github.io這個網址,應該就會出現你的首頁。

上次文章發布後,馬上有被前輩糾正XD,這裡補充說明一下,關於專案名稱是否一定得叫做 你的帳號.github.io ,如果你的專案叫做 myname.github.io,這個的專案的Master支線靜態網頁的位置會在 http://myname.github.io ,另外一種方式為,假設你有一個專案叫做 myapp ,你可以建立一個 gh-pages 分支,把靜態網頁放這裡,他的靜態位置就會在 http://myname.myname.github.io/myapp/ ,我想很適合拿來做專案的主頁入口位置。

聰明的你看到這裡,應該就可以知道,這個空間你可以放置自己靜態網站,Github允許你放置html,image,css,js….

到這裡,空間的問題解決了,再來是用markdown寫作的問題

這部分選擇性很多,總之就是找到一個寫markdown幫你產生html的公具,我最後選擇了老牌子的Hexo,有什麼功能先不多說,之後可以去Hexo官網看一下

這裡直接說明怎麼安裝,架設,寫作與上傳到github去

安裝Hexo

首先要有安裝 git 與 nodejs (不懂得自己去理解,反正就是官網下載安裝)

安裝Hexo

1
npm install hexo -g

好了之後,你自己開個資料夾,進去後建構一個Hexo專案

1
hexo init

你會看到source/_posts資料夾中的會有一個hello-world.md,之後你建立的md檔案都會放在這

首先自己嘗試建立一個文章

1
hexo new "my first title"

意思是建立一篇文章,標題是my first title,你會看到資料夾中新增了一個md檔案

再來是把md檔編譯成靜態的html

1
hexo generate

這時候public資料夾裡,應該出現你的靜態網站了。

這時候聰明的你應該知道,如果你自己有網站空間,也可以把這包放在你的雲端空間

我們試著啟動服務器預覽他

1
hexo server

你可以打開http://127.0.0.1:4000這個網址,可以看到你的網站。

如果你有自己的主機,當然可以直接架設上你的主機,不喜歡預設的4000 port可以用以下方式啟動

1
hexo server -p 80

我沒有自己的服務器,所以我希望直接放在github上

hexo已經幫你做好上傳git的簡當方式。

首先安裝

1
npm install hexo-deployer-git --save

之後打開_config.yml設定檔,增加或修改以下

1
2
3
4
deploy:
type: git
repository: https://github.com/你的帳號/你的帳號.github.io.git
branch: master

好了之後我們佈署到Github

1
hexo deploy

太棒了!

你可以到 你的帳號.github.io 這裡去看你的部落格了!!

Hexo 功能與詳細設定,官網有很詳細的說明