create-react-app建立的專案部署在github pages上的方法，順便繫結個人域名，增加https支援
去年把自己折騰的一些專案整理了一下，然後用react開發了一個頁面展示，一直都是打包好後，用nginx部署在自己的小水管伺服器上的，今天弄了一下github pages, 還真讓我折騰成功了，目前訪問上沒有變化，只是伺服器從我個人伺服器轉到了github pages服務，折騰過程分享給大家
開發專案
yiiu.co 我用的是create-react-app
腳手架開發的，很簡單的一個頁面，只做了展示就一個首頁
打包
開發好之後使用yarn build
打包，這樣在專案根目錄下會有一個build
資料夾
我之間的做法就是把這個資料夾拷貝到個人伺服器上，然後通過nginx對映這個資料夾，當成靜態資源訪問來部署的服務
在github上建立專案
專案名一定要以個人github使用者名稱或者組織名為字首，以.github.io
結尾
比如我這個專案是放在yiiu-co
組織裡的，所以這個專案名就是yiiu-co.github.io
這是固定的
然後將開發好的專案push到github上
原鏈文接：https://tomoya92.github.io/2019/04/04/deploy-create-react-app-github-pages/
安裝deploy到github pages的依賴
npm i --save-dev gh-pages
在專案package.json
檔案裡的scripts
物件裡新增上
"script": {
"build": "react-scripts build",
"deploy": "gh-pages -b master -d build"
}
deploy命令裡執行的-b
表示釋出到哪個分支下，-d
表示將哪個資料夾內容釋出到指定的分支下
到這一步，先不要動其它的東西了，把程式碼提交了
在github上建立一個分支
為啥要做這一步，因為github pages有個提示User pages must be built from the master branch.
所以master就只能作為存放build資料夾下檔案的內容了，但專案的原始碼放哪呢？這就需要建立分支了，通過分支來維護，我這建立的分支是dev
建立好dev
分支之後，回到專案裡，更新專案，切換到dev
分支，然後在專案裡的public
資料夾裡新增上幾個檔案
- CNAME這個是填寫繫結個人域名的內容，如果你不繫結個人域名的話，就不需要這個了
- .gitignore這個是去掉一些不需要提交的內容
- README.md這個是對專案的描述內容，如果你不想加也無所謂
然後再打包一次yarn build
部署
在打包好之後，執行yarn deploy
來發布，注意這一步會直接覆蓋掉master
分支裡的所有內容，釋出成功後，master
分支裡的內容就是專案打包之後build
資料夾裡的內容
這也就是上一步為啥要在dev
分支下的public
資料夾下建立CNAME檔案的原因了，因為每次yarn build
都會把public
資料夾下的所有檔案複製到build
資料夾下，這樣就不用手動添加了
鏈原文接：https://tomoya92.github.io/2019/04/04/deploy-create-react-app-github-pages/
開啟github pages
進入github專案頁面，找到Settings
選項，往下翻，找到Github Pages
位置，這時你就可以看到github將你網站釋出的地址了，直接訪問即可，比如我這個專案在沒有繫結域名的情況下的訪問地址就是 https://yiiu-co.github.io ，訪問沒有問題就可以繫結個人域名了
繫結域名
首先在dev
分支裡，找到上面新增的CNAME
檔案，在裡面新增上你的個人域名，我這繫結的域名是yiiu.co
所以內容就寫上yiiu.co
即可
提交程式碼
然後還是在Github專案頁面找到Settings
，在Github Pages
位置裡的Custom domain
填上個人域名，不用帶http://
域名解析
到你購買域名的服務商那去，設定域名的A記錄解析，將域名的A記錄解析到以下見個ip
185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153
解析成功後，可以通過命令dig +noall +answer yiiu.co
來檢視域名解析狀態，當然這裡的域名要換成你的域名
開啟https
如果上面操作都沒有問題了，就可以去開啟https了
還是在Github專案頁面找到Settings
，在Github Pages
位置，將Enforce HTTPS
前的checkbox
勾上，剩下的就是等待了
總結
經過上面折騰的這些之後，這個專案再有更新，在開發好之後，執行兩次命令
yarn build yarn deploy
就可以自動打包釋出到github pages上，程式碼也有地方放的了，還不需要自己提供伺服器，感謝Github的強大
參考
- https://medium.com/the-andela-way/how-to-deploy-your-react-application-to-github-pages-in-less-than-5-minutes-8c5f665a2d2a
- https://help.github.com/en/articles/using-a-custom-domain-with-github-pages
寫部落格不易，轉載請保留原文連結，謝謝!
原文連結: