请在贵网站的根目录下部署一个文件_使用 github pages, 快速部署你的静态网页
使用 github pages, 快速部署你的靜態網頁
Github Pages 官網
Github Pages:Websites for you and your projects.
Hosted directly from your GitHub repository. Just edit, push, and your changes are live.
前言
在日常工作中, 我們經常會遇到要做 demo 展示的情況. 做 demo 展示不同于做項目開發, 我們需要的是快速輕便的開發和部署, 而不是完備的一整套開發流程.
下圖肯定不是我們做一個 demo 想要的流程.
尤其對于數據可視化工作, 能快速的創建一個 demo 來驗證自己的想法, 并且方便的和同伴分享自己作品是非常重要的.
在這里給大家介紹一種筆者經常用來做 demo 的方法: Github Pages.
選擇 github pages 的理由
使用方法
一. 部署靜態網頁
首先我們介紹一下部署最基礎的靜態網頁, 最終的效果是展示出一個 Hello, github pages :) 頁面.
demo 地址: github repositorygithub page 地址: https://ssthouse.github.io/github-pages-demo/
1.1 創建一個 github 項目
前往 github 官網, 點擊 New repository 創建新項目. 填入項目基本信息, 點擊 Create Repository 確認.
確認完成后會看到如下頁面:
1.2 為 repository 開啟 github page 選項
如圖, 我們選中 Setting tab
往下滾動, 找到 Github Pages 選項, 將 Source 改為 master branch, 最后點擊 Save 按鈕
最后我們會得到一個鏈接, 通過這個鏈接, 待會我們就能通過這個鏈接訪問到該項目的 github pages 頁面.
1.3 代碼 clone 到本地, 并創建幾個基本文件
1.4 添加基礎代碼
注意這里 html 因為和 css 以及 js 放在同一目錄, 所以我們用相對路徑來引用.
代碼邏輯很簡單, 就是在頁面加載好后在頁面中添加 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 倉庫
cd github-pages-demogit add .git commit -m "Add simple code"git push1.6 看看效果
現在我們訪問之前開啟 github pages 選項時獲得的 url, 就可以看到效果了
注: 代碼 push 上去后, 可能要過幾分鐘才會部署好生效效果如圖 :arrow_down:
二. 使用前端框架時, 如何使用 github pages
如今我們創建一個前端項目的時候, 已經很少手動創建 index.html, main.js , main.css 這文件了, 通常我們都會選擇一個前端框架, 并使用相應的 command line tool 來初始化項目.
這里筆者用 Vue 的 webpack 項目 做介紹, rect 和 angular 進行類似的配置即可.
創建項目
首先我們用 vue-cli 創建一個 webpack 管理的 vue 項目 (點我安裝 vue-cli),
vue init webpack github-page-vue-demo然后我們進入項目, 看看目錄結構:
可以看到 config 目錄中有三個文件:
config // 配置目錄 ├── dev.env.js // 用于development模式的環境變量 ├── index.js // 用于配置 `dev` 模式和 `prod` 模式的 webpack config 文件 └── prod.env.js // 用于product模式的環境變量這里我們需要配置的就是 index.js 文件, 先看看該文件內容 (這里將不相關的代碼用...略過), 其中我們需要關注的是 module.exports 的 build 屬性, 我們將在這里配置 webpack build 時生成文件的路徑
module.exports = {dev: {...},build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: '/',...} }可以看到圖中主要配置了 index 文件和 assets 文件的路徑. 默認執行 yarn run build 后 webpack 會將項目打包到項目根目錄的 ./dist 文件夾, 如圖:
修改編譯配置
但是 github pages 默認只能識別項目根目錄的 index 文件, 如果我們想要讓 github pages 識別到我們 build 出來的文件應該怎么辦呢?
你可能會想到直接將 dist 文件夾中 build 生成的文件直接復制到項目的根目錄, 這確實是個辦法. 但是這樣的話, 我們每次 build 完, 都需要手動復制一邊文件, 這無疑增加了很多重復性的工作.
我們可以通過修改默認的配置來達到項目 build 的文件直接生成到項目根目錄的目的, 像這樣:
module.exports = {dev: {...},build: {// Template for index.htmlindex: path.resolve(__dirname, '../index.html'), //之前是 '../dist/index.html'// PathsassetsRoot: path.resolve(__dirname, '../'), // 之前是 '../dist'assetsSubDirectory: 'static',assetsPublicPath: './', // 之前是 '/'...} }所做的改動就是去掉了默認的 dist 目錄, 并且將 assets 的引用路徑從 絕對路徑 改為了 相對路徑.
去掉 dist 目錄是為了將 build 的 target 路徑改為項目根目錄. 改為相對路徑是因為在部署到 github pages 的時候, 我們的域名是 https://username.github.io/repositoryName, 也就是說我們的項目是部署在子域名上的, 如果用絕對路徑會導致 assets 文件 404.
這樣修改完后我們又發現一個問題: 在這樣的配置下, build 結束生成的 index.html 文件會覆蓋原有的 template index.html 文件, 并且根目錄多了一個 static 文件夾, 很容易讓人對這個文件夾的作用產生疑惑. 有沒有更好的解決辦法呢 ?
讓我們回到 github page 的 setting 頁面:
可以看到這里有一個選項是 master branch /docs folder . 當前狀態是不可選的, 原因是我們的項目代碼里面沒有 /docs 目錄.
這個選項的意思是 github page 可以識別我們項目中的 docs 文件夾, 并在這個文件夾中尋找 index 文件進行部署. 選中這個選項后, 我們只需要將之前 webpack 默認的 dist 文件夾改為 docs 文件夾即可, 修改后配置如下:
module.exports = {dev: {...},build: {// Template for index.htmlindex: path.resolve(__dirname, '../docs/index.html'), //之前是'../dist/index.html'// PathsassetsRoot: path.resolve(__dirname, '../docs'), // 之前是 '../dist'assetsSubDirectory: 'static',assetsPublicPath: './', // 之前是 '/'...} }完成以上的修改后, 我們再次運行 yarn run build, 你會發現根目錄下多了一個 docs 文件夾, 里面承載了 index 文件和 static 文件夾. 我們講 docs 目錄以及其下的文件全部加入 git 版本管理, 并 push 到 github.
再次來到 該項目的 github page setting 頁面, 這時 master branch /docs folder 就變成可選中的了. 我們選中這個選項, 并保存設置.
過兩分鐘左右, 我們再次訪問我們項目的 github page url, 就會發現項目已經部署成功了 :tada:
自定義 template
在上一步中, 我們自己配置了一個 基于 Vue + Webpack 的項目配置. 但如果每次我們想創建一個 demo, 我們都要修改一遍配置的話, 還是很花費時間. 特別是忘記了配置步驟的話, 還得再查找之前的配置方法.
一個比較好的解決方案是創建一個基礎的 template repository, 在下次需要創建一個 demo 項目的時候, 直接 fork 過來, 基于這個項目著手開發即可.
比如我經常使用的技術棧是: Vue + D3.js + Webpack, 我就給自己創建了一個這樣的 template, 并做好 github page 的配置. 下次要做數據可視化 demo 的時候, 直接 fork 這個 repository 進行開發, 節省了許多項目配置的時間, 如果有和我類似技術棧的小伙伴, 不妨一試:
Vue + D3.js + Webpack (github page ready)github 地址
三. 只可以是靜態網站嗎?
github page 可以非常方便的部署靜態網頁. 但是因為沒有數據庫, 無法存儲數據, 也就沒辦法實現較為復雜的業務邏輯. 但是 github page 真的就只能做做簡單的純靜態網站了嗎?
其實, 如今前后端分離, 只要有后端 api, 前端完全可以單獨開發和部署.
如果我們的網站已有現成的后端 api, 使用 github page, 再加上 javascript 調用后端 api, 完全可以實現所有的業務邏輯.
如果沒有現有后端 api, 但是想要實現簡單的后端邏輯的話, 這里推薦一個筆者常用的小 tip:
使用 leancloud 作為對象存儲的后端數據庫前端調用 leancloud api 實現所有的業務邏輯
如果感興趣不妨看看我的這個項目: github visualization
這個項目就是部署在 github pages 上, 并使用 leancloud api 實現的 用戶訪問信息記錄 的功能.
具體的 leancloud 使用細節, 請參見 leancloud 文檔
最后
github pages 可以說是為我節省了許多的時間, 為我開發 demo 展示提供了非常多的便利. 推薦沒有使用過的小伙伴試試, 相信也會給你們帶來很多便利.
如果覺得這篇文章不錯的話, 不妨關注一下 : )
github 主頁
知乎專欄
掘金
想直接聯系我?
微信公眾號：
郵箱: ssthouse@163.com
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的请在贵网站的根目录下部署一个文件_使用 github pages, 快速部署你的静态网页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 语音问答系统源码，收费语音问答（分答、值
- 下一篇： python根据时间序列画折线图_Pyt