這是在講 Gulp 不是飲料是任務自動化工具這件事:GitHub Page篇

前言

大致上 Gulp 前端開發上的套件及使用方式也介紹差不多了,但是這邊還要再介紹一個東西,也就是 GitHub Pages,如果我們今天開發的頁面是自己的作品,然後想要放到一個平台上,那麼 GitHub Pages 就是一個好東西,所以這邊將會介紹如何上傳到 GitHub Pages 及安裝套件

起手式

這邊將會安裝 gulp-gh-pages 這個套件,在 npm 上可能會找到許多類似了,所以這邊附上我所使用的套件連結

安裝方式老樣子

1
npm install --save gulp-gh-pages

使用方式

我們一樣可以參考官方文件範例來撰寫就好了,只需要稍微調整即可

1
2
3
4
gulp.task('deploy', () => {
return gulp.src('./public/**/*')
.pipe($.ghPages());
});

這時候你可以試著輸入 gulp deploy,這時候你應該會看到這樣子的訊息

deploy

這是因為你還沒替這個專案加入 git 版控及 GitHub 部屬,所以這邊我們要先來初始化一下這個專案資料夾

GitHub

首先我們先到 GitHub 開一個 repo

repo

repo

替專案資料夾初始化

1
git init

接下來先來新增一個檔案叫 .gitignore 在根目錄,

gitignore

內容如下

1
2
3
public
node_modules
.publish

接下來可以先看一下那些資料夾還沒被加入 git,可以輸入 git status

status

我們可以看到這些檔案都還沒加入 git 版控,所以就輸入 git add . (意旨全部加入版本控制)

add

如果不確定是否加入可以再輸入一次 git status,來看看那些檔案加入版本控制了

status

加入完畢後我要輸入 commit 訊息,所以這樣打 git commit -m 'first update file'

commit

接下來輸入 GitHub 提供的指令 git remote add origin https://github.com/hsiangfeng/gulpSample.git,輸入之後不會有任何訊息是正常的

remote

最後輸入 git push -u origin master,你就上傳成功啦~

push

GitHub

回到 Gulp

接下來我們回到剛剛前面講到 gulp-gh-pages,當確定版本控制加入,也確定上傳至 GitHub 後就可以試著輸入 gulp deploy

過程中你可能會發現多了一個 .publish 資料夾,這個資料夾是 gulp-gh-pages 生成的,所以可以不用理他

publish

過一段時間後就可以看到上傳成功哩~

deploy

然後回到 GitHub 點一下 branch,我們可以看到多了一個分支 (gh-pages)

gh-pages

這是 gulp-gh-pages 套件自動幫我們建立的分支,而且它還幫我們自己打開了 GitHub pages頁面,但是要看網址的話,要這樣操作

setting

接下來往下拉找 GitHub Pages 的標題就可以看到網址了 (如果欄位呈現非綠色,代表 GitHub Pages 還在準備中唷~)

GitHub Pages

這邊也附上這個 Gulp 4 範例 Repo

0%