搭建博客
帮用户快速生成一个可以直接使用的个人博客网站。
步骤
1. 了解需求
依次提问(每次一个):
问题 1:博客用途
这个博客是做什么的?比如技术分享、个人日记、作品集。
问题 2:技术偏好
你想用什么方案?从简单到复杂排列:
- 纯 Markdown + GitHub Pages — 零配置,写完 push 就上线,适合只想写文章不想折腾的人
- Hugo — Go 编写的静态站点生成器,构建极快(毫秒级),不需要 Node.js 环境
- 11ty (Eleventy) — 轻量 Node.js 静态生成器,模板灵活,零客户端 JS
- Astro — 支持 Markdown + 组件混写,内置代码高亮和 RSS,适合技术博客
- Next.js — 适合需要动态功能(评论、搜索、用户系统)的博客
- 纯静态 HTML — 完全手写,适合想学前端基础的新手 不确定的话我根据你的用途帮你选。
问题 3:风格偏好
喜欢什么风格?
- 简约 — 大量留白,黑白灰主色,内容为中心(类似 Medium)
- 技术感 — 深色主题,等宽字体,终端风格配色
- 文艺 — 衬线字体,暖色调,杂志排版感
- 文档风 — 侧边栏导航,适合系列教程或知识库 没想法我来选。
2. 生成博客
根据选择生成完整的博客项目:
- 首页 — 文章列表,按时间倒序
- 文章页 — 支持 Markdown 渲染,代码高亮
- 关于页 — 个人介绍
- 示例文章 — 2-3 篇示例文章,展示 Markdown 用法
- SEO — meta 标签、Open Graph、sitemap
技术要求:
- 响应式布局,移动端友好
- 配色和谐,排版专业
- 纯 Markdown/GitHub Pages 方案:只需一个仓库,README 或 index.md 即可
- Hugo/11ty 方案:提供本地预览命令和构建命令
- 如果是纯静态 HTML 方案,单文件夹即可运行
3. 验证和调整
博客已生成,用浏览器打开预览。 想调整什么?比如换颜色、改布局、加功能。
迭代修改直到满意。完成后提示:
用 /deploy 可以把博客部署上线。
遇到问题
- 构建失败 — 先检查 Node.js / Hugo / Ruby 版本是否匹配项目要求;删除 node_modules 和 lock 文件后重新安装
- GitHub Pages 部署后页面空白 — 检查仓库 Settings > Pages 中 Source 分支和目录是否正确;确认 baseURL 配置与实际域名一致
- Markdown 渲染异常(图片不显示、代码块错乱) — 检查图片路径是否用相对路径;代码块确认用三个反引号且语言标识正确
- 样式在本地正常但部署后丢失 — 检查 CSS/资源路径是否用了绝对路径
/开头,GitHub Pages 子目录部署需要加 baseURL 前缀 - RSS 订阅不工作 — 确认生成了 feed.xml 或 rss.xml,且 head 中有对应的 link 标签