用 Drone 部署靜態檔案到 GitHub Pages

 Posted on February 22, 2020  |  2 minutes  |  215 words  |  appleboy

新課程上架:『Docker 容器實用實戰』目前特價 $800 TWD，優惠代碼『20200222』，也可以直接匯款（價格再減 100），如果想搭配另外兩門課程合購可以透過 FB 聯絡我

GitHub 提供一個非常方便的功能，就是可以將靜態檔案部署在 GitHub 上，基本上開發者不用負擔任何 Host 費用，就可以使用靜態檔案來做 Demo 介紹，或者是文件系統。而本篇將教您如何用 Drone 來自動化部署靜態檔案到 GitHub 上。作者直接用 Vue.js 來介紹整個流程。

教學影片

如果對於課程內容有興趣，可以參考底下課程。

準備 Vue.js 環境

這邊就不多著墨了，透過 npm build 可以在本機端將靜態檔案編譯到 dist 目錄內。而 GitHub Pages 預設的 domain 會是

user_id.github.io/project_name

假設專案的 GitHub URL 為

github.com/go-training/vue-gh-pages-demo

就可以知道 user id 是 go-training 那 repo 名稱為 vue-gh-pages-demo，那 GitHub 提供的 URL 就會是

https://go-training.github.io/vue-gh-pages-demo

可以看出來會有一個 sub folder 跑出來，因為在同一個 Org 或 User 底下會有很多 repo，故一定要這樣區分。這時候在編譯 Vue.js 專案時就需要使用不同的設定，請打開 vue.config.js

1
2
3
4
5
6

module.exports = {
  assetsDir: 'assets',
  publicPath: process.env.NODE_ENV === 'production'
  ? '/vue-gh-pages-demo/'
  : '/',
};

從上面可以看到當開發者需要部署到 GitHub 時，就可以動態將 index.html 內的靜態檔案路徑換成 sub folder 方式，而不影響本機端開發。完整程式範例可以參考這邊。

搭配 Drone 自動化部署

由於 GitHub Page 預設是讀 gh-pages 分支，故需要先將此分支建立起來，後續才可以正常部署，請參照底下 .drone.yml 內容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

---
kind: pipeline
name: testing

platform:
  os: linux
  arch: amd64

steps:
- name: release
  image: node:13
  environment:
    NODE_ENV: gh-pages
  commands:
  - yarn install
  - yarn build

- name: publish
  image: plugins/gh-pages
  settings:
    username:
      from_secret: username
    password:
      from_secret: password
    pages_directory: dist

其中 username 跟 password 會是 GitHub 的帳號密碼，但是密碼部分可以透過 GitHub 的 Personal Access token 來產生，這樣就不用給真的密碼了。

設定 custom domain

其實會發現使用 sub folder 其實很不方便，所以我個人都習慣使用 custome domain 方式來配置

GitHub 也提供個人網域的 https 憑證，所以像是各大 Conference 如果沒有什麼後端需求，其實都可以直接放到這上面，這樣還可以省下不少人力，及維護主機的成本。

完整程式範例可以參考這邊

drone  Github 

See also