Skip to content

使用nextjs+notionAPI+tailwindcss实现的简单部署的个人索引网站(A simple personal index website deployed using Nextjs + Notion API)

License

Notifications You must be signed in to change notification settings

nowscott/IndWebIndex

Folders and files

NameName
Last commit message
Last commit date

Latest commit

a12af7e · Nov 28, 2024
Jul 21, 2024
Nov 28, 2024
Jul 21, 2024
Nov 28, 2024
Nov 28, 2024
Jul 22, 2024
Jul 22, 2024
Jul 21, 2024
Jun 29, 2024
May 20, 2024
May 20, 2024
Nov 28, 2024
Nov 28, 2024
Jul 21, 2024
Jul 22, 2024
May 20, 2024
Nov 28, 2024

Repository files navigation

Individual Web Index(网页索引)

GitHub stars GitHub forks license GPL-3.0 commit-count-permonth contributors-count

网站截图

1.如何部署

在2024年5月21日的更新之后,部署这个项目变得更加简单。您只需要复制这个Notion页面作为您自己的数据库,根据需要添加网站数据,然后fork这个仓库。

接下来,进入Vercel部署,添加两个环境变量NOTION_TOKEN和DATABASE_ID。这些分别是从我的集成网站获得的密钥,以及您的Notion数据库的ID,当然也不要忘记给你的数据库连接集成。

这样就完成了部署,可以尽情在notion数据库中添加你自己需要的网页。

2.创建的目的

很久以前,互联网初期有一个叫做黄页的网站,上面索引了许多其他网站。随着时间的推移,它逐渐演变成了搜索引擎。

然而,在搜索引擎中,当涉及到寻找特定网站时,结果往往缺乏准确性。因此,我仍然认为每个人都需要自己的黄页。

这个个人黄页将包含一系列经常使用的网站,以及添加标签和简短描述的功能,方便搜索和浏览。

最终,我决定将这个个人黄页命名为“个人网站索引”。

3.网站迭代

从我有这个想法到现在,这个网站经历了多次迭代,URL也变化了几次。当前并且是最终的网站是nowscott.top

起初,数据文件是直接手动输入的,每次想要更新数据内容,我都必须访问开发者接口,对数据文件进行更改,然后上传到GitHub。这让我感到非常不友好。

因此,在最新版本中,我利用Notion API将数据存储在Notion的数据库中。具体的实现细节将在下一部分解释。

4.如何使用Notion API

(从Notion获取数据的代码未包含在此项目中。)

这个想法起源于Bilibili上一个上传者的视频,下面提供链接:

【S1E3】用Notion当数据库写一个简单的API

在这个视频中,我学习到了如何使用Notion API从Notion获取数据并在网页上显示。如果你有任何问题,可以观看视频了解更多信息。

总而言之,我利用一个叫Netlify的网站部署了一个服务。这个服务每次有人访问我部署的域名时都会运行,它从Notion获取数据并返回给前端。一旦前端接收到数据,就可以在网页上显示。

听起来很棒,对吧?然而,这个简单的过程最多需要7到8秒的时间,这与快速加载个人网站的愿景不符。因此,我在这方面做了进一步的改进。

5.一些优化

我无法改变Notion API的访问速度,但我可以改变获取数据的方式。如果我们想要更方便地进行修改,我们可以在一个便利的位置存储一份数据副本。在访问网站时,我们可以获取这个存储的数据,有效地解决了访问速度慢的问题。

当数据被修改时,上述便利的数据副本不会立即更新,因为它不能与Notion直接通信。为了解决这个问题,我利用GitHub Actions定期更新存储的数据。这确保了数据保持最新。

6.最后的说明

总之,这个项目是一个基于网络的个人网站索引,它解决了访问速度慢的问题,并确保了数据及时更新。这些优化使修改变得更加容易,并提供了更高效、无缝的用户体验。感谢您对这个项目的兴趣。

如果您对这个项目有任何问题或询问,可以通过电子邮件联系我:nowscott@qq.com

Star History Chart

About

使用nextjs+notionAPI+tailwindcss实现的简单部署的个人索引网站(A simple personal index website deployed using Nextjs + Notion API)

Topics

Resources

License

Stars

Watchers

Forks