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