Notion 網域自訂完整教學,把連結改成你的個人網址

分享如何為 Notion Page 綁定自己的網域,自訂連結。

想將 Notion 變成自己的部落格網站嗎?想把 Notion 頁面的預設連結換成自己的網域?本篇文教你自訂 Notion 網域,附有完整的圖文教學與程式碼,只要照著步驟設定即可把 notoin.site 改成你的網址!


Notion 網域自訂步驟 ✅

先簡單說一下大致的 Notion 網域修改流程:

  1. 先買自己的網址 Domain
  2. 註冊 Cloudflare 並設定 DNS
  3. 設定 Cloudflare Worker 轉址程式,就完成了

整體過程不複雜,就需要多一點時間,不過筆者在下文都寫好所有綁定網域的教學了,只需一步一步照做就能輕鬆完成!

相關文章:4 個解決 Mac 藍牙延遲狀況的解法

自訂結果預覽

下圖是綁定網域後的成果,左邊是瀏覽器,網址是我自己的 teachers-bar.com 網域,右邊是 Notion 原始內容,之後別人打 teachers-bar.com 就能到我的 Notion Page,不用打落落長的連結:

如果你想用 Notion 當部落格、個人網站,或是要分享做好的模板,依照此文章的教學你也能做到同樣效果喔!趕快繼續往下閱讀操作👇


Notion 修改網域教學

此段落會仔細講解 Notion 綁定個人網域的流程,請依照順序仔細操作:

第一步:註冊個人網域 🔗

如果你還沒有個人專屬網域的話,必須先去註冊一個,網域就是我們常說的網站網址,像是我的網域是 jcshawn.com。網路有很多網域註冊商,個人推薦你用 Google Domain 或 Namecheap 註冊,價格便宜且服務穩定。

有網域的讀者可以直接跳到第二步驟

註冊一個網域並不貴,以 Google Domain 來說一年只要 360 塊新台幣左右,Namecheap 會更便宜。 你可以將喜歡的名稱設為個人網域,並按照註冊商的付費流程訂閱就好。

註冊完後,先找一下網域後台的 DNS 設定頁面,等等會用到:

Google Domain DNS 設定範例截圖,在選單左側,找不到的可以爬文或問註冊商客服

第二步:註冊 Cloudflare & 設定 DNS 🛠️

再來要到 Cloudflare 註冊帳號,透過 Cloudflare 可以將你的網域串接到 Notion 頁面中。網路有許多註冊教學了,這裡就不贅述,尚未註冊的讀者可以參考這篇註冊並設定 DNS 轉移,只需參考前文的註冊流程就好:

Cloudflare 帳號註冊連結

我用 Google Domain 做示範。在 Cloudflare 主頁點選「新增網站」:

輸入註冊好的個人網域:

選取最下方的 Cloudflare 免費方案:

Cloudflare 會自動掃描並匯入原有的設定,這裡按照我圖片的設定填寫就好:

  1. 先新增一個 A 記錄,名稱填你的網域( 不要加 www )IPv4 寫 216.58.200.46
  2. 再增加一個 CNAME 記錄,名稱寫 www,目標設為你的網域
  3. 好了記得按儲存
Notion 自訂網域 DNS 設定

接著 Cloudflare 會給你兩個名稱伺服器網址,回到註冊網域的後台 > DNS,改為自訂名稱伺服器,填入剛剛被分配的網址並按儲存:

再來到 Cloudflare 的網站主頁,下面會有個檢查名稱伺服器的選項,點擊之後等一個小時左右即可( 通常更快 ),成功後你會收到 Cloudflare 的電子郵件通知。如果過了一天都沒有成功,確認有沒有做下方的事項:

  • 要先在 Cloudflare 設定 A 記錄
  • 如果原本的域名註冊商有提供 DNSSEC 服務,先取消發布再重新檢查一次 Cloudflare 看看

在 Cloudflare 後台 > SSL / TLS 選單中,將加密模式設為「彈性」:

請把加密模式設定為彈性

第三步:設定 Cloudflare 路由規則 ( Worker )

再來就是重頭戲部分了!我們要設定讓 Cloudflare 把網域連到 Notion Page,並同時把 notion.site 網址改成自己註冊的網域。

請先複製下面這段程式碼到你的記事本或文字編輯器,並依照中文說明修改:

補充,你的 Notion page 要記得設為公開權限,而 Page ID 就是 xxxx.notion.site/ 後面的英數字串:

記得打開 Page 的 share to web 權限

這段程式碼複製到備忘錄後還需要修改!

  1. 在第十九行引號內填寫你的網域
  2. 如果你想有特定幾頁 Notion Page 想拿掉 url 後面的英數亂碼,在第二十九行開始依照格式設定後綴名稱與 Page ID

    ( 但不用每一頁分頁都要加,填寫特別重要的幾頁就好 )
  3. 在 37, 38 行填寫 SEO 標題,這個標題會成為瀏覽器標籤與社群連結中顯示的名字

回到 Cloudflare 主頁,選擇 Worker 選單 > 管理 Workers :

點選「 建立 Worker 」按鈕:

接著會出現一個程式碼編輯器,把旁邊的程式碼全部刪掉,再將你改好的 code 貼到左側,並點擊「部署」:

點擊儲存與部署

部署完後,可以先按編輯器的「傳送」按鈕測試,理論上旁邊要出現 301 轉址訊息,而目標網址有包含你的網域,有錯誤的請重新檢查程式碼:

回去 Cloudflare 的路由選單,點選「新增路由」:

新增兩個路由,路由欄位分別填入:

  • 你的網域/* ( 後面加斜槓跟星號 )
  • *.你的網域/* ( 前面多加一個星號跟半形句點 )

設定完的路由應該要像這樣:

Cloudflare 路由設定結果,要有兩個

到這裡就完成嘍!!在瀏覽器輸入你的自訂網域,就會顯示 Notion Page 頁面,連結也變成自訂網址了!


網址自訂技術總結 👍

最多只要 20 分鐘,就能把你的個人 Notion 頁面轉型成網站或部落格,可以說是用 Notion 的編輯方式製作網站!或是你有做 Notion 模板想更快分享給別人,也可以用本文方法綁定更好記憶的網址。

你也想自訂 Notion 個人網域嗎?事不宜遲,快照的這篇文章的教學操作吧!未來再分享怎麼把 Notion 網頁提交給 Google,讓別人搜尋到你的文章。

想把 Notion 用得更有效率?

如果你入門 Notion,或是想把 Notion 當作自己的主力數位工具,推薦你看雷蒙三十和 Mr.K 的 Notion 實戰課程:打造專屬數位工作術 線上課程,可以學到更多專業的 Notion 應用模式,不再只是套用模板,而是創造專述你的工作系統。

此課程是我認識的前輩們開設的 Hahow 課程,個人上課過也真心推薦,而非業配~~請安心服用
前往 Hahow 課程

延伸閱讀

我參考的資料

嗨囉我是 Shawn,首先感謝你看完全部內容!我是位高中生,也是科技編輯跟業餘 Programmer,希望教大家如何運用科技提高生產力,並紀錄著自己樸實無華的平凡人生。

如果對於文中內容有任何問題,或是商業合作洽詢,可在下方管道與我聯繫:
e-mail: contact@jcshawn.com
Telegram: jschang666
8 則留言
  1. 您好! 請問是否可以使用 Subdomain 而不是 整個 Domain?
    比如 blog.mydomain.com, 而不是 http://www.mydomain.com?
    另外, 請問 216.58.200.46 是 Notion 的固定 IP 是嗎?
    您推薦的雷蒙的課程我也是最近購課, 所以算是同學了, 再麻煩了, 感謝您!

    1. Hi,是可以用子網域的,只需把新增的 DNS 的 A 記錄換成 CNAME,並指向任意的連結( 像 google.com ),再將轉址程式碼和 Cloudflare Worker 的路由設定改成子網域即可。

      216.58…. 這組 IP 是我隨機抓到的 Google 伺服器 IP,不是 Notion 的 IP。用途是作 DNS A 記錄的轉址目標,Cloudflare Worker 會優先把請求轉到 Notion Page,並改寫網址,不會真的導到這組 IP,所以這組 IP 填其他的也沒差。

      1. 請問一下,我不太懂dns原理,但

        216.58…. 這組 IP,您的意思是隨便填都可以嗎?127.0.0.1也可以?

        1. DNS 原理是將我們平常打的網址( 像 google.com )轉換成主機 IP ( 34.88.xxx.xxx )方便瀏覽器去和網站主機連線。

          IP 部分,對的,只要 Worker 有設定正確,Cloudflare 會自動在前往 127.0.0.1 前先轉址到 Notion 頁面,只不過通常 127.0.0.1 是 localhost 就是了。

    1. 說實話會簡單很多 XD 這類型的網站服務會省去很多流程,也會有更高的自訂性,用 Cloudflare Worker 轉的唯一好處是免費而已。
      不過我會推薦 https://super.so 來做 Notion 架站,價格比 simple.ink 便宜之外,還能自訂 CSS、套用別人的設計模板,SEO 也不錯,我以前就是用 super.so 架設小網站的。

  2. Shawn您好

    我打算使用Notion來架網站,對於不會寫code的人,請問您有什麼心得與建議或好用的工具可以分享的嗎?

    另外請問您這個網站是使用Notion架的嗎?

    謝謝您的熱心分享與指導

    1. 1. 如果不會寫code、想用 Notion 建立網站,我會推薦用 super.so 架,可以省去很多技術設定,也能套國外網友設計好的模板,如果想進一步分析網站數據( 瀏覽數、在 Google 的點擊數 )可以研究 Google Search Console / Google Analytics 兩個服務,不過如果有意深入發展個人網站的話,我其實會建議用 WordPress 或在 Medium, Vocus 寫作。
      2. 個人網站是使用 WordPress.org 自己架設的,但我有一個用 Notion 建立的網站( 教師吧

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

前一篇文章
學生筆電推薦,適用高中生與大學生

學生買 MacBook 筆電還是 iPad 平板?學生電腦選購建議 2022

下一篇文章
Medium SEO 教學分享封面圖

Medium SEO 完整教學,10 招讓文章搜尋排名更前面