免費架一個站的工具愈來愈多
自從寫了上一篇的「不會寫程式,也能自己架一個免費網站:Publii + GitHub Pages」後,看到還可以免費架站的工具都會注意一下。
August 之前存下來的另外一個線上工具是:https://neocities.org/,也是很方便,註冊後輸入要的子網域名稱,把檔案上傳後,一個站就產生了。如果要客製域名就要另外加入成付費會員。
本篇要筆記的是另外一個免費架站的工具:Netlify。這個是在社團中看到有人分享的,試用了一下,發現可以直接抓 GitHub、GitLab 裡的專案,想更新時只要 push 專案就行,而且還可以自訂網域。
不過要注意的是,Netlify 的免費方案有限制,可以看他們的 價目表。
因為 GitHub 跟 GitLab 比起來,GitLab 生成靜態頁相對麻煩,這邊就來用 Netlify 試玩看看。
開始前需要準備好的
繼續往下看前,需要的東西如下:
- GitLab 上有一個專案,公開或私人的都行
- 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 指向上,如果也有曾經踩過這坑的大大歡迎告知原因。
打开超级慢
嗯?不會耶,現在打開來很很多了。
[…] Netlify + GitLab […]
[…] 之前有寫過二篇,用免費的資源來建立一個自己的網站:「Netlify + GitLab」、「Publii + GitHub Pages」,不過後來有朋友反應說,Publii 要收 $$ 了,而 August 本身為這個站製作的 Demo 頁,也都是用 GitHup Pages,所以就一直沒有再去找其它的替代品。 […]