blog
Next.js · React / 博客 · 作者 geekskai
基于 Next.js 与 Tailwind CSS 的博客模板,使用 MDX 撰写内容,内置 SEO、评论与订阅集成,支持 Vercel 和 Netlify 一键部署。

模板详细介绍
这是一个基于 Next.js 13+ 与 TypeScript 的博客模板,使用 Tailwind CSS 进行样式设计,并通过 Contentlayer 管理 MDX 内容。仓库提供 MIT 许可证,README 中给出了从克隆、安装依赖到启动开发服务器的完整命令,也支持通过 Vercel 或 Netlify 按钮一键部署,以及导出静态站点。
内容层面,模板支持服务端语法高亮、KaTeX 数学公式、引用与参考文献、GitHub 风格提示块、多作者和嵌套路由。站点配置集中在 data/siteMetadata.js,主题可在 tailwind.config.js 中扩展。评论可接入 Giscus、Utterances 或 Disqus,分析支持 Umami、Plausible 和 Google Analytics,邮件订阅可对接 Mailchimp、ConvertKit、Buttondown、Klaviyo、Revue、EmailOctopus 和 Beehiiv 等服务。
README 还提到模板内置了职位价值计算器等工具,并保留了第三方项目的版权声明。仓库在 GitHub 上获得约 104 颗星,演示站点为 geekskai.com。
主要特点
- 使用 Next.js 13+、TypeScript 与 Tailwind CSS 构建
- 通过 Contentlayer 与 MDX 撰写文章,支持 KaTeX 数学公式和引用
- 内置 SEO 相关配置与 sitemap 生成
- 支持 Giscus、Utterances、Disqus 等评论系统
- 可接入多种分析工具与邮件订阅服务
- 提供 Vercel、Netlify 一键部署及静态导出方式
适用场景
- 搭建个人技术博客并发布 Markdown/MDX 文章
- 需要评论、订阅和访问统计等集成能力的博客站点
- 希望使用 Next.js 与 Tailwind CSS 定制主题的开发者
- 通过 Vercel 或 Netlify 快速上线静态博客
适合人群
- 熟悉 React 与 Next.js 的前端开发者
- 习惯用 Markdown/MDX 写作的技术博主
- 需要 SEO 友好且可自定义样式的博客项目
- 计划部署到 Vercel 或 Netlify 的个人站点
使用前需要核对
- 克隆仓库后使用 yarn 安装依赖,再运行 yarn dev 启动开发环境
- Windows 系统需在每次启动前执行 $env:PWD = $(Get-Location).Path
- 站点信息在 data/siteMetadata.js 中配置,主题样式可在 tailwind.config.js 中扩展
- 评论、分析和订阅功能需要按 README 在 .env 中填写对应服务的密钥或 ID
- 静态导出可执行 EXPORT=1 UNOPTIMIZED=1 yarn build
本介绍由 AI 根据目录元数据和仓库 README 整理,实际功能以原仓库为准。
功能与适用范围
目录记录的用途为博客,主要技术栈为Next.js、React。功能是否完整实现,需要在源码和演示中进一步确认。
- Next.js
- React
- 博客