Notion頁面+自定義域名低成本制作個人網(wǎng)站

時間：2023-07-23 00:03:01 | 來源：網(wǎng)站運營

時間：2023-07-23 00:03:01 來源：網(wǎng)站運營

Notion頁面+自定義域名低成本制作個人網(wǎng)站：

前言（嘮叨）

最近翻了翻GitHub、gitee賬號，發(fā)現(xiàn)居然可以訪問到我的http://github.io，是兩年前用Gridea制作的博客網(wǎng)站，但可惜沒有耐心經(jīng)營下去，因此下定決心要正式搞一個用于記錄的又滿足自己小眾的分享欲的個人網(wǎng)站。說到記錄就想到Notion，印象中有刷到過Notion可以綁定域名然后制作個人網(wǎng)站的文章，在網(wǎng)上看了視頻和資料幾番波折最后成功創(chuàng)建網(wǎng)站——kamiyd.com（很慶幸自己想要的域名沒有被注冊）。

另一個原因選擇Notion就是它的頁面（編輯器）自定義程度高，自由布局和設(shè)計；分享出來的頁面沒有過多的去強調(diào)頁面（產(chǎn)出）歸屬，沒有懸浮標(biāo)識、底部欄標(biāo)注......就完全只有自己編輯創(chuàng)作的內(nèi)容。在選定的Notion頁面上修改內(nèi)容也會同步到自己域名的網(wǎng)站，所以目前我的網(wǎng)站還只是一個臨時頁面，以后會慢慢完善。

其實整體操作起來也不麻煩，非常適合我們零基礎(chǔ)去做一個網(wǎng)站，現(xiàn)在就要教會你，我不允許你還不會。雖然本站上也有很多同類教程文章，不過隨著軟件快速更迭、服務(wù)商改動功能，有的教程已不再適用一些情況，又或者還不夠全面（小聲bb：我自己就是看了部分視頻和文章被誤導(dǎo)產(chǎn)生了一些不愉快的問題）。我也是秉承著一貫僅作個人學(xué)習(xí)記錄、經(jīng)驗分享的作風(fēng)，參考資料、總結(jié)自身經(jīng)驗寫下這篇文章，用自己的方式較為簡易、全面詳細(xì)地分享如何使用Notion制作個人網(wǎng)站。全文分為域名注冊、Notion頁面設(shè)置、轉(zhuǎn)移到Cloudflare和部署【前三部分主要內(nèi)容】、結(jié)語、參考資料，文章篇幅較長可以在目錄進(jìn)行跳轉(zhuǎn)。同時寫這篇文章也作為自己“Notion生產(chǎn)力”專欄的一次更新。

域名注冊

國內(nèi)我推薦阿里云和騰訊云，兩者都差不多，不褒貶任何一方，大家根據(jù)喜好自行選擇。

小插曲：我嘗試瀏覽兩者網(wǎng)站對比價格和功能，但碰巧那天晚上一直打不開阿里云網(wǎng)頁，手機(jī)電腦都不行（沒那么無聊去編故事，有歷史截圖，我甚至還百度了一下），所以我只重點看了騰訊云。隔天早上阿里云能正常打開了，但經(jīng)此一番消磨了我的安全感，而且價格上比較騰訊云還是便宜了一點點點，所以我最終選擇在騰訊云購買域名。

域名購買

以騰訊云為例：首先肯定要先注冊一個騰訊云賬號，這個環(huán)節(jié)跳過。打開騰訊云域名注冊網(wǎng)站，新用戶的話購買第一個域名18元/首年，續(xù)費是75元/年，記得找到域名專場特惠。

• 輸入你想要的域名查詢，幸運的話能找到符合的；
• 選擇你想要的后綴，如果不幸域名被占用了，也可以嘗試改變后綴，不同后綴價格也不同，根據(jù)自身喜好和預(yù)算選擇吧，不過我們一般還是使用.com

購買成功后可以進(jìn)入域名控制臺界面，自己進(jìn)行操作、續(xù)費、管理。

還送了一年的Dnspod解析（用不上）、一份頂級國際域名認(rèn)證證書，滿足你的榮譽感、成就感——恭喜你擁有了世界上獨一無二的專屬域名。

注意事項：

根據(jù)國家政策法規(guī)，購買前要進(jìn)行實名認(rèn)證、填寫信息模板，真實填寫個人情況，可以勾選“使用賬號信息填寫”方便一點，審核完成后才能進(jìn)行購買。審核的話官方是說一般1-3天，我是5-10分鐘就有收到短信通知結(jié)果，看情況吧。

Notion頁面設(shè)置

• 選擇你要分享出去的頁面，打開“Share to web”，頁面的一些設(shè)置根據(jù)需要調(diào)整（以后你隨時可以修改），我這里是全部關(guān)閉了。
• 然后“Copy link”復(fù)制鏈接出來備用。

轉(zhuǎn)移到Cloudflare和部署

看到這里我們前期的準(zhǔn)備工作已經(jīng)完成了，一個域名+一個Notion頁面，接下來就是如何轉(zhuǎn)移到Cloudflare和部署了，過程涉及到幾個網(wǎng)頁的跳轉(zhuǎn)操作，比較復(fù)雜，我將它分為幾個小節(jié)點一步步來。

Cloudflare注冊和郵箱驗證

進(jìn)入Cloudflare官網(wǎng)，輸入郵箱密碼進(jìn)行注冊。

我們可以點擊右上角選擇語言為“簡體中文”

注冊成功我們會收到一封驗證郵件，點擊這個鏈接去驗證賬號。（如果沒收到可以去垃圾郵件里找一找，有的郵箱可能會把它識別為垃圾郵件）

添加站點、添加DNS解析記錄

• 點擊“添加站點”
• 輸入自己的域名，點擊“添加站點”

• 然后跳轉(zhuǎn)到這個界面，選擇“Free”，點擊“繼續(xù)”

---

• 然后跳轉(zhuǎn)到這個界面，點擊“添加記錄”

• 類別選擇“CNAME”，IPv4地址固定填寫“notion.so”

• 名稱參考以下規(guī)則，自己按需填寫

輸入@，可以理解為空白，就是原始域名，我的就是kamiyd.com
輸入其他，可以理解為前綴，相當(dāng)于子域名，***.http://kamiyd.com

（我自己的域名一開始就被誤導(dǎo)寫了www以致于每次訪問一定要加上https://www.前綴，所以你只想要簡簡單單最原始的域名訪問地址就直接填@）

• 點擊“保存”，這里就有一條記錄了，點擊“繼續(xù)”

騰訊云域名DNS轉(zhuǎn)移

• 出現(xiàn)這個界面，我們只看“3.添加Cloudflare名稱服務(wù)器”

• 回到騰訊云域名控制臺，點擊“管理”

• 點擊“修改DNS服務(wù)器”

• 因為這是一次敏感操作需要身份驗證一下，小程序掃碼確認(rèn)操作

• 選擇“自定義DNS”
• 在Cloudflare復(fù)制粘貼替換原來的DNS服務(wù)器，分別對應(yīng)一、二行

配置Workers

【這里由于賬號不能重新創(chuàng)建一次Workers的操作，所以模擬還原演練操作，部分操作截圖指引和你們不同，大家重點理解意會文字描述】

• 回到Cloudflare，點擊添加好的網(wǎng)站

• 點擊左側(cè)導(dǎo)航欄的“Workers”，點擊“管理Workers”

• “設(shè)置免費的自定義Cloudflare Workers子域”，（這里操作沒有截圖）子域名可以隨便寫（簡單幾個字母）不影響接下來操作，到時候也可以修改。

---

• 完成后出現(xiàn)這個界面，繼續(xù)選擇“Free”計劃

點擊“創(chuàng)建服務(wù)”

• 服務(wù)名稱可以跟我一樣取notion方便后面操作的時候選擇服務(wù)能認(rèn)出來，完成點擊“創(chuàng)建服務(wù)”

使用網(wǎng)站生成Workers代碼

• 打開這個網(wǎng)站https://fruition-stephenou.vercel.ap（國外網(wǎng)站，需要科學(xué)上網(wǎng),沒有能力的同學(xué)也可以去我參考資料的第三篇文章里面找代碼自己簡單修改）

第一行：自己的域名（如果一開始添加DNS記錄你有加前綴就要加上，沒有就默認(rèn)原始域名）
第二行：Notion分享頁面鏈接

• 下面已經(jīng)生成代碼，點擊“COPIED!”（復(fù)制）

Workers編輯代碼

• 回到Cloudflare，點擊“Workers”，點擊“快速編輯”

左側(cè)代碼區(qū)塊，Ctrl+A全選刪除，剛才復(fù)制好的代碼Ctrl+V粘貼，然后點擊“保存并部署”

添加路由，完成部署！

• 點擊添加好的網(wǎng)站

• 點擊“Workers路由”，點擊“添加路由”

• [前綴].域名.com/*（斜杠/ 星號*必須要寫）
• 服務(wù)選創(chuàng)建的Workers服務(wù)名稱（我上面提到的“notion”）
• 環(huán)境選production

恭喜你完成了所有操作，趕緊試試看使用自己的域名訪問到Notion的公開頁面吧。

結(jié)語

騰訊云+Notion+Cloudflare三者的簡單協(xié)調(diào)統(tǒng)一，低成本制作個人網(wǎng)站，自由簡約的Notion軟件、較合理的域名價格、免費的Cloudflare使用計劃，低投入（消費）成本；不需要自己編程寫代碼、設(shè)計界面，低學(xué)習(xí)（時間）成本，一個下午就可以搞定。

---

這篇文章寫得我好累呀， 因為我在搞個人網(wǎng)站的時候也一直碰壁，在朋友配合測試下發(fā)現(xiàn)問題解決問題， 幾次下來覺得挺有意義。本來是想通過文章記錄一下整個過程的不容易， 沒想到寫這篇教程類的文章的過程更痛苦， 雖然整體操作看起來挺簡單，但你要演示、解釋原理就還挺復(fù)雜。本著的是教程性質(zhì)的文章嘛，就想要更加簡易明了、全面統(tǒng)一。寫了兩天，停下來的時候就會反思，改了好幾次方案，一開始想著要不要用gif圖來演示、但馬上就被我淘汰；既然這樣，我為什么不直接錄成視頻講解呢？ 又想著制作長圖把操作統(tǒng)一起來， 但太多操作堆在一起又太復(fù)雜不容易理解，在經(jīng)過思想斗爭后還是決定以這種圖文并茂的方式，每一張截圖都經(jīng)過PS制圖清晰直接地演示操作，合理利用好邏輯關(guān)系多圖、單圖相結(jié)合，一圖一節(jié)點的一步一步來。 文章也是在參考其他大佬文章基礎(chǔ)上進(jìn)行增添、完善的，在文末附上參考資料鏈接，尊重原創(chuàng)，感謝知識分享。當(dāng)然文章也有我未考慮到的方面和未遇到的問題，歡迎大家分享問題一起討論。

參考資料：

更好的劉老六：Notion 免費擁有個人網(wǎng)站 「完美復(fù)刻頁面」

【Notion教程】5步搭建個人網(wǎng)站，互聯(lián)網(wǎng)人必備！ | Devin同學(xué)_嗶哩嗶哩_bilibili

使用Cloudflare為Notion公開頁面自定義域名

Fruition: Free, Open Source Toolkit for Building Websites with Notion

域名不要www如何解析_憤怒的蘋果ext的博客-CSDN博客_域名解析 去掉www

騰訊云域名加CloudFlare以及如何訪問時不加www的配置方法_MilkBerg的博客-CSDN博客