Notion页面+自定义域名低成本制作个人网站

前言（絮聒）

比来翻了翻GitHub、gitee账号，发现居然可以拜候到我的http://github.io，是两年前用Gridea建造的博客 网站，但惋惜没有耐心经营下去，是以下定决心要正式搞一个用于记录的又满足自己小众的分享欲的小我网站。说到记录就想到Notion，印象中有刷到过Notion可以绑定域名然后建造小我网站的文章，在网上看了视频和材料几番挫折最初成功建立网站——kamiyd.com（很光荣自己想要的域名没有被注册）。

另一个缘由挑选Notion就是它的页面（编辑器）自界说水平高，自在结构和设想；分享出来的页面没有过量的去夸大页面（产出）归属，没有悬浮标识、底部栏标注......就完全只要自己编辑创作的内容。在选定的Notion页面上点窜内容也会同步到自己域名的网站，所以今朝我的网站还只是一个姑且页面，今后会渐渐完善。

实在整体操纵起来也不麻烦，很是合适我们零根本去做一个网站，现在就要教会你，我不答应你还不会。虽然知乎上也有很多同类教程文章，不外随着软件快速更迭、办事商修改功用，有的教程已不再适用一些情况，又大概还不够周全（小声bb：我自己就是看了部分视频和文章被误导发生了一些不愉快的题目）。我也是秉持着一向仅作小我进修记录、经历分享的风格，参考材料、总结本身经历写下这篇文章，用自己的方式较为简易、周全具体地分享若何利用Notion建造小我网站。全文分为域名注册、Notion页面设备、转移到Cloudflare和摆设【前三部分首要内容】、结语、参考材料，文章篇幅较长可以在目录停止跳转。同时写这篇文章也作为自己“Notion生产力”专栏的一次更新。

域名注册

国内我保举阿里云和腾讯云，两者都差不多，不褒贬任何一方，大师按照爱好自行挑选。

小插曲：我尝试阅读两者网站对照价格和功用，但碰巧那天早晨一向打不开阿里云网页， 手机电脑都不可（没那末无聊去编故事，有历史截图，我甚至还百度了一下），所以我只重点看了腾讯云。隔天早上阿里云能一般翻开了，但经此一番消磨了我的平安感，而且价格上比力腾讯云还是廉价了一点点点，所以我终极挑选在腾讯云采办域名。

域名采办

以腾讯云为例：首先必定要先注册一个腾讯云账号，这个环节跳过。翻开腾讯云域名注册网站，新 用户的话采办第一个域名18元/首年，续费是75元/年，记得找到域名专场特惠。

• 输入你想要的域名查询，荣幸的话能找到合适的；
• 挑选你想要的后缀，假如不幸域名被占用了，也可以尝试改变后缀，分歧后缀价格也分歧，按照本身爱好和预算挑选吧，不外我们一般还是利用.com

采办成功后可以进入域名控制台界面，自己停止操纵、续费、 治理。

还送了一年的Dnspod剖析（用不上）、一份顶级国际域名认证证书，满足你的声誉感、成就感——恭喜你具有了天下上唯一无二的专属域名。

留意事项：

按照国家政策律例，采办前要停止实名认证、填写信息模板，实在填写小我情况，可以勾选“利用账号信息填写”方便一点，考核完成后才能停止采办。考核的话官方是说一般1-3天，我是5-10分钟就有收到短信告诉成果，看情况吧。

Notion页面设备

• 挑选你要分享进来的页面，翻开“Share to web”，页面的一些设备按照需要调剂（今后你随时可以点窜），我这里是全数封闭了。
• 然后“Copy link”复制链接出来备用。

转移到Cloudflare和摆设

看到这里我们前期的预备工作已经完成了，一个域名+一个Notion页面，接下来就是若何转移到Cloudflare和摆设了，进程触及到几个网页的跳转操纵，比力复杂，我将它分为几个小节点一步步来。

Cloudflare注册和邮箱考证

进入Cloudflare官网，输入邮箱密码停止注册。

我们可以点击右上角挑选说话为“简体中文”

注册成功我们会收到一封考证邮件，点击这个链接去考证账号。（假如没收到可以去渣滓邮件里找一找，有的邮箱能够会把它识别为渣滓邮件）

增加站点、增加DNS剖析记录

• 点击“增加站点”
• 输入自己的域名，点击“增加站点”

• 然后跳转到这个界面，挑选“Free”，点击“继续”

• 然后跳转到这个界面，点击“增加记录”

• 种别挑选“CNAME”，IPv4地址牢固填写“notion.so”

• 称号参考以下法则，自己按需填写

输入@，可以了解为空缺，就是原始域名，我的就是kamiyd.com
输入其他，可以了解为前缀，相当于子域名，***.http://kamiyd.com

（我自己的域名一路头就被误导写了www以致于每次拜候一定要加上https://www.前缀，所以你只想要简简单单最原始的域名拜候地址就间接填@）

• 点击“保存”，这里就有一笔记录了，点击“继续”

腾讯云域名DNS转移

• 出现这个界面，我们只看“3.增加Cloudflare称号办事器”

• 回到腾讯云域名控制台，点击“治理”

• 点击“点窜DNS办事器”

• 由于这是一次敏感操纵需要身份考证一下， 小法式扫码确认操纵

• 挑选“自界说DNS”
• 在Cloudflare复制粘贴替换本来的DNS办事器，别离对应一、二行

设置Workers

【这里由于账号不能重新建立一次Workers的操纵，所以模拟复原演练操纵，部分操纵截图指引和你们分歧，大师重点了解领悟笔墨描写】

• 回到Cloudflare，点击增加好的网站

• 点击左侧导航栏的“Workers”，点击“治理Workers”

• “设备免费的自界说Cloudflare Workers子域”，（这里操纵没有截图）子域名可以随意写（简单几个字母）不影响接下来操纵，到时辰也可以点窜。

• 完成后出现这个界面，继续挑选“Free”计划

点击“建立办事”

• 办事称号可以跟我一样取notion方便前面操纵的时辰挑选办事能认出来，完成点击“建立办事”

利用网站天生Workers代码

• 翻开这个网站https://fruition-stephenou.vercel.ap（国外网站，需要科学上网,没有才能的同学也可以去我参考材料的第三篇文章里面找代码自己简单点窜）

第一行：自己的域名（假如一路头增加DNS记录你有加前缀就要加上，没有就默许原始域名）
第二行：Notion分享页面链接

• 下面已经天生代码，点击“COPIED!”（复制）

Workers编辑代码

• 回到Cloudflare，点击“Workers”，点击“快速编辑”

左侧代码区块，Ctrl+A全选删除，适才复制好的代码Ctrl+V粘贴，然后点击“保存并摆设”

增加路由，完成摆设！

• 点击增加好的网站

• 点击“Workers路由”，点击“增加路由”

• [前缀].域名.com/*（斜杠/ 星号*必必要写）
• 办事选建立的Workers办事称号（我上面提到的“notion”）
• 情况选production

恭喜你完成了一切操纵，赶紧试试看利用自己的域名拜候到Notion的公然页面吧。

结语

腾讯云+Notion+Cloudflare三者的简单调和同一，低本钱建造小我网站，自在繁复的Notion软件、较公道的域名价格、免费的Cloudflare利用计划，低投入（消耗）本钱；不需要自己编程写代码、设想界面，低进修（时候）本钱，一个下午便可以搞定。

这篇文章写得我好累呀， 由于我在搞小我网站的时辰也一向碰鼻，在朋友配合测试下发现题目处理题目， 几次下来感觉挺成心义。原本是想经过文章记录一下全部进程的不轻易， 没想到写这篇教程类的文章的进程更疾苦， 虽然整体操纵看起来挺简单，但你要演示、诠释道理就还挺复杂。本着的是教程性质的文章嘛，就想要加倍简易了然、周全同一。写了两天，停下来的时辰就会深思，改了好几次 计划，一路头想着要不要用gif图来演示、但顿时就被我淘汰；既然这样，我为什么不间接录成视频讲授呢？ 又想着建造长图把操纵同一路来， 但太多操纵堆在一路又太复杂不轻易了解，在经过思惟斗争后还是决议以这类图文并茂的方式，每一张截图都经过PS制图清楚间接地演示操纵，公道操纵好逻辑关系多图、单图相连系，一图一节点的一步一步来。 文章也是在参考其他大佬文章根本上停止增加、完善的，在文末附上参考材料链接，尊重原创，感激 常识分享。固然文章也有我未斟酌到的方面和未碰到的题目，接待大师分享题目一路会商。

参考材料：

更好的刘老六：Notion 免费具有小我网站 「完善复刻页面」

【Notion教程】5步搭建小我网站，互联网人必备！ | Devin同学_哔哩哔哩_bilibili

利用Cloudflare为Notion公然页面自界说域名

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

域名不要www若何剖析_愤慨的苹果ext的博客-CSDN博客_域名剖析 去掉www

腾讯云域名加CloudFlare以及若何拜候时不加www的设置方式_MilkBerg的博客-CSDN博客