从一个想法开始

学习人工智能第一章结束后，我产生了一个想法：把学习过程整理成网站。

这个网站不只是存放课程笔记，还要长期记录三类内容：

  • 对人工智能基本概念的理解；
  • 学习过程中的认识修正；
  • AI在科研、教学和电磁工业软件中的实践。

网站最终定名为《跟着ChatGPT学AI》。

最初的问题并不是“网页怎么写”，而是：

一个没有现代网站开发经验的人，能否借助AI，从零完成一个真正可以长期维护的网站？

答案是可以，但前提不是简单地让AI生成代码，而是建立清楚的人机协作方式。

先确定网站要解决什么问题

项目开始时，我们没有立即写代码，而是先确定网站定位。

网站面向高校教师、科研人员和工程技术人员，记录一位专业背景较强、但AI基础较弱的学习者，如何系统理解人工智能，并逐步把它用于真实工作。

网站首期设置四个栏目：

  • AI学习课程；
  • 章节复习；
  • AI实践；
  • AI与电磁工业软件。

这一步很重要。网站如果没有清楚定位，很容易变成零散文章的集合。先确定内容结构，后面的页面、技术和视觉设计才有依据。

人和AI如何分工

这次项目采用了明确分工：

  • 我负责提出目标、决定方向、提供内容、实际操作和最终验收；
  • GPT负责网站定位、产品结构、任务拆解、内容设计和质量审查；
  • Codex负责读取本地项目、修改代码、运行构建和报告结果；
  • Git负责保存每一次可靠修改；
  • GitHub负责远程托管代码；
  • Cloudflare Pages负责自动构建和公网发布。

这里最关键的认识是：

AI可以承担大量执行工作，但不能替代项目负责人。

哪些内容发布、哪些功能暂缓、页面是否好用、结果是否符合真实需求，都必须由人判断。

为什么选择Astro

网站V1.0选择了Astro静态网站方案，主要基于四点考虑：

第一，网站以课程和文章为主，不需要复杂后台。

第二，Markdown适合长期写作。课程、复习文档和专题文章都可以作为独立文件管理。

第三，静态网站结构简单、速度快，部署成本低。

第四，Astro允许后续逐步扩展，但V1.0不必引入React、数据库、登录、评论等复杂功能。

最终技术组合是：

  • Astro；
  • TypeScript；
  • Markdown内容集合；
  • 原生CSS；
  • Git与GitHub；
  • Cloudflare Pages。

这个选择避免了“先搭一个复杂系统，再考虑内容”的常见错误。

从最小网站开始

开发环境是在一台全新的Windows 11电脑上搭建的。

依次安装了：

  • Node.js；
  • Git；
  • VS Code；
  • Codex。

项目目录建立在：

D:\AI-Projects\genzhe-chatgpt-xue-ai

第一步只做一个能够启动的最小Astro网站。确认本地服务器、页面路由和构建流程正常后，再逐步增加内容系统。

这种方式看似慢，实际上更稳。每次只解决一个问题，出错时更容易判断原因。

建立内容系统

网站不是把文字直接写进网页，而是建立了四类内容集合：

  • courses；
  • reviews；
  • practices；
  • electromagnetic-ai。

课程内容又规定了统一编号：

  • lesson: 0代表导读；
  • lesson: 1—98代表正式课程；
  • lesson: 99代表章末总结。

这套规则解决了课程排序、章节统计和页面导航问题，也为后续第二章、第三章继续扩展留下了空间。

文章标题、摘要、日期、章节和状态等信息，都放在Markdown文件的frontmatter中统一管理。

把第一章真正放进网站

网站骨架完成后，第一章内容开始正式迁入。

第一章包括：

  • 一篇导读；
  • 七节课程；
  • 一篇章末总结；
  • 一篇复习文档；
  • 一个“AI与电磁工业软件”专题。

迁移过程中，并不是简单复制聊天内容。

第一、二节最初篇幅过长，重复较多，后来重新压缩。后续各节控制在更适合网页阅读的长度，尽量做到一节解决一个核心问题。

这一过程让我认识到：

聊天内容不等于正式内容。

聊天适合探索，网站文章必须经过重新组织、删减和校正。

从“能打开”到“适合阅读”

最初的网站虽然能运行，但阅读体验还比较基础。

随后逐步增加了：

  • 章节分组；
  • 面包屑；
  • 文章目录；
  • 上一篇和下一篇；
  • 章末总结标识；
  • 栏目列表；
  • 当前导航状态；
  • 移动端目录；
  • 短页面页脚定位。

首页也经历了一次完整重构。

新版首页不再只是文章入口，而是同时说明：

  • 网站是做什么的；
  • 当前学习到哪里；
  • 六章课程如何规划；
  • 第一章已经形成哪些成果；
  • 人和AI如何协作。

视觉风格最终采用深蓝、白色和浅灰色，尽量保持理性、简洁和适合长文阅读。

上线前补齐基础能力

正式发布前，网站补充了必要的上线能力：

  • 页面标题；
  • description；
  • canonical；
  • Open Graph；
  • favicon；
  • 自定义404页面；
  • robots.txt；
  • sitemap；
  • 草稿过滤；
  • 死链接检查。

网站建设实践文章当时仍不完整，因此被暂时设为草稿，没有提前作为正式内容发布。

这也是内容管理的重要原则：

没有完成的内容，不应因为“页面已经存在”就进入正式网站。

GitHub与Cloudflare Pages

本地网站稳定后，代码被推送到GitHub。

整个过程包括：

  1. 注册GitHub账号；
  2. 创建空仓库；
  3. 将本地仓库连接到远程仓库；
  4. 推送main分支；
  5. 在Cloudflare Pages中连接GitHub；
  6. 设置构建命令；
  7. 设置输出目录；
  8. 配置SITE_URL；
  9. 完成第一次公网部署。

网站最终发布到：

https://genzhe-chatgpt-xue-ai.pages.dev

从此以后，只要本地修改经过提交并推送到GitHub，Cloudflare Pages就会自动重新构建和发布。

这样形成了完整工作流：

本地修改
→ Git提交
→ 推送GitHub
→ Cloudflare自动部署
→ 公网更新

最有价值的一次调试：真实设备适配

网站在电脑和390px模拟窗口中显示正常，但在真实折叠手机上出现了问题。

折叠手机处于折叠和展开状态时，页面布局没有按照预期切换。最初我们怀疑浏览器开启了桌面模式，也怀疑过CSS断点设置。

后来，我们专门建立了一个临时视口诊断页，在不同设备、浏览器和屏幕状态下采集真实数据。

结果发现：

  • 折叠手机折叠时，视口宽度约为375px；
  • 折叠手机展开时，视口宽度约为700px；
  • iPhone横屏宽度虽然达到852px，但高度只有349px；
  • iPad竖屏约为820×1126；
  • iPad横屏约为1180×766。

这说明，仅按宽度划分手机、平板和电脑并不可靠。视口高度同样会影响布局是否适合采用双栏。

最终规则调整为：

  • 默认使用手机单栏；
  • 宽度至少680px、高度至少600px时进入平板双栏；
  • 宽度至少1050px、高度至少500px时进入桌面布局。

这套规则可以较好地覆盖：

  • 普通手机竖屏；
  • 手机横屏；
  • 折叠手机折叠状态；
  • 折叠手机展开状态；
  • 平板竖屏；
  • 平板横屏；
  • 电脑显示器。

调试过程中还发现，折叠手机上的旧版Chrome对现代脚本和屏幕状态变化支持较差。诊断脚本最初无法运行，折叠和展开后也不能自动切换布局。升级到新版Chrome后，这些问题随之消失。

这次调试说明：

模拟器通过，不代表真实设备一定通过；设备显示异常，也不一定都是网站代码的问题。

屏幕形态、CSS视口、系统缩放和浏览器内核版本，都会影响最终效果。

最终成果

网站V1.0已经完成：

  • 正式首页；
  • 第一章完整课程；
  • 第一章复习文档；
  • AI与电磁工业软件专题；
  • 文章阅读系统；
  • 手机、平板和电脑三档布局；
  • Git版本管理；
  • GitHub远程仓库；
  • Cloudflare自动部署；
  • sitemap、robots和404；
  • 多设备真实验收。

更重要的是，这次项目形成了一套可以继续复用的方法。

这次实践带来的认识

第一，不会现代网站开发，并不意味着无法完成网站项目。AI显著降低了技术门槛。

第二，AI生成代码只是项目的一部分。真正决定结果的是目标、约束、验证和持续修正。

第三，GPT和Codex承担的角色不同。GPT更适合规划、判断和审查，Codex更适合直接操作项目。

第四，Git不是程序员专用工具，而是AI协作中非常重要的安全机制。每个稳定节点都应形成提交。

第五，真实问题往往出现在最后阶段。设备适配、浏览器版本、部署缓存，都无法仅靠代码生成解决。

第六，好的AI实践不是“让AI一次做完”，而是：

明确目标
→ 拆分任务
→ 执行
→ 检查
→ 修正
→ 提交
→ 真实验收

下一步

网站上线不是结束，而是长期建设的开始。

下一阶段将进入第二章学习，并继续完善：

  • AI学习课程；
  • 章节复习；
  • AI实践案例；
  • 电磁工业软件专题。

后续还可以逐步考虑：

  • 绑定正式域名；
  • 增加站内搜索；
  • 增加访问统计；
  • 建立更完整的课程导航。

但V1.0阶段最重要的目标已经实现：

一个从真实学习过程出发的网站，已经从想法变成了可以公开访问、持续更新的知识平台。

继续阅读

本文重点介绍网站项目的目标、过程、关键决策和人机协作方法。为了避免主文章被大量安装步骤、终端命令和故障细节淹没，本次实践还将整理两份配套文档。

操作附录

《操作附录：在Windows 11上用Astro、GitHub和Cloudflare Pages发布网站》

附录将按实际操作顺序记录：

  • Node.js、Git和VS Code的安装；
  • Astro项目创建；
  • 本地运行与构建；
  • Git版本管理；
  • GitHub仓库创建和代码推送；
  • Cloudflare Pages配置；
  • SITE_URL环境变量；
  • 自动部署与上线检查。

阅读操作附录

问题与经验清单

《问题与经验清单：一次AI建站实践中的真实故障与解决方法》

这份清单将集中整理项目中遇到的问题，包括：

  • PowerShell执行策略；
  • Git身份配置；
  • Markdown内容与页面结构；
  • 响应式断点；
  • 折叠屏真实设备测试；
  • 旧版浏览器兼容；
  • Cloudflare部署和缓存；
  • AI任务描述不清导致的返工。

每个问题都将说明现象、原因、解决方法和可复用经验。

查看问题与经验清单