Lala Code

Lala 的前端大補帖,歡迎一起鑽研前端技術😊

0%

Travis CI 在 Github Pages 自動部署簡易教學

Travis CI

今天來分享如何在 GitHub 上使用 Travis CI,來做自動部署吧!

在你建立完 Repository 後,每次都要下指令去手動部署,這樣不僅麻煩也浪費很多時間,這時候可以使用 CI/CD 去幫我們做自動部署,而 Travis CI 對 GitHub 有著高度的整合,讓使用者可以快速與 GitHub 的 Repository 串接完成,享受 CI/CD 的服務。

以下步驟跟著操作,即可建立自動部署

1. 登入 Travis CI

登入 Travis CI,並連動 GitHub 帳號



2.選擇要部署的 Repository

點擊右上頭像 ⇒ Settings

選擇你要建立部署的 Repositories

Settings

剛建立的儲存庫,不一定會馬上出現,上次等了一小時多才出現,

但有時候建立完又馬上就出現,我也不是很懂這是怎樣😂



3. 在 Repository 建立 .travis.yml

在儲存庫的 root 新增一個 .travis.yml 檔案

要有這支檔案才可以跑 CI/CD

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
language: node_js
node_js:
- "16.14.2"
install:
- npm install
script:
- npm run build

deploy:
provider: pages
skip-cleanup: true
local_dir: dist
github-token: $GITHUB_TOKEN
keep-history: true
target_branch: gh-pages
on:
branch: master
  • language :用什麼語言寫的
  • node_js :設定 NodeJS 的版本
  • install:安裝依賴套件,這邊是用 npm 所以直接下 npm install 
  • script: 部署要執行的指令,可以輸入多個, Travis CI 會一行一行執行
  • deploy:
  1. provider:要部署到的地方,此設定為 GitHub Pages 上
  2. skip-cleanup:需設定為 true,否則 Travis CI 會把上方指令創建的檔案都刪除,也包含我們編譯出來的文件
  3. github-token:設置的值是 $GITHUB_TOKEN,Travis CI 會去抓 Environment Variables 中新增的變數
  4. local-dir:指定要部署的目錄,如編譯後的檔案會放在 dist 中,即指定 dist
  5. keep-history:保留部署歷史紀錄
  6. target_branch:指定目標分支,預設是 gh-pages
  7. on:基於哪個分支建構


4.建立 Repository 的 GITHUB TOKEN

需要建立 Token,提供給 Travis CI 做環境變數

點擊頭像 ⇒ Settings

Settings

左側 sidebar 最下方,點擊 Developer settings
Developer settings

選擇 Tokens(classic)
Tokens

選擇 Generate new token ⇒ Generate new token(classic)
Generate new token

在 Note 填上 Repository 名稱,勾選 workflow 並完成
workflow

將會生成出一組 token,這就是要在 Travis CI 設定的 GITHUB_TOKEN,複製起來到下個步驟
GITHUB_TOKEN



5.設定 Travis CI Environment Variables

回到剛剛的 Travis CI,選擇專案,點擊 More options ⇒ Settings
Settings

填寫 GITHUB_TOKEN 跟 VALUE 並 Add,
VALUE 填寫專案的 Token
新增後就會呈現灰色區塊
Environment Variables



6.自動部署

以上都設定完即可部署

按下 Restart build
Restart build

將會開始跑工作流程,可以看到工作進度
workflow

最後是完成或失敗都會顯示出來,整個流程的代碼
complete

在 Repository 也可以點擊查看細節
complete



點我看 專案 Demo

結語

自動部署只要設定一次就可以省去一堆麻煩的步驟,實在太方便了!大家一起來試試看吧~~~😉



🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!



🚀線上課程分享

線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程
想學習更多關於前後端的線上課程,可以參考看看。

Hahow

Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住



六角學院

如果你是初學者,非常推薦六角學院哦!
剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!


Udemy

Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!
也是很多工程師推薦的線上課程網站。
❤️