方法一：transitive-bullshit方式

✔️实现

1、抓取 GitHub库，部署到自己的仓库（点击左边三角展开）👋

💡

点击 GitHub仓库 进行抓取，右上角的 Fork 添加到自己的仓库，不建议大家改仓库的名字，因为据作者本身的配置某些地方可能是联系着这个长长的名字的，当然我没有试过改。

在自己的仓库内，修改site.config.js，主要修改的是 rootNotionPageId 和 domain，具体可以参考 这篇文章 ，或者直接看 .md 文档 ，这里不是我要说的重点。

1.1、社交媒体账号

⚠️

这里有一点要注意，推特 、等联系方式，直接输入用户名，因为它本身自带网址前半部分，也可以修改成B站之类的。

这里有一些功能是可选的，比如👇的图片模糊处理功能，这个功能可以渲染你的页面图片使得打开的时候有一种毛玻璃的感觉，但是这并不是加载慢；包括上边栏上下滑动的时候会有毛玻璃实时出现。

• 其原理是加载出来图片后提取图片经由另一个程式进行模糊处理，这其实是把牺牲了加载速度

• 本来经由Vercel部署的网页就因为服务器在国外和GFW的原因加载很慢，经由这个功能后就会更慢

1.2、修改图标和右上角GitHub跳转

💡

详情参考此文

2、部署到Vercel（点击左边三角展开）👋

💡

用自己的GitHub账户登陆之后，就会看到一个导入界面，选择配置好的这个库。

在这里可以改名字，虽然我没改，但是最后的域名是基于这个名字生成的，如果改的容易记住也挺好的；这里全部默认，不需要改动，直接 Deploy。

❗️在这里大家最有可能遇到一个问题就是，等了几分钟，最后出现一个红色标识的！，我大部分都卡在了8m或者6m，忘了截图，一直找不到解决办法

2.1、问题及解决

❗

最后尝试新建一个页面导入成功了。

• 推测是因为我 之前的页面 包含的东西太多了，而且有的块的名字还重复了（这是一个重要的点，我检查代码的时候发现重复的标题会导入错误）。

• 如果大家也遇到这个问题，可以新建一个空页面然后打开 Share to Web 。

• 如果大家在命名完页面标题后，发现分享 rootNotionPageId前面和“/”之间有别的字符，可以不用管他，不用输入。

部署完成后就是这个样子了

3、域名绑定（点击左边三角展开）👋

方法一：Vercel域名绑定

 

💡

在 Settings 里选择 Domain 就可以免费更改成自己的域名，如果你还没有自己的域名，可以看我有关于 域名的文章 ，此处假设你已经有了自己的域名。

Vercel是提供了两种绑定域名的方式

• 一种是将自己的域名提供商的DNS解析服务器改成Vercel提供的

🌟这里不推荐这么做，Vercel本身也不推荐；这样会使得解析变慢，原因同上边，而且他也不是一个很好的域名管理平台，也没有汉化。

---

• 另一种是不改变DNS解析服务器，在域名解析服务器上添加记录为CHAME模式的记录

🌟Value是值，指向的是Vercel解析

🌟Name是名称车子，如果想设置二级域名可填二级域名的内容，如果不想输入@就可。

🌟CHAME是一种运行模式，除此之外还有A（IPV4地址）、AAAA（IPV6地址）等

---

• 在CloudFlare上完成记录添加

🌟不同于之前选择的A模式，A模式会直接在GutHub仓库生成一个CHAME文件，CHAME模式个是指向作用。切记把代理状态关掉！！！

4、更新Notion内容（点击左边三角展开）👋

💡

要注意，如果你在Notion中增减内容的话，这个页面是不会随之改变的，必须更新 Vercel 配置才行

在右上角头像处打开 Dashboard（仪表盘） 选择自己的项目进入中国界面，在上侧栏选择 Deployments

在最上侧记录最右边的三个点，选择 Redeploy（重新部署） ，这里记得要打上下面👇的 √，这样会减少部署的难度，是在已有的基础上更新，而不是全推到重来！

🌟就算更新失败了，之前已经成功我网站也会保留下来。

• 如果失败的话，就试试不打✓的完全部署

4.1、Notion中的联系方式

💡

如果想要，通过微文字呼叫邮件或电话号码，地址的超链接来实现，点击就可以跳转到相应APP，可以通过一些HTML的语法来实现。

• 电子邮件： mailto:电子邮件地址

• 电话号码：tel:+86-123-4567-8901

方法二：simple.ink 工具

教你一键把Notion笔记变独立web网页_哔哩哔哩_bilibili

适合各位想要将Notion笔记快速变为一个属于自己拥有二级短域名的站点的童鞋，不需要代码即可完成 生成网站：https://www.simple.ink/ 笔记应用：https://www.notion.so/product 视频bgm：A day to remember（免费版权音乐） 来自 https://www.bensound.com/， 视频最后插图来自开源插图网站：https://undraw.co/

https://b23.tv/Bhl5pDc

❗️这个不是一个很推荐的方法，虽然也有页面美化功能和深色模式，但是不能自定义域名。

方法三：GitHub域名重定向

• 在GitHub新建一个仓库库，名字随意

• 新建一个index.html文件，输入以下代码

• 参考 GitHub其他仓库绑定域名 的办法在CloudFlare上添加域名记录；注意选择 CNAME 模式。

❗️这个方法有不完美的地方，首先它没有网页渲染美化。

🌟这种方法是比较推荐的，时间、精力成本都很低，更改同步也方便，几乎不会出现问题，除了样式之外其他自由度都很高。

• ❗️如果出现定向失败的问题，一般是由于仓库的问题，GitHub只给和username一样的仓库设置托管。

🔆这个时候可以参考上文notion建站在Vercel托管的例子，将这个仓库导入Vercel，因为仓库只是一个跳转，所以很快就会部署完成，后期更新也很方便。

方法四：cloudflare中works脚本框架（推荐）

👉需求：在不会代码的前提下免费搭建一个自定义域名的主页

✔️实现

1. 如果你要更换的域名之前被其他网站所使用，建议先删除一次在配置，不分情况下需要关闭cfdns解析，使用 仅代理模式

方法四 tangly1024的方法（推荐）

• vercel、zeabur和vps可以搭建动态网页、cloudflare-pages只能搭建静态网页

• 操作
1. fork仓库，直接选择部署到上面的平台
2. 把特定的notion模板添加到自己的notion账户
3. 添加环境变量environment variable
1. 内容为NOTION_PAGE_ID+32位notionid（分享页面后的?v=之前的）
2. 部署Deploy

• 页面元素内容在blog.config.js 修改（不需要修改里面的notionid）

· 大部分文件都在blog.config.js 修改 · 对应主题的专属内容在themes里面对应的(xx).config.js 修改 · 更新主题在<>code 右上角 Sync fork 更新

NotionNext-快速免费搭建网站 | TANGLY’s BLOG

无需服务器、即使是小白也能几分钟搭建自己的独立博客站～如果你在使用Notion这款神级笔记本的话，不妨来试试顺手建个网站🤣🤣🤣，这是一款基于NotionAPI的博客系统。

https://tangly1024.com/article/notion-next