Next.jsReactBlog

blog-template (sub-t) — Next.js Blog Template

By sub-t

A personal blog template built on Next.js and Markdown. Place articles in the _posts directory to start writing, with support for GitHub Pages deployment.

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

3 previews
Desktop homepage1 / 3
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 3

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-03View source

What stands out

A quick read of the recorded project description.

01

Articles are stored as Markdown files in the _posts directory; adding a file adds an article

02

The article list page includes pagination, and article pages include a table of contents

03

Responsive layout with dark mode support

04

Uses next-seo for SEO and supports OGP

05

Provides an online demo and a reference article for GitHub Pages deployment

Template Details

This is a Next.js template for personal blogs. Its core workflow is to place Markdown files in the _posts directory to generate article pages, making it easy to reuse content already published on platforms such as Zenn and Qiita. The template provides paginated article lists, in-article tables of contents, responsive layout, and dark mode, and uses next-seo to handle SEO and OGP metadata. The repository includes an online demo and articles written by the author covering setup and deployment, with deployment following the process for publishing a Next.js app to GitHub Pages.

Before use, note the following: the template itself is MIT-licensed, but third-party assets such as demo images, fonts, and icons require separate license verification; external services such as domains and hosting may incur additional costs. The README does not specify content volume limits, build output size, or compatibility with particular Next.js versions; actual use should be based on the repository's dependency manifest.

Next.jsReactBlog

Is it right for your project?

Use Cases

  • Building a personal technical or lifestyle blog and managing articles with Markdown
  • Migrating or reusing articles already published on platforms such as Zenn and Qiita to a self-hosted site
  • Hosting a static blog site for free via GitHub Pages
  • Using it as a reference template for learning the structure of a Next.js blog project

Suitable For

  • Individual developers who prefer writing in Markdown and want to self-host a blog
  • Users who need basic blog features such as article pagination, table of contents, and dark mode
  • Users planning to deploy a static site with GitHub Pages

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    After obtaining the repository via git clone, install dependencies with yarn and run yarn dev to start the development environment

  2. 2

    Write articles in the _posts directory in Markdown format

  3. 3

    For deployment to GitHub Pages, refer to the external article link provided in the README

  4. 4

    The code is MIT-licensed; when distributing, retain the copyright and license notice

  5. 5

    Third-party assets such as demo images, fonts, and icons require separate license verification

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not mean external services or third-party assets are free.

Must comply with when using

  • Free use, modification, commercial use, and distribution of this version's code are permitted.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses; they cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur separate charges.
View Original Text Basis

Compiled by DeepSeek based on repository license and README ·2026-10-03. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 86 / 100
Technologies
Next.js · React
Website type
Blog
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2025-04-23
Screenshot last checked
2026-10-03

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Next.js as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: cfb6ce401aaa2e7fb6c1036f52c8d3f567bb0015f0cff05a454636bf9cf2d623

2026-10-03T00:40:49.059Z

Source file / repository
# 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 ライセンス
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.