iT邦幫忙

0

[鼠年全馬] W40 - 用GithubPages寫下完美句點

這篇是今年的最後一篇~

最近有個需求是要架個對外的站台,內容是作品集展示之類的東東
上網估狗了一下有沒有符合我的需求的功能
而就這麼剛好 Github 有提供一個 Github Pages 能達到我要的需求
而且重點是

不用額外付費!!
不用額外付費!!
不用額外付費!! xD

可惡,不用錢對我來說吸引力太大了,於是乎就來研究他的使用方式 /images/emoticon/emoticon01.gif


#開始架站

首先,先來了解一下Github Pages的好處:

  • 免費
  • 網域歸屬github
  • 架站快速且方便

有好處當然也有壞處:

  • 只能架靜態網頁

這個缺點就蠻可惜的了~
不過如果只是要架展示用的站台,使用Github Pages就非常夠用了!!

Github Pages 本身有一些 限制條件:

  • 網站大小 < 1GB
  • 流量限制 < 100GB/月
  • 建置次數 < 10次/時

https://ithelp.ithome.com.tw/upload/images/20201217/20118686bdQGStEQQS.jpg

其他條件可以再參考官網內容

接下來就直接進入主題吧~
來看看 Github Pages 官網首頁下方有基本的步驟教學,真的很基本xD

直接以我做了11週才完成的[Vue出一個旅館預約平台]專案來做架站步驟教學吧~

#Step 1

由於這個專案本身就有使用github管理,所以建立專案的步驟就跳過囉~

直接在專案頁點最右邊的 [Settings]
https://ithelp.ithome.com.tw/upload/images/20201217/201186862c8LRg1DSp.jpg

進去之後拉到最下面有個 [GitHub Pages] ,這邊要注意的是專案必須設定公開(public)或是升級(xD)才可以使用 GitHub Pages 來架站
https://ithelp.ithome.com.tw/upload/images/20201217/20118686FjCbxqFowJ.jpg

#Step 1-1

如果專案原本設定是 public 就跳過這段,原本是 private 要變 public 可以繼續看
設定公開的方式很簡單, [GitHub Pages] 下方有個 [Danger Zone] 危險區域,點右上角的 [Change visibility] 按鈕
https://ithelp.ithome.com.tw/upload/images/20201217/20118686w4FgFTaKob.jpg

#Step 1-2

跳出視窗後選 [Make public],然後文字框輸入他要你輸入的字串,輸入之後點 [I understand, change repository visibility.] 就完成囉!!
https://ithelp.ithome.com.tw/upload/images/20201217/20118686S6Vp0CEvBB.jpg

#Step 2

專案已經設定公開的話 [GitHub Pages] 可以設定站台來源路徑並且可以選擇預設的主題
https://ithelp.ithome.com.tw/upload/images/20201217/20118686IN5osnkuX1.jpg

這邊我們先選一個喜歡的主題來試試看連結有沒有畫面吧~
https://ithelp.ithome.com.tw/upload/images/20201217/201186869BHQh6dLbG.jpg

選好之後回到 [GitHub Pages] 可以看到設定變了,系統幫你建好了一個 gh-pages 分支,並且給你預設的 url-path
本專案的路徑: **https://cookie-lee.github.io/F2ERound6/**
https://ithelp.ithome.com.tw/upload/images/20201217/20118686F68P1hfbRH.jpg

網址點進去看看有沒有剛剛選的主題畫面吧~有的話這個步驟就完成囉~
https://ithelp.ithome.com.tw/upload/images/20201217/20118686IBAyCYe0v8.jpg

#Step 3

接下來我們要把專案打包丟到 gh-pages 裡面
這裡可以使用 自動部屬腳本 的方式來執行(這個也是新學的技巧xD)

首先在專案底下的 vue.config.js 加上 publicPath: '/F2ERound6/',這個動作是設定根目錄為 /F2ERound6/

module.exports = {
  ...,
  publicPath: '/F2ERound6/'
}

再來就是這個步驟的重點「自動化部屬腳本」
腳本的內容長這樣,直接看註解吧xD

#deploy.sh
#!/usr/bin/env sh
# 當發生錯誤時終止腳本運行
set -e
# 打包
npm run build
# 移動至到打包後的dist目錄 
cd dist
git init #因為dist資料夾預設是被ignore的,因此在進入dist資料夾後初始化git
git add -A
git commit -m 'deploy'
# 部署分支為 gh-pages
git push -f https://github.com/cookie-lee/f2eround6.git master:gh-pages
#將dist資料夾中的內容推送至遠端eric-project的gh-pages分支中,並強制無條件將舊有的內容取代成目前的內容(指令 git push -f)
cd -

執行時移動到檔案資料夾中,輸入指令 .\deploy.sh,然後就可以發呆了 (誤)
https://ithelp.ithome.com.tw/upload/images/20201217/20118686SZLhAbaHN0.jpg

#結果

視窗跑完之後就可以點剛才的連結去看我們美美的專案畫面囉~!!
https://ithelp.ithome.com.tw/upload/images/20201217/20118686nDri0Z5NMM.jpg


參考資料:
從零開始: 用github pages 上傳靜態網站
不用懂git也能用GitHub Pages架設靜態網站並綁定網域
[Vue] 將Vue專案部署至Github Pages


最後的最後,感謝六角學院舉辦這個活動
讓我不只會coding,還學會該如何表達自己的code(這真的很重要!!)
等我拿到金角獎獎盃在來好好炫耀一番
/images/emoticon/emoticon07.gif/images/emoticon/emoticon07.gif/images/emoticon/emoticon07.gif

再拉幹


尚未有邦友留言

立即登入留言