Built with Astro and TailwindCSS, paired with React and MDX for writing articles
AstroReactBlog
sh-blog-next — Astro Blog Template
By 510208
A personal tech blog template built with Astro and TailwindCSS, using React and MDX for content, dark-theme oriented, with built-in search, comments, math formulas, and Chinese typography optimization.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
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-02View source
What stands out
A quick read of the recorded project description.
Designed entirely for a dark theme, with responsive image handling
Integrates Giscus comments and Pagefind-based full-text search with instant search suggestions
Supports KaTeX math formulas and Expressive Code Block code block display
Built-in Pangu.js automatically optimizes spacing between Chinese and English, can be disabled via rehypePlugins
Provides content components such as GitHub cards, folder structures, and step indicators, and supports multiple languages
Template Details
SHBlog Next is SamHacker's personal tech blog theme, built with Astro and TailwindCSS, paired with React, and articles are written in Markdown and MDX. The template is designed entirely for a dark theme and provides common blog capabilities such as responsive image handling, article table of contents, RSS, and Sitemap generation.
Functionally, it integrates the shadcn/ui component library, includes Giscus comments, Pagefind-based full-text search with instant search suggestions, KaTeX-based math formula rendering, and Expressive Code Block code block display. The template also provides content components such as GitHub cards, folder structures, and step indicators, and supports multiple languages. For Chinese typography, Pangu.js is built in to automatically insert spaces between Chinese and English, numbers, and symbols; this feature can be disabled by removing or commenting out rehypePangu in the rehypePlugins of astro.config.mjs.
In terms of usage limitations, running requires Node.js v22 or above and pnpm v10 or above; the repository is released under the MIT license, and the free scope is the code of this version. Demo images, fonts, icons, and other third-party assets need to be checked against their respective licenses, and external services such as domains and hosting may incur additional charges.
AstroReactBlog
Is it right for your project?
Use Cases
- Building a personal tech blog and publishing Markdown or MDX articles
- Blog sites that need a dark theme, article table of contents, RSS, and Sitemap
- Writing scenarios that want to use math formulas, enhanced code blocks, and content components in articles
- Personal sites that need on-site full-text search and comment functionality
- Blogs aimed at Chinese readers that want automatic handling of spacing between Chinese and English
Suitable For
- Individual developers using the Astro tech stack
- Blog authors mainly writing Chinese technical content
- Users who prefer a dark theme and MDX content writing
- Personal sites that need built-in capabilities such as search, comments, and math formulas
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Runtime environment requires Node.js v22 or above and pnpm v10 or above.
- 2
For local development, use pnpm install and pnpm dev; for production build, use pnpm build and pnpm preview.
- 3
To disable automatic Chinese-English spacing, remove or comment out rehypePangu in the rehypePlugins of src/astro.config.mjs.
- 4
The repository uses the MIT license; when distributing copies or substantial portions of the code, retain the copyright notice and the full MIT license notice.
- 5
Demo images, fonts, icons, and other third-party assets need to be checked against their respective licenses; external services such as domains and hosting may incur additional charges.
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis 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 allowed.
- 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
- Running and building this template requires Node.js v22 or higher and pnpm v10 or higher for dependency installation and development/build.
- The built-in Pangu.js automatic Chinese-English spacing feature is enabled by default; to disable it, remove or comment out rehypePangu in the rehypePlugins of src/astro.config.mjs.
- The demo site relies on cloud deployment services provided by Vercel; self-deployment may require third-party hosting services and may incur corresponding costs.
- Key visual images in the repository are generated by Stable Diffusion A1111 WebUI and the wainsfwillustrious model; the licensing of such demo image assets needs to be checked separately and is not granted along with the MIT code license.
- Demo images, fonts, icons, and other third-party assets need to be checked against their respective licenses and cannot be judged solely by the MIT license of the code.
- External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
- Node.js v22 以上 - pnpm v10 以上
Original README
如需關閉此項功能請前往 [`src/astro.config.mjs`](src/astro.config.mjs) 中的 `rehypePlugins` 處移除或註解 `rehypePangu` 即可。
Original README
[Vercel](https://vercel.com/) 提供的雲端部署服務（用於部署Demo站）
Original README
https://github.com/510208/sh-blog-next/blob/main/LICENSEhttps://github.com/510208/sh-blog-next/blob/main/docs/README.md[Stable Diffusion A1111 WebUI](https://github.com/AUTOMATIC1111/stable-diffusion-webui) 提供的圖片生成技術與 [wainsfwillustrious模型](https://civitai.com/models/827184/wai-illustrious-sdxl)（用於生成部落格關鍵視覺圖）
Original README
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
- Astro · 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
- 2026-07-16
- 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 Astro 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: aa01157e250e6f9a3309a9ef2b6931430a0f0c64b530d840f4cf98fc93da2a2c
2026-10-02T16:55:18.462Z
Source file / repository<div align="right"> <a href="https://github.com/510208/sh-blog-next/blob/main/docs/README_EN.md" target="_blank"><img src="https://img.shields.io/badge/English-%23000000.svg?&style=for-the-badge&logo=googletranslate&logoColor=white" alt=instagram style="margin-bottom: 5px; margin-left: 0px;" /></a> </div> <center><img src="/docs/assets/key_visual.png" alt="Screenshot" width="full" /></center> # SamHacker Blog Next（SHBlog Next） <div align="center" style="letter-spacing: 2px;">一個基於 Astro 與 TailwindCSS 所打造的個人技術部落格主題</div> <br /> <div align="center" style="display: flex; gap: 10px; justify-content: center; margin-top: 10px; margin-bottom: 10px;"> <img src="https://deploy-badge.vercel.app/vercel/sh-blog-next?style=for-the-badge&name=Vercel" alt="Vercel Deploy" /> <a href="https://portal.astro.build/themes/shblog-next/"><img src="https://img.shields.io/badge/astro-17191e.svg?style=for-the-badge&logo=astro&logoColor=white" alt="Astro" /></a> <a href="https://github.com/510208/sh-blog-next/blob/main/docs/LICENSE"><img src="https://img.shields.io/github/license/510208/sh-blog-next.svg?style=for-the-badge&logo=github&logoColor=white" alt="License" /></a> <a href="https://github.com/510208/sh-blog-next"><img src="https://img.shields.io/github/stars/510208/sh-blog-next?style=for-the-badge&logo=github&logoColor=white" alt="GitHub Stars" /></a> <a href="https://github.com/510208/sh-blog-next/issues"><img src="https://img.shields.io/github/issues/510208/sh-blog-next?style=for-the-badge&logo=github&logoColor=white" alt="GitHub Issues" /></a> <a href="https://sh-blog-next.vercel.app/"><img src="https://img.shields.io/badge/Demo-223222.svg?style=for-the-badge&logo=vercel&logoColor=white" alt="GitHub Issues" /></a> <a href="https://deepwiki.com/510208/sh-blog-next"><img src="https://deepwiki.com/badge.svg" alt="Ask DeepWiki"></a> </div> 這是 SamHacker 的個人技術部落格，使用 [Astro](https://astro.build/) 與 [TailwindCSS](https://tailwindcss.com/) 所打造，搭配 [React](https://reactjs.org/)，結合了 MDX 作為文章內容的撰寫方式。 > [!IMPORTANT] > This is the Chinese (Traditional) version of the documentation. For the English version, please refer to [README_EN.md](/docs/README_EN.md). ## 🚀 部署 將專案原始碼下載後，可以透過以下指令在本地端啟動開發伺服器： ```bash pnpm install pnpm dev ``` 若要進行生產環境的建置，可以使用以下指令： ```bash pnpm build pnpm preview ``` ## ✨ 功能特色 - [x] 基於 Astro v7 打造 - [x] 支援 Markdown 與 MDX 內容撰寫 - [x] 完全面向深色主題設計 - [x] 響應式圖片處理 - [x] 整合 shadcn/ui 元件庫 - [x] 支援 RSS 與 Sitemap 生成 - [x] 內建留言版功能（Giscus） - [x] 支援全文搜尋功能（Pagefind） - [x] 文章目錄 - [x] 基於 KaTeX 的數學公式渲染 - [x] 使用 Expressive Code Block 強化程式碼區塊顯示 - [x] 基於 Pagefind 的即時搜尋建議 - [x] 預設支援 Google Tag Manager - [x] 特色 404 頁面 - [x] 內建對 `Pangu.js` 的支援以自動處理中文排版 - [x] 提供如 GitHub 卡片、資料夾結構、步驟指示器等多種內建組件以豐富內容呈現 - [x] 支援多國語系 - [x] 完全移植 unified 生態系統的功能至 Satteri - [x] 支援 Astro v7 的最新特性 > [!NOTE] > Pangu是一個自動調整中英文、數字與符號間距的工具，在文章中出現中英文交雜的情況下，會在中英文間加入適當的空格以提升閱讀體驗。 > > 如需關閉此項功能請前往 [`src/astro.config.mjs`](src/astro.config.mjs) 中的 `rehypePlugins` 處移除或註解 `rehypePangu` 即可。 > > 例如：`歡迎來到這個基於SHBlog Next的網站，這個網站由Astro.js、Tailwind CSS和React等技術棧打造。` 會自動轉換為 `歡迎來到這個基於 SHBlog Next 的網站，這個網站由 Astro.js、Tailwind CSS 和 React 等技術棧打造。` > > 有關 Pangu.js 的更多資訊，請參考其 [GitHub 頁面](https://github.com/vinta/pangu.js)。 歡迎有興趣的開發者一同參與此專案，若有任何建議或問題，請隨時提出 Issue 或 Pull Request。 ## 👀 版本需求 - Node.js v22 以上 - pnpm v10 以上 ## 🤝 協助開發 若您有興趣協助開發此專案，請參考 [CONTRIBUTING.md](/docs/CONTRIBUTING.md)。 ## 鳴謝 特別感謝以下專案與資源的支持： - [Astro.js](https://astro.build/) - [TailwindCSS](https://tailwindcss.com/) - [React](https://react.dev/) - [MDX](https://mdxjs.com/) - [Vercel](https://vercel.com/) 提供的雲端部署服務（用於部署Demo站） - [Pagefind](https://pagefind.app/) 提供的全文搜尋解決方案 - [Medium Zoom](https://medium-zoom.francoischalifour.com/) 提供的燈箱功能 - [Giscus](https://giscus.app/) 與 [Utterances](https://utteranc.es/) 提供的留言板解決方案 - [Pangu.js](https://github.com/vinta/pangu.js) 協助提升中文排版品質 - [Stable Diffusion A1111 WebUI](https://github.com/AUTOMATIC1111/stable-diffusion-webui) 提供的圖片生成技術與 [wainsfwillustrious模型](https://civitai.com/models/827184/wai-illustrious-sdxl)（用於生成部落格關鍵視覺圖） 此外，也要感謝以下網站提供的設計啟發與靈感： - [毛哥EM資訊密技](https://emtech.cc/) - [SamHacker](https://510208.github.io/) - [Fuwari](https://fuwari.vercel.app/)主題 - [Zhenyuan Dev](https://zhenyuan.dev/) _與開放原始碼界的各位_ 另外感謝所有開源社群的貢獻，讓這個專案得以順利完成！ --- <div align="center"> <img height="60" src="https://api.moedog.org/count/@sh-blog-next?theme=asoul" alt="訪客人數統計" /> <br /> <small>由 SamHacker 製作 ｜ 透過 ❤️ 建立</small> </div>
Explore similar templates
Compare previews and descriptions within the same stack and category.
astrowind
AstroWind is a free, open-source Astro starter theme using Astro and Tailwind CSS, released under the MIT license.
Astro · Blog
astro-paper
AstroPaper is a minimal, responsive, accessible, and SEO-friendly Astro blog theme. Articles are stored as Markdown/MDX in src/content/posts/, with subdirectories affecting URLs.
Astro · Blog
fuwari
Fuwari is a static blog template built with Astro and Tailwind CSS for personal blogs. It manages posts as Markdown files in src/content/posts/, with frontmatter for title, date, description, cover, tags, categories, draft status, and language.
Astro · Blog
Firefly
Firefly is a clean personal blog theme forked from Astro and Fuwari, offering four background modes, single/double sidebar and list/grid layouts, Pagefind client-side full-text search, and a six-language UI.
Astro · Blog
astro-theme-cactus
Astro Cactus is an Astro-based blog and portfolio theme that uses Markdown/MDX content collections to manage posts, notes, and tags, with frontmatter type-checked by a schema.
Astro · Portfolio
astrofy
Astrofy is a free and open-source personal portfolio website template built with Astro and TailwindCSS, with built-in blog, CV timeline, project showcase, store, and RSS feed modules.
Astro · Portfolio