不会写代码,也能做出一个网站?(上)

1

这里，我们的输入（Prompt）可以尽可能详细，具体描述自己需要的功能，减少模棱两可的表述。当然，Prompt也不必一次写得完美。遗漏的功能，可以在看到结果后再继续补充。经过一番思考，模型给出了成果。

这个网页确实可以在本地打开。但是，它有一个问题：这个网站依赖的是 localhost。这是什么意思呢？

Localhost 可以理解为“只在自己电脑里试营业”：这个地址永远指向正在使用它的那台设备。我在自己的电脑上能打开它；但把链接发给别人时，对方访问到的却是对方自己的电脑，当然找不到我这里的网页。要让大家都能访问，就要把它搬到一台长期联网、能被外界找到的公共设备上。这个“把网站放到网上”的过程，就叫部署。

为什么要先放到 GitHub？因为网站并不是一张完整的“网页图片”，而是由 HTML、CSS、JavaScript、图片等许多文件共同组成的。GitHub 可以理解为一个专门存放代码的“云端仓库”：它既替我们保管这些文件，也记录每一次改动；Render 或 GitHub Pages 还可以直接从这个仓库里取出代码并发布。我们把 GitHub 里的 repository（仓库）当成“这个网站的线上项目文件夹”即可。

第二步：在Render上免费部署。

然而，它指出：Render 免费档有两个限制，服务空闲约 15 分钟后会休眠，下次有人访问时自动唤醒（需要一分钟左右）；磁盘是临时的，重启/重新部署后 db.json 里的素材、点赞、评论都会清空。

这对于长期运营一个网站是无法接受的！

于是我又提出，需要一个免费、持久的方案。

这次，它增加了一个步骤：先在 Supabase 上用 GitHub 登录并新建项目。Supabase 可以理解为是网站背后的云端后台：它可以提供数据库、用户登录、文件存储等能力。如果把我们看到的网页比作店面，那么 Supabase 就像后面的仓库、会员登记簿和留言本。这个作文素材网站里的账号、素材、点赞和评论，最终都可以保存在那里，不会跟着某一台电脑关机而消失。

这里还有个关键的概念：API。

API 可以理解为网页和 Supabase 之间的桥梁。网页不必知道数据库内部是怎样工作的，只要按照约定向窗口提出“读取素材”“新增评论”这样的请求，Supabase 就会返回或保存相应的数据。

要打通这个桥梁，网页就需要知道两个东西：Project URL 和 API key。URL是地址，告诉网页该去哪个Supabase项目；API key则是通行证，使Supabase允许网页来连接。二者合起来，网页才知道去哪里发出请求。

关于Supabase的内容，我们将在下期展开。

然而，在我的实际尝试中，Render 的注册卡在了国外信用卡验证上，所以这条路对我还是行不通。经过诸多尝试，我们终于摸索出另一种方法：前端放在GitHub Pages，数据由前端直接连接 Supabase。

这里的“前端”，就是读者打开网站后看得见、点得到的那一部分：页面长什么样、按钮在哪里、点击后发生什么，主要由 HTML、CSS 和 JavaScript 这些文件负责。（顺带一提，今天Kimi发布的Kimi K3模型，前端能力非常强悍，超越国外顶尖闭源模型Fable 5，可以做出非常精美的网页~）

GitHub Pages的作用，就是把这些文件公开发布，让任何人都能通过一个网址访问。

读者打开网站时，GitHub Pages先把“店面”送到浏览器；随后，这个店面再通过 API 去 Supabase 读取或保存账号、素材、点赞和评论。简单说，GitHub Pages 管页面，Supabase 管数据。这样一来，数据不再只躺在我的电脑里，大家从不同设备访问时，看到的也是同一本云端“账本”。

GitHub免费账户可以使用公开仓库发布GitHub Pages网站。Github的注册地址是 https://github.com/signup，注册通常只需要一个可以接收验证码的邮箱。在我们这条免费路线里，它非常关键：它一边保存网站代码，一边通过GitHub Pages把前端发布出去。

注册好 GitHub 之后，告诉 WorkBuddy，让它把代码都上传到 GitHub 上。它会提供设备码登录的方案，并告诉你具体操作方式，我们按照它给出的步骤操作即可。整个过程简单丝滑~

WorkBuddy 登录到你的 GitHub 账号后，就会创建仓库并上传代码。注意，这次授权的意思只是允许 WorkBuddy 代你操作 GitHub，不是把 GitHub 密码直接交给它；页面上显示的一次性设备码只在短时间内有效。

也正因为WorkBuddy可以直接连接我的Github账号，当我们对网站提出修改意见的时候，WorkBuddy也可以通过修改Github上的代码来直接完成网站的内容修改，非常方便。

这篇我们主要介绍网页的一种部署方法和Github这一个实用的网站，有关Supabase的注册和使用，我们将在下期展开讨论~有关Github的重要性和其它用处，我们也将在之后的推文里详细介绍哦！