前言

之前在 《手把手打造你的專屬部落格之二 — Hugo 網站上雲伺服器 CloudFlare Pages》 講解如何把 Hugo 網站上雲,但是除了 CloudFlare 外,Netlify 也是另一個不錯的雲伺服器的選擇。

1. Netlify vs CloudFlare

這邊做了簡單的比較,都是每個月

FeatureNetlifyCloudflare
Number of function invocations125,000 per month per site100,000 per day for all your sites
Builds300 build minutes per month500 builds per month
Concurrent builds11
Number of websites500unlimited
Bandwidth amount100GB for all sitesunlimited
CLIavailableavailable

雖說看起來 Netlify 什麼都有限制,但基本不會踩到上限。

假設你的網站首頁大小為 1MB,每個訪客訪問一次會消耗 1MB WidthBand,那麼 100GB WidthBand 大約可以支撐 100,000 次訪問。一個月 100 GM 能被你用完,就真的是寫作大神或是攝影大師,放不完的影片圖片,當有訪客來你這裡看圖影的時候,你比較有機會踩到上線。

總地來說,如果你有放圖影的考量,CloudFlare 會比 Netlify 適合。

另外 Netlify Build 300 次要踩到上限,可能也要全職在寫文章才有機會。假設你的網站每次 build 需要 5 分鐘,(300 分鐘) / (5 分鐘/次) = 60 次,代表你每個月可以 build 60 次。

但像我這個小到不能再小的網站,build 一次大概就 30 秒,兩次大概 1 分鐘,所以你一個月可以 build 600 次 XD

Netlify 的建置上限在此,這是我本月用量。

netlify-build-limit.png

但我後來還是選了 CloudFlare (誤

這邊還是帶一下,如何放網站到 Netlify

2. 把網站放在 Netlify

  1. 首頁註冊登入,我是用 GitHub 的第三方登入,這樣 connect GitHub 可以少一次 Verify

  2. 加入你的網站到 Netlify Sites > import from Git

    netlify-import-from-git.png

  3. 這邊就是回到《手把手打造你的專屬部落格之二 — Hugo 網站上雲伺服器 CloudFlare Pages》1. 建立 GitHub Repository 按照步驟,把你的網站推上 GitHub Repo

  4. Connect to Git provider

    netlify-connect-to-git.png

  5. Select repository

    netlify-select-repository.png

  6. Configure site and deploy

    1. 在 Site name 設定一個你喜歡的名字,之後你的網站就會是 https://<你喜歡的名字>.netlify.app

    2. 設定環境變數:

      PaperMod 需要設定 HUGO_VERSION = v0.140.1 不然會 build 失敗

    netlify-deploy-setting.png

  7. Deploy 完成後點擊 Open production deploy

    netlify-open-production-deploy.png

    你的網頁就出現啦~又快又簡單!https://cyansky.netlify.app/

    netlify-deploy-success-2.png

3. Netlify 買網域

  1. Domain management > Add a domain

    netlify-add-a-domain.png

  2. 輸入 domain

    a. 如果 domain 已經使用,他會問是不是你擁有的,如果是你在其他網站買的網域,繼續點 Add a domain

    netlify-add-a-domain-2.png

    b. 如果沒有人使用,他會叫你 Add payment method 然後註冊網域

    netlify-add-a-domain-payment.png

  3. 接著就等待 Awaiting External DNS 變成綠燈就好囉!需要一點時間

    netlify-add-a-domain-4.png

    我這邊就不等他變綠燈惹,因為我已經辛苦地轉倒到 CloudFlare 上惹 XD

比較後的心得

個人覺得 Netlify 的介面跟樣式看起來比較可愛,而且只要你輸入 Site name,他就可以免費給你的網站固定 URL

Netlify Site name 設定.png

CloudFlare 就沒有,如果你沒有買網域,你每次 build 出來的網站 URL 前綴都會有一段亂碼,像是這樣

CloudFlare random site name.png

小心得就到這裡,恭喜你也學會 Netlify 部署網站囉! 🎉

Reference

  1. Netlify vs. Cloudflare Pages