Github Page部署你的網(wǎng)頁(yè)
Github Pages:
Websites for you and your projects.
Hosted directly from your GitHub repository. Just edit, push, and your changes are live.
前言
在我們?nèi)粘ｉ_發(fā)過(guò)程中，寫好的前端界面只能在本機(jī)上跑夭问，或者同一個(gè)局域網(wǎng)內(nèi)訪問(wèn)烛卧，這樣很不方便。這時(shí)使用Github Page就能滿足你快速輕便的部署你的前端網(wǎng)頁(yè)缝彬。任何人就能通過(guò)你分享的地址訪問(wèn)了萌焰。
一、創(chuàng)建項(xiàng)目
1.1Github創(chuàng)建項(xiàng)目
前往 github 官網(wǎng), 點(diǎn)擊 New repository 創(chuàng)建新項(xiàng)目. 填入項(xiàng)目基本信息, 點(diǎn)擊 Create Repository 確認(rèn).
1.2修改Setting
在setting中找到 Github Pages 選項(xiàng), 將 Source 改為 master branch/docs folder, 最后點(diǎn)擊 Save按鈕谷浅。
Tps:剛創(chuàng)建完是不能選擇的扒俯，等我們上傳了前端build后文件就可以了
1.3上傳前端文件
1.3.1創(chuàng)建前端項(xiàng)目
首先我們使用vue-cli創(chuàng)建一個(gè)webpack管理的Vue項(xiàng)目奶卓。
vue init webpack github-page-vue-demo
可以看到 config 目錄中有三個(gè)文件:
config // 配置目錄
├── dev.env.js // 用于development模式的環(huán)境變量
├── index.js // 用于配置 `dev` 模式和 `prod` 模式的 webpack config 文件
└── prod.env.js // 用于product模式的環(huán)境變量
這里我們需要配置的就是 index.js 文件, 先看看該文件內(nèi)容 (這里將不相關(guān)的代碼用...略過(guò)), 其中我們需要關(guān)注的是 module.exports 的 build 屬性, 我們將在這里配置 webpack build 時(shí)生成文件的路徑
module.exports = {
dev: {
...
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
...
}
}
可以看到圖中主要配置了 index 文件和 assets 文件的路徑. 默認(rèn)執(zhí)行 yarn run build 后 webpack 會(huì)將項(xiàng)目打包到項(xiàng)目根目錄的 ./dist 文件夾。
1.3.2修改編譯配置
但是 github pages 默認(rèn)只能識(shí)別項(xiàng)目根目錄的 index 文件, 如果我們想要讓 github pages 識(shí)別到我們 build 出來(lái)的文件應(yīng)該怎么辦呢?
你可能會(huì)想到直接將 dist 文件夾中 build 生成的文件直接復(fù)制到項(xiàng)目的根目錄, 這確實(shí)是個(gè)辦法. 但是這樣的話, 我們每次 build 完, 都需要手動(dòng)復(fù)制一邊文件, 這無(wú)疑增加了很多重復(fù)性的工作.
我們可以通過(guò)修改默認(rèn)的配置來(lái)達(dá)到項(xiàng)目 build 的文件直接生成到項(xiàng)目根目錄的目的, 像這樣:
module.exports = {
dev: {
...
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../docs/index.html'), //之前是'../dist/index.html'
// Paths
assetsRoot: path.resolve(__dirname, '../docs'), // 之前是 '../dist'
assetsSubDirectory: 'static',
assetsPublicPath: './', // 之前是 '/'
...
}
}
完成以上的修改后, 我們?cè)俅芜\(yùn)行 yarn run build, 你會(huì)發(fā)現(xiàn)根目錄下多了一個(gè) docs 文件夾, 里面承載了 index 文件和 static 文件夾. 我們講 docs 目錄以及其下的文件全部加入 git 版本管理, 并 push 到 github.
再次來(lái)到 該項(xiàng)目的 github page setting頁(yè)面, 這時(shí)master branch /docs folder 就變成可選中的了. 我們選中這個(gè)選項(xiàng), 并保存設(shè)置.
過(guò)兩分鐘左右, 我們?cè)俅卧L問(wèn)我們項(xiàng)目的 github page url,比如我這里的地址就是：https://joealzhou.github.io/githubpages-demo/ 就會(huì)發(fā)現(xiàn)項(xiàng)目已經(jīng)部署成功了撼玄，任何人都可以通過(guò)此鏈接地址訪問(wèn)你的項(xiàng)目了夺姑。
