三种方法助力搭建notion个人网站

Water Notes 2021-07-24 09:09:17

声明:

  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

Water Notes
作者Water Notes
10日记 7相册

全部回应 2 条

添加回应

Water Notes的热门日记

豆瓣
免费下载 iOS / Android 版客户端