相信不少人最聽說過 Github 部署網(wǎng)站稳诚，但是我翻找了很多文章基本以實操為主，在 Setting 點一下就沒了内贮。
雖然 Github 部署已經(jīng)很簡單了惭笑，但是里面還是有不少細節(jié)的，這篇文章除了手把手教大家部署一個網(wǎng)站瞪浸，還會聊一些關(guān)于部署的細節(jié)儒将。
Tip: 這篇有點長了，下篇會聊一下自定義域名对蒲。
再 Tip: 國內(nèi)訪問 Github 部署的網(wǎng)站是比較慢的钩蚊，再下篇文章會聊一下如何用國內(nèi) CDN 加速 Github 的訪問，不妨點個關(guān)注哦~
最簡單的部署
首先蹈矮，還是先手把手教大家部署一個簡單的頁面砰逻，讓大家先體驗體驗部署的快樂。
第一步泛鸟，在 Github 隨便創(chuàng)建一個項目蝠咆，比如我這里起的名字叫 first-page。
然后創(chuàng)造 index.html, styles.css, main.js 三個文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>First Page</title>
</head>
<body>
<h2>This is my first page</h2>
<script src="main.js"></script>
</body>
</html>
alert('xxx')
h2 {
color: red;
}
在本地用 http-server 跑一下：
http-server -c-1
在 localhost:8080 就可以看預(yù)覽效果了
OK，現(xiàn)在我們把代碼提交到 Github：
git add ./
git commit -m 'feat: 初始化'
git push
進入 Github 項目的 Settings刚操。
拉到最下面的 Github Pages闸翅。
選擇里面的 master 分支，再點一下 Save 按鈕菊霜，收工坚冀。
稍等一下，就可以在 http://username.github.io/first-page/ 上可以訪問了 （注意：這里的 username 就是你的 Github 用戶名鉴逞，比如我的就是 Haixiang6123记某。）。
好构捡，以上就是一個最最最簡單的 Github 頁面的部署了液南。下面來聊一聊原理。
原理
剛剛我們通過 http://localhost:8080 就能訪問我們的頁面叭喜，本質(zhì)上是訪問了本地的 index.html贺拣。相應(yīng)地蓖谢，訪問 http://username.github.io/first-page 則是訪問遠程的 index.html捂蕴。
這里的部署只是把文件上傳到 Github 而已，具體做法就是 add + commit + push 一把梭子闪幽。
如果我們非要寫個部署腳本啥辨，可以這么寫：
git add ./
git commit -m 'deploy'
git push
復(fù)雜項目部署
上面只說了簡單的 index.html + styles.css + main.js 部署，但是我們平常都是用 Vue 或者 React 開發(fā)的呀盯腌，這要怎么部署呢溉知？
首先，不要被框架“迷惑”了腕够，框架只是為了提高我們的開發(fā)效率级乍，本質(zhì)上當(dāng)我們訪問網(wǎng)頁時還是 index.html + styles.css + main.js。
無論是 React 還 Vue帚湘，都會有類似 npm run build 這樣的打包命令玫荣。它會將 jsx/.vue 這些鬼東西通過 Webpack 全部轉(zhuǎn)換為 index.html + styles.css + main.js。
這里我用 React 來做演示大诸，先用 CRA 創(chuàng)建一個項目：
create-react-app hello --template=typescript
然后在項目里跑打包命令：
npm run build
運行之后會在根目錄得到一個 /build 的目錄，里面就裝著我們需要的 html, css, js 文件。
通過剛剛的部署經(jīng)驗申屹，我們得知拍皮，只要將這些 html, css 和 js 都推到一個分支上，在 Settings 里選擇這個分支贿堰，最后點一下 "Save" 按鈕就 OJBK 了辙芍。那么問題來了：怎么才能推呢？
我們不妨再仔細品品 git push 這個命令羹与，它的加長版寫法應(yīng)該是這樣的：
git push origin master
origin 是項目的 clone 地址故硅，master 則是我們分支外遇。如果我把 master 換成別的分支，比如就叫 x 分支不就好了契吉？
git push origin x
但是如果這么寫跳仿，很容易出現(xiàn) push 之后出現(xiàn)代碼沖突，導(dǎo)致 push 失敗捐晶。一般情況下菲语，每次部署要把上次的部署覆蓋掉的，所以可以直接 強推：
git push origin x -f
還是有問題：目前這個項目是在 first-page 下面惑灵，add-commit-push 素質(zhì)三連除了把 /build push 還會把 /src山上，/node_modules 之類的也 push 到 x 分支了，我們只希望 push /build 目錄怎么辦英支？
答案很簡單佩憾，先去往 /build 目錄，再 git init 一下干花，相當(dāng)于在 first-page 項目倉庫下的 build 目錄再創(chuàng)建一個 git 倉庫妄帘。設(shè)置 origin 為原來項目的 clone 地址即可。
上面這么解釋頭有點暈池凄，我把部署代碼放出來：
# 出錯就停止部署
set -e
# 本地打包構(gòu)建
npm run build
# 進入 build 目錄
cd build
# 創(chuàng)建本地 Git 倉庫
git init
# 添加和提交
git add -A
git commit -m 'deploy'
# 指定 origin 和分支抡驼，直接強推
git push -f git@github.com:Haixiang6123/first-page.git master
# 回到原來的目錄
cd -
以上就是所有項目的 一鍵部署方法，可以看到無論是什么項目肿仑，只要是有打包功能的致盟，都可以用上面的方法來一鍵部署。
Tip: 上面的 origin 直接用
git@github.com:Haixiang6123/first-page.git替代了尤慰，也就說項目代碼可以存到隨便一個倉庫馏锡，只需要推到對應(yīng)的 git 地址就可以完成對應(yīng)項目的部署了。目前我的個人網(wǎng)站就是這么部署的：開發(fā)一個倉庫伟端，部署時把產(chǎn)物推到另一個倉庫杯道，以另一個倉庫來部署靜態(tài)網(wǎng)頁。
第三方部署工具
上面的部署腳本我也是抄了 Vue 官方提供的部署腳本荔泳。
Vue 官方是讓開發(fā)者自己抄這個腳本來部署的蕉饼，而 React 則可以用 react-gh-pages 這個第三方工具來部署。
第三方部署工具的好處就是可以自己不寫 bash 腳本玛歌。
另一個好處就是可以幫助讓你避免 404昧港，相信很多人第一次部署 Github 靜態(tài)網(wǎng)頁都會遇到這個問題。99% 的原因都是因為 publicPath 沒有設(shè)置好支子。
而這些第三方部署工具都會在 Getting Started 這一步提醒你要配置好 publicPath创肥，要么直接幫你配置好了。
特殊功能
通過上面的步驟已經(jīng)可以部署一個類似 http://xxx.github.io/first-page 的項目了。但是叹侄，我們在部署個人網(wǎng)站或者博客時不想要這個 first-page 的后綴巩搏，直接 https://xxx.github.io 會更好看。
創(chuàng)建一個名為 xxx.github.io 的項目（xxx 是你的用戶名）趾代，然后再以上面的方式去部署可以得到?jīng)]有后綴的 http://xxx.github.io 贯底。
比如我的 Github 用戶名為 Haixiang6123，那就創(chuàng)建一個名為 Haixiang6123.github.io 的倉庫撒强，然后在這上面部署禽捆。
為什么會這么設(shè)計呢？其實這算是 Github 留給用戶的一個小彩蛋吧飘哨，不過這種大家都希望用到的功能也不能太算為彩蛋了胚想，所以，我更愿意稱其為 特殊功能芽隆。
除了這個浊服，Github 還有很多的特殊功能，比如你直接創(chuàng)建一個以自己 Github 用戶名的倉庫（以我自己的 Haixiang6123 為例）：
然后在上面添加一個 README.md胚吁，它就可以變成你的 Profile 了：
說回部署牙躺，在以前并不能像現(xiàn)在這么自如地想在哪個分支部署就哪個分支部署，只能在 gh-pages 這個特殊分支上部署囤采。而且也可能部署根目錄的 index.html述呐，不像現(xiàn)在還能部署 /docs 目錄下的 index.html。
所以蕉毯，在以前那段時間，Github 部署靜態(tài)頁面更多是被當(dāng)作一個 特殊功能思犁，導(dǎo)致很多人都會覺得部署一個網(wǎng)頁怎么這么麻煩代虾。
總結(jié)
總結(jié)一下，部署本質(zhì)上就是上傳 html, css, js 文件到另一個硬盤（COS 桶激蹲、CDN 等）棉磨，然后遠程訪問 index.html。
使用 Github 部署的關(guān)鍵就是用 add-commit-push 素質(zhì)三連把 html, css, js 都 push 到倉庫上学辱，然后在 Settings 里點一下部署按鈕就可以了乘瓤。
對于需要打包的項目，部署前需要 cd 到打包后的目錄策泣，常見的有 /build 或 /dist 目錄衙傀，然后通過 git init 創(chuàng)建本地倉庫，然后將整個目錄所有東西都強推到項目分支上就好了萨咕。
對了统抬，最近剛建了個公眾號【寫代碼的海怪】，覺得我寫得不錯就隨緣關(guān)注一下嘍~
