Next.jsReact博客启动器

blogging-website-template — Next.js 博客模板

作者 thekamalkashyap

基于 Next.js 与 Tailwind CSS 的博客站点模板，由 tailwind-nextjs-starter-blog 引导而来，支持 MDX 写作、标签与多作者、PWA 离线与安装、明暗主题，并内置 RSS 与站点地图等 SEO 配置。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

3 个预览视图

桌面端首页1 / 3

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-02查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

使用 MDX 写作，可在 Markdown 文档中直接写 JSX

支持标签独立页面、多作者与博客文章嵌套路由

服务端语法高亮，支持行号与行高亮（rehype-prism-plus）

PWA 能力：离线访问、可安装为原生应用、自定义安装按钮

内置明暗主题、顶部进度条与移动端适配视图

SEO 相关配置包含 RSS 订阅与站点地图

模板详细介绍

这是一个面向个人或小型团队的博客站点模板，使用 Next.js 与 React 构建，样式基于 Tailwind CSS，并带有主色属性便于调整配色。README 说明该模板由 Timlrx 的 tailwind-nextjs-starter-blog 引导而来，定位为渐进式 Web 应用（PWA）。

内容层面，模板使用 MDX 撰写文章，可在 Markdown 中写 JSX；支持标签（每个标签生成独立页面）、多作者以及博客文章的嵌套路由。代码高亮在服务端完成，支持行号与行高亮，依赖 rehype-prism-plus。

站点能力上，模板提供明暗主题、顶部进度条、移动端适配视图、离线访问与安装为原生应用，并配有自定义 PWA 安装按钮。SEO 方面包含 RSS 订阅与站点地图等配置。

使用限制与注意点：仓库未提供依赖清单核对，因此不列出具体框架版本号；README 中提到的 Lighthouse 分数属于原作者的测试记录，不代表本模板在当前环境下的表现。演示图片、字体、图标等第三方素材需按各自许可单独核对，代码采用 MIT 许可仅覆盖该版本代码本身。

Next.jsReact博客启动器

适合你的项目吗？

适用场景

搭建个人技术博客并希望用 Markdown/MDX 管理文章
需要按标签组织内容、并让每个标签拥有独立页面
多人协作维护同一博客，需要多作者支持
希望站点可离线访问、并能安装到桌面或移动设备
需要 RSS 与站点地图等基础 SEO 输出

适合人群

熟悉 Next.js 与 React、愿意自行配置站点元数据的开发者
以文字内容为主、需要标签与作者维度的博客项目
希望以现成模板快速起步并部署到 Vercel 的个人或小团队

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
通过 git clone 下载仓库后，先修改 siteMetadata.js 填写站点相关信息
2
修改 authors/default.md 配置主要作者信息
3
按需调整 headerNavLinks.js 自定义导航链接，并添加博客文章
4
本地开发可运行 npm start 或 npm run dev，然后访问 http://localhost:3000
5
可运行 node ./scripts/compose.js 按交互提示生成带预填 front matter 的新文章

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

https://github.com/thekamalkashyap/blogging-website-template/blob/main/LICENSE https://github.com/thekamalkashyap/blogging-website-template/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 77 / 100
技术栈: Next.js · React
网站类型: 博客 · 启动器

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2022-12-13
截图检查日期: 2026-10-02

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: a7a6488cbd335e402d26925715ca147368f7fbdc6c6caf3ecaf39cde17c35a0c

2026-10-02T23:57:53.270Z

来源文件 / 仓库

# Progressive web app for Blogging

![](https://github.com/thekamalkashyap/blogging-website-template/blob/main/public/static/screenshots/gif.gif)

This is a [Next.js](https://nextjs.org/) blogging site bootstrapped from [Timlrx's](https://github.com/timlrx) web [template](https://github.com/timlrx/tailwind-nextjs-starter-blog)

# Deploy with Vercel

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/thekamalkashyap/blogging-website-template)

## Features

- Easy styling customization with [Tailwind 3.0](https://tailwindcss.com/blog/tailwindcss-v3) and primary color attribute
- Near perfect lighthouse score - [Lighthouse report](https://www.webpagetest.org/result/210111_DiC1_08f3670c3430bf4a9b76fc3b927716c5/)
- Mobile-friendly view
- Works offline
- Can install it as native app
- Custom install button for pwa
- Have top progress bar
- Light and dark theme
- [MDX - write JSX in markdown documents!](https://mdxjs.com/)
- Server-side syntax highlighting with line numbers and line highlighting via [rehype-prism-plus](https://github.com/timlrx/rehype-prism-plus)
- Support for tags - each unique tag will be its own page
- Support for multiple authors
- Support for nested routing of blog posts
- SEO friendly with RSS feed, sitemaps and more!

## Quick Start Guide

1. Downlod using git clone
2. Personalize `siteMetadata.js` (site related information)
3. Personalize `authors/default.md` (main author)
5. Modify `headerNavLinks.js` to customize navigation links
6. Add blog posts
7. Deploy on Vercel

## Development

First, run the development server:

```bash
npm start
```

    or

```bash
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

### Compose

Run `node ./scripts/compose.js` to bootstrap a new post.

Follow the interactive prompt to generate a post with pre-filled front matter.

## Deploy

**Vercel**  
The easiest way to deploy the template is to use the [Vercel Platform](https://vercel.com) from the creators of Next.js. Check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

反馈内容错误