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

时间：2023-07-23 00:03:01 | 来源：网站运营

时间：2023-07-23 00:03:01 来源：网站运营

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博客