1 前言

很久以前，互联网早期有一个名为黄页的网站，其中包含许多其他网站的索引。随着时间的推移，它逐渐演变为搜索引擎。

然而，在搜索引擎中，在查找特定网站时，结果往往缺乏准确性。所以，我还是相信每个人都需要自己的黄页。

该个人黄页将包括常用网站的集合，以及添加标签和简短描述以实现简单搜索和浏览功能的功能。

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

2 网站迭代

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

项目地址也一起换掉了，这次使用了一个很容易理解的项目名称（我也不知道为啥当时把web放在了中间，可能这样看起来好看点？）：

https://github.com/NowScott/IndWebIndex

截屏2023-07-06 16.36.38

名称是Individual Web Index.的缩写，含义就是个人网页索引

接下来是外观方面，看起来和上次更新并没有明显的差别

外观

实际上也是这样的，只是微调了间距，同时改变了大多数网站按钮悬浮时显示的简介文字，大概和下图差不多

截屏2023-07-06 16.32.37


这部分是本次更新最大的变化

此前我对于数据的改变都是打开vs code，打开网页数据的json文件，在其中按照一定的要求去写Object（对象）

这样的修改数据的方式是十分不方便的

因此这次的数据后台变成了这样：

截屏2023-07-06 16.40.17

没错，我使用了notion

（具体怎么将notion中的数据放到网页中的过程我会在下一段写出）

这样就能够很方便的对数据进行增删查改，而且使用什么设备都很方便

3 Notion API

3.1 什么是Notion API

（本段文字由ChatGPT生成）

Notion API 是一个强大的工具，允许开发人员与广受欢迎的生产力应用 Notion 进行交互。它提供了一组端点和方法，可实现对 Notion 功能的编程访问，使开发人员能够构建集成、自动化任务和创建自定义工作流。

通过 Notion API，您可以检索和操作 Notion 工作区中的数据。这包括访问页面、数据库和区块，以及创建、更新和删除它们。您还可以管理权限、与他人协作，并以编程方式处理 Notion 内容的各个方面。

3.2  使用Notion API

（从Notion获取数据的代码不包含在这个项目中。）

这个想法来源于Bilibili上传者的一个视频，链接如下：

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

在本视频中，我学习了如何使用 Notion API 从 Notion 获取数据并将其显示在网页上。如果您有任何疑问，可以观看视频以了解更多信息。

总而言之，我使用了一个名为 Netlify 的网站来部署服务。每当有人访问我部署的域时，该服务就会运行，从 Notion 检索数据并将其返回到前端。前端接收到数据后，就可以将其显示在网页上。

这听起来很棒，对吧？

然而，这个简单的过程最多需要大约7到8秒，这与快速加载个人网站的愿景不符。因此，我在这方面做了进一步的改进。

我无法改变Notion API的访问速度，但我可以改变的是获取数据的方式。

如果我们想让修改更方便，我们可以将数据的副本存储在方便的位置，当访问网站时，我们可以取出这些存储的数据，有效解决访问速度慢的问题。

当数据修改时，前面提到的方便的数据副本不会立即更新，因为它无法直接与Notion通信，为了解决这个问题，我利用 GitHub Actions 定期更新存储的数据，这可确保数据保持最新。

4 搭建

下面我介绍一个最简单的方法

4.1 利用GitHub Page

（本段文字由ChatGPT生成）

GitHub Page是GitHub提供的一个免费的静态网站托管服务，它允许用户轻松地创建和发布个人或项目的静态网页。通过GitHub Page，用户可以使用Markdown、HTML、CSS和JavaScript等技术来自定义自己的网页，展示个人的作品、项目文档或博客文章等内容。

使用GitHub Page非常简单，只需在GitHub上创建一个名为username.github.io的仓库（其中username为你的GitHub用户名），然后将你的网页文件推送到该仓库即可。GitHub会自动将这个仓库的内容部署为一个静态网站，并通过https://username.github.io的链接提供访问。

GitHub Page不仅提供了一个简单易用的网站托管解决方案，还支持自定义域名和HTTPS加密，使得用户可以将自己的网站与个人域名绑定并通过安全的加密连接进行访问。此外，GitHub Page还支持Jekyll静态网站生成器，可以帮助你轻松地创建并发布个人博客。

无论是个人开发者、团队项目还是开源社区，GitHub Page都是一个非常有用的工具。它提供了一个展示个人技能、分享项目成果和与他人交流的平台，同时也是一种学习和实践各种前端技术的绝佳途径。无需费心搭建服务器或付费购买域名，通过GitHub Page，你可以快速、便捷地建立自己的网站，让你的代码和作品更加广为人知。

4.2 项目文件

https://github.com/NowScott/IndWebIndex

进入到上述项目的GitHub页面中，下载以下几个文件：

index.html 、src/index.js

当然如果你对风格不太满意的话可以把css文件也都一并修改掉

把上述两个文件直接放在你的username.github.io项目的根目录下

然后再对index.html 中的这两行代码进行修改

<title>我的主页</title>
    <script src="https://nowscott.top/src/index.js"></script>
    <link rel="shortcut icon" href="https://nowscott.top/favicon.ico" />

<title></title>中间的文字对应浏览器这部分的文字

<link rel="shortcut icon" href="https://nowscott.top/favicon.ico" />

这上面的链接指向的是一个图标

浏览器标签文字图标

这个图标你可以自己制作一个，通过下面这个网站

比特虫ico图标制作

网站上的数据你可以通过新建一个data.json文件，数据格式如下

[{
        "name": "网站名称",
        "web": "网址",
        "tags": [
            "📒标签",
            "🔧可以多写几个"
        ],
        "brief": "网站介绍，可以写一段话",
        "state": "网站状态（正常/断开链接）"
    }]

然后修改index.js中的这行链接，改为如下格式

    fetch(
"https://username.github.io/data.json"
)

接下来就可以部署这个GitHub Page了

5 部署

点击项目中的setting

在左侧找到Pages

GitHub Page

设置一下就可以访问了，如果你有自己的域名，也可以在下方设置为自己的域名，按照要求配置一下就好

到现在，你的个人索引网站就做好了

如果觉得访问速度有问题的话可以了解一下Vercel部署

本文到这里就结束了，如果你有什么问题，可以给我发邮件：nowscott@qq.com