github pages與travis ci運做原理

　　當說到自動部署的時候，我很反感那些一上來就balabala說怎麼操做的博文文章，照着別人的作法有樣學樣，常常會由於與本身項目實際狀況不符而出現各類問題。

　　好比說github和travis，首先應該搞明白，他們之間是如何運做的。

　　首先，github pages是集成在github裏面，能夠解析靜態的文件，並渲染成頁面的。因此最簡單的github pages應該是這樣，新建一個項目，項目裏面包含一個index.html。在項目的settings中打開github pages。搞定！

　　但問題是，咱們不少的實際項目，好比vue-cli項目。不是一開始就有靜態文件的，而是須要手動經過npm run build或yarn build來打包生成。可能有人會說：我本地能夠配置靜態文件的導出目錄，將靜態文件導出到github pages能識別的路徑。好比根目錄或者根目錄下的docs文件夾，在本地先run build，而後再把靜態文件push到github上，供github pages解析渲染。

　　但若是要弄成這樣，還叫自動化部署嗎？還叫持續集成交付嗎？因此問題的關鍵是：須要找到一個東西，能夠幫咱們run build，同時生成的靜態文件也要放在github pages能夠解析的路徑裏。程序員每次推代碼只關心代碼自己，不關心打包過程和靜態文件應該存放在哪兒。

　　github自己是沒有這個環境來run build的，誰有呢？travis有。

　　因此他們的運做過程是這樣的：程序員往github上推了代碼 --> travis檢測了到程序員這一行爲 -->拉取最新的項目代碼到travis --> 在travis的虛擬機中對這個項目進行run build --> 生成靜態文件 --> 將靜態文件傳回給github的可識別目錄，供github pages解析渲染。

　　說得直白一點：你推了項目到github上，travis把你的項目給克隆過去了，而後在travis的小黑屋的幫你打包靜態文件，最後送還靜態文件到你的github上。

　　搞清楚了運做原理，接下來纔是一些實施細節。

 

1，travis怎麼知道程序員推了代碼到github?

　　travis與github是一對好基友，在travis的社區級官網（https://travis-ci.org/）裏，能夠用github帳號登陸，登陸以後，即表明你的github對travis進行了Oauth受權，travis能夠訪問你的全部項目列表，同時，只要你手動打開監聽開關，travis就能夠監聽指定項目的活動狀態，好比有沒有推代碼。

 

 

2.監聽到了github活動以後，諸如克隆代碼，run build，返還靜態文件這些操做細節在哪裏配置？

　　在github項目的根目錄下新建一個.travis.yml的shell腳本文件，當travis監聽到github項目活動時，就會在項目的根目錄下找這個腳本文件，若是找到了，就執行文件裏的內容。因爲travis跟github是好基友，並不須要在你的項目中安裝其餘什麼雜七雜八的東西來支持.travis.yml,直接新建便可。但注意必須嚴格起這個名字。下面是一個vue-cli項目的詳細註解的shell腳本文件。

 

 

3.travis對github項目的讀寫操做須要受權，如何受權？

　　在github/settings/developer settings/personal access tokens中，新建一個token，以下圖：

　　除了不許travis直接刪掉個人github項目，其餘的權限我都給了。生成以後在travis-ci.org中打開指定項目的settings，將token複製到到項目的環境變量中，並給他取個名字，以下圖：

　　好比我取的名字是GITHUB_TOKEN，那在.travis.yml執行的腳本里，經過$GITHUB_TOKEN就能夠拿到這個受權碼。

 

4.放到指定github路徑中供github pages解析，那哪些路徑纔是有效的？

　　在github的項目的settings中，能夠看到pages一欄，能夠看到合理的解析路徑一共有如下幾種：

　　在這裏咱們選擇第一種，爲何是gh-pages分支？由於travis在向github返還打包好的靜態文件時，travis也是很是擔憂怕覆蓋掉程序員寫的代碼，因此往master分支推仍是往其餘什麼dev、develop、test分支推，只要是程序員本身建的分支，都有風險。這時候就須要有一個特定分支，這個分支不須要程序員本身建，而是travis來建，而且裏面只存放靜態文件，專門用於供github pages解析。這個travis默認新建的分支名，就叫gh-pages。在個人github項目中點開gh-pages分支，也能夠看到這個分支的操做者是travis而不是我。

 

 

5.travis ci跑完後頁面靜態資源沒法加載，報404錯誤？

　　這個問題屬於vue-cli項目的打包配置問題了。默認狀況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，如https://www.apps.com。若是應用被部署在一個子路徑上，你就須要用這個選項指定這個子路徑。例如，若是你的應用被部署在 https://www.apps.com/my-app/，則設置 publicPath 爲 /my-app/。因此要在vue-cli3.x項目的根目錄下，新建一個vue.config.js文件配置一下publicPath。

　　固然能夠用「./」相對路徑來實現，不過相對路徑在一些場景中會有問題。好比當使用基於 HTML5 history.pushState 的路由時，或者當使用 pages 選項構建多頁面應用時。因此仍是不要用相對路徑這種投機取巧的方法。在完成這一系列操做後，能夠看到最終效果：一個vue-cli項目的默認界面。