声明：

1. 我只是做信息的汇总 以下的方法我都试过 大家感兴趣可以跳转url自己捣鼓
2. 为了表达对网友心血的尊重 非原创的内容我都导去原网站了

其实notion自带分享链接功能，如果要求没有那么高的话直接分享那个notion链接给别人即可

而如果想要做地正式一些的话，可以参考以下三种方法

共同的优点：

1. 傻瓜式网页设计（即用notion来设计网页）
2. 不需要购买服务器
3. 不需要写代码
4. 搭建过程还算简单，只要按照指示一步步做就行，不需要编程基础，也不需要在本地装什么软件
5. 花费低（只需要买域名，或者不买域名也可）

Fruition + cloudflare

需要准备的东西：一个有公开访问权限的notion页面（即点选share on the Web)，一个域名（需购买），一个cloudflare账号

详细的操作参见 fruition官网(英文)

有博主把以上的操作进行了中文翻译，参见tangly1024做的中文指导

需要注意的是最近notion版本更新，pageID的逻辑有变化。现在在以上操作的基础上，得额外插入一段新的代码到work的script中，参见这个github讨论

优点：还是基于notion来建站，UI和原notion网页一致

缺点：加载会比后两种方法略微慢一些，但是可以接受。用户评论得有notion账号。

因为我自己只是建一个很简单的CV站，也不需要频繁更新，也不需要用户评论，于是就选择这个方法了。唯一不方便的是，我以后可能会传文件（zip, ppt etc）到网页上，但是notion只支持word类型的文档。只能加外链了（不过这是用notion都有的不足）。

Vercel

需要准备的东西：一个有公开访问权限的notion页面（即点选share on the Web)，一个github账号，一个vercel账号，域名不是必须的（当然如果你想url好看还是得买个）

基于Next.js有2个模板可以使用,一个是Nextjs-notion-starter-kit，一个是Nobelium

这两个的安装方法都一致，但是网页设计有略微的区别

两个的详细差异参见《用Vercel+Notion 搭建独立站点》

我自己的直观感受的话，

• 这两个网页设计对notion的原UI都进行了略微的修改，所以和Fruition比，需要去确认最终呈现是否是自己想要呈现的那种（比如表首行不显示，颜色不一样，导航到其他页面的链接被隐藏）
• Nextjs-notion-starter-kit的适用面更广一些，任何notion页面都能使用，Nobelium只适合博客型网站（如图），没有博客页面的notion网站会报错无法安装（比如我想搭的个人CV网站，即使添加假的博客安装成功了，这个架构下也只显示一条条博客）。
• 依据Vercel+Nextjs搭建的网站自由度更高一些，包括可以同时有黑白两种模式，加table of contents，个人SNS账号等

https://www.tangly1024.com/ ，基于Nobelium搭的网站，感谢这位网友，源代码参见https://github.com/tlyong1992/nobelium

安装方法参见

Nobelium：《用 Vercel+Notion 搭建无服务器博客独立站》[Nobelium]

nextjs-notion-starter-kit：《用 Notion + Next.js + Vercel制作个人网站》[nextjs-notion-starter-kit}

额外要做的事情：search engine indexing

如果你想要让自己网站出名，得做search engine indexing

需要注意的是Notion页面share on the web时，下面有个选项是search engine indexing。如果你是免费的个人版notion，这个选项永远是off的。需要做的是①升级成pro，或者②用校园邮箱注册新的notion（现今notion给校园账户永久的个人pro权限）。

关于如果我拿search engine indexing off的notion页面，做上面fruition/vercel+改domain的操作能否“改命”的问题，我咨询过notion团队，但是他们没给明确的答复。所以我也未知会怎样。

此外，对于indexing的操作。

经测试，百度搜索不可以。因为它需要插css or 文本在网页中。

谷歌搜索可以，具体操作参考（此条是基于cloudflare的）verify a domain using Cloudflare in Google Search Console