MonkeyCode 教程系列个人博客站实战 MC-019

MC-019 · 实战篇第1期 · 约1800字 · 实操 20 分钟

· · ·官网链接注册更放心哦https://monkeycode-ai.com/?ic=019e0aed-c823-783c-b08a-4f030f891e4e

本期目录

1. 开篇：理论到此结束，实战正式开始

2. Step 1：用 SDD 写好需求

3. Step 2：创建项目

4. Step 3：核心功能实现

5. Step 4：添加示例文章

6. Step 5：部署上线

7. Step 6：迭代优化

8. 漫画解读：小葵的博客站实战

9. 总结与下期预告

· · ·

开篇：理论到此结束，实战正式开始

恭喜你走到了这里。MC-001 到 MC-018，你已经掌握了 MonkeyCode 的核心能力。理论部分到此全部结束。

从 MC-019 开始进入实战阶段——每期做一个完整的项目，从需求到上线。

第一个实战项目：从零搭建一个个人博客站。为什么选博客？因为它涵盖了 Web 开发的核心要素：页面展示、内容管理、路由导航、响应式布局、部署上线。

· · ·

Step 1：用 SDD 写好需求

还记得 MC-018 吗？动手之前，先写 SDD。

一个支持 Markdown 文章发布、标签分类、响应式布局的个人博客系统，可部署上线访问。

产品设计

• 首页：展示最新文章列表

• 文章详情页：Markdown 渲染 + 代码高亮

• 标签筛选 + 关于页

• 响应式 + 深色主题

有了这份 SDD，直接丢给 MonkeyCode，AI 就能按规格一次做出来。

· · ·

Step 2：创建项目

打开 MonkeyCode，输入你的 SDD：

创建一个个人博客项目，要求如下：
1. 首页展示文章列表
2. 文章详情页支持 Markdown 渲染和代码高亮
3. 支持标签筛选功能
4. 深色主题，响应式布局
5. 纯前端实现，使用 marked.js 和 highlight.js

MonkeyCode 会自动创建项目目录，生成代码文件。

· · ·

Step 3：核心功能实现

文章列表

文章数据存储在 posts.js 中，以 JSON 数组形式组织。

Markdown 渲染

使用 marked.js 转 HTML，highlight.js 代码高亮。

标签筛选

提取所有标签 → 点击过滤数组 → 重新渲染。

响应式布局

CSS 媒体查询，手机单列、桌面双列。

· · ·

Step 4：添加示例文章

博客框架搭好后，需要填充内容：

• 方式一

  ：手动写文章 — posts.js 中添加文章对象

• 方式二

  ：让 AI 生成 — 告诉 MonkeyCode 自动生成

• 方式三

  ：导入已有 Markdown 笔记

· · ·

Step 5：部署上线

在 MonkeyCode 中输入：

帮我把这个博客项目部署上线。

MonkeyCode 自动完成：构建优化 → 上传文件 → 配置域名和 HTTPS → 返回访问链接。

· · ·

Step 6：迭代优化

博客上线后持续迭代：

每次迭代都是"写 SDD → 交给 AI → 检查效果 → 部署更新"的循环。

· · ·

漫画时间

小葵的博客站实战之旅

· · ·

漫画 · 封面：个人博客站实战

· · ·

漫画 · Step 1：用SDD写好需求

· · ·

漫画 · Step 2：创建项目

· · ·

漫画 · Step 3：核心功能实现

· · ·

漫画 · Step 4-5：添加内容与部署上线

· · ·

漫画 · Step 6：迭代优化

· · ·

漫画 · 总结：人类负责想，AI负责做

· · ·

总结与下期预告

MC-019 核心流程

• SDD 写需求

   — 把想法变成文档

• AI 搭框架

   — 自动创建项目

• 核心功能

   — 文章列表、Markdown、标签、响应式

• 填充内容

   — 手动 / AI / 导入

• 部署上线

   — 一句话部署

• 持续迭代

   — 代码审查 + MCP + 定时任务

AI 编程的完整工作流：人类负责想，AI 负责做。

下一期 MC-020：待办事项应用——状态管理和本地存储。

· · ·

MonkeyCode 教程系列 · MC-019

官网 · 开源 · 文档

作者：不爱土豆唯爱马铃薯