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

時間 2019-11-29

標籤使用 github pages 快速部署靜態網頁欄目 Git 简体版

原文原文鏈接

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

Github Pages: Websites for you and your projects. Hosted directly from your GitHub repository. Just edit, push, and your changes are live.css

前言

在平常工做中, 咱們常常會遇到要作 demo 展現的狀況. 作 demo 展現不一樣於作項目開發, 咱們須要的是快速輕便的開發和部署, 而不是完備的一整套開發流程.html

下圖確定不是咱們作一個 demo 想要的流程.前端

尤爲對於數據可視化工做, 能快速的建立一個 demo 來驗證本身的想法, 而且方便的和同伴分享本身做品是很是重要的. 在這裏給你們介紹一種筆者常常用來作 demo 的方法: Github Pages.vue

選擇 github pages 的理由

使用零成本: github pages 集成在 github 中, 直接和代碼管理綁定在一塊兒, 隨着代碼更新自動從新部署, 使用很是方便.
免費: 免費提供 username.github.io 的域名, 免費的靜態網站服務器.
無數量限制: github pages 沒有使用的數量限制, 每個 github repository 均可以部署爲一個靜態網站.

使用方法

一. 部署靜態網頁

首先咱們介紹一下部署最基礎的靜態網頁, 最終的效果是展現出一個 Hello, github pages :) 頁面.java

demo 地址: github repositorywebpack

github page 地址: ssthouse.github.io/github-page…git

1.1 建立一個 github 項目

前往 github 官網, 點擊 New repository 建立新項目. 填入項目基本信息, 點擊 Create Repository 確認.github

確認完成後會看到以下頁面:web

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 進行開發, 節省了許多項目配置的時間, 若是有和我相似技術棧的小夥伴, 不妨一試: