使用免费工具Notion和Cloudflare,轻松搭建个人blog博客

搭建个人blog博客流程

域名购买

建议购买国外的域名,因为相对不需要认证,会方便快捷很多。

Notion页面设置

  • 选择你要分享出去的页面,打开**“Share to web”**,页面的一些设置根据需要调整(以后你随时可以修改),我这里是全部关闭了。
  • 然后**“Copy link”**复制链接出来备用。

转移到Cloudflare和部署

看到这里我们前期的准备工作已经完成了,一个域名+一个Notion页面,接下来就是如何转移到Cloudflare和部署了,过程涉及到几个网页的跳转操作,比较复杂,我将它分为几个小节点一步步来。

Cloudflare注册和邮箱验证

进入**Cloudflare官网**,输入邮箱密码进行注册。

**Just a moment...**dash.cloudflare.com/login

我们可以点击右上角选择语言为“简体中文”

!https://pic2.zhimg.com/80/v2-a9b156a66fcec09beeb7a66e66e2a2d9_720w.webp

Cloudflare官网

注册成功我们会收到一封验证邮件,点击这个链接去验证账号。(如果没收到可以去垃圾邮件里找一找,有的邮箱可能会把它识别为垃圾邮件)

!https://pic3.zhimg.com/80/v2-9bdcd115ff97ad7be2449ec785972ef6_720w.webp

邮箱验证

添加站点、添加DNS解析记录

  • 点击**“添加站点”**
  • 输入自己的域名,点击**“添加站点”**

!https://pic1.zhimg.com/80/v2-c5cee156a909102e14098bf7036890f4_720w.webp

  • 然后跳转到这个界面,选择**“Free”,点击“继续”**

!https://pic3.zhimg.com/80/v2-571eb89dfc74ca93bb18fef3dfa5eb4a_720w.webp


  • 然后跳转到这个界面,点击**“添加记录”**

!https://pic3.zhimg.com/80/v2-aeb374659ee845f90645926c595862f2_720w.webp

  • 类别选择**“CNAME”,IPv4地址固定填写notion.so”**

!https://pic3.zhimg.com/80/v2-1a87a85ce2d2ab7e8548df1ea7c90d62_720w.webp

  • 名称参考以下规则,自己按需填写

输入

@

http://kamiyd.com

(我自己的域名一开始就被误导写了www以致于每次访问一定要加上**https://www.**前缀,所以你只想要简简单单最原始的域名访问地址就直接填@)

!https://pic2.zhimg.com/80/v2-29580a12808f0ca26713f931c13a1ae9_720w.webp

CSDN查询记录

  • 点击**“保存”,这里就有一条记录了,点击“继续”**

!https://pic4.zhimg.com/80/v2-02a54264f387c4339e075297d0bad0f3_720w.webp

腾讯云域名DNS转移

  • 出现这个界面,我们只看**“3.添加Cloudflare名称服务器”**

!https://pic4.zhimg.com/80/v2-529118f88a4eb4033b846c86b1b56833_720w.webp

  • 回到腾讯云域名控制台,点击**“管理”**

!https://pic4.zhimg.com/80/v2-8218acd62829e913970465b852ac3d53_720w.webp

  • 点击**“修改DNS服务器”**

!https://pic1.zhimg.com/80/v2-8b8f4415b245aeb5826ba8ed92b3c1bc_720w.webp

  • 因为这是一次敏感操作需要身份验证一下,小程序扫码确认操作

!https://pic3.zhimg.com/80/v2-b950bb48f85118182b5d305c8d4a037e_720w.webp

  • 选择**“自定义DNS”**
  • 在Cloudflare复制粘贴替换原来的DNS服务器,分别对应一、二行

!https://pic3.zhimg.com/80/v2-da991617fcff4e9eac0f5eb9fa4db5c2_720w.webp

配置Workers

【这里由于账号不能重新创建一次Workers的操作,所以模拟还原演练操作,部分操作截图指引和你们不同,大家重点理解意会文字描述】

  • 回到Cloudflare,点击添加好的网站

!https://pic1.zhimg.com/80/v2-712f7d531762acf345e69175a760297c_720w.webp

  • 点击左侧导航栏的**“Workers”,点击“管理Workers”**

!https://pic4.zhimg.com/80/v2-496b08b3611fa8dbc6a39d43854ea337_720w.webp

还原操作演练,可能你们的界面不同

  • “设置免费的自定义Cloudflare Workers子域”,(这里操作没有截图)子域名可以随便写(简单几个字母)不影响接下来操作,到时候也可以修改。

  • 完成后出现这个界面,继续选择**“Free”**计划

!https://pic1.zhimg.com/80/v2-08f678c116e58a534c6356a140dc85c8_720w.webp

还原操作演练,可能你们的界面不同

点击**“创建服务”**

!https://pic1.zhimg.com/80/v2-36de96eda81ed5b062589a984a83bc78_720w.webp

还原操作演练,可能你们的界面不同

  • 服务名称可以跟我一样取notion方便后面操作的时候选择服务能认出来,完成点击**“创建服务”**

!https://pic1.zhimg.com/80/v2-c435eed7be376a60f8f6fdc521f923c4_720w.webp

使用网站生成Workers代码

  • 打开这个网站**https://fruition-stephenou.vercel.ap国外网站,需要科学上网**,没有能力的同学也可以去我参考资料的第三篇文章里面找代码自己简单修改***)***

第一行:自己的域名(如果一开始

添加DNS记录

前缀

  • 下面已经生成代码,点击**“COPIED!”**(复制)

!https://pic3.zhimg.com/80/v2-afa0a81f88d21bc47f97f36655c8424a_720w.webp

Workers编辑代码

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

!https://pic2.zhimg.com/80/v2-e1e0d0c7839888227093aca0e922f65d_720w.webp

左侧代码区块,Ctrl+A全选删除,刚才复制好的代码Ctrl+V粘贴,然后点击**“保存并部署”**

!https://pic3.zhimg.com/80/v2-20d71eab8a16bb59bf5e371adceb856e_720w.webp

添加路由,完成部署!

  • 点击添加好的网站

!https://pic1.zhimg.com/80/v2-712f7d531762acf345e69175a760297c_720w.webp

  • 点击**“Workers路由”,点击“添加路由”**

!https://pic4.zhimg.com/80/v2-63547b5cf9154d867d43eaafbf73ab5b_720w.webp

  • [前缀].域名.com/(斜杠*/** 星号****必须要写)
  • 服务选创建的Workers服务名称(我上面提到的“notion”)
  • 环境选production

!https://pic1.zhimg.com/80/v2-57ec6341ee89c3c50b35a45c0af6da30_720w.webp

恭喜你完成了所有操作,赶紧试试看使用自己的域名访问到Notion的公开页面吧。

软件清单:

本内容转载自:Baily‘s Blog博客

发表评论

0 评论