Lala Code

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

0%

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

發表於 分類於 Disqus：

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值很高！
也是很多工程師推薦的線上課程網站。
❤️