Github Pages

只有剛推出的時候使用在個人網站上，現在為了開源再學習一次。

文章開頭示意圖：Github Pages 建立學習

Github Pages 有兩種方式把自己做的網頁放到網路上供大家觀看，一種是使用內建工具建立，另一種就是自己從頭撰寫程式。其實官方文件就寫得蠻清楚的，這篇文章當作是個概要快速上手使用。

準備工作

1. 申請 Github 帳號

2. 建立 Repository，權限設為公開

3. 選擇名稱，通常為 Reposity 擁有者名稱＋github.io

4. 移動至 Repository 的 setting

5. 進到左邊選單有個 pages 的頁面

6. 接下來可以選擇內建工具建立 或 自行建立

內建工具建立

此方式適合：

1. 知道如何使用 markdown 的使用者。

2. 懶的在外觀下功夫的使用者。

Github Pages 是利用 Jekyll 快速選擇範本建立頁面。在 pages 的頁面裡，往下滑倒「Choose a theme」按鈕點擊便會進到選擇範本的頁面，選擇範本後，Github 便會自動開始部署，並且在 Repository 建立了一個新分支「gh-pages」，建立後裡面預設檔案有兩個，一個是 _config.yml，一個是 index.md，這裡面的內容就會是 { 名稱 }＋github.io 網址展示的內容。

如果想要客製化 404 內容，可以新增 404.md 就可以了。

自行建立

適合懂 html 的使用者。

自行建立其實很簡單，刪除原本的 _config.yml 、新增 .nojekyll 的檔案(內容空白即可，主要告訴 Github 不要把他認為是 Jekyll)、 刪除 index.md 、新增 index.html，剩下的就跟平常建立 html 專案一樣了。

Github Pages 預設查看是在 gh-pages 分支的根目錄，若想要切換根目錄，可以至 setting / pages 裡的「Source」，切換成/docs 就可以了。（記得在你的 Repository 新增 doc 資料夾）。

另外因為我是 Nuxt 的使用者，所以會特別注意 Nuxt 如何使用，也是很簡單的幾個設定：

首先在 nuxt.config.js 裡設定

export default {
    target: 'static',

再搭配 router base 的配置，如果不做這項作業，nuxt 就吃不到 js。 https://www.nuxtjs.cn/faq/github-pages#%E9%83%A8%E7%BD%B2%E5%88%B0-github-%E9%A1%B5%E9%9D%A2%E5%B9%B6%E8%8E%B7%E5%8F%96%E4%BB%93%E5%BA%93

另外在 package.json 設定

"scripts": {
...

"build:gh-pages": "cross-env DEPLOY_ENV=GH_PAGES nuxt build",
"generate:gh-pages": "cross-env DEPLOY_ENV=GH_PAGES nuxt generate"},

不想使用 Github Pages 了

很簡單，在 setting / pages 裡面的 「Source」，將下拉式選單換成「None」就可以了！

以上是基本的 Github Pages 說明，想更深入暸解可以至官方文件觀看詳細內容喔！祝大家都順順利利建立起來～。