Next.jsReact博客

blog-template (sub-t) — Next.js 博客模板

作者 sub-t

基于 Next.js 与 Markdown 的个人博客模板,把文章放进 _posts 目录即可开始写作,支持 GitHub Pages 部署。

看看你的网站会是什么样

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

3 个预览视图
桌面端首页1 / 3
桌面端截图首屏预览

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

全部页面与视图 3

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

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

值得关注的模板亮点

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

01

文章以 Markdown 文件形式存放在 _posts 目录,新增文件即新增文章

02

文章列表页带分页,文章页带目录

03

响应式布局并支持深色模式

04

使用 next-seo 处理 SEO,并支持 OGP

05

提供在线演示与 GitHub Pages 部署参考文章

模板详细介绍

这是一个面向个人博客的 Next.js 模板,核心工作流是把 Markdown 文件放入 _posts 目录,即可生成文章页面,也便于复用 Zenn、Qiita 等平台已发布的文章内容。模板提供文章列表分页、文章内目录、响应式布局与深色模式,并借助 next-seo 处理 SEO 与 OGP 元信息。仓库附带在线演示与作者撰写的搭建、部署说明文章,部署方式参考将 Next.js 应用发布到 GitHub Pages 的流程。

使用前需注意:模板本身为 MIT 许可,但演示图片、字体、图标等第三方素材需单独核对其许可;域名、托管等外部服务可能产生额外费用。README 未说明内容量级、构建产物大小或与特定 Next.js 版本的兼容范围,实际使用应以仓库依赖清单为准。

Next.jsReact博客

适合你的项目吗?

适用场景

  • 搭建个人技术或生活博客,用 Markdown 管理文章
  • 把 Zenn、Qiita 等平台已发布的文章迁移或复用到自建站点
  • 通过 GitHub Pages 免费托管静态博客站点
  • 作为学习 Next.js 博客类项目结构的参考模板

适合人群

  • 习惯用 Markdown 写作、希望自行托管博客的个人开发者
  • 需要文章分页、目录、深色模式等基础博客功能的用户
  • 计划用 GitHub Pages 部署静态站点的用户

上手与定制指南

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

  1. 1

    通过 git clone 获取仓库后,使用 yarn 安装依赖并运行 yarn dev 启动开发环境

  2. 2

    文章写入 _posts 目录,格式为 Markdown

  3. 3

    部署到 GitHub Pages 可参考 README 中给出的外部文章链接

  4. 4

    代码采用 MIT 许可,分发时需保留版权与许可声明

  5. 5

    演示图片、字体、图标等第三方素材需单独核对许可

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

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

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

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 86 / 100
技术栈
Next.js · React
网站类型
博客
这个分数如何计算

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

这个项目需要核对什么

记录的仓库更新时间
2025-04-23
截图检查日期
2026-10-03

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: cfb6ce401aaa2e7fb6c1036f52c8d3f567bb0015f0cff05a454636bf9cf2d623

2026-10-03T00:40:49.059Z

来源文件 / 仓库
# Blog Template

A simple personal blog template.

You can start blogging just by adding markdown files to the `_posts` directory. Of course, you can also reuse articles from platforms like Zenn or Qiita.

For more details, please refer to the following article:

[Created a blog template with Next.js + GitHub Pages →](https://zenn.dev/subt/articles/957bd5d01485e1)

## Demo

https://sub-t.github.io/blog-template/

## Features

- Responsive design  
- Dark mode support  
- Pagination on the article list page  
- Table of contents  
- SEO optimized with `next-seo`  
- OGP support  

## Development

```bash
git clone https://github.com/sub-t/blog-template project-name
cd project-name
yarn
yarn dev
```

## Deployment

Refer to this article for deployment instructions:

[Deploying a Next.js Blog to GitHub Pages →](https://jamband.github.io/blog/2021/08/deploy-nextjs-app-to-github-pages/)

## License

MIT License

---

# ブログテンプレート

個人ブログ向けのシンプルなテンプレートです。

`_posts` ディレクトリに Markdown ファイルを追加するだけでブログを始められます。もちろん、Zenn や Qiita に投稿した記事を流用することも可能です。

詳細は以下の記事をご覧ください:

[Next.js + GitHub Pagesのブログテンプレートを作った →](https://zenn.dev/subt/articles/957bd5d01485e1)

## デモ

https://sub-t.github.io/blog-template/

## 特徴

- レスポンシブ対応  
- ダークモード対応  
- 記事一覧ページにページネーションあり  
- 目次付き  
- `next-seo` による SEO 対策済み  
- OGP 対応  

## 開発方法

```bash
git clone https://github.com/sub-t/blog-template project-name
cd project-name
yarn
yarn dev
```

## デプロイ方法

こちらの記事を参考にしてください:

[Next.js で作ったブログを GitHub Pages にデプロイする →](https://jamband.github.io/blog/2021/08/deploy-nextjs-app-to-github-pages/)

## ライセンス

MIT ライセンス
反馈内容错误

看看同类模板

对比同技术栈与用途的模板,找到更适合的视觉与内容结构。