Jung-Bin Wang things speak by themself

建立自己的github.io網頁

fork範本與發布網頁

github有提供一個官方範本,若要使用範本,直接fork範本repo即可,再把專案名稱改成username.github.io後,瀏覽器網址打上username.github.io就可看到精美的網頁。至此基本上已經完成網頁部署了!(現在寫網頁好快啊)

什麼,好醜? 那就來更換版型吧!網路上有很多基於jekyll技術的網頁範本,任君挑選,像是這個。使用方法也是fork範本repo到你的github就對了。 (copy&paste就是這樣advance)

fork好範本後,接著把範本repo複製到你的電腦上

git clone https://github.com/{username}/{repo_name}.git

等修改工作都在本機端完成後,再push到github上,就完成了一個網頁修改的cycle了。

記得好多年前無名小站關站時,還要特地把所有寫過的文章備存下來,但多年下來也不知道遺失在哪顆硬碟裡了。

現在這種靜態網頁修改發布的流程就可以避免這種情況,因為寫文章、修改版面都在自己的本機端完成,再投過git發布到git server上面,哪天筆電不見了,再從遠端git server抓下來就好。

設定jekyll環境

為了在本機上編輯網頁,必須安裝Ruby的jekyll和bundler套件。安裝Ruby請至官網下載

jekyll是一個用Ruby寫成的套件,用來從pain text生成靜態網頁文本,而為了產生靜態網頁的過程中,jekyll會使用許多不同的Ruby套件輔助,這些套件稱為Gem,而bundler則是為了維護套件相依性所寫稱的另一個Gem套件。

gem install bundler jekyll

安裝好後,進入範本repo,透過bundler安裝所需要的gem套件。

cd {repo_name}
bundle install

在本機端開啟server後,瀏覽器網址打上localhost:4000即可看到精美網頁。

bundle exec jekyll serve

以Lanyon範本為例

以上是針對有使用gem套件的範本repo的大致設定流程。但為了設定本網頁所使用的Lanyon範本可是費了不少功夫… 拜google大神之賜,找到了這篇過來人苦主的參考文章

當你把Lanyon fork到你的github,也把範本repo更名為username.github.io後,你會發現網頁排版走掉了,問題在於當把範本repo push到github上後,github端會透過自己的jekyll server產製靜態網頁到public資料夾下,正好覆蓋了Lanyon放在public資料夾下的css檔案,把public資料夾更名為assets即可正常瀏覽。

原始Laynon範本並沒有使用gem套件,所以只需要

jekyll build
jekyll serve

即可。

編輯更新網頁

編輯jekyll網頁所需基本了解可參考jekyll上的step by step

  • 在本機端編輯網頁時,jekyll會在目錄_site下依據設定檔與資料產出靜態網頁。
  • 主要設定在設定檔_config.yml
  • _layouts中放有產製網頁所使用的框架。
  • 目錄_includes放有會被其他網頁常常拿去用的內容。
  • 目錄_posts中放置新增markdown檔XXX.md,編輯的靜態網頁要放在這裡。
  • 目錄_data可放置像是social-media設定…等資料。

每次存檔後jekyll會自動更新靜態網頁,若是修改_config.yml,則必須重啟jekyll服務才會看到更新

enjoy! :)

參考資料