卜佳菲：不会写代码也能做到：用 AI 带你 3 小时完成官网上线（含后台+品牌 IP+运营）

卜佳菲：不会写代码也能做到：用 AI 带你 3 小时完成官网上线（含后台+品牌 IP+运营） 🌈 卜佳菲：不会写代码也能做到：用 AI 带你 3 小时完成官网上线（含后台+品牌 IP+运营） Modified December 9, 2025 3.1 准备工作 1. 确认你的前端项目能打包 • 常见框架： ◦ React（Vite / CRA） ◦ Vue (Vite / Vue CLI) ◦ Next.js（静态导出也可以） • 在本地项目根目录执行（根据你的项目调整）： Code block Plain Text Copy Vite / Vue / React 常见 npm install npm run build • 一般会在项目根目录生成一个类似： ◦ dist/ ◦ 或 build/ • 这个目录就是要部署到服务器上的静态文件（HTML / JS / CSS / 图片等）。 1. 准备一个腾讯云服务器 ◦ 参考教程：https://modelers.csdn.net/6911578c5511483559e4847e.html ◦ 登录腾讯云控制台 → 云服务器 ◦ 购买一台服务器（推荐 CentOS / Ubuntu 都行） ◦ 记下来： ▪ 公网 IP ▪ 登录方式：密码 或 SSH 密钥 3.2 连接到腾讯云服务器 • 使用终端 SSH 登录（推荐） • 在你本地电脑（Cursor 终端或系统终端）： Code block Plain Text Copy ssh root@你的服务器IP 第一次会问是否继续连接，输入 yes，然后输入密码 • 如果你不是 root 用户，可能是： Code block Plain Text Copy ssh ubuntu@你的服务器IP • 登录成功后，就进入到远程服务器的命令行了。 3.3 在服务器上安装运行环境 更新软件源 • Ubuntu： Code block Plain Text Copy sudo apt update sudo apt upgrade y • CentOS： Code block Plain Text Copy sudo yum update y (2) 安装 Nginx（用来部署静态前端） • Ubuntu： Code block Plain Text Copy sudo apt install nginx y • CentOS： Code block Plain Text Copy sudo yum install epel release y sudo yum install nginx y • 安装完后启动： Code block Plain Text Copy sudo systemctl start nginx sudo systemctl enable nginx 设置为开机自启 • 在浏览器访问： Code block Plain Text Copy http://你的服务器IP • 如果看到 nginx 欢迎页面，说明服务器和网络都没问题。 3.4 把前端打包文件用 scp 直接上传（到服务器 • 在本地（不是服务器里）执行： Code block Plain Text Copy 假设你的前端项目已经 build 到 dist 目录 scp r ./dist/ root@你的服务器IP:/var/www/your frontend • 说明： ◦ r 表示递归拷贝整个文件夹 ◦ /var/www/your frontend 是部署目录，你可以随便取，比如 /usr/share/nginx/html/your app • 如果目录不存在，可以先在服务器上创建： Code block Plain Text Copy sudo mkdir p /var/www/your frontend sudo chown R $USER:$USER /var/www/your frontend • 然后再 scp 上传。 3.5 配置 Nginx 指向你的前端项目 下面以 Ubuntu 为例。 创建一个 Nginx 站点配置 Code block Plain Text Copy sudo nano /etc/nginx/sites available/your frontend • 写入（根据你的路径改一下）： Code block Plain Text Copy server { listen 80; server name your domain.com; 如果没有域名，可以先写你的服务器IP，或者留空注释 root /var/www/your frontend/dist; 改成你的 dist 路径 index index.html; location / { try files $uri $uri/ /index.html; } } 如果是前端单页应用（SPA：React Router / Vue Router），try files ... /index.html 非常重要，不然刷新会 404。 启用这个配置 Code block Plain Text Copy 建立软链接到 sites enabled sudo ln s /etc/nginx/sites available/your frontend /etc/nginx/sites enabled/your frontend (3)检查 Nginx 配置有没有问题 Code block Plain Text Copy sudo nginx t • 如果显示 syntax is ok 和 test is successful，就可以重载： Code block Plain Text Copy sudo systemctl reload nginx (4)访问测试 • 在浏览器进入： Code block Plain Text Copy http://你的服务器IP • 如果你在配置里用了 server name 是域名，就用： Code block Plain Text Copy http://你的域名 看到你的前端页面就说明部署成功 🎉 3.6 腾讯云安全组 & 服务器防火墙 如果访问不了，很可能是端口没开。 腾讯云安全组 在腾讯云控制台： 1. 打开「云服务器」→ 找到你的实例 2. 看关联的「安全组」 3. 编辑安全组规则，确保入站规则开放了： ◦ 协议：TCP ◦ 端口：80（HTTP），需要 HTTPS 再加 443 ◦ 来源：0.0.0.0/0（对全网开放，简单测试没问题，正式环境可以再收紧） (2).服务器自身防火墙（如果有） • Ubuntu + ufw： Code block Plain Text Copy sudo ufw allow 80/tcp sudo ufw allow 443/tcp sudo ufw status • CentOS + firewalld： Code block Plain Text Copy sudo firewall cmd zone=public add service=http permanent sudo firewall cmd zone=public add service=https permanent sudo firewall cmd reload 3.7 绑定域名（可选） 如果你有域名： 1. 在域名服务商那里添加一条 A 记录： ◦ 主机记录：@ 或 www 3.1 准备工作 1. 确认你的前端项目能打包 • 常见框架： ◦ React（Vite / CRA） ◦ Vue (Vite / Vue CLI) ◦ Next.js（静态导出也可以） ◦ React（Vite / CRA） ◦ Vue (Vite / Vue CLI) ◦ Next.js（静态导出也可以） • 在本地项目根目录执行（根据你的项目调整）： • 一般会在项目根目录生成一个类似： ◦ dist/ ◦ 或 build/ ◦ dist/ ◦ 或 build/ • 这个目录就是要部署到服务器上的静态文件（HTML / JS / CSS / 图片等）。 1. 准备一个腾讯云服务器 ◦ 参考教程：https://modelers.csdn.net/6911578c5511483559e4847e.html ◦ 登录腾讯云控制台 → 云服务器 ◦ 购买一台服务器（推荐 CentOS / Ubuntu 都行） ◦ 记下来： ▪ 公网 IP ▪ 登录方式：密码 或 SSH 密钥 ◦ 参考教程：https://modelers.csdn.net/6911578c5511483559e4847e.html ◦ 登录腾讯云控制台 → 云服务器 ◦ 购买一台服务器（推荐 CentOS / Ubuntu 都行） ◦ 记下来： ▪ 公网 IP ▪ 登录方式：密码 或 SSH 密钥 ▪ 公网 IP ▪ 登录方式：密码 或 SSH 密钥 3.2 连接到腾讯云服务器 • 使用终端 SSH 登录（推荐） • 在你本地电脑（Cursor 终端或系统终端）： • 如果你不是 root 用户，可能是： • 登录成功后，就进入到远程服务器的命令行了。 3.3 在服务器上安装运行环境 更新软件源 • Ubuntu： • CentOS： (2) 安装 Nginx（用来部署静态前端） • Ubuntu： • CentOS： • 安装完后启动： • 在浏览器访问： • 如果看到 nginx 欢迎页面，说明服务器和网络都没问题。 3.4 把前端打包文件用 scp 直接上传（到服务器 • 在本地（不是服务器里）执行： • 说明： ◦ r 表示递归拷贝整个文件夹 ◦ /var/www/your frontend 是部署目录，你可以随便取，比如 /usr/share/nginx/html/your app ◦ r 表示递归拷贝整个文件夹 ◦ /var/www/your frontend 是部署目录，你可以随便取，比如 /usr/share/nginx/html/your app • 如果目录不存在，可以先在服务器上创建： • 然后再 scp 上传。 3.5 配置 Nginx 指向你的前端项目 下面以 Ubuntu 为例。 创建一个 Nginx 站点配置 • 写入（根据你的路径改一下）： 如果是前端单页应用（SPA：React Router / Vue Router），try files ... /index.html 非常重要，不然刷新会 404。 如果是前端单页应用（SPA：React Router / Vue Router），try files ... /index.html 非常重要，不然刷新会 404。 启用这个配置 (3)检查 Nginx 配置有没有问题 • 如果显示 syntax is ok 和 test is successful，就可以重载： (4)访问测试 • 在浏览器进入： • 如果你在配置里用了 server name 是域名，就用： 看到你的前端页面就说明部署成功 🎉 3.6 腾讯云安全组 & 服务器防火墙 如果访问不了，很可能是端口没开。 腾讯云安全组 在腾讯云控制台： 1. 打开「云服务器」→ 找到你的实例 2. 看关联的「安全组」 3. 编辑安全组规则，确保入站规则开放了： ◦ 协议：TCP ◦ 端口：80（HTTP），需要 HTTPS 再加 443 ◦ 来源：0.0.0.0/0（对全网开放，简单测试没问题，正式环境可以再收紧） ◦ 协议：TCP ◦ 端口：80（HTTP），需要 HTTPS 再加 443 ◦ 来源：0.0.0.0/0（对全网开放，简单测试没问题，正式环境可以再收紧） (2).服务器自身防火墙（如果有） • Ubuntu + ufw： • CentOS + firewalld： 3.7 绑定域名（可选） 如果你有域名： 1. 在域名服务商那里添加一条 A 记录： ◦ 主机记录：@ 或 www ◦ 主机记录：@ 或 www ◦ 记录类型：A ◦ 记录值：你的腾讯云服务器 IP 2. 然后在 Nginx 里 server name 改成你的域名 3. 推荐再用 Let’s Encrypt（如 certbot）签发免费 HTTPS 证书 四、官网增长与运营（10～30min） SEO 优化 SEO = 免费流量入口 SEO keywords 就是用户在搜索引擎里会输入的关键词，把这些词布局到网站上，可以让客户更容易搜到我们。 SEO = 免费流量入口 SEO keywords 就是用户在搜索引擎里会输入的关键词，把这些词布局到网站上，可以让客户更容易搜到我们。 • 关键词选得好，来的是精准客户；本质上，它是让搜索引擎知道“我们是做什么的”，也是免费获取客户的重要手段。 • 将下方标签插入到你的head中，填入合适的关键词 网站收录 百度 • https://ziyuan.baidu.com/site/index Google • https://search.google.com/search console Bing https://www.bing.com/webmasters 🎉 最终成果：你将拥有 你会发现： 搭建官网不是难，难的是以前的方式太复杂。 今天，它成为业务人员也能掌握的超级能力。 没写过代码？不会设计？没做过系统？——完全没关系。 本教程带你用 Cursor + HAP + Nano Banana Pro， 以 Vibe Coding（氛围编程） + Vibe Designing（氛围设计） 的方式，像施加魔法一样，把官网做出来。 Vibe = 不靠技术，靠“感觉 + prompt + AI 输出”。 本教程只做一件事： 👉 让你相信：今天搭建官网，比写 PPT 还容易。 没写过代码？不会设计？没做过系统？——完全没关系。 本教程带你用 Cursor + HAP + Nano Banana Pro， 以 Vibe Coding（氛围编程） + Vibe Designing（氛围设计） 的方式，像施加魔法一样，把官网做出来。 Vibe = 不靠技术，靠“感觉 + prompt + AI 输出”。 本教程只做一件事： 👉 让你相信：今天搭建官网，比写 PPT 还容易。 为什么现在做官网已经完全不一样了？ 以前做一个官网，就像在组织一个“小型 IT 项目”： • 要前端工程师做页面 • 要后端工程师做接口 • 要设计师做视觉图 • 要运维帮你部署 • 要排需求、写文档、对齐细节 • 改一点点都要重新走流程 动辄几周起步，改一次要来回沟通好多轮。对于大多数业务人员来说，做官网一直是又贵、又慢、又麻烦的代表。 ✨ 但现在，这件事彻底变了。 今天的官网不再是“技术活”，而是： 👉 你描述你想要什么，AI 和 HAP 自动帮你做出来。 我们把过去几个角色（前端、后端、设计、运维）拆分成了三个 AI 能力最强的领域： ① Vibe Coding（氛围编程）——让 AI 帮你写前端 你不需要写代码，只需要说： “我想做一个产品列表页面，要现代一点，有搜索功能。” “我想做一个产品列表页面，要现代一点，有搜索功能。” AI 编程软件（Cursor/Claude等）就能自动生成： • 页面结构 • 组件布局 • 样式风格 • 动态读取后台数据的代码 你只需要用语言“给 vibe（氛围）”，AI 负责把 vibe 变成真正的前端页面。 ② Vibe Designing（氛围设计）——让 AI 帮你做视觉图 以前： • 找设计师 • 反复对稿 • 做 Banner、背景图、产品场景图 现在你只说一句： “给我一张现代极简、带一点科技感的首页 Banner。” “给我一张现代极简、带一点科技感的首页 Banner。” Nano Banana Pro 会自动生成： • 高清大图 • 完整场景 • 多产品融合 • 光影、构图、氛围感满分 你提供感觉，AI 提供设计。 ③ Vibe Architecting（氛围架构）——通过 HAP MCP 让 AI 帮你搭后台、建数据、跑自动化流程，官网真正能“动起来”的业务闭环 HAP HAP 是整个体系里最重要的部分，它不是“数据库”或“后台系统”那么简单，而是： HAP 👉 一个能让 AI 直接为你构建后台、数据结构与业务流程的应用底座。 借助 HAP MCP，AI 不再只是“生成代码”，而是可以 真实操作、真实创建、真实落地业务系统： • 自动创建数据结构（产品、Banner、内容……） • 自动生成后台管理页面 • 自动编排流程（线索 → 提醒 → 跟进 → 归档） • 自动拉取 API 文档、自动配置 API、自动连前端 • 你一句话，AI 就能让一个后台应用“凭空长出来” 这一切都在 零代码、即时生效 的状态下完成。 ⭐ 于是你的官网变成一个主动运转的系统： • 后台改内容 → 前端立即同步 • 用户提交表单 → 数据实时写入 HAP • 自动化流程接力处理后续动作 • 产品、活动、文章随时维护 而这些——都可以交给 AI + HAP MCP 自动协作完成。 这就是 Self Contained Loop（业务闭环）： 前端展示 → 用户互动 → 数据回到 HAP → 自动化处理 → 再反馈回官网→ 周期循环、持续更新 整个循环不需要工程师，你就能自己掌控。 前端展示 → 用户互动 → 数据回到 HAP → 自动化处理 → 再反馈回官网→ 周期循环、持续更新 整个循环不需要工程师，你就能自己掌控。 🌈 所以，这篇教程能帮你做到什么？ 非常简单： 👉 3 小时内，从零开始做出一个可上线、可管理、可自动化的企业官网。 包括： • 可访问的前端页面 • 可随时调整的后台系统 • 自动读取后台数据的动态官网 • 自动生成的视觉图、Logo、IP 形象 • 线索收集与流程自动化 • 一键部署上线 以前需要一个团队才能完成的事，现在： 💡 你 + AI + HAP 就够了。 🌟 接下来，我们真正动手开始构建 看到这里，你应该已经能感受到： 做官网这件事，已经不再是技术门槛，而是表达能力的门槛。 你需要掌握的事情只有三件： 1. 描述你想要什么页面（Vibe Coding） 2. 描述你想要什么风格（Vibe Designing） 3. 在 HAP 里像填表一样管理数据（业务闭环） 接下来我们正式进入实操，从第一步开始： 用 AI 自动生成一个能跑的官网项目。 二、构建官网项目（30～60min） 包括前端页面+后台管理+动态读取数据 包括前端页面+后台管理+动态读取数据 2.1 前置准备 • 进入 Cursor Setting Tools&MCP填入下方 JSON ◦ 【HAP MCP】：用于直接调用工具搭建HAP应用（注意：需要替换为第 3 步复制的 url） ◦ 【HAP 应用 API 文档】：获取 HAP 应用 API 文档，用于代码中编排 API请求（可直接使用示例内容） ◦ 【HAP MCP】：用于直接调用工具搭建HAP应用（注意：需要替换为第 3 步复制的 url） ◦ 【HAP 应用 API 文档】：获取 HAP 应用 API 文档，用于代码中编排 API请求（可直接使用示例内容） 2.2 一键生成项目 Prompt（真正的 Vibe Coding） 这是给业务人员设计的“一键生成 Prompt”，丢给 Cursor或者其他 AI 编程工具 就能跑出来： 你只需要复制→粘贴→回车，业务需求部分替换成你自己的内容 这是给业务人员设计的“一键生成 Prompt”，丢给 Cursor或者其他 AI 编程工具 就能跑出来： 你只需要复制→粘贴→回车，业务需求部分替换成你自己的内容 • ⚠️注意：为保证项目正常运行，你必须先完成2.1 前置准备 ，你需要根据你的实际需求，更改下方「 🧭 业务需求」部分内容（29 行开始） 2.1 前置准备 2.3 使用 Cursor+HAP MCP自动构建项目 Cursor 打开空文件夹 → 输入 prompt → 自动开始生成。 Cursor 打开空文件夹 → 输入 prompt → 自动开始生成。 开始自动化构建 Cursor打开一个空文件夹，右侧填入prompt后 回车，就开始自动编排执行了 首次运行后效果 你会同时得到： • ✔ 官网前端页面（页面结构、样式、动态数据、多端适配全部帮你生成） • ✔ 后台管理 HAP应用（零代码即可持续改动、无限扩展） 不需要懂技术，也不需要等排期。 完全可以像操作 Excel 一样自己增删字段、扩展表结构、调整业务逻辑。 点几下就能完成，立即生效。 这就是 HAP 的优势：零代码，业务想法随时都能落地。 不需要懂技术，也不需要等排期。 完全可以像操作 Excel 一样自己增删字段、扩展表结构、调整业务逻辑。 点几下就能完成，立即生效。 这就是 HAP 的优势：零代码，业务想法随时都能落地。 • ✔ 动态读取 HAP 数据的真实可运行系统（后台一改 → 官网实时更新，完全打通） 官网 后台管理 2.4 打造品牌IP & 企业文化设计（15～30min） 使用Nano Banana Pro 生成装修设计图（多产品场景融合） 公司有 5 个不同产品（茶几、椅子、沙发、书柜），想看看它们摆在一个温馨的房间里，放在官网展示企业文化 公司有 5 个不同产品（茶几、椅子、沙发、书柜），想看看它们摆在一个温馨的房间里，放在官网展示企业文化 • 极简提示词 • 左边上传单图 → 右边自动生成融合场景。不需要 PS，不需要建模。 更多玩法（参考自 AGI 社区的优秀实践）： • https://waytoagi.feishu.cn/wiki/KLW2wGXeRiwwmukVTUDc9JJSnDb • https://waytoagi.feishu.cn/wiki/OfTywNYCViyy7Nke5DpcbiMfnFb 用 GPT 4o 生成品牌 Logo + 吉祥物 • 参考提示词 使用Nano Banana Pro 设计的品牌 logo与吉祥物 更多玩法（参考自 AGI 社区的优秀实践）： • https://waytoagi.feishu.cn/wiki/V3KYwcR6xizdmkkwejscTXz2n9g • https://waytoagi.feishu.cn/wiki/OfTywNYCViyy7Nke5DpcbiMfnFb 2.5 页面调优（Vibe Coding + Vibe Designing 联动） 更换首页背景图 • 将生成的图片添加至项目中 • 自然语言对话：“请替我更换首页背景图” 加一个吉祥物悬浮窗（用于线索收集） • 示例prompt 根据你实际需求优化调整 完全可以靠自然语言调优迭代 完全可以靠自然语言调优迭代 • 新增表 • 新增模块 • 加产品筛选 • 加搜索功能 2.6调优后效果 三、项目部署上线（30～60min） 在项目部署上线的过程中，难免会遇到一些同学不太熟悉的技术问题，不用害怕，我们完全可以借助 AI 一步一步地帮你完成部署和上线，下面给大家介绍下大致的流程 建议：全程配合 AI 使用 部署过程中，如果你遇到任何报错、卡住的步骤，都可以把： 终端里出现的命令和报错截图 / 文本 你的 Nginx 配置内容 当前执行到的步骤 发给 AI，让 AI 帮你逐行检查、解释、修改命令。 你也可以随时问 AI：「我现在做到第 X 步，下一步该干嘛？」，让 AI 手把手带着你往下做。 在项目部署上线的过程中，难免会遇到一些同学不太熟悉的技术问题，不用害怕，我们完全可以借助 AI 一步一步地帮你完成部署和上线，下面给大家介绍下大致的流程 建议：全程配合 AI 使用 部署过程中，如果你遇到任何报错、卡住的步骤，都可以把： 终端里出现的命令和报错截图 / 文本 你的 Nginx 配置内容 当前执行到的步骤 发给 AI，让 AI 帮你逐行检查、解释、修改命令。 你也可以随时问 AI：「我现在做到第 X 步，下一步该干嘛？」，让 AI 手把手带着你往下做。 我们一步一步来，把「本地前端项目 → 部署到腾讯云服务器」整个流程串起来。下面默认你已经用 Cursor 把前端代码写好了，并且有一个腾讯云账号。 我用的是比较通用、易懂的方式：购买云服务器（CVM）+ Nginx 静态托管。 • 直接问就好可以了，后面步骤仅供参考