零代码建站实战：如何用 Google Gemini 写网页并部署到 WordPress/Hostinger

在这个 AI 蓬勃发展的时代，建站已经不再是程序员的专利。今天我们要实测一下，如何利用 Google 的 Gemini 3 模型，在完全不懂代码的情况下，为一个水泵公司生成一个推广落地页（Landing Page），并演示两种将其部署到 Hostinger (WordPress) 上的方法。

第一步：利用 Gemini 生成网页代码

首先，我们需要给 AI 一个明确的指令。在这个案例中，我要求 Gemini 为一家水泵公司制作一个单页式的落地页。

使用工具： Google Gemini (或者任何类似的 AI 编程助手)
需求： 水泵公司推广落地页，具备产品展示功能。

在生成过程中，我尝试让它制作双语（中英）切换的页面，虽然最终它只生成了英文版，而且还很"调皮"地把背景图搞成了鞋子（而不是水泵），但核心的代码框架——HTML、CSS 和 JavaScript 都在几秒钟内完成了。

拿到代码后，我们需要将其部署到服务器上。这里我有两个方法，强烈推荐第一种。

方法一：通过 Hostinger 文件管理器部署（推荐 ✅）

这是最直接、还原度最高的方法。我们绕过 WordPress 的编辑器，直接把 HTML 文件放到服务器上。

1. 登录 Hostinger 后台：找到你的网站管理面板，点击 File Manager (文件管理器)。Hostinger优惠注册链接点击此处
2. 进入 public_html 目录：这是存放你网站公开文件的地方。
3. 新建文件夹：为了不影响主站，建议新建一个文件夹（例如命名为 test）。这样你的访问路径就是 你的域名.com/test。
4. 新建文件：在刚刚建好的文件夹内，新建一个名为 index.html 的文件。
5. 粘贴代码：将 Gemini 生成的所有代码复制粘贴进去，点击保存。

结果： 打开浏览器访问 你的域名.com/test，你会发现网页完美加载了！排版、样式都和预期一致。如果有图片链接失效（比如那张奇怪的鞋子背景图），你可以在代码中直接替换图片链接。

方法二：通过 WordPress 页面编辑器部署（不推荐 ❌）

很多朋友可能习惯直接在 WordPress 后台新建页面，我也测试了这个方法，但效果并不理想。

1. 新建页面：在 WordPress 后台新建一个页面（例如 test2）。
2. 切换到代码模式：如果你使用的是经典编辑器，切换到“文本”标签；如果使用的是区块编辑器，添加“自定义 HTML”区块。
3. 粘贴代码：把代码粘贴进去。
4. 预览与调整：
   • 排版错乱：你会发现页面内容整体偏左，不像独立文件那样居中。
   • 模板冲突：尝试将页面属性改为“Canvas”或“全宽/单页”模式，虽然能解决部分居中问题，但 WordPress 原有的页眉（导航栏）和页脚会依然存在，严重破坏落地页的沉浸感。
   • 标题残留：即使手动删除了页面标题，顶部依然会留有一大块难看的空白区域。

结论： 在 WordPress 的页面编辑器中直接粘贴整页 HTML 代码，很容易与现有的主题样式发生冲突（CSS 污染），导致布局崩坏。

总结

如果你想用 AI 生成的代码制作一个独立的营销落地页，请直接使用 Hostinger 的文件管理器（File Manager）上传 HTML 文件。这种方法最干净、最稳定，完全不受 WordPress 主题的干扰。

希望这个教程能帮到想尝试 AI 建站的你！

视频实操