打個(gè)小廣告：
如果你想獲取更多前端干貨甩恼、鵝廠工程師的前端面試指南，
歡迎關(guān)注我的個(gè)人微信公眾號(hào)：
前端夜談
使用 github pages, 快速部署你的靜態(tài)網(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.
前言
在日常工作中, 我們經(jīng)常會(huì)遇到要做 demo 展示的情況. 做 demo 展示不同于做項(xiàng)目開(kāi)發(fā), 我們需要的是快速輕便的開(kāi)發(fā)和部署, 而不是完備的一整套開(kāi)發(fā)流程.
下圖肯定不是我們做一個(gè) demo 想要的流程.
尤其對(duì)于數(shù)據(jù)可視化工作, 能快速的創(chuàng)建一個(gè) demo 來(lái)驗(yàn)證自己的想法, 并且方便的和同伴分享自己作品是非常重要的.
在這里給大家介紹一種筆者經(jīng)常用來(lái)做 demo 的方法: Github Pages.
選擇 github pages 的理由
- 使用零成本: github pages 集成在 github 中, 直接和代碼管理綁定在一起, 隨著代碼更新自動(dòng)重新部署, 使用非常方便.
- 免費(fèi): 免費(fèi)提供 username.github.io 的域名, 免費(fèi)的靜態(tài)網(wǎng)站服務(wù)器.
- 無(wú)數(shù)量限制: github pages 沒(méi)有使用的數(shù)量限制, 每一個(gè) github repository 都可以部署為一個(gè)靜態(tài)網(wǎng)站.
使用方法
一. 部署靜態(tài)網(wǎng)頁(yè)
首先我們介紹一下部署最基礎(chǔ)的靜態(tài)網(wǎng)頁(yè), 最終的效果是展示出一個(gè) Hello, github pages :) 頁(yè)面.
demo 地址: github repository
github page 地址: https://ssthouse.github.io/github-pages-demo/
1.1 創(chuàng)建一個(gè) github 項(xiàng)目
前往 github 官網(wǎng), 點(diǎn)擊 New repository 創(chuàng)建新項(xiàng)目. 填入項(xiàng)目基本信息, 點(diǎn)擊 Create Repository 確認(rèn).
確認(rèn)完成后會(huì)看到如下頁(yè)面:
1.2 為 repository 開(kāi)啟 github page 選項(xiàng)
如圖, 我們選中 Setting tab
往下滾動(dòng), 找到 Github Pages 選項(xiàng), 將 Source 改為 master branch, 最后點(diǎn)擊 Save 按鈕
最后我們會(huì)得到一個(gè)鏈接, 通過(guò)這個(gè)鏈接, 待會(huì)我們就能通過(guò)這個(gè)鏈接訪問(wèn)到該項(xiàng)目的 github pages 頁(yè)面.
1.3 代碼 clone 到本地, 并創(chuàng)建幾個(gè)基本文件
1.4 添加基礎(chǔ)代碼
注意這里 html 因?yàn)楹?css 以及 js 放在同一目錄, 所以我們用相對(duì)路徑來(lái)引用.
代碼邏輯很簡(jiǎn)單, 就是在頁(yè)面加載好后在頁(yè)面中添加 Hello, github pages :) 這段文字.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Github Page demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="index.js"></script>
</head>
<body>
<div id="main-content">
</div>
</body>
</html>
index.js
window.onload = function() {
document.getElementById('main-content').innerHTML = 'Hello, github pages :)'
}
main.css
#main-content {
font-size: 36px;
font-weight: bold;
padding: 16px;
}
1.5 將代碼更新到 github 倉(cāng)庫(kù)
cd github-pages-demo
git add .
git commit -m "Add simple code"
git push
1.6 看看效果
現(xiàn)在我們?cè)L問(wèn)之前開(kāi)啟 github pages 選項(xiàng)時(shí)獲得的 url, 就可以看到效果了
注: 代碼 push 上去后, 可能要過(guò)幾分鐘才會(huì)部署好生效
效果如圖 :arrow_down:
二. 使用前端框架時(shí), 如何使用 github pages
如今我們創(chuàng)建一個(gè)前端項(xiàng)目的時(shí)候, 已經(jīng)很少手動(dòng)創(chuàng)建 index.html, main.js , main.css 這文件了, 通常我們都會(huì)選擇一個(gè)前端框架, 并使用相應(yīng)的 command line tool 來(lái)初始化項(xiàng)目.
這里筆者用 Vue 的 webpack 項(xiàng)目 做介紹, rect 和 angular 進(jìn)行類似的配置即可.
創(chuàng)建項(xiàng)目
首先我們用 vue-cli 創(chuàng)建一個(gè) webpack 管理的 vue 項(xiàng)目 (點(diǎn)我安裝 vue-cli),
vue init webpack github-page-vue-demo
然后我們進(jìn)入項(xiàng)目, 看看目錄結(jié)構(gòu):
可以看到 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 文件夾, 如圖:
修改編譯配置
但是 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, '../index.html'), //之前是 '../dist/index.html'
// Paths
assetsRoot: path.resolve(__dirname, '../'), // 之前是 '../dist'
assetsSubDirectory: 'static',
assetsPublicPath: './', // 之前是 '/'
...
}
}
所做的改動(dòng)就是去掉了默認(rèn)的 dist 目錄, 并且將 assets 的引用路徑從 絕對(duì)路徑 改為了 相對(duì)路徑.
去掉 dist 目錄是為了將 build 的 target 路徑改為項(xiàng)目根目錄. 改為相對(duì)路徑是因?yàn)樵诓渴鸬?github pages 的時(shí)候, 我們的域名是 https://username.github.io/repositoryName, 也就是說(shuō)我們的項(xiàng)目是部署在子域名上的, 如果用絕對(duì)路徑會(huì)導(dǎo)致 assets 文件 404.
這樣修改完后我們又發(fā)現(xiàn)一個(gè)問(wèn)題: 在這樣的配置下, build 結(jié)束生成的 index.html 文件會(huì)覆蓋原有的 template index.html 文件, 并且根目錄多了一個(gè) static 文件夾, 很容易讓人對(duì)這個(gè)文件夾的作用產(chǎn)生疑惑. 有沒(méi)有更好的解決辦法呢 ?
讓我們回到 github page 的 setting 頁(yè)面:
可以看到這里有一個(gè)選項(xiàng)是 master branch /docs folder . 當(dāng)前狀態(tài)是不可選的, 原因是我們的項(xiàng)目代碼里面沒(méi)有 /docs 目錄.
這個(gè)選項(xiàng)的意思是 github page 可以識(shí)別我們項(xiàng)目中的 docs 文件夾, 并在這個(gè)文件夾中尋找 index 文件進(jìn)行部署. 選中這個(gè)選項(xiàng)后, 我們只需要將之前 webpack 默認(rèn)的 dist 文件夾改為 docs 文件夾即可, 修改后配置如下:
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, 就會(huì)發(fā)現(xiàn)項(xiàng)目已經(jīng)部署成功了 :tada:
自定義 template
在上一步中, 我們自己配置了一個(gè) 基于 Vue + Webpack 的項(xiàng)目配置. 但如果每次我們想創(chuàng)建一個(gè) demo, 我們都要修改一遍配置的話, 還是很花費(fèi)時(shí)間. 特別是忘記了配置步驟的話, 還得再查找之前的配置方法.
一個(gè)比較好的解決方案是創(chuàng)建一個(gè)基礎(chǔ)的 template repository, 在下次需要?jiǎng)?chuàng)建一個(gè) demo 項(xiàng)目的時(shí)候, 直接 fork 過(guò)來(lái), 基于這個(gè)項(xiàng)目著手開(kāi)發(fā)即可.
比如我經(jīng)常使用的技術(shù)棧是: Vue + D3.js + Webpack, 我就給自己創(chuàng)建了一個(gè)這樣的 template, 并做好 github page 的配置. 下次要做數(shù)據(jù)可視化 demo 的時(shí)候, 直接 fork 這個(gè) repository 進(jìn)行開(kāi)發(fā), 節(jié)省了許多項(xiàng)目配置的時(shí)間, 如果有和我類似技術(shù)棧的小伙伴, 不妨一試:
Vue + D3.js + Webpack (github page ready)
github 地址
三. 只可以是靜態(tài)網(wǎng)站嗎?
github page 可以非常方便的部署靜態(tài)網(wǎng)頁(yè). 但是因?yàn)闆](méi)有數(shù)據(jù)庫(kù), 無(wú)法存儲(chǔ)數(shù)據(jù), 也就沒(méi)辦法實(shí)現(xiàn)較為復(fù)雜的業(yè)務(wù)邏輯. 但是 github page 真的就只能做做簡(jiǎn)單的純靜態(tài)網(wǎng)站了嗎?
其實(shí), 如今前后端分離, 只要有后端 api, 前端完全可以單獨(dú)開(kāi)發(fā)和部署.
如果我們的網(wǎng)站已有現(xiàn)成的后端 api, 使用 github page, 再加上 javascript 調(diào)用后端 api, 完全可以實(shí)現(xiàn)所有的業(yè)務(wù)邏輯.
如果沒(méi)有現(xiàn)有后端 api, 但是想要實(shí)現(xiàn)簡(jiǎn)單的后端邏輯的話, 這里推薦一個(gè)筆者常用的小 tip:
使用 leancloud 作為對(duì)象存儲(chǔ)的后端數(shù)據(jù)庫(kù)
前端調(diào)用 leancloud api 實(shí)現(xiàn)所有的業(yè)務(wù)邏輯
如果感興趣不妨看看我的這個(gè)項(xiàng)目: github visualization
這個(gè)項(xiàng)目就是部署在 github pages 上, 并使用 leancloud api 實(shí)現(xiàn)的 用戶訪問(wèn)信息記錄 的功能.
具體的 leancloud 使用細(xì)節(jié), 請(qǐng)參見(jiàn) leancloud 文檔
最后
github pages 可以說(shuō)是為我節(jié)省了許多的時(shí)間, 為我開(kāi)發(fā) demo 展示提供了非常多的便利. 推薦沒(méi)有使用過(guò)的小伙伴試試, 相信也會(huì)給你們帶來(lái)很多便利.
