如何用Stablo从0快速搭建个人博客JAMStack博客模板7大核心功能逐步上手教程【免费下载链接】stabloStablo is a minimal blog website template built with Next.js, TailwindCSS Sanity CMS项目地址: https://gitcode.com/gh_mirrors/st/stabloStablo 是一款基于Next.js Tailwind CSS Sanity CMS构建的极简 JAMStack 博客模板免费开源帮你从 0 快速搭建个人博客。无需手写页面内容在 Sanity 后台可视化编辑前端自动静态生成加载飞快还自带暗色模式和移动端适配。本文带你 10 分钟内跑起本地博客并逐一上手它的 7 大核心功能 一、3 步跑起你的博客最快上手步骤步骤 1克隆仓库git clone https://gitcode.com/gh_mirrors/st/stablo步骤 2安装依赖推荐使用pnpm更省磁盘空间yarn同样可行pnpm install步骤 3启动前端与后台# 启动 Next.js 前端访问 http://localhost:3000 pnpm dev # 另开一个终端独立启动 Sanity Studio也可访问 /studio 路由 pnity sanity若页面显示为空属正常现象——还需要导入演示内容见下一节。二、导入演示数据立刻拥有完整博客项目内置了一份生产演示数据集 lib/sanity/data/production.tar.gz包含文章、作者、分类和图片。安装 Sanity CLI 并登录sanity login后执行pnpm sanity-import刷新浏览器即可看到与官方演示一致的完整博客内容 ✨三、7 大核心功能逐步上手1. Sanity CMS 可视化写文章在/studio打开后台选中新建的 Post填写标题、摘要、作者、分类、封面图即可正文支持标题、引用、列表、加粗/斜体/行内代码、图片、代码块、视频嵌入和表格等丰富块全部可视化操作不碰一行代码。文章数据结构定义在 lib/sanity/schemas/post.js正文块扩展在 lib/sanity/schemas/blockContent.js。2. JAMStack 架构静态生成极速加载内容存 Sanity页面在构建时静态生成generateStaticParams配合 CDN 缓存访客打开即见性能远超传统数据库博客。查询语句集中在 lib/sanity/groq.js数据获取入口为 lib/sanity/client.ts。3. 暗色 / 亮色模式一键切换导航栏右侧提供 System / Dark / Light 三档切换选择会被记住。实现基于next-themes源码见 components/themeSwitch.js。4. 移动端自适应布局全站基于 Tailwind CSS 移动优先设计从手机到桌面自动重排。样式入口styles/tailwind.css 与 tailwind.config.js。5. Archive 归档页 自动分页Archive 页自动按发布时间倒序列出全部文章并内置分页组件文章再多也不拥挤。页面逻辑app/(website)/archive//archive/)分页组件components/blog/pagination.tsx。6. 开箱可用的联系页面Contact 页基于 Web3Forms访客填写表单即可收到邮件无需自建后端。源码app/(website)/contact//contact/)。7. 内置 SEO 优化每页自动注入标题模板、描述、关键词与 OpenGraph/Twitter 卡片见 app/(website)/layout.tsx/layout.tsx)构建时自动生成站点地图next-sitemap.config.js产物如 public/sitemap.xml封面分享图使用 1200x630 的 public/img/opengraph.jpg社交转发效果更佳。四、新手常见问题问题解决办法页面空白未导入数据先执行pnpm sanity-import后台连不上检查.env.local中NEXT_PUBLIC_SANITY_PROJECT_ID是否正确环境变量说明见 lib/sanity/config.ts 中 projectId / dataset 配置逻辑想改站点标题、描述在 Sanity 后台的 Settings 中修改五、写在最后Stablo 用Next.js 的速度 Tailwind 的极简 Sanity 的可视化编辑把写博客这件事降到了最低门槛克隆、安装、导入数据、开始写作全程不到 10 分钟。如果你正在找一款免费的 JAMStack 个人博客模板它值得作为你的第一个选择 【免费下载链接】stabloStablo is a minimal blog website template built with Next.js, TailwindCSS Sanity CMS项目地址: https://gitcode.com/gh_mirrors/st/stablo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考