Netlify + GitLab 建一個免費靜態網站

免費架一個站的工具愈來愈多

自從寫了上一篇的「不會寫程式，也能自己架一個免費網站：Publii + GitHub Pages」後，看到還可以免費架站的工具都會注意一下。

August 之前存下來的另外一個線上工具是：https://neocities.org/，也是很方便，註冊後輸入要的子網域名稱，把檔案上傳後，一個站就產生了。如果要客製域名就要另外加入成付費會員。

本篇要筆記的是另外一個免費架站的工具：Netlify。這個是在社團中看到有人分享的，試用了一下，發現可以直接抓 GitHub、GitLab 裡的專案，想更新時只要 push 專案就行，而且還可以自訂網域。

不過要注意的是，Netlify 的免費方案有限制，可以看他們的 價目表。

因為 GitHub 跟 GitLab 比起來，GitLab 生成靜態頁相對麻煩，這邊就來用 Netlify 試玩看看。

---

開始前需要準備好的

繼續往下看前，需要的東西如下：

1. GitLab 上有一個專案，公開或私人的都行
2. GitLab 上的專案，要有檔案，不然用 Netlify 接上後，沒檔案什麼都顯示不了

本篇直接從「TEMPLATED」下載一個模版，也傳到 GitLab 上，為了測試私人專案是否也可以顯示頁面，就把專案設成私人。

GitHub 目前如果不是付費會員，就無法將私人專案設成靜態頁，Netlify 如果可以抓私人專案產生頁面的話，一些需求就可以用 Netlify 來達成。

---

1 註冊 Netlify 帳號

進到 Netlify官網，按下「Get started for free」：

接著就是選擇註冊的方式，因為這篇要用Gitlab來試，就一併用 GitLab 註冊了：

下一步就是確認給予授權：

註冊成功，在進到後台前，會先看到三個 Netlify 的話術優點：

---

2 連接 GitLab 專案

註冊完後、登入完後，都會進到後台，點選後台的「New site for Git」：

出現選擇要連結到哪一個 Git 的平台，這邊選擇的是 GitLab：

選擇完後一樣會出現需要授權：

確認授權後，會出現你的 GitLab 帳戶中有的專案，點選想要架成靜態網站的專案：

點選完後就是確認是這個專案的哪個分支，預設是 master：

「Basic build settings」這段沒仔細看說明文件，因此本篇就不介紹，就跳過吧~

直接按下 Deploy site，就會開始把選擇的專案發佈成網站，成功後會看見笑臉跟網址：

對，到這一步，就有一個自己的網站了，是不是很簡單？

---

3 修改子網域名稱

Netlify 生成的網址，子網域的開頭會是一些像亂碼的文字，但佛心的是也開放可以修改子網域名稱，點選上圖的「Site settings」，會看見網站的基本資訊：

點選「Change site name」來修改名稱，會出現一個燈箱：

一邊輸入想要的名稱，下方就會出現改過後的網址。按下 Save 後，顯示的網址就會變了：

這邊是 August 用 Netlify 成生的站：https://letswrite.netlify.com/

是不是很簡單？有沒有很意外，這樣子就用了 GitLab 的專案生成一個網站勒~

---

4 自訂域名

Netlify 即便是免費會員，也可以自訂域名，要自訂域名的話，就必須要有一個自己的網域。

這邊拿 August 自己租的 letswrite.tw 來示範。

Netlify 的後台，左側選單有一個「Domain management」，點下去後，右側會看到一個「Add custom domain」的按鈕，按下去：

下一步就是輸入要自訂的網域，這邊用一個子網域：

按下 Verify，會再確認一次這個網域是不是你擁有的：

按下 Yes 後，畫面會跳到沒有裝 SSL 憑證的訊息：

這邊不用理它，先把整個頁面滑到最上面，會看見有一行「Check DNS configuration」：

點擊「Check DNS configuration」，會出現要設定 DNS 指向的那一串：

這一串，就看是主機設定子網域的 DNS，還是租網域的地方設定。因為 August 是租 SiteGround 主機，它的後台就有提供增加 CNAME 的紀錄，所以就是在主機那邊設定。

設定完成後，原本頁面下方寫 HTTPS 的地方，就會看見齒輪在轉：

大概一個小時以內，這塊就會顯示成安裝完 SSL 的訊息，代表我們設定的網址是 https 開頭的了：

頁面再往上拉，就會看見顯示網址的地方新增了一個我們自訂的網址：

這個是 August 自訂網域的 Demo：https://netlify-demo.letswrite.tw/

點進去會發現，跟 Netlify 原本產生的網域比起來，自訂網域載入速度異常緩慢，全部 load 完竟然快要 2 分鐘，不確定原因是在 Netlify、GitLab，還是主機 DNS 指向上，如果也有曾經踩過這坑的大大歡迎告知原因。