Featured image of post 使用 CloudFlare 託管網站

使用 CloudFlare 託管網站

GA4 流量分析設定

  times read

1.購買網域

Godaddy 註冊網址申請網域,.tw 網域第一年目前優惠中。我購買的網域名稱:renokai.tw

2.託管網域,設定 DNS

最終目的:將 renokai.tw 指向到我的 GitHub網址: https://reiohuang.github.io/

Godaddy 網域的 https 要另外付費,因此將 DNS 管理的權限提供給 CloudFlare,將網域託管到 CloudFlare,幫 GitHub Pages 自訂網址再透過 CloudFlare 加上 https。

CDN 選擇 CloudFlare 作為 DNS 的託管服務 (DNS:可以自訂網址,方便指向到對應主機位址。) 什麼是 CDN?| CDN 的工作原理是什麼?

指向的方式有兩種:

  1. 指向 IP 位址
  2. 指向網址(CNAME)

CNAME:將一個網域或子網域轉寄到另一個網域,不提供 IP 位址。

CloudFlare 託管設定

於首頁點選新增網站

輸入在 Godaddy 買的網域 renokai.tw 後,點選新增網站。

選擇免費方案

CloudFlare 會幫你掃描 DNS 記錄後,自動匯入設定。發現有三個設定檔,這三個設定檔是從 Godday DNS 管理紀錄中,CloudFlare 去爬到的,很佛心的幫我們填到這裡來。按繼續下一步。

發現目前的東西在 Godday 上,要由 CloudFlare 託管:

  1. 登入 Godday
  2. 移除 Godday 下列兩個名稱伺服器
  3. 把 CloudFlare 指向由 DNS 託管,複製 CloudFlare 名稱伺服器貼到 Godday

登入 Godaddy 後,點選我的產品→管理 DNS

點選變更

沒有要連到網站上,我要 CloudFlare 託管,所以要自己需入名稱伺服器,點選進階。

貼上 CloudFlare 的兩個設定檔並儲存。

已變更的話,Godaddy 就會無法使用,點選

這頁在重新整理過後即消失

重新整理頁面後顯示名稱伺服器已經不是 Godaddy 託管,是由 CloudFlare 託管。

回到 CloudFlare 點選完成並檢查名稱伺服器看有沒有成功

跳過建議,點選稍後完成。

不是即時,更新速度不是那麼快,可能還在跑,點擊 檢查名稱伺服器,顯示還在更新,請耐心等候。

設定 DNS

點選 CloudFlare 左側欄位的 DNS

MX:指向電子郵件伺服器 A:指向 IP CNAME:指向對方伺服器的網址名稱

以 GitHub 的要求來說,需建立 CNAME 來指向。 假設我要架設一個購物網站,類型:CNAME ,名稱:shop,內容:reiohuang.github.io

目前做到這一步,已經是將 Godaddy 的 DNS 託管到 CloudFlare 並指向到 reiohuang.github.io,但是你的 GitHub Repositories 那麼多,如何知道要連到哪個網站? 接下來就交由 GitHub 後台來處理,這就是 CNAME 指向的優點。

GitHub Pages 設定 Custom domain

點選想要指向的 GitHub Repositories reiohuang / week7-aos-glasses → 點選 Pages 在 Custom domain 輸入shop.renokai.tw (shop 為名稱,renokai.tw 為自己所購買的網域),最後點選 Save。

因為服務不是即時,這段時間 GitHub 也是會問 CloudFlare 指向過來了沒,請耐心等候它同步,過程花 2~4 小時,也是有可能的。

成功後會顯示綠色打勾

部署成功後的網址顯示:http://shop.renokai.tw/

但 GitHub 這個網址是不安全的,http 少了 s

可自行加上 s,CloudFlare 自動幫掛上保護 SSL 的 https,有鎖頭 icon。

http 強制轉成 https

使用 CloudFlare 規則→建立網頁規則

輸入網址 shop.renokai.tw,並選擇一律使用 HTTPS 後儲存並佈署。

加入此規則後,即使 http 沒有加 s,也會自動強制轉成 https

3.Google search console

輸入要提交的網址:www.renokai.tw

複製 TXT 記錄

設定 DNS

雖然網域是在 Godaddy 買的,但已託管給 CloudFlare,到 CloudFlare 做設定。 點選 CloudFlare 左側欄位的 DNS,點選新增記錄。

建立來指向 Blog 網站,類型:TXT ,名稱:@,內容:剛剛複製的 TXT 記錄。 TXT 是一個記錄檔,確認你是不是持有人。

回到 google search console 按下驗證,成功後畫面如下:

提交完成後,大約要等24小時才會有數據。

使用 Google Analytics(GA) 追蹤流量

管理→建立帳戶,輸入帳戶名稱:renokai.tw,點選下一個。

輸入資源名稱後點選下一步

使用者條款勾選接受

點選網站

建立網頁串流

點選安裝操作說明

複製全域網站代碼放入自己的網頁中(layout.ejs)。

參考來源