[鼠年全马] W40 - 用GithubPages写下完美句点

这篇是今年的最後一篇~

最近有个需求是要架个对外的站台，内容是作品集展示之类的东东
上网估狗了一下有没有符合我的需求的功能
而就这麽刚好 Github 有提供一个 Github Pages 能达到我要的需求
而且重点是

不用额外付费!!
不用额外付费!!
不用额外付费!! xD

可恶，不用钱对我来说吸引力太大了，於是乎就来研究他的使用方式

#开始架站

首先，先来了解一下Github Pages的好处:

免费
网域归属github
架站快速且方便

有好处当然也有坏处:

只能架静态网页

这个缺点就蛮可惜的了~
不过如果只是要架展示用的站台，使用Github Pages就非常够用了!!

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

网站大小 < 1GB
流量限制 < 100GB/月
建置次数 < 10次/时

其他条件可以再参考官网内容

接下来就直接进入主题吧~
来看看 Github Pages 官网首页下方有基本的步骤教学，真的很基本xD

直接以我做了11周才完成的[Vue出一个旅馆预约平台]专案来做架站步骤教学吧~

#Step 1

由於这个专案本身就有使用github管理，所以建立专案的步骤就跳过罗~

直接在专案页点最右边的 [Settings]

进去之後拉到最下面有个 [GitHub Pages] ，这边要注意的是专案必须设定公开(public)或是升级(xD)才可以使用 GitHub Pages 来架站

#Step 1-1

如果专案原本设定是 public 就跳过这段，原本是 private 要变 public 可以继续看
设定公开的方式很简单， [GitHub Pages] 下方有个 [Danger Zone] 危险区域，点右上角的 [Change visibility] 按钮

#Step 1-2

跳出视窗後选 [Make public]，然後文字框输入他要你输入的字串，输入之後点 [I understand, change repository visibility.] 就完成罗!!

#Step 2

专案已经设定公开的话 [GitHub Pages] 可以设定站台来源路径并且可以选择预设的主题

这边我们先选一个喜欢的主题来试试看连结有没有画面吧~

选好之後回到 [GitHub Pages] 可以看到设定变了，系统帮你建好了一个 gh-pages 分支，并且给你预设的 url-path
本专案的路径: **https://cookie-lee.github.io/F2ERound6/**

网址点进去看看有没有刚刚选的主题画面吧~有的话这个步骤就完成罗~

#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，然後就可以发呆了 ~~(误)~~