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

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

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

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

Augustus之前存下來的另外一個線上工具是: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」:

按下「Get started for free」
按下「Get started for free」

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

選擇要用哪個帳號註冊
選擇要用哪個帳號註冊

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

確認給予授權
確認給予授權

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

Simply Push to Deploy
Simply Push to Deploy
Free automatic HTTPS
Free automatic HTTPS
Never have to leave Terminal
Never have to leave Terminal

2 連接Gitlab專案

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

點選「New site for Git」
點選「New site for Git」

出現選擇要連結到哪一個Git的平台,這邊選擇的是Gitlab:

選Gitlab
選Gitlab

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

需要授權
需要授權

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

點選想要架成靜態網站的專案
點選想要架成靜態網站的專案

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

確認專案中的分支
確認專案中的分支

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

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

發佈成功會看見笑臉跟網址
發佈成功會看見笑臉跟網址

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


3 修改子網域名稱

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

網站基本資訊
網站基本資訊

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

改子網域名稱的燈箱
改子網域名稱的燈箱

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

更改網域成功
更改網域成功

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

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


4 自訂域名

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

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

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

按下「Add custom domain」
按下「Add custom domain」

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

輸入自訂的網域
輸入自訂的網域

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

確認這個網域是不是你擁有的
確認這個網域是不是你擁有的

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

沒有裝SSL憑證的訊息
沒有裝SSL憑證的訊息

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

Check DNS configuration
Check DNS configuration

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

設定DNS指向
設定DNS指向

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

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

HTTPS設定中
HTTPS設定中

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

SSL安裝完成訊息
SSL安裝完成訊息

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

新增了一個我們自訂的網址
新增了一個我們自訂的網址

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

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

Summary
Netlify+Gitlab 建一個免費靜態網站
Article Name
Netlify+Gitlab 建一個免費靜態網站
Description
本篇大綱:免費架一個站的工具愈來愈多。開始前需要準備好的。1 註冊Netlify帳號。2 連接Gitlab專案。3 修改子網域名稱。4 自訂域名。本篇要筆記的是免費架站工具:Netlify。它可以直接抓Github、Gitlab裡的專案,想更新時只要push專案就行,而且還可以自訂網域。
Augustus
Let's Write
Let's Write
Publisher Logo

留言

avatar
  訂閱  
通知