iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

1
Modern Web

試著把切版專案升級到 gulp4.0 吧系列 第 35

[試著把切版專案升級到 gulp4.0 吧] Day35 佈署靜態網頁到 github pages

當網頁已經開發完成了,通常會想找個網路空間把網頁放上去,讓其他人輸入網址後就能在遠方看到網頁。網路雖然是自由的,但卻不是免費的,許多的網路空間都需要花錢錢才能使用。

不過,github 有提供一個免費託管靜態網頁的服務:github pages。透過這個服務,就能免費地將靜態網頁放上去,不用擔心伺服器費用的問題惹。

github pages 的操作過程

github pages 可以直接透過網頁、git 命令就能操作,先了解 github pages 的操作方式,就更能了解 gulp 的自動化流程該怎麼與 github pages 連動。

不過這邊就只列出簡要的步驟惹。詳細的操作步驟可 google 或參考置底的資料

  1. 在 Github 網頁中,建立一個專案(repository)
  2. 打開 terminal
  3. 將專案複製下來 git clone xxx.git
  4. 修改一些檔案
  5. 將檔案推上 github
# CLI
git add --all
git commit -m "Initial commit"
git push -u origin master
  1. 在專案的 Setting 中調整 github pages 服務要顯示的網頁資料是在哪個 branch 中

搭配 gulp-gh-pages 套件

先安裝這個套件

# CLI
npm install --save-dev gulp-gh-pages

在 gulpfile 加入語法

var gulp = require('gulp');
var ghPages = require('gulp-gh-pages');
 
function deploy() {
  return gulp.src("./public/**/*").pipe($.ghPages())
}
exports.deploy = deploy

之後就能在 CLI 中下指令,將編譯好的網頁推到 github pages 上,讓大家都能看到網頁了

gulp deploy

其他

雖然這篇介紹到如何使用 gulp-gh-pages,將編譯好的靜態網頁佈署到 github pages,但這邊想留點提醒給想要嘗試的人:

一、這個套件沒有更新的很頻繁。github 上的最新更新是 2018 年,而 npm 上的最新更新則是 2015 年。雖然 gulp 也沒有什麼在更新啦(?),但有點擔心當出現 bug 時,這個套件沒辦法即時處理掉。(而且該套件的 repo 沒有看到能反應 issue 的地方 @@)

二、我前幾個月嘗試使用該套件時失敗了。我不太確定原因是什麼,不曉得是不是該套件不支援 gulp4、或是不支援佈署到自己的私人專案。

因此若想省時間使用這個套件之前,最好還是先跑過 git CLI 的流程,除了更了解佈署到 github pages 的原理外,也能當作是該套件失效時的一個備案。

小結

今天談到了如何用 gulp-gh-pages,將編譯好的靜態網頁佈署到 github pages 上。明天將會講完賽心得。

參考資料


上一篇
[試著把切版專案升級到 gulp4.0 吧] Day34 邊開發邊看畫面變動:談 gulp-plumber
下一篇
[試著把切版專案升級到 gulp4.0 吧] DAY 36 完賽心得
系列文
試著把切版專案升級到 gulp4.0 吧36

1 則留言

1
Ray
iT邦新手 5 級 ‧ 2019-12-31 10:12:09

其實這個套件一直有一個問題,在初次安裝時可能沒問題,但是在後來有可能會出現錯誤,這個問題我滿常遇見的(常常無聊回去優化以前寫的專案

https://hsiangfeng.github.io/gulp/20191220/1507807439/

喔喔喔感謝!
我前幾個月嘗試到崩潰,也沒順利 google 到解決方案
我後來是另外寫 bash 檔來解決的 orz

git checkout -B gh-pages
git add -f public
git commit -m "compile website"

git push origin `git subtree split --prefix public gh-pages`:gh-pages --force
git checkout master

read -n1 -r -p "Press any key to continue..." key

之後有空再來研讀你的 Heroku 番外篇 ~

我要留言

立即登入留言