Hydrogen Nextjs is a free, minimal personal blog template built on Next.js 13 and Tailwind CSS, designed to ship a lightweight blog site with a reported 100/100 Google Page Speed score on desktop. Created and maintained by the statichunt team, it accepts MDX or Markdown content as input and produces a static blog with taxonomy pages, related-post suggestions, Disqus comments, and Next/image-optimized images.
What is Hydrogen Nextjs?
Hydrogen Nextjs is a minimal, highly customizable personal blog template for Next.js, published by statichunt, a theme marketplace. It runs on Next.js 13.0 and uses Tailwind CSS along with SCSS partials for styling, and can be deployed to Vercel, Netlify, or any Node.js hosting platform. Content files are written in MDX or markdown with frontmatter, and the template generates a static blog site with semantic HTML structure, category and tag archives, and a working contact page.
Key Features
- Google Page Speed score 100 (Desktop) — The live demo reaches a perfect 100 on Google Page Speed for desktop, reflecting optimized JavaScript delivery, image handling, and render-blocking resource elimination.
- MDX support with built-in custom components — Write posts in MDX and use pre-included custom components (code blocks, callouts, embedded media) without extra config; plain markdown also works.
- Disqus comment support — Plug in a Disqus shortname in site configuration to enable threaded comments on blog posts.
- Related posts suggestion — Each article automatically lists related posts based on shared taxonomies, helping readers discover more content.
- Contact form support — A ready-made contact page collects reader messages, ready to connect to a form backend.
- Taxonomy page support — Categories and tags get their own archive pages generated from post frontmatter metadata.
- Custom logo support — Replace the default header logo with your own image through the site config.
- Includes all SCSS files — Full SCSS source is exposed so you can edit variables and partials to adjust colors, spacing, and typography.
- Sitepins CMS pre-configuration — The template is pre-wired for Sitepins, a Git-based headless CMS, enabling visual editing of text, images, and settings via an "Edit with Sitepins" button.
Who is it for?
Hydrogen Nextjs fits individual bloggers who want a fast, minimal site without a feature-heavy theme. Front-end developers can use it as a Next.js starter to prototype custom blogs, editing SCSS files and extending MDX components. Content creators and non-developers can take advantage of the Sitepins CMS integration to update posts and media visually without writing code.
What can you do with Hydrogen Nextjs?
- Personal bloggers: Publish MDX-based articles with categories, tags, Disqus comments, and a contact page, deployed free to Vercel or Netlify.
- Developers: Fork the repository as a foundation for a content-heavy Next.js site, using the SCSS architecture and built-in MDX components to build custom layouts fast.
- Portfolio owners: Showcase projects and writing on a minimal, high-performance blog with custom logo and image-optimized galleries via Next/image.
How does Hydrogen Nextjs work?
To run the template locally, install Node.js LTS, clone the repository, run npm install, and then npm run dev to start a live-reloading dev server. For production, run npm run build to generate the optimized static build. The repository includes package.json scripts for both workflows, and the Sitepins one-click button clones the repo into a visual CMS editor for code-free content editing.
FAQ
Is Hydrogen Nextjs free?
Yes, Hydrogen Nextjs is released under the MIT license, so you can use it for personal or commercial projects without payment. The demo images have their own licenses and are not included in the MIT grant.
Does Hydrogen Nextjs support comments?
Yes, it includes Disqus comment integration. You must set your own Disqus shortname in the site configuration for comments to appear on posts.
What content format does Hydrogen Nextjs use?
The template supports MDX and plain Markdown. MDX posts can embed custom JSX components supplied by the theme, such as styled code blocks and callouts, while markdown files use regular frontmatter for title, tags, and categories.
Can I use Hydrogen Nextjs with a CMS?
Yes, it is pre-configured for Sitepins, a Git-based headless CMS. Clicking the "Edit with Sitepins" button clones the repository and lets you edit text, images, and site settings visually.
Where can I deploy Hydrogen Nextjs?
As a standard Next.js application, it deploys to Vercel, Netlify, or any Node.js-compatible platform. The public demo is hosted on Vercel.
