SHBlog Next

SHBlog Next (SamHacker Blog Next) is an open-source personal blog theme built on Astro v7 and TailwindCSS, purpose-built for developers who write Chinese technical content and want a dark-mode-first, fast static site.

What is SHBlog Next?

SHBlog Next is a personal blog template created by developer SamHacker, combining Astro v7 with TailwindCSS and React. It takes Markdown and MDX files as content input and produces a fully static blog site with RSS feeds, a sitemap, client-side full-text search, and a comment system. The theme is distributed under an open-source license on GitHub and includes a live demo deployed on Vercel.

Key Features

SHBlog Next bundles a set of out-of-the-box features that cover content writing, search, comments, and Chinese typography.

• Astro v7 foundation — Built on Astro v7 with React integration, using the islands architecture for performance.
• Markdown and MDX support — Write posts in Markdown or MDX, embedding custom components directly in articles.
• Dark theme by design — The interface is fully optimized for dark-mode reading with a distinctive visual style.
• shadcn/ui integration — Sourced components from shadcn/ui, giving you Tailwind-based, accessible UI primitives.
• Pagefind full-text search — Includes Pagefind integration for client-side full-text search with live suggestions.
• Giscus and Utterances comments — Built-in support for Giscus comments plus the Utterances alternative.
• KaTeX math rendering — Renders LaTeX-style math formulas natively in posts using KaTeX.
• Chinese typography with Pangu.js — Automatically adds spaces between Chinese characters and Latin words to improve readability.

Who is it for?

SHBlog Next is aimed at developers and writers who want a polished, dark-mode-first blog without assembling many integrations themselves.

• Chinese-speaking technical bloggers — Write and publish articles in Chinese with automatic spacing between Chinese and English text via Pangu.js.
• Developers who want a modern Astro blog — Start from a feature-rich theme with search, comments, and SEO built in.
• Open-source enthusiasts — The project is open-source and welcomes contributions via Issues and Pull Requests.

What can you do with it?

With SHBlog Next you can run a complete personal blog that supports modern authoring workflows and easy deployment.

• Publish a personal tech blog — Use the pre-built layout and components to create a dark-mode blog with MDX articles.
• Deploy to Vercel or other static hosts — The demo site runs on Vercel, and the project can be built with pnpm build and previewed with pnpm preview.
• Add math and interactive components — Write articles that include KaTeX formulas, GitHub cards, folder-structure diagrams, and step indicators.

How does it work?

The theme uses the standard Astro build process, which you control through pnpm scripts.

1. Clone the repository and install dependencies with pnpm install.
2. Start the local development server with pnpm dev.
3. Build for production with pnpm build and preview the output with pnpm preview.

The project requires Node.js v22 or higher and pnpm v10 or higher. To turn off the Pangu.js auto-spacing feature, remove the rehypePangu plugin from src/astro.config.mjs.

Pricing

SHBlog Next is free. The project is open-source and includes a license file in the repository.

Alternatives

Fuwari, another Astro-based blog theme with a dark-mode aesthetic that inspired SHBlog Next, is the closest alternative mentioned in the README.

FAQ

Is SHBlog Next free to use?

Yes, the theme is open-source and released under a license included in the GitHub repository. You can freely use, modify, and redistribute it for personal or commercial projects.

What are the system requirements?

You need Node.js v22 or higher and pnpm v10 or higher to run the project locally. The deployment environment should support static site generation, such as Vercel, Netlify, or any static host.

Does SHBlog Next support Chinese typography?

Yes, it integrates Pangu.js to automatically insert spaces between Chinese characters and Latin letters and numbers. You can disable this feature by removing the rehypePangu plugin from the Astro config.

Can I add comments to my blog posts?

Yes, the theme includes built-in support for Giscus comments, which are based on GitHub Discussions. The README also mentions Utterances as an alternative solution.

Does the theme include full-text search?

Yes, it integrates Pagefind to provide client-side full-text search with real-time suggestions, so visitors can search your entire blog without a server-side search service.