使用 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 的理由

使用零成本: github pages 內建在 github 中, 直接和代碼管理綁定在一起, 随着代碼更新自動重新部署, 使用非常友善.
免費: 免費提供 username.github.io 的域名, 免費的靜态網站伺服器.
無數量限制: github pages 沒有使用的數量限制, 每一個 github repository 都可以部署為一個靜态網站.

使用方法

一. 部署靜态網頁

首先我們介紹一下部署最基礎的靜态網頁, 最終的效果是展示出一個

Hello, github pages :)

頁面.

demo 位址: github repository github 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-demo
    git add .
    git commit -m "Add simple code"
    git push

1.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.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: 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.html
    index: path.resolve(__dirname, '../index.html'),  //之前是 '../dist/index.html'

    // Paths
    assetsRoot: 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.html
    index: path.resolve(__dirname, '../docs/index.html'),  //之前是'../dist/index.html'

    // Paths
    assetsRoot: 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 首頁知乎專欄掘金

使用 github pages, 快速部署你的靜态網頁使用 github pages, 快速部署你的靜态網頁

使用 github pages, 快速部署你的靜态網頁

前言

選擇 github pages 的理由

使用方法

一. 部署靜态網頁

1.1 建立一個 github 項目

1.2 為 repository 開啟 github page 選項

1.3 代碼 clone 到本地, 并建立幾個基本檔案

1.4 添加基礎代碼

1.5 将代碼更新到 github 倉庫

1.6 看看效果

二. 使用前端架構時, 如何使用 github pages

建立項目

修改編譯配置

自定義 template

三. 隻可以是靜态網站嗎?

最後

如果覺得這篇文章不錯的話, 不妨關注一下 : )

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條