开源项目：搭建自己的HTML部署页面

欢迎关注个人公众号“HelloRanceLee”及博客：https://blog.discoverlabs.ac.cn/

前言

AI大行其道后，个人可以很方便的让AI来生成各种HTML，包括旅行记录、小游戏等。例如我是一个股票交易员，我就做了HTML网页来提醒我市场休市信息

然而HTML文件挂在网上才比较方便查看，分享。这时候需要查找相关的服务，你可以找到一些选择：

1. 1. Cloudflare、Vercel、Github虽然可以免费部署你的HTML，但是步骤还是有些麻烦，并且不方便查看所有已部署项目
2. 2. 类似https://www.youware.com的网站，我原来很喜欢用这个网站，但是Youware访问需要挂梯子，而且近期收费了 多方考虑下，我决定用Vercel做一个部署页面，后端集成Notion作为数据库。这个方案的好处在于完全免费，并且查看方便，数据也都在自己手上

前期准备

1. 1. 一个Github账号
2. 2. 一个Vercel账号（要绑定Github）
3. 3. 一个Notion账号
4. 4. 一个Cloudflare账号

部署步骤

在Notion中创建一个数据库

具体所需字段如图，你可以用我文章《如何使用Gemini Cli来直接操作Obsidian和Notion内容，加速你的知识管理效率》中调用Notion MCP的方法，直接把图给AI并且让它创建这个表，并且返回给你这个数据库的ID。当然你也可以直接打开数据库网址复制给AI，让他告诉你ID是多少：

然后我们要给数据库权限并赋权给这个页面，首先点右上角三个点进入集成

在新的页面中选择下面的“开发或者管理集成”

在跳出来的页面中选择“新集成”

下个页面选择给API取个名字，关联你的空间，类型不用改，保存

在新的页面点显示密钥，把这个记下来。下面的功能全部打勾

还是这个页面，点击访问权限，在里面找到你的数据库

回到数据库，在集成这里看已经启用即可

在这个部分，我们获取到了NOTION_API_KEY和NOTION_DATABASE_ID，这个在Vercel部分需要填入

Fork我的项目

项目地址：https://github.com/RanceLee233/html-deployer 你只要进入这个页面，点右上角的fork，创建你自己的项目即可

在Vercel中创建自己的项目

在Vercel关联Github后，你可以很容易让他部署你的项目

在下一个页面，输入你的Notion Database ID 和API

点击Deploy后就开始部署，很快就会显示成功给你一个网页。打开这个网页你就可以开始部署你的HTML网页了。使用十分简单，并且如果你需要国内访问，可以直接用我文章《如何使用Cloudflare来加速Vercel项目》中的内容来给这个项目加速

写在最后

AI时代，即使是小白也可以几乎零成本容易复刻或者创造自己的项目，需要的是你发掘需求并且动手去实践

原文地址: https://mp.weixin.qq.com/s?__biz=MzU2NzcwOTQyMQ==&mid=2247483740&idx=1&sn=a2d4e0cd9daa2fe929feb389a56d7fac&chksm=fdaa73faca08c4d50d7f0e30d35d9d8776816030e81b3700658e3c3b05c4ccb6c4e7d6c49ca1&mpshare=1&scene=1&srcid=0828H6MQ8fJGpjwu0wbc2jkl&sharer_shareinfo=e4e82b062ce0c7d30c4b8d79a0cea094&sharer_shareinfo_first=e4e82b062ce0c7d30c4b8d79a0cea094#rd