最新Lovable AI建站教程：快速做出专业网站Web App
Lovable AI 建站新手教程：从 0 开始做一个真正能用的 Web App
如果你完全不会写代码，但又想自己做一个网站、在线工具，甚至是一个真正可以注册、登录、保存数据、上传文件、调用 AI、在线收款的 Web App，那么现在用 AI 来做，门槛已经比以前低很多了。
这篇教程我会从头开始，用 Lovable + Supabase 搭建一个完整的在线 Web App。我们会先把前端界面做出来，再连接数据库、用户登录、Google 登录、文件存储、实时数据、AI 功能，最后把整个应用发布到互联网上，并绑定自己的独立域名。
哪怕你以前一行代码都没写过，也可以按照下面的步骤一步一步操作。
如果你准备跟着教程一起做，建议先把下面几个工具打开。
Lovable：用 AI 生成网站和 Web App
本期教程所有文字、提示词和相关资料：
https://aiyoufeng.com/lovable-course
Supabase 数据库：
Google Cloud Console：
https://console.cloud.google.com/
如果后面准备给网站绑定自己的独立域名，也可以使用 Hostinger 注册域名和网站服务器：
提示词1：
创建一个叫 windy的产品反馈看板应用，主要面向产品团队使用。
谁会使用它：
团队管理员可以为自己的产品创建一个反馈看板；普通用户可以进入这个看板，提交自己的意见和建议，也可以给自己认同的建议点赞投票。核心内容包括：
看板（名称、描述、Slug/链接标识）、用户反馈（标题、描述、状态：待处理 / 已计划 / 进行中 / 已完成、作者）以及点赞投票功能。用户账号和真正的登录认证功能后面再做，目前先把整个 UI 界面和结构搭建出来。
需要包含的页面：
一个公开的反馈看板页面，用户提交的内容按照投票数进行排序，同时显示对应的状态标签，并提供一个“发布新反馈”的表单。另外还需要一个简单的管理员后台，用来查看和管理看板列表。
目前先不要做这些功能：
不要做评论、支付、AI 功能，也不要做文件上传。先控制好项目范围，不要加入太多额外功能。设计风格：
整体采用简洁、现代的 SaaS 产品风格，页面要有充足的留白，并使用一种比较醒目的主色作为强调色。界面做成中文的。
提示词2：
我真的不太喜欢现在这个设计，看起来太普通、太模板化了，给人的感觉就像是随手用 AI “Vibe Coding” 做出来的一样。
我们换一种更现代、更有设计感的方向。可以重新调整字体、文字排版和配色，让整个页面和现在完全不一样。
我希望整体看起来更加精致、简洁、有高级感，同时要有一种全新、现代的感觉，不要做成那种网上随处可见的普通网站模板。
可以大胆加入一些抽象、实验性的视觉设计元素，甚至是一些通常不会出现在普通 Landing Page（落地页）上的设计，让整个网站更有辨识度、更特别。
提示词3：
很好，现在这个网站看起来已经不错了。
接下来，我想给网站加上用户登录和身份验证功能。用户可以直接使用 Google 账号登录，并且使用我已经连接好的 Supabase 来处理用户认证和数据库。
另外，也帮我把和反馈系统相关的**数据库结构（Database Schema）**一起搭建好。
比如包括：
- 反馈看板（Boards）
- 点赞 / 投票（Upvotes）
- 用户提交的反馈内容（Feedback）
- 以及其他和反馈功能相关的数据
总之，把这套反馈系统需要用到的数据库结构一起配置完整。
提示词4：
可以帮我把帖子投票的实时更新功能也开启吗？
也就是说，当有人给某条反馈点赞或者投票之后，页面上的票数可以实时刷新，不需要用户手动重新加载页面。可以使用类似**实时订阅（Realtime Subscription）**的方式来监听数据变化。这个功能直接使用 Supabase Realtime 来实现。
提示词5：
我想给反馈提交功能增加文件上传。
也就是说，用户在提交反馈的时候，可以同时上传附件。
具体要求是：
- 每条反馈最多上传 3 个文件
- 每个文件大小不能超过 3MB
- 在 Supabase 里面创建一个专门的 Storage 存储桶（Bucket），用来保存这些上传的文件
- 上传后，网页端可以直接查看这些附件
- 最好还能在页面上实时显示并预览上传的文件
也就是说，需要把 Supabase Storage + 文件上传 + 附件预览 这一整套功能接到现在的反馈系统里面。
提示词6：
我想给这个系统增加一个 AI 总结功能。
这个功能大概是这样的：当我点击一个按钮之后，AI 可以自动分析我所有的反馈看板，并生成一份完整的更新总结，告诉我最近这些看板上都发生了哪些变化。
比如：
- 哪些反馈最近获得了大量投票
- 哪些用户需求明显变得更热门
- 哪些内容可能需要我重点关注
- 有哪些事情是我接下来可以直接采取行动处理的
具体技术上应该怎么实现，我现在还不太确定。总之，我希望它是一个类似 AI 智能周报 / AI 反馈总结 的功能。
请使用 Supabase Edge Function 来实现这个功能。
同时我希望它支持两种运行方式：
- 每周自动运行一次，自动生成最新的 AI 总结
- 在管理员后台提供一个按钮，我也可以随时点击按钮，手动生成一次总结
如果实现 AI 功能还需要我提供什么东西，比如 AI API Key、接口权限或者其他配置，你直接告诉我就可以，因为我现在还不太清楚这部分具体应该怎么配置。
一、Lovable 是什么？不会编程也能做 Web App
Lovable 本质上是一款 AI 应用开发工具。
简单理解，你不需要自己一行一行写代码，只需要像和 ChatGPT 聊天一样，用自然语言告诉 Lovable：
“我想做一个什么网站？”
“这个网站需要什么页面？”
“用户需要哪些功能？”
“这个按钮点下去以后要发生什么？”
Lovable 就会根据你的要求生成前端页面和对应的代码。
它底层会使用到 React、HTML、JavaScript、CSS 等网页开发技术，但是对于普通用户来说，你不一定需要懂这些。
你只需要知道自己想做什么，然后把需求尽量描述清楚就可以。
Lovable 比较适合制作：
- AI 工具网站
- SaaS Web App
- 产品展示网站
- Landing Page 落地页
- 用户反馈系统
- 在线管理后台
- 数据看板
- 会员网站
- 内部工具
- 各种 MVP 产品原型
如果你本身会编程，也可以先让 Lovable 快速搭出第一版，然后把代码同步到 GitHub，再用其他专业开发工具继续修改。
所以 Lovable 不只是给完全不会代码的人使用，程序员也可以把它当成一个快速开发工具。
Lovable 注册入口：
二、做项目之前，先理解“前端”和“后端”
正式开始之前，有一个非常重要的概念一定要先搞清楚。
一个真正能正常使用的网站或者 Web App，通常可以分成两个部分：
前端（Frontend）
和
后端（Backend）
前端就是用户能够直接看到和操作的部分。
比如：
网站标题、图片、菜单、按钮、表单、登录页面、用户后台，这些都属于前端。
而后端是用户看不到的部分。
比如：
有人给一条内容点了赞，这个点赞记录存在哪里？
用户输入账号密码以后，系统怎么判断能不能登录？
一个用户提交的数据，怎么保存下来？
谁有权限删除数据？
这些事情都是由后端处理的。
简单来说：
前端负责给用户看，后端负责真正处理数据和业务逻辑。
所以如果你只是让 AI 帮你生成一个漂亮的页面，那只能算做出了一个“外壳”。
想让它真正成为一个可以使用的 App，还必须把后端搭起来。
三、为什么建议 Lovable 搭配 Supabase 使用？
这套教程里面，我会使用 Supabase 作为后端。
Supabase：
Supabase 属于 BaaS（Backend as a Service），中文通常叫“后端即服务”。
你可以把它理解成：
数据库、用户登录、文件存储、后端函数、权限管理等很多原本需要程序员自己开发的功能，Supabase 已经提前帮你准备好了。
对于 AI 建站来说非常方便。
虽然 Lovable 本身也可以提供托管式的后端能力，但是如果你准备认真做一个长期项目，我个人更喜欢自己创建一个独立的 Supabase 项目，再把它连接到 Lovable。
这样最大的好处就是：
你的数据库和后端仍然掌握在自己手里。
以后即使你不想继续使用 Lovable，也可以把 Supabase 后端继续连接到其他项目。
这对于真正准备长期运营的网站或者 SaaS 项目来说，会更加灵活。
四、创建 Supabase 项目
先打开 Supabase：
注册账号以后进入后台。
刚开始做项目，免费版本基本上就够我们测试使用。
进入 Supabase 后，新建一个 Organization，也就是组织。
比如我这里可以创建一个：
AI有风
然后选择个人使用。
接下来在这个 Organization 下面创建一个新的 Project。
你需要填写：
项目名称、数据库密码、服务器区域等信息。
数据库密码可以自己设置，也可以让系统生成。
如果系统自动生成密码，记得保存下来。
服务器区域建议选择离你的主要用户比较近的位置，这样用户访问数据库的时候延迟通常会更低。
创建完成以后，这个 Supabase 页面先不要关闭。
后面我们还会在这里查看：
- 用户数据
- 数据表
- 文件
- 用户登录
- Storage
- Edge Functions
- RLS 权限策略
这些东西都会用到。
五、把 Supabase 连接到 Lovable
接下来回到 Lovable。
Lovable：
新建一个项目以后，在 Lovable 项目里面找到数据库或者连接器相关功能。
选择 Supabase。
如果连接器比较多，一时找不到，可以直接搜索 Supabase。
然后授权你的 Supabase 账号。
接下来选择刚刚创建好的 Organization，再选择对应的 Supabase Project。
连接成功以后，相当于告诉 Lovable：
接下来这个 Web App 的后端，我们就使用这个 Supabase 项目。
以后 Lovable 创建的数据表、登录系统、反馈数据、用户数据等内容，都可以保存到这个 Supabase 项目里面。
六、开始写第一条 Lovable Prompt 提示词
后端连接完成以后，就可以正式开始做 App 了。
很多新手使用 AI 建站，最大的一个问题就是：
提示词写得太简单。
比如只告诉 AI：
“帮我做一个反馈网站。”
这种提示词当然也能生成东西，但是 AI 不知道你真正想要什么，最后生成出来的页面往往很普通。
一个比较完整的 Prompt，最好至少把下面这些事情说清楚：
这个 App 是做什么的？
谁会使用？
核心功能是什么？
需要哪些页面？
第一阶段需要实现哪些功能？
哪些功能目前先不要做？
整体设计风格是什么？
使用什么语言？
例如这次我们的案例，是做一个产品反馈看板。
用户可以进入反馈页面提交建议，也可以给其他人的建议投票。
管理员则可以创建和管理不同的反馈看板。
第一阶段我们先把 UI 界面做出来，暂时不急着加入复杂的登录、支付和 AI 功能。
最后再告诉 Lovable：
整个界面使用中文。
这一句最好不要忘记，不然 AI 很有可能默认给你生成英文页面。
如果你不知道怎么写完整的 Prompt，也可以让 ChatGPT、Claude 或 DeepSeek 帮你整理。
如果你需要 ChatGPT、Claude 等 AI 会员，也可以看这个平台：
ChatGPT / Claude AI 会员代充、账号平台——银河录像局
本期教程里面使用到的相关提示词，我也会整理到这里：
https://aiyoufeng.com/lovable-course
七、先让 Lovable 做出第一版 UI
把 Prompt 输入 Lovable 以后，让 AI 开始生成。
第一版不用追求一次做到完美。
AI 建站比较好的使用方式是：
先做第一版，然后不断修改。
Lovable 生成完成以后，右边会直接出现网页预览。
我们这次生成的是一个产品反馈系统。
里面可以包括：
反馈列表、投票、提交反馈、反馈状态、管理后台等页面。
这个时候页面虽然看起来已经像一个真正的网站，但是它可能还只是 UI。
也就是说：
你现在提交一条反馈，页面上可能会显示出来。
但是刷新网页以后，这条内容可能就消失了。
原因就是：
数据还没有真正保存进数据库。
所以前端只是第一步，接下来我们要把真正的后端功能接起来。
八、Lovable 第一版太像 AI 网站怎么办？
这是现在使用 AI 建站经常遇到的问题。
AI 第一次生成出来的网站，很多时候都会比较“模板化”。
一眼看过去就知道像 AI 自动生成的。
如果你对第一版不满意，可以使用 Lovable 里面的 Redesign 功能重新设计。
你可以告诉它：
现在这个设计看起来太普通、太模板化，我希望重新设计整个页面，给我一个完全不同的视觉方向。
你不一定需要把每一个颜色、字体、间距都写得特别清楚。
有时候给 AI 一定的发挥空间，反而容易得到新的设计方案。
Lovable 可能会让你选择：
- 配色
- 字体风格
- 页面布局
- 不同设计方向
你选择自己喜欢的方案，再继续生成就可以。
如果以后你希望 Lovable 在设计之前先问你问题，也可以在 Prompt 最后加一句：
“开始修改之前，先给我几个设计方案让我选择。”
这样通常比让 AI 自己直接决定更容易控制最终效果。
九、修改页面上的某个区域
如果页面整体已经不错，只是某个地方想修改，没有必要整个页面重新生成。
你可以直接选中页面上的某一个区域。
比如：
“把这里的背景改成黑色。”
或者：
“这个按钮改大一点。”
“这里的文字改成中文。”
“这部分重新设计得更高级。”
选中对应区域以后直接告诉 AI 就可以。
对于文字，有些地方也可以直接进入文本编辑模式修改。
这种方式非常适合后期做细节调整。
十、大改动之前，建议先使用 Plan 模式
如果只是改颜色、字体、按钮这些小问题，可以直接修改。
但是如果准备增加一个比较复杂的功能，比如：
- 用户注册
- Google 登录
- 管理员权限
- 数据库
- 支付
- AI 功能
建议先切换到 Plan 模式。
Plan 就是让 Lovable 先规划。
比如我们接下来准备加入用户登录，可以告诉它：
我要给这个网站加入完整的用户登录和身份验证功能，用户可以使用 Google 账号登录，并使用已经连接好的 Supabase 处理用户认证和数据库。另外把反馈系统需要的数据表一起建立，包括反馈看板、用户、点赞、投票和反馈内容。
先让 Lovable 给你设计实施方案。
确认没有问题以后，再让它真正修改项目。
对于比较大的功能，我非常建议使用这种方式。
这样比直接让 AI 一股脑修改，要稳很多。
十一、给网站加入 Google 登录
接下来做一个非常实用的功能：
Google 账号登录。
这里需要同时用到：
Lovable
Supabase
Google Cloud Console
Google Cloud Console：
https://console.cloud.google.com/
首先登录 Google Cloud Console，然后创建一个新的 Project。
项目名称可以自己定义，例如 Lovable。
接下来配置 Google 的 OAuth。
这里原始字幕里面有不少语音识别错误，正确的专业术语应该是：
OAuth
OAuth consent screen / Google Auth Platform
Client ID
Client Secret
Authorized JavaScript origins
Authorized redirect URIs
这些就是后面配置 Google 登录时经常看到的几个关键词。
十二、配置 Google OAuth
进入 Google Cloud Console：
https://console.cloud.google.com/
确保当前选中的项目就是刚才创建的那个项目。
配置应用名称、支持邮箱、联系人邮箱等信息。
如果这是一个普通公开网站，通常需要面向外部用户。
接下来设置应用的 Branding，也就是品牌信息。
然后还需要配置授权域名。
不同 Lovable 项目生成的域名可能不一样，所以这里不要直接照抄别人的。
如果不知道应该填哪个域名，一个非常简单的方法就是：
把当前页面截图发给 Lovable，让 AI 告诉你这个项目应该填什么。
十三、创建 Google OAuth Client ID
接下来在 Google Cloud Console 创建 OAuth Client。
应用类型选择：
Web application
也就是网页应用。
然后配置：
Authorized JavaScript origins
以及：
Authorized redirect URIs
JavaScript Origin 可以根据你的 Lovable 项目地址填写。
而 Redirect URI，也就是回调地址，可以从 Supabase 后台获取。
十四、在 Supabase 获取 Google 回调地址
回到 Supabase：
进入对应项目。
找到 Authentication，也就是用户身份验证。
进入登录提供商，也就是 Providers。
找到：
进入 Google 登录配置页面以后，会看到 Supabase 提供的 Callback URL。
复制这个地址。
然后回到 Google Cloud Console，把它加入：
Authorized redirect URIs
创建完成以后，Google 会生成：
Client ID
以及：
Client Secret
复制下来。
十五、把 Client ID 和 Client Secret 填入 Supabase
回到 Supabase。
进入：
Authentication → Providers → Google
开启 Google 登录。
然后分别填写：
Client ID
Client Secret
保存。
这时候 Google 登录基本就配置完成了。
接下来打开 Lovable 做好的网站。
点击：
使用 Google 登录
如果能够正常弹出 Google 账号选择页面，并最终成功登录，说明配置已经成功。
十六、测试数据库是不是真的连接成功
配置好 Supabase 以后一定要测试。
比如登录网站以后，新建一条反馈。
填写：
标题、详细内容等信息。
提交。
然后刷新网页。
如果刷新以后内容还在，说明这次数据已经真正保存到了数据库。
接下来再进入 Supabase 后台。
找到 Table Editor。
你应该可以看到刚刚提交的反馈数据。
用户使用 Google 登录以后，对应的用户资料也会被写入认证系统或者相关数据表。
这时候我们这个项目就已经不再只是一个“看起来像 App 的网页”。
而是一个真正连接数据库、可以保存数据的 Web App。
十七、设置管理员权限
有些页面只允许管理员进入。
比如：
管理后台、创建反馈看板、修改状态、删除内容等。
如果登录以后进入管理后台提示：
没有权限
可以直接回到 Lovable，告诉它：
“把我当前这个账号设置成管理员。”
然后让 Lovable 给对应用户增加 Admin 管理员角色。
完成以后刷新网页。
正常情况下，这个账号就可以进入管理后台。
十八、非常重要：Supabase RLS 行级安全策略
如果你准备把这个 App 真正发布给别人使用，数据库安全一定不能忽略。
Supabase 里面有一个非常重要的功能：
RLS——Row Level Security
中文叫：
行级安全策略
注意，原始语音字幕里面把它识别成了“航级安全策略”，正确名称是：
行级安全策略。
RLS 的作用简单来说就是控制：
谁可以读取数据？
谁可以增加数据？
谁可以修改数据？
谁可以删除数据？
例如：
普通用户只能修改自己的数据。
管理员可以查看所有内容。
没有登录的用户不能删除数据。
这些权限都可以通过 RLS 来限制。
如果你不会写 SQL，也不用太担心。
可以让 Lovable 帮你创建相应的 RLS Policy。
但是你至少要知道：
RLS 是 Supabase 数据安全里面非常核心的一层。
准备正式上线之前，一定要检查。
Supabase：
十九、开启 Supabase Realtime 实时数据
接下来是一个很好用的功能：
Realtime 实时数据。
假如一个反馈页面同时有两个人打开。
其中一个人给某条反馈投了一票。
如果开启 Realtime，另外一个人的页面可以自动看到票数变化，而不用手动刷新网页。
你可以直接告诉 Lovable：
帮我给反馈投票功能加入实时更新。当有人点赞或者投票以后，其他已经打开这个页面的用户可以实时看到票数变化，不需要刷新页面。
Lovable 可以帮助你配置 Supabase Realtime。
当然，也可以自己去 Supabase 后台对应的数据表开启实时功能。
二十、增加图片和文件上传功能
目前我们的反馈系统可能只能提交文字。
但是实际使用的时候，用户往往还需要上传：
截图、图片、PDF、附件等文件。
这时候就需要使用 Supabase 的：
Storage
Supabase：
Storage 就是专门用来存文件的。
图片和 PDF 这类文件，一般不会直接像普通文字一样塞进数据库表，而是保存到 Storage，然后在数据表里面记录文件相关信息。
你可以直接告诉 Lovable：
给反馈提交功能增加文件上传功能，允许用户在提交反馈时上传图片和截图，并把文件保存到 Supabase Storage。
然后让 Lovable 自动创建相关逻辑。
完成以后，可以在网站上上传一张图片进行测试。
再回到 Supabase → Storage。
如果能够看到刚刚上传的文件，就说明文件上传已经配置成功。
二十一、什么是 Supabase Edge Functions？
接下来是一个稍微偏进阶，但是非常有用的功能：
Edge Functions
中文一般叫：
边缘函数。
原始字幕里面这里被语音识别成了其他英文词，正确名称是：
Supabase Edge Functions。
你可以把 Edge Functions 理解成：
运行在后端的一段程序逻辑。
比如：
用户点击一个按钮以后，让 AI 总结数据。
调用 ChatGPT API。
生成图片。
发送邮件。
处理支付。
执行一些后端计算。
这些事情通常都不应该直接在浏览器里面完成，而是需要在后端运行。
这时候就可以使用 Edge Functions。
二十二、给 Web App 增加 AI 总结功能
例如我们这个反馈系统。
假如以后收到 500 条、1000 条用户反馈。
管理员肯定不可能每天一条一条看。
我们可以增加一个：
AI 总结
管理员进入后台以后，点击一个按钮。
AI 自动分析最近的反馈，然后告诉你：
用户最近主要在反馈什么？
哪些问题出现频率最高？
哪些功能最值得优先开发？
这时候就需要调用 AI 模型。
你可以让 Lovable 使用 Supabase Edge Functions 帮你实现。
如果需要 AI API Key 或者其他配置，也可以直接告诉 Lovable：
“如果实现这个 AI 功能需要 API Key、接口权限或者其他配置，请一步一步告诉我。”
这样 AI 会根据当前项目继续指导。
二十三、把 Lovable 项目同步到 GitHub
如果你准备认真做一个正式项目，我非常建议把 Lovable 项目连接到：
GitHub
连接 GitHub 以后，可以把整个项目代码同步到自己的代码仓库。
这样以后就算不在 Lovable 里面修改，也可以：
把代码下载到本地。
使用 VS Code 修改。
交给程序员修改。
使用其他 AI 编程工具继续开发。
同时 GitHub 也可以帮你保存代码历史。
对于长期项目来说，这一点非常重要。
Lovable 并不是一定要取代程序员。
比较实用的做法反而是：
Lovable 负责快速做出第一版，后面再根据项目复杂程度继续开发。
二十四、使用知识库保存长期规则
如果一个项目做得比较久，你会发现有些规则需要不断重复告诉 AI。
例如：
网站必须使用中文。
按钮采用某种风格。
某些页面只有管理员可以访问。
数据库必须使用某套命名规则。
这些长期固定的信息，可以放到项目的知识库里面。
这样 Lovable 后面每次修改项目的时候，都可以参考这些内容。
对于大型项目来说，会方便很多。
二十五、开发环境和正式环境最好分开
如果项目越来越复杂，开发者一般还会把环境分开。
例如：
Development：开发环境
Testing / Staging：测试环境
Production：正式环境
Supabase 支持通过分支等方式管理不同开发环境，具体可用功能取决于你的 Supabase 套餐。
这样你测试新功能的时候，就不会轻易影响已经上线的正式网站。
新手刚开始不用过度纠结这些。
等项目真正开始有用户以后，再考虑把开发和正式环境分开。
二十六、给 Lovable Web App 加入 Stripe 在线收款
如果你做的是 SaaS、会员网站或者付费 AI 工具，最后很可能需要加入在线支付。
比较常见的方案就是：
Stripe
你可以直接告诉 Lovable：
“帮我给这个网站接入 Stripe，让用户可以在线付款。”
然后根据 Lovable 的提示配置 Stripe API 等信息。
如果你还没有 Stripe 账号，需要注意：
中国大陆主体直接申请 Stripe 会受到地区支持限制。
如果你准备通过美国公司来申请跨境业务相关的 Stripe 账号，我之前也做过详细教程：
美国公司注册教程：
https://www.youtube.com/watch?v=B_kCNiQ3Icw
如果准备注册美国公司，也可以使用：
Northwest Registered Agent
这些内容和 Lovable AI 建站结合起来以后，就可以进一步做：
AI SaaS、会员工具、跨境服务网站、订阅制产品等。
二十七、上线之前一定要做安全检查
网站功能做好以后，不建议马上发布。
先让 Lovable 帮你检查一遍安全问题。
特别是检查：
用户权限、数据库 RLS、API Key 是否暴露、管理员权限、Storage 文件权限等。
如果发现安全问题，再让 AI 一项一项处理。
对于真正准备公开运营的网站来说：
安全比页面好不好看重要得多。
二十八、Lovable 网站怎么做 SEO？
如果你做的是公开网站，而不是单纯的内部工具，那么 SEO 也值得处理。
SEO 就是：
Search Engine Optimization——搜索引擎优化。
目标就是让 Google 更容易理解你的网站内容，并有机会获得自然搜索流量。
可以让 Lovable 帮你检查：
页面 Title
Meta Description
H1、H2 标题结构
关键词
页面内容
链接结构
图片 Alt
页面加载速度
移动端体验
如果你的项目使用了适合搜索引擎抓取的渲染方式，例如 SSR，也会更有利于搜索引擎读取页面内容。
但是需要注意：
SEO 并不是在页面里面疯狂堆关键词。
真正长期有效的方法还是：
页面解决用户问题 + 内容完整 + 结构清楚 + 网站速度好。
二十九、把 Lovable 项目发布到互联网
所有功能基本做完以后，最后就是：
Publish 发布。
进入 Lovable，点击右上角的发布按钮。
Lovable 可以先给项目生成一个可以直接访问的网址。
这样别人拿到链接以后，就能打开你的 Web App。
建议发布以后使用：
无痕窗口
手机
不同浏览器
重新测试一次。
重点检查：
注册、登录、提交数据、刷新页面、管理员后台、文件上传、AI 功能等是否正常。
三十、绑定自己的独立域名
如果只是测试，可以暂时使用平台提供的网址。
但是如果准备正式运营，我还是建议绑定自己的独立域名。
比如：
yourwebsite.com
这样看起来会更加专业，也方便以后做品牌和 Google SEO。
如果你还没有域名，可以在 Hostinger 注册：
购买域名以后，再按照 Lovable 的域名绑定步骤配置 DNS 即可。
如果你的 Lovable 套餐不支持绑定自定义域名，则需要升级到支持自定义域名的套餐。
三十一、不会英文怎么办？
AI 建站过程里面不可避免会看到很多英文。
例如：
OAuth
Client ID
Client Secret
Redirect URI
Edge Functions
Storage
Realtime
GitHub
Stripe
API Key
如果英文不是特别好，其实影响并没有以前那么大。
看不懂页面的时候，直接截图发给 ChatGPT 或 Claude，让 AI 告诉你：
“这个页面是什么意思？”
“下一步点哪里？”
“这里应该填什么？”
基本上就可以继续操作。
如果需要 ChatGPT、Claude AI 会员，也可以参考：
ChatGPT / Claude AI 会员代充、账号购买平台——银河录像局
三十二、需要外包开发怎么办？
如果后面项目越来越复杂，有一些功能 AI 暂时解决不了，也可以直接把 GitHub 项目交给开发人员继续做。
如果需要找海外自由职业者，可以使用 Fiverr。
注意，正确名称是：
Fiverr
不是 Fiver。
可以在里面找：
Web Developer
React Developer
Supabase Developer
Stripe Developer
AI Developer
让开发者直接在现有项目基础上继续修改。
三十三、Lovable + Supabase 这套方式最大的优势是什么？
这套方法最值得关注的一点，其实不是“AI 可以生成一个漂亮网页”。
而是：
可以从一个简单页面，一步一步做成真正能运行的 Web App。
整个项目可以拥有：
- 前端 UI
- 数据库
- Google 登录
- 用户认证
- 管理员权限
- RLS 安全策略
- 实时数据
- 图片和文件上传
- AI 功能
- GitHub 代码
- 在线支付
- SEO
- 独立域名
而且我们使用自己创建的 Supabase 项目以后，数据库和后端不会完全被锁死在某一个 AI 建站平台里面。
以后想把项目迁移出去，灵活性会高很多。
常见问题
Lovable 不会写代码可以用吗？
可以。
Lovable 最大的特点就是可以通过自然语言生成 Web App。
你只需要会描述自己的需求。
Lovable 可以连接 Supabase 吗？
可以。
Supabase 可以给 Lovable 项目提供数据库、用户认证、Storage、Realtime、Edge Functions 等后端能力。
Supabase：
Lovable 可以做用户登录吗？
可以。
这篇教程演示的方案就是：
Lovable + Supabase Authentication + Google OAuth
这样用户就可以使用 Google 账号登录你的 Web App。
Lovable 可以上传图片吗？
可以。
可以使用 Supabase Storage 保存图片、截图、PDF 和其他附件。
Lovable 可以接入 AI 吗？
可以。
例如可以通过后端函数调用 AI API，实现：
AI 总结、AI 对话、AI 内容生成等功能。
Lovable 可以在线收款吗？
可以根据项目需求接入 Stripe 等支付服务。
美国公司注册和 Stripe 相关教程：
https://www.youtube.com/watch?v=B_kCNiQ3Icw
Lovable 可以绑定自己的域名吗？
支持自定义域名的套餐可以绑定自己的独立域名。
如果还没有域名，可以使用 Hostinger：
本期教程相关工具和资源整理
Lovable：AI 生成网站和 Web App
Hostinger：注册网站服务器和域名
本期视频所有文字和提示词
https://aiyoufeng.com/lovable-course
Supabase 数据库
Google Cloud Console
https://console.cloud.google.com/
ChatGPT / Claude AI 会员平台
美国公司注册教程，可用于了解 Stripe 跨境收款相关方案
https://www.youtube.com/watch?v=B_kCNiQ3Icw
Northwest 美国公司注册平台
Fiverr 英文工作外包平台
加入我的知识星球
如果你在 AI 建站、跨境电商、美国公司、Stripe 或其他相关问题上需要进一步交流，也可以加入我的知识星球。
总结：从 0 到上线，一个人也能做 Web App
以前要做一个真正可以登录、保存数据、上传文件、调用 AI、在线收款的网站，通常需要前端、后端、数据库等不同开发人员一起完成。
现在有了 Lovable 和 Supabase，即使你不是程序员，也可以先通过自然语言把第一版产品做出来。
整个思路其实非常简单：
先用 Lovable 做前端和产品界面。
再连接 Supabase 搭建数据库和用户系统。
配置 Google OAuth 完成用户登录。
通过 RLS 做数据库权限控制。
使用 Storage 保存文件。
使用 Realtime 实现实时数据。
使用 Edge Functions 加入 AI 等后端功能。
需要收款，再接入 Stripe。
最后绑定独立域名，把整个 Web App 正式发布出去。
如果你准备自己从头做一遍，可以先注册 Lovable：
点击这里使用 Lovable 开始制作 AI Web App
需要独立域名，可以使用 Hostinger：
本期教程所有文字和相关提示词：
https://aiyoufeng.com/lovable-course
如果操作过程中还有问题，也可以加入我的知识星球一起交流：
© 版权声明
文章版权归作者所有，未经允许请勿转载。
下一篇
没有更多了...
相关文章
暂无评论...