AI 协同开发 · 学习笔记 · 作品展示https://wmm-site.pages.dev/zh_CNhttps://wmm-site.pages.dev/posts/hello-world/https://wmm-site.pages.dev/posts/hello-world/这是我的第一篇博客文章，记录个人网站的搭建过程Mon, 22 Jun 2026 00:00:00 GMT<h1>Hello World - 我的个人网站上线了</h1> <p>欢迎来到我的个人空间！</p> <h2>关于这个网站</h2> <p>这是一个使用 Astro + Fuwari 模板搭建的个人网站，部署在 Cloudflare Pages。</p> <h2>技术栈</h2> <ul> <li><strong>框架:</strong> Astro 5.13.10</li> <li><strong>样式:</strong> Tailwind CSS 3.4.19</li> <li><strong>部署:</strong> Cloudflare Pages</li> <li><strong>搜索:</strong> Pagefind</li> </ul> <h2>未来计划</h2> <ul> <li>[ ] 添加更多文章</li> <li>[ ] 完善作品集</li> <li>[ ] 建立知识花园</li> </ul> https://wmm-site.pages.dev/posts/my-first-article/https://wmm-site.pages.dev/posts/my-first-article/记录我如何使用 AI 工具进行软件开发，从零基础到搭建个人网站Mon, 22 Jun 2026 00:00:00 GMT<h1>我的 AI 协同开发之旅</h1> <h2>背景</h2> <p>作为一个对编程感兴趣但没有系统学习过的人，我一直想搭建一个属于自己的个人网站。传统的学习路径是先学 HTML/CSS/JavaScript，再学框架，最后才能动手做项目。但在 AI 时代，我选择了一条不同的路。</p> <h2>AI 协同开发的理念</h2> <p>AI 协同开发不是让 AI 代替你写代码，而是：</p> <ul> <li><strong>你作为架构师</strong>：负责需求分析、技术选型、质量把控</li> <li><strong>AI 作为执行者</strong>：负责代码实现、问题排查、文档生成</li> </ul> <p>这种模式让我能够：</p> <ol> <li>跳过繁琐的语法学习，直接理解架构和逻辑</li> <li>快速验证想法，迭代改进</li> <li>在实践中学习，而不是在理论中打转</li> </ol> <h2>技术选型</h2> <p>经过研究，我选择了以下技术栈：</p> <ul> <li><strong>Astro</strong>：静态站点生成器，性能优秀</li> <li><strong>Tailwind CSS</strong>：原子化 CSS 框架</li> <li><strong>Cloudflare Pages</strong>：免费的静态网站托管</li> <li><strong>Obsidian</strong>：Markdown 编辑器，用于内容管理</li> </ul> <h2>过程</h2> <p>整个搭建过程分为三个阶段：</p> <ol> <li>环境搭建和模板初始化</li> <li>内容定制和博客系统</li> <li>作品集和知识花园</li> </ol> <p>每个阶段都有明确的交付物和验收标准。</p> <h2>收获</h2> <p>通过这个项目，我学到了：</p> <ul> <li>现代前端项目的基本结构</li> <li>Git 版本控制的工作流程</li> <li>CI/CD 自动化部署的概念</li> <li>AI 协同开发的最佳实践</li> </ul> <h2>未来计划</h2> <p>接下来，我计划：</p> <ul> <li>完善网站的功能和视觉设计</li> <li>持续输出技术博客</li> <li>建立个人知识花园</li> <li>探索更多 AI 协同开发的可能性</li> </ul> https://wmm-site.pages.dev/posts/astro-guide/https://wmm-site.pages.dev/posts/astro-guide/Astro 是一个现代的静态站点生成器，本文介绍其核心概念和基本用法Mon, 22 Jun 2026 00:00:00 GMT<h1>Astro 框架入门指南</h1> <h2>什么是 Astro？</h2> <p>Astro 是一个专为内容驱动网站设计的静态站点生成器。它的核心理念是"零 JavaScript 默认"——生成的网站在客户端只加载最少的 JavaScript。</p> <h2>核心特性</h2> <h3>1. 岛屿架构（Islands Architecture）</h3> <p>Astro 的岛屿架构允许你：</p> <ul> <li>在页面中嵌入交互式组件</li> <li>只有交互式组件才会加载 JavaScript</li> <li>静态内容保持零 JS</li> </ul> <h3>2. 内容集合（Content Collections）</h3> <p>Astro 5 引入了内容集合 API，让你可以：</p> <ul> <li>类型安全地管理 Markdown 内容</li> <li>自动生成路由</li> <li>验证 frontmatter 数据</li> </ul> <h3>3. 多框架支持</h3> <p>Astro 支持多种前端框架：</p> <ul> <li>React</li> <li>Vue</li> <li>Svelte</li> <li>Solid</li> <li>Preact</li> </ul> <h2>为什么选择 Astro？</h2> <p>对于博客和内容网站，Astro 有以下优势：</p> <ul> <li><strong>性能优秀</strong>：生成的网站加载速度极快</li> <li><strong>SEO 友好</strong>：静态 HTML 对搜索引擎友好</li> <li><strong>易于部署</strong>：可以部署到任何静态托管服务</li> <li><strong>开发体验好</strong>：热重载、TypeScript 支持</li> </ul> <h2>总结</h2> <p>Astro 是搭建个人网站的理想选择，特别是对于内容驱动的博客和文档站点。</p> https://wmm-site.pages.dev/posts/cloudflare-pages/https://wmm-site.pages.dev/posts/cloudflare-pages/Cloudflare Pages 提供免费的静态网站托管，本文介绍如何使用它部署 Astro 站点Mon, 22 Jun 2026 00:00:00 GMT<h1>使用 Cloudflare Pages 部署静态网站</h1> <h2>为什么选择 Cloudflare Pages？</h2> <p>Cloudflare Pages 是一个现代化的静态网站托管平台，具有以下优势：</p> <ul> <li><strong>免费额度充足</strong>：每月 500 次构建，无限带宽</li> <li><strong>全球 CDN</strong>：内容分发到全球 200+ 节点</li> <li><strong>自动 HTTPS</strong>：免费的 SSL 证书</li> <li><strong>Git 集成</strong>：推送代码自动部署</li> </ul> <h2>部署流程</h2> <h3>1. 准备代码</h3> <p>确保你的项目已经推送到 GitHub。</p> <h3>2. 连接 Cloudflare</h3> <ol> <li>登录 Cloudflare Dashboard</li> <li>进入 Pages 项目</li> <li>连接 GitHub 仓库</li> </ol> <h3>3. 配置构建设置</h3> <ul> <li><strong>构建命令</strong>：<code>npm run build</code> 或 <code>pnpm run build</code></li> <li><strong>输出目录</strong>：<code>dist</code></li> <li><strong>Node.js 版本</strong>：18 或更高</li> </ul> <h3>4. 部署</h3> <p>推送代码后，Cloudflare 会自动构建和部署。</p> <h2>自定义域名</h2> <p>Cloudflare Pages 支持自定义域名：</p> <ol> <li>在项目设置中添加自定义域名</li> <li>配置 DNS 记录</li> <li>等待 SSL 证书签发</li> </ol> <h2>总结</h2> <p>Cloudflare Pages 是部署静态网站的最佳选择之一，特别适合个人博客和项目文档。</p>