原文鏈接：用 Travis CI 自動(dòng)部署 Github Pages
前言
Github Pages 不能運(yùn)行動(dòng)態(tài)程序，只能輸出一些靜態(tài)內(nèi)容安接。因此 Github Pages 非常適合用于前端項(xiàng)目的展示俊嗽∥砑遥可用于存放項(xiàng)目介紹、項(xiàng)目文檔或者個(gè)人博客绍豁。本文介紹了怎么用 Travis CI 自動(dòng)化部署 Github Pages芯咧。
關(guān)于 CI
持續(xù)集成（Continuous integration）是一種軟件開發(fā)實(shí)踐，即團(tuán)隊(duì)開發(fā)成員經(jīng)常集成他們的工作竹揍，通常每個(gè)成員每天至少集成一次敬飒，也就意味著每天可能會(huì)發(fā)生多次集成。每次集成都通過自動(dòng)化的構(gòu)建（包括編譯芬位，發(fā)布无拗，自動(dòng)化測(cè)試）來驗(yàn)證，從而盡早地發(fā)現(xiàn)集成錯(cuò)誤昧碉。目前 github 開源項(xiàng)目用的較多的 CI 主要是 Circle CI 和 Travis CI英染，兩者都是利用容器技術(shù)來適配不同項(xiàng)目環(huán)境。
(圖一 CIrcle CI被饿，圖二 Travis CI)
步驟
1. 安裝 Github App
在 Github Market Place 安裝 Travis CI四康。安裝時(shí)選擇你想要的項(xiàng)目權(quán)限。
<img src="https://s2.ax1x.com/2019/05/02/ENCylT.png" width="50%" alt="ENCylT.png" title="ENCylT.png" />
2. 配置 Github Token
配置 Github Token 用于 Travis CI 對(duì)你項(xiàng)目的訪問權(quán)限狭握，配置完了之后 不要刷新頁面闪金，先點(diǎn)一下 Token 后面的復(fù)制按鈕，因?yàn)槟阒荒芸匆娺@個(gè) Token 一次论颅，刷新了它就沒了 :joy: 不得不贊一下 Github 的安全性 :+1:
3. 加密 Github Token
以下是 Travis CI 官方文檔的 Github Pages 配置示例：
deploy:
provider: pages
skip_cleanup: true
github_token: $GITHUB_TOKEN # Set in the settings page of your repository, as a secure variable
keep_history: true
on:
branch: master
$GITHUB_TOKEN 是加密后的環(huán)境變量毕泌。如果不加密直接提交明文到一個(gè) Repo 的話喝检，github 會(huì)直接刪除掉這個(gè) token，簡(jiǎn)直太安全了 :joy: 加密步驟為
gem install travis # Travis CI 官方 cli 工具
travis login --pro # 登錄 Travis CI 撼泛，賬號(hào)密碼為你 Github 的賬號(hào)密碼
travis encrypt 'GITHUB_TOKEN=<YOUR_GITHUB_TOKEN>' --add # 加密 github token 并自動(dòng)添加至配置文件
4. 配置 .travis.yml
完整的 .travis.yml 配置示例，需要將前面加密的 github token 解密澡谭，當(dāng)然只有 Travis CI 知道解密后的結(jié)果是啥 :facepunch:
地址：Bougie Design Travis CI config
language: node_js
node_js:
- '10'
before_install:
- composer config --global github-oauth.github.com "$GITHUB_TOKEN"
install:
- yarn
test: true
script:
- yarn docs:build
- cp -r ./.docz/dist/* .
deploy:
provider: pages
skip_cleanup: true
github_token: $GITHUB_TOKEN
keep_history: true
on:
branch: master
env:
global:
secure: TTQLIDz0jL4FRFrpq6DDocxLiELUSpJsj9phdmjW9Eg9kna73KjPF2XmZaWFvkObZU3og/7Thr/iwsXQqfdq8gHShhLkHZAZqgvWqbjMIQABYIFqqqUE9grrPdrLXWVAidh+nET+pjes8VX92NBz6HA+i/15+PugVwYhC85AGyNN2JRL7nxCwh2ECiKATRiX+cLmVqFwTGpzqHovAiBFnap17whWa4C4uVEzdBwjQAZKw+IFxiiJIA7hkFTTThS11uCx//Dr7/A1X7c6ZLao/qiwvW8fNAbhV5ZA6dx4a0vtLwj6lprjcwWuGQX/vutKHnpdNpxeIDhmLNspN1U7YxjgUZJXgFjpE6tw1I8N6nSRpzhPUlrXPkKUAdN9x2jN20NSUeFDSl0FhazPwhGWzlSQb0gNyH1U04wvw3QB2VP/3UvTiyCZjum6prTpuXy/D262smG97o0/0XlNySX6MC+OLQNDIVgzO4YO2IHVB8lW6CBSMeTlcE8a4yvHwmGQpLKnX6tY06/n8lvjgZgPKZaRZL6aVrBE+/104Gt/aBFpraZZpiXJjXjdm4TO3N+u8gT8+gkDJ0BvzrX7Kf/W/WouecziCJgzYCB7y8eqec4kmZKRs2O6zyKJ0SbPrW54UuCmjFzTLEmdRCXRLIbEQsWvS5x+FKKwGNGRcrgPjxY=
5. 觸發(fā) CI
一般默認(rèn)是 git push 時(shí)觸發(fā)愿题，也可以修改成 tag 時(shí)觸發(fā)，push 后可以到 travis-ci.com 查看 CI 日志蛙奖。如果出現(xiàn)下圖所示日志潘酗，則表明部署 Github Pages 成功了
<img src="https://s2.ax1x.com/2019/05/03/ENzmkt.png" width="50%" alt="ENzmkt.png" title="ENzmkt.png" />
6. 查看 Github Pages
Travis CI 會(huì)自動(dòng)創(chuàng)建一個(gè)叫 gh-pages 的分支，如圖所示：
<img src="https://s2.ax1x.com/2019/05/03/ENz8mj.png" width="50%" alt="ENz8mj.png" title="ENz8mj.png" />
到項(xiàng)目設(shè)置中設(shè)置 Github Pages 分支為 gh-pages：
訪問 https://your-github-id.github.io/repo-name/ 即可訪問 Github Pages 了雁仲。需要注意的是 Github Pages 的 root path 不是 /仔夺，而是 /repo-name/，因此在打包時(shí)記得把基礎(chǔ)路由設(shè)置成 /repo-name/攒砖，否則會(huì)出現(xiàn)資源路徑錯(cuò)誤的情況缸兔。
附：阮老師對(duì)幾個(gè)“持續(xù)“概念的解釋
一、概念
持續(xù)集成（Continuous integration）指的是吹艇，頻繁地（一天多次）將代碼集成到主干惰蜜。
它的好處主要有兩個(gè)。
（1）快速發(fā)現(xiàn)錯(cuò)誤受神。 每完成一點(diǎn)更新抛猖，就集成到主干，可以快速發(fā)現(xiàn)錯(cuò)誤鼻听，定位錯(cuò)誤也比較容易财著。
（2）防止分支大幅偏離主干。 如果不是經(jīng)常集成撑碴，主干又在不斷更新撑教，會(huì)導(dǎo)致以后集成的難度變大，甚至難以集成灰羽。
持續(xù)集成的目的驮履，就是讓產(chǎn)品可以快速迭代，同時(shí)還能保持高質(zhì)量廉嚼。 它的核心措施是玫镐，代碼集成到主干之前，必須通過自動(dòng)化測(cè)試怠噪。只要有一個(gè)測(cè)試用例失敗恐似，就不能集成。
Martin Fowler 說過傍念，"持續(xù)集成并不能消除 Bug矫夷，而是讓它們非常容易發(fā)現(xiàn)和改正葛闷。"
與持續(xù)集成相關(guān)的，還有兩個(gè)概念双藕，分別是持續(xù)交付和持續(xù)部署淑趾。
二、持續(xù)交付
持續(xù)交付（Continuous delivery）指的是忧陪，頻繁地將軟件的新版本扣泊，交付給質(zhì)量團(tuán)隊(duì)或者用戶，以供評(píng)審嘶摊。 如果評(píng)審?fù)ㄟ^延蟹，代碼就進(jìn)入生產(chǎn)階段。
持續(xù)交付可以看作持續(xù)集成的下一步叶堆。它強(qiáng)調(diào)的是阱飘，不管怎么更新，軟件是隨時(shí)隨地可以交付的虱颗。
三沥匈、持續(xù)部署
持續(xù)部署（continuous deployment）是持續(xù)交付的下一步，指的是代碼通過評(píng)審以后上枕，自動(dòng)部署到生產(chǎn)環(huán)境咐熙。
持續(xù)部署的目標(biāo)是，代碼在任何時(shí)刻都是可部署的辨萍，可以進(jìn)入生產(chǎn)階段棋恼。
持續(xù)部署的前提是能自動(dòng)化完成測(cè)試、構(gòu)建锈玉、部署等步驟爪飘。它與持續(xù)交付的區(qū)別，可以參考下圖拉背。
（圖片來源）
四师崎、流程
根據(jù)持續(xù)集成的設(shè)計(jì)，代碼從提交到生產(chǎn)椅棺，整個(gè)過程有以下幾步犁罩。
4.1 提交
流程的第一步，是開發(fā)者向代碼倉庫提交代碼两疚。所有后面的步驟都始于本地代碼的一次提交（commit）床估。
4.2 測(cè)試（第一輪）
代碼倉庫對(duì) commit 操作配置了鉤子（hook），只要提交代碼或者合并進(jìn)主干诱渤，就會(huì)跑自動(dòng)化測(cè)試丐巫。
測(cè)試有好幾種。
- 單元測(cè)試：針對(duì)函數(shù)或模塊的測(cè)試
- 集成測(cè)試：針對(duì)整體產(chǎn)品的某個(gè)功能的測(cè)試，又稱功能測(cè)試
- 端對(duì)端測(cè)試：從用戶界面直達(dá)數(shù)據(jù)庫的全鏈路測(cè)試
第一輪至少要跑單元測(cè)試递胧。
4.3 構(gòu)建
通過第一輪測(cè)試碑韵，代碼就可以合并進(jìn)主干，就算可以交付了缎脾。
交付后祝闻，就先進(jìn)行構(gòu)建（build），再進(jìn)入第二輪測(cè)試赊锚。所謂構(gòu)建治筒，指的是將源碼轉(zhuǎn)換為可以運(yùn)行的實(shí)際代碼，比如安裝依賴舷蒲，配置各種資源（樣式表、JS 腳本友多、圖片）等等牲平。
常用的構(gòu)建工具如下。
Jenkins 和 Strider 是開源軟件域滥，Travis 和 Codeship 對(duì)于開源項(xiàng)目可以免費(fèi)使用纵柿。它們都會(huì)將構(gòu)建和測(cè)試，在一次運(yùn)行中執(zhí)行完成启绰。
4.4 測(cè)試（第二輪）
構(gòu)建完成昂儒，就要進(jìn)行第二輪測(cè)試。如果第一輪已經(jīng)涵蓋了所有測(cè)試內(nèi)容委可，第二輪可以省略渊跋，當(dāng)然，這時(shí)構(gòu)建步驟也要移到第一輪測(cè)試前面着倾。
第二輪是全面測(cè)試拾酝，單元測(cè)試和集成測(cè)試都會(huì)跑，有條件的話卡者，也要做端對(duì)端測(cè)試蒿囤。所有測(cè)試以自動(dòng)化為主，少數(shù)無法自動(dòng)化的測(cè)試用例崇决，就要人工跑材诽。
需要強(qiáng)調(diào)的是，新版本的每一個(gè)更新點(diǎn)都必須測(cè)試到恒傻。如果測(cè)試的覆蓋率不高脸侥，進(jìn)入后面的部署階段后，很可能會(huì)出現(xiàn)嚴(yán)重的問題碌冶。
4.5 部署
通過了第二輪測(cè)試湿痢，當(dāng)前代碼就是一個(gè)可以直接部署的版本（artifact）。將這個(gè)版本的所有文件打包（ tar filename.tar * ）存檔，發(fā)到生產(chǎn)服務(wù)器譬重。
生產(chǎn)服務(wù)器將打包文件拒逮，解包成本地的一個(gè)目錄，再將運(yùn)行路徑的符號(hào)鏈接（symlink）指向這個(gè)目錄臀规，然后重新啟動(dòng)應(yīng)用滩援。這方面的部署工具有Ansible，Chef塔嬉，Puppet等玩徊。
4.6 回滾
一旦當(dāng)前版本發(fā)生問題，就要回滾到上一個(gè)版本的構(gòu)建結(jié)果谨究。最簡(jiǎn)單的做法就是修改一下符號(hào)鏈接恩袱，指向上一個(gè)版本的目錄。
