Travis CI 自動 Jekyll 專案部屬 Github Pages 完整範例

了解如何「[Github] 在github.io建立免費的網站」，搭配使用 Jekyll 可以讓部落格或靜態網站的撰寫更加便利，完成內容的更新後，可以透過指令編譯 _site 的目錄，轉成瀏覽器可讀的格式，最後將目錄上傳到web server。

這些流程可以使用 Travis CI 自動化，當 github repo 收到新的 Request時，自動編譯上傳到 github.io。 若未有 Jekyll 專案，請先參考「靜態網頁部落格工具 Ruby + Jekyll 安裝教學」，建立一個新專案。

一、新增編譯腳本

mkdir script
vim script/cibuild

script/cibuild 內容如下(參考檔案):

#!/usr/bin/env bash
set -e # halt script on error

JEKYLL_ENV=production bundle exec jekyll build
# bundle exec htmlproofer ./_site

二、新增 Travis CI 設定檔

.travis.yml 內容如下(參考檔案):

language: ruby
rvm:
- 2.6
script: ./script/cibuild
before_script:
- chmod +x ./script/cibuild
deploy:
  provider: pages
  skip_cleanup: true
  github_token: $GITHUB_TOKEN
  repo: chenuin/chenuin.github.io
  local_dir: ./_site
  target_branch: master
  on:
    branch: master

TOKEN 設定(參考)

1. 開啟頁面 https://github.com/settings/tokens/new
2. 填寫備註(可以自行決定)，並選擇 public_repo
3. 送出

將畫面顯示的 token 複製保存好，到 Travis CI 設定環境變數，新增一個參數 GITHUB_TOKEN，內容就是剛剛複製的這一串字串 。 

※操作畫面可參考「Travis CI 快速部屬 Jekyll + Asciidoctor」的第四步驟 - 新增 github token 。

三、上傳

git add .
git commit -m 'init commit'
git push origin master

專案連結： 

https://github.com/chenuin/myblog 

https://chenuin.github.io/