Next.jsReactBlogStarter

hydrogen-nextjs — Next.js Blog Template

By statichunt

Hydrogen is a free Next.js personal blog template published by statichunt under the MIT license, supporting MDX, Disqus comments, a contact form, and taxonomy pages, with Sitepins visual content editing preconfigured.

Open Source Site Download Source ZIP

Explore the design

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

3 previews

Desktop homepage1 / 3

Visit websiteOpens in a new tab

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-02View source

What stands out

A quick read of the recorded project description.

Next.js personal blog template with code released under the MIT license

Supports MDX and includes several custom components

Includes taxonomy pages, related post recommendations, Disqus comments, and a contact form

Images handled through Next/image, with semantic HTML structure

Provides full SCSS files and supports a custom logo

Preconfigured Sitepins headless CMS for visual content editing

Template Details

Hydrogen is a Next.js template for personal blogs, maintained by statichunt and released under the MIT license. It is positioned as minimal and customizable, suitable as a starting point for a personal blog site.

For content, the template supports MDX and includes several custom components; it provides taxonomy pages, related post recommendations, Disqus comments, and a contact form. Images are handled through Next/image, the HTML uses semantic markup, a custom logo can be replaced, and styles are provided in full as SCSS files.

For usage, the template comes preconfigured with the Git-based headless CMS Sitepins, allowing text, images, and configuration to be edited without changing code. Local development requires installing Node.js first, then running npm install and npm run dev; after customization, run npm run build to generate a production build. The PageSpeed score of 100 listed in the README is the author's own claim for the demo site and was not independently verified in this material.

Regarding licensing, the code is under MIT, permitting free use, modification, commercial use, and distribution, but distribution requires retaining the copyright notice and the full MIT license text; third-party assets such as demo images, fonts, and icons must be checked separately under their own licenses, and external services such as domains and hosting may incur separate charges.

Next.jsBlogStarter

Is it right for your project?

Use Cases

Building a personal blog and publishing MDX-format posts
Finding a blog front-end starting point for an existing Next.js project
Maintaining site copy and images through Sitepins without changing code
Blog sites that need category archives, related posts, and comment functionality

Suitable For

Individual developers familiar with Next.js and npm workflows
Personal blog authors who want to start quickly with MIT-licensed code
Maintainers who need visual content editing rather than purely handwritten Markdown

Getting started & customization

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

1
Install Node.js first; an LTS version is recommended
2
Run npm install in the project directory to install dependencies
3
Run npm run dev to start the local development preview
4
After customization, run npm run build to generate a production build
5
To edit content with Sitepins, use its provided clone entry point and follow its instructions

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 applies to that version's code 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 are for display only; copyright belongs to their respective owners, and the project has no right to share them, so they cannot be freely used or redistributed with the template; to use them, you must obtain authorization from the image rights holders yourself.
The template preconfigures the Sitepins headless CMS for visual content editing; it is an external third-party service that may require account registration and is subject to its own terms of service and fees.
Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses and 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

Permission is hereby granted, free of charge
Original License Text

The images are only for demonstration purposes. They have their license, we don't have permission to share those images.
Original README

This template comes pre-configured with [**Sitepins**](https://sitepins.com), a Git-based Headless CMS designed for seamless content management.
Original README

https://github.com/statichunt/hydrogen-nextjs/blob/main/LICENSE https://github.com/statichunt/hydrogen-nextjs/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-02. 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 · 92 / 100
Technologies: Next.js · React
Website type: Blog · Starter

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: 2026-07-08
Screenshot last checked: 2026-10-02

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: cd3526a2e88a52f7271a37d1b8b19557382431d98e08df103114cf6c5643aba3

2026-10-02T16:02:07.684Z

Source file / repository

<h1 align=center>Hydrogen Nextjs</h1>
<p align=center>Hydrogen is a minimal & highly customizable free NextJs personal blog template ideal for creating personal blog website.</p>
<h2 align="center"> <a target="_blank" href="https://hydrogen-nextjs.vercel.app/" rel="nofollow">Demo</a> | <a  target="_blank" href="https://pagespeed.web.dev/report?url=https%3A%2F%2Fhydrogen-nextjs.vercel.app%2F&form_factor=desktop">Page Speed (100%)</a>
</h2>

<p align=center>
  <a href="https://github.com/vercel/next.js/releases/tag/v13.0.6" alt="Contributors">
    <img src="https://img.shields.io/static/v1?label=NEXTJS&message=13.0&color=000&logo=nextjs" />
  </a>

  <a href="https://github.com/statichunt/hydrogen-nextjs/blob/main/LICENSE">
    <img src="https://img.shields.io/github/license/statichunt/hydrogen-nextjs" alt="license"></a>

  <img src="https://img.shields.io/github/languages/code-size/statichunt/hydrogen-nextjs" alt="code size">

  <a href="https://github.com/statichunt/hydrogen-nextjs/graphs/contributors">
    <img src="https://img.shields.io/github/contributors/statichunt/hydrogen-nextjs" alt="contributors"></a>
</p>

![hydrogen](https://statichunt-images.netlify.app/themes/astro-hydrogen.png)

## Key Features

- Google Page Speed score 100! (Desktop)
- Supports Contact Form
- Disqus Comment Support 
- Related Posts Suggestion 
- MDX Support with many built-in custom components
- Semantic HTML Document Structure
- Custom Logo Support
- Includes All SCSS Files
- Taxonomy Page Support 
- Images Optimized With Next/image

<!-- installation -->
## Installation

After downloading the template, you have some prerequisites to install. Then you can run it on your localhost. You can view the package.json file to see which scripts are included.

### Install prerequisites (once for a machine)

- **Node Installation:** [Install node js](https://nodejs.org/en/download/) [Recommended LTS version]

### Local setup

After successfully installing those dependencies, open this template with any IDE [[VS Code](https://code.visualstudio.com/) recommended], and then open the internal terminal of IDM [vs code shortcut <code>ctrl/cmd+\`</code>]

- Install dependencies

```
npm install
```

- Run locally

```
npm run dev
```

After that, it will open up a preview of the template in your default browser, watch for changes to source files, and live-reload the browser when changes are saved.

## Production Build

After finishing all the customization, you can create a production build by running this command.

```
npm run build
```
<!-- edit with sitepins -->

## 📝 Edit Content with CMS

This template comes pre-configured with [**Sitepins**](https://sitepins.com), a Git-based Headless CMS designed for seamless content management. You can update your website’s text, images, and configuration without touching a single line of code.

**How to get started:**

Click the Edit with Sitepins button below and follow the on-screen instructions to start editing your content visually.

  <a target="_blank" href="https://app.sitepins.com/new/clone?name=Hydrogen%20Nextjs&repository=https://github.com/statichunt/hydrogen-nextjs/">
    <img src="https://sitepins.com/button.svg" alt="Edit with Sitepins">
  </a>

<!-- reporting issue -->
## Reporting Issues

We use GitHub Issues as the official bug tracker for this Template. Please Search [existing issues](https://github.com/statichunt/hydrogen-nextjs/issues). It’s possible someone has already reported the same problem.
If your problem or idea has not been addressed yet, feel free to [open a new issue](https://github.com/statichunt/hydrogen-nextjs/issues).

<!-- licence -->
## License

Copyright (c) 2019 - Present, Designed & Developed by [statichunt](https://statichunt.com)

**Code License:** Released under the [MIT](https://github.com/statichunt/hydrogen-nextjs/blob/main/LICENSE) license.

**Image license:** The images are only for demonstration purposes. They have their license, we don't have permission to share those images.

Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

Next.js SaaS Starter

The official Next.js SaaS starter template, integrating email/password authentication, Stripe Checkout subscriptions, a dashboard with user/team CRUD, basic Owner/Member RBAC, and activity logging.

Next.js · SaaS

Next.js Commerce

Vercel's officially maintained Next.js App Router ecommerce starter with deep Shopify integration, offering a complete product catalog, cart, and checkout flow. Core logic is modular for swapping backends, and community provider versions exist for BigCommerce, Medusa, and Saleor.

Next.js · E-commerce

Next-js-Boilerplate

A developer-first Next.js 16 starter with Tailwind CSS 4 and TypeScript, supporting both App Router and Page Router.

Next.js · Starter

tailwind-nextjs-starter-blog

A Next.js and Tailwind CSS blog starter template using Contentlayer for Markdown/MDX, with built-in SEO, code highlighting, and tags. It targets personal technical blogs and migration from Jekyll/Hugo to React, and supports one-click Vercel deployment.

Next.js · Blog

next-forge

next-forge is a Turborepo-based Next.js template maintained by Vercel, positioned as a starting point for SaaS products.

Next.js · Starter

SaaS-Boilerplate

SaaS-Boilerplate is an open-source SaaS starter template built with Next.js App Router, React 19, TypeScript, Tailwind CSS, and Shadcn UI.

Next.js · SaaS