不写一句代码，却把页面跑通了——一次国产 AI 工具 Evol 的“静态博客生成”实验（附源码）

作者：
@xxyuyu
日期：
2025-11-17

  1. 前言（省流版）
    最近博客园插入了「AI 写作」话题，我也来蹭个热度。
    把一句中文需求丢进 Evol，让它帮我「生成一个可部署的静态博客首页」，结果：
    0 配置，0 依赖，纯原生 HTML+CSS+JS
    直接扔 GitHub Pages 跑通 HTTPS
    体积 112 KB，移动端 Lighthouse 91 分

下面记录完整过程与源码，供园友批判。

  1. 为什么选「静态博客」做实验
    页面元素固定（导航、文章列表、 footer），好验证生成质量
    不需要后端，方便放 GitHub Pages 给大伙在线看效果
    如果 AI 连静态页都搞不定，那就可以省得继续吹了（笑）
  2. 实验环境
    工具：Evol（https://www.evolai.cn）
    浏览器：Edge 120
    部署：GitHub Pages（默认域名，无 CDN）
    评分：Lighthouse 6 项平均值
  3. Prompt 原文（复制即可复现）
    复制
    生成一个静态博客首页，要求：
  4. 顶部深色导航栏，左侧博客名，右侧菜单「首页/归档/关于」
  5. 下方文章卡片流，包含标题、摘要、发布时间、阅读数
  6. 使用 CSS Grid 布局，适配移动端
  7. 主题色 #1e88e5，hover 动画使用 transition
  8. 不要任何框架，纯原生实现
  9. 单个 HTML 文件，样式内联在 head，脚本放在末尾
  10. 生成结果一览
    表格
    复制
    指标 数值
    生成耗时 18 s
    文件数量 1 （single-html）
    代码行数 267
    体积 112 KB
    移动端 Lighthouse 91/100
    控制台报错 0
  11. 核心代码片段（已删注释，方便阅读）
    HTML
    预览
    复制
    <!doctype html>
MyBlog

样本文章标题

摘要：这是由 AI 生成的摘要，用于演示卡片流效果……

2025-11-17 · 阅读 42
6. 部署步骤（写给第一次用 GitHub Pages 的园友） 新建仓库 blog-demo → Settings → Pages → Branch 选 main /root → Save 把上面 single.html 重命名为 index.html 推到仓库 等待 30 秒，访问 https://你的用户名.github.io/blog-demo/ 即可看到线上效果。 （我的是：https://coderxiaohui.github.io/blog-demo/，供对照） 7. 体验总结 优点 纯中文一句到位，不用记框架语法 生成即静态文件，直接塞 CDN 或 GitHub Pages，无额外构建 代码干净，无埋点，可自由二次修改 不足 文章数据写死，需手动替换或自己写脚本注入 JSON 深色/浅色主题切换需要再发一次 Prompt 对于「标签云」「搜索」等动态能力，目前还需人脑补逻辑 8. 把它放进日常开发工作流？ 表格 复制 场景 建议 快速出原型 直接把 Evol 当「高保真低保码」工具，省 1~2 小时 博客园自定义皮肤 生成原生 HTML 后，再把园园模块变量粘进去，10 分钟搞定 学生作业/毕设 先让 AI 搭骨架，再逐行读源码，比从零抄示例快得多 9. 官方入口（必须贴，博客园规范） Evol官网：https://www.evolai.cn 目前注册送 50 次生成，每日签到还能续，不绑卡、不实名，适合白嫖体验。 10. 评论区开放 复现过程遇到 404/样式错乱？贴链接我帮你看 想生成「代码高亮」「夜间模式」却写不好 Prompt？把需求发出来，我帮你们试 点赞过 100，我追加下一篇《用 Evol 生成带搜索的 JAMstack 博客并自动部署到 Vercel》，继续踩坑给大家看。

posted on 2025-11-17 16:45  xx_yu_yu_yu  阅读(3)  评论(0)    收藏  举报

导航