Built on Next.js 15 App Router, React 19, TypeScript, Tailwind CSS 4, and Contentlayer 2
Next.jsReactBlog
next-blog-skyplume-template — Next.js Blog Template
By ruoduan-hub
Skyplume is an MDX blog template built on Next.js 15 App Router, React 19, TypeScript, Tailwind CSS 4, and Contentlayer 2, extracted from the personal blog 0x1ai.com, aimed at personal publishing, engineering notes, and long-form writing.
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-14View source
What stands out
A quick read of the recorded project description.
MDX writing supports front matter, reading time, table of contents, KaTeX math formulas, quotes, code titles and highlighting, heading anchors, and GitHub alerts
SEO includes Open Graph, Twitter cards, JSON-LD BlogPosting, canonical URL, sitemap, robots.txt, and RSS
Content discovery provides a build-time local search index, tag pages, structured archives, and RSS feed
Reading experience includes dark mode, responsive layout, reading time, table of contents, and previous/next navigation
Configuration is centralized in plain data files under the data directory and in MDX; comments use Giscus and can be disabled
Template Details
Skyplume is a content-first Next.js blog template. The README states it was extracted from Ruoduan's personal blog 0x1ai.com, for personal publishing, engineering notes, project journals, and long-form MDX writing. The template uses MDX as the writing format, supporting front matter, reading time, table of contents, math formulas, quotes, code highlighting, and custom components; it also provides SEO capabilities such as Open Graph, Twitter cards, JSON-LD BlogPosting, canonical URL, sitemap, robots.txt, and RSS.
For reading experience, the README mentions restrained typography, low-saturation color scheme, dark mode, responsive layout, reading time, table of contents, and previous/next navigation; animations include route transitions, first-screen staggered animations, scroll reveal, information flow animations, and a progress bar. Content discovery methods include a build-time local search index, tag pages, structured archives, and RSS.
Configuration is centralized in plain data files under the data directory and in MDX. The README lists files for site metadata, about page, authors, navigation, projects, social share cards, and favicon. Comments use Giscus, configurable via environment variables, and can be disabled by setting comments.provider to an empty string in siteMetadata. For deployment, a Vercel deploy button is provided, and it notes the template can start without newsletter, analytics, or comment credentials. The README also mentions static export (EXPORT=true UNOPTIMIZED=true yarn build) and setting BASE_PATH for subpath deployment.
The README does not provide the template's version release history, browser compatibility range, content migration tools, or detailed deployment steps for non-Vercel platforms.
Next.jsBlog
Is it right for your project?
Use Cases
- Personal blog and personal website publishing
- Engineering notes, technical articles, and project journals
- Writing long-form content with MDX that requires a table of contents, math formulas, and code highlighting
- Static blogs that need SEO output such as RSS, sitemap, JSON-LD, and Open Graph
- Maintaining site information and navigation directly through data files under the data directory
Suitable For
- Developers familiar with Next.js, React, and TypeScript
- Individual writers who prefer MDX and local data files and do not want to rely on a CMS
- Blog projects that need dark mode, local search, and RSS
- Sites planned for Vercel deployment or static export
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Install dependencies with yarn install, start the development server with yarn dev, and access http://localhost:3000 by default
- 2
First edit data/siteMetadata.js, data/profile.ts, data/authors/default.mdx, data/headerNavLinks.ts, data/projectsData.ts, and the share cards and favicon under public/static
- 3
Comments use Giscus: copy .env.example to .env.local and fill in the Giscus values; to disable comments, set comments.provider to "" in data/siteMetadata.js
- 4
Create MDX files under data/blog to write articles, place images under public/static/blog/<post-slug> for reference, and the example article is data/blog/term-proxy.mdx
- 5
For static export use EXPORT=true UNOPTIMIZED=true yarn build, and set BASE_PATH for subpath deployment; you can also deploy via the Vercel button in the README
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 that version and does not mean external services or third-party assets are free.
Must comply with when using
- You are allowed to use, modify, commercialize, and distribute the code of this version for free.
- 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 need to be checked against 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 additional charges.
- The comment feature uses Giscus, requiring copying .env.example to .env.local and filling in the Giscus configuration values; if comments are not needed, you can disable them by setting comments.provider to an empty string in data/siteMetadata.js.
- When deploying to Vercel, the template can start without newsletter, analytics, or comment credentials; these integrations are all optional.
- When deploying to a subpath, you need to set the BASE_PATH environment variable.
- For static export, use the EXPORT=true UNOPTIMIZED=true yarn build command.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
Copy `.env.example` to `.env.local` and fill in your Giscus values. To disable comments entirely, set `comments.provider` to `""` in `data/siteMetadata.js`.
Original README
Click the deploy button above. The template boots without newsletter, analytics, or comment credentials — everything is optional.
Original README
Set `BASE_PATH` when deploying under a subpath.
Original README
https://github.com/ruoduan-hub/next-blog-skyplume-template/blob/master/LICENSEhttps://github.com/ruoduan-hub/next-blog-skyplume-template/blob/master/README.mdEXPORT=true UNOPTIMIZED=true yarn build
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-14. 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 · 83 / 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
- 2026-07-02
- Screenshot last checked
- 2026-10-14
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.
Review declaration: codex-user-requested-batch-review-20261015 · 2026-10-15
Inspect the recorded source material
SHA-256: 3a89d674d75b2bba962d9071f23bc0e7c8b7e4c7686090875cb1a9e2c8851959
2026-10-14T20:55:29.959Z
Source file / repository<p align="center">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="public/static/images/logo-dark.svg">
<img alt="Skyplume" src="public/static/images/skyplume-card.svg" width="480">
</picture>
</p>
<p align="center">
A refined, content-first Next.js blog template for personal publishing,<br/>engineering notes, project journals, and long-form MDX writing.
</p>
<p align="center">
<a href="https://github.com/ruoduan-hub/next-blog-skyplume-template/stargazers">
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/ruoduan-hub/next-blog-skyplume-template?style=flat&color=%2317897e">
</a>
<a href="./LICENSE">
<img alt="License" src="https://img.shields.io/badge/license-MIT-17897e?style=flat">
</a>
<a href="https://github.com/ruoduan-hub/next-blog-skyplume-template">
<img alt="GitHub repo size" src="https://img.shields.io/github/repo-size/ruoduan-hub/next-blog-skyplume-template?color=17897e&style=flat">
</a>
<br/>
<img alt="Next.js" src="https://img.shields.io/badge/Next.js-15-black?style=flat&logo=next.js">
<img alt="React" src="https://img.shields.io/badge/React-19-087ea4?style=flat&logo=react">
<img alt="TypeScript" src="https://img.shields.io/badge/TypeScript-5.7-3178c6?style=flat&logo=typescript">
<img alt="Tailwind CSS" src="https://img.shields.io/badge/Tailwind_CSS-4-38bdf8?style=flat&logo=tailwindcss">
<img alt="Contentlayer" src="https://img.shields.io/badge/Contentlayer-2-000?style=flat">
<img alt="MDX" src="https://img.shields.io/badge/MDX-1b1f24?style=flat&logo=mdx">
<a href="https://www.0x1ai.com/">
<img alt="Production" src="https://img.shields.io/badge/production-0x1ai.com-17897e?style=flat">
</a>
</p>
<p align="center">
<a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fruoduan-hub%2Fnext-blog-skyplume-template&project-name=skyplume-blog&repository-name=skyplume-blog">
<img src="https://vercel.com/button" alt="Deploy with Vercel">
</a>
<a href="https://github.com/ruoduan-hub/next-blog-skyplume-template/generate">
<img alt="Use this template" src="https://img.shields.io/badge/Use_this_template-238636?style=flat&logo=github">
</a>
</p>
<p align="center">
<a href="#quick-start">Quick Start</a> ·
<a href="#highlights">Highlights</a> ·
<a href="#configure-your-site">Configure</a> ·
<a href="#write-posts">Write</a> ·
<a href="#deploy-to-vercel">Deploy</a> ·
<a href="./README.zh-CN.md">简体中文</a>
</p>
---
---
## Why Skyplume
Skyplume is extracted from [Ruoduan](https://www.0x1ai.com/)'s personal blog at [0x1ai.com](https://www.0x1ai.com/) — a production site written, maintained, and tuned over years of real-world use. It keeps what matters for serious personal publishing:
- **Writing experience.** MDX-first with front matter, reading time, table of contents, math, citations, code highlighting, and custom components.
- **Search visibility.** Complete SEO stack — metadata, Open Graph, Twitter cards, JSON-LD, sitemap, robots.txt, RSS.
- **Reading comfort.** Restrained typography, quiet color palette, dark mode, fast page transitions.
- **Developer ownership.** Plain data files and small React components. No CMS lock-in. No hidden configuration layers.
---
## Highlights
| | |
| --- | --- |
| **Framework** | Next.js 15 App Router, React 19, TypeScript, Tailwind CSS 4, Contentlayer 2 |
| **Authoring** | MDX, KaTeX math, citations, code titles + highlighting, heading anchors, GitHub alerts |
| **SEO** | Open Graph, Twitter cards, JSON-LD `BlogPosting`, canonical URLs, sitemap, robots.txt, RSS |
| **Discovery** | Build-time local search index, tag pages, structured archives, RSS feed |
| **Reading** | Dark mode, responsive layout, reading time, table of contents, previous/next navigation |
| **Motion** | Route transitions, staggered hero, scroll reveal, feed animations, progress bar |
| **Performance** | Static generation, optimized font loading, long-term asset caching, static export support |
| **Security** | CSP, referrer policy, HSTS, frame protection, content-type headers |
| **Lighthouse** | Baseline template tuned to **100 Performance / 100 Best Practices / 100 SEO** |
---
## Design Principles
Skyplume is designed for **reading before decoration**. The interface uses restrained spacing, sharp typography, and quiet borders so writing stays front and center. Motion is intentionally short and lightweight — polish without distraction.
**Mineral Teal palette.** A low-chroma, lab-grade teal paired with teal-tinted neutrals. Grays carry body text and metadata without visual noise. The primary color is reserved for links, focus states, and interactive cues. In dark mode, deep teal-gray backgrounds keep long-form reading stable.
The template is meant to be **owned**, not just used. Most customization starts in plain data files and MDX — not a hidden admin panel.
---
## Quick Start
```bash
yarn install
yarn dev
```
Open [http://localhost:3000](http://localhost:3000).
### Available Scripts
```bash
yarn dev # Start development server
yarn build # Production build + RSS generation
yarn serve # Serve production build locally
yarn analyze # Bundle analyzer
yarn lint # Lint app, components, layouts, and scripts
```
### Static Export
```bash
EXPORT=true UNOPTIMIZED=true yarn build
```
Set `BASE_PATH` when deploying under a subpath.
---
## Configure Your Site
Edit these files first — everything is self-documenting:
| File | Purpose |
| --- | --- |
| `data/siteMetadata.js` | Title, URL, author, SEO defaults, search, comments |
| `data/profile.ts` | About page: bio, links, skills |
| `data/authors/default.mdx` | Default author metadata |
| `data/headerNavLinks.ts` | Top navigation links |
| `data/projectsData.ts` | Projects page content |
| `public/static/images/skyplume-card.svg` | Social sharing card |
| `public/static/favicons/favicon.svg` | Browser favicon |
### Comments (Giscus)
Copy `.env.example` to `.env.local` and fill in your Giscus values. To disable comments entirely, set `comments.provider` to `""` in `data/siteMetadata.js`.
---
## Write Posts
Create MDX files in `data/blog`:
```mdx
---
title: My First Post
date: '2026-01-01'
tags:
- nextjs
- writing
categories:
- notes
draft: false
summary: A short description for feeds, cards, and SEO.
authors:
- default
---
Write your post in MDX.
```
Place images under `public/static/blog/<post-slug>` and reference them:
```mdx
```
A sample post is included at `data/blog/term-proxy.mdx`.
---
## Deploy to Vercel
Click the deploy button above. The template boots without newsletter, analytics, or comment credentials — everything is optional.
---
## Project Structure
```
app/ App Router pages, metadata, sitemap, robots
components/ Shared UI, MDX components, search, theme, motion
data/ Site metadata, authors, profile, projects, blog posts
layouts/ Blog post and list page layouts
public/static/ Images, favicons, post assets
scripts/ RSS and post-build utilities
css/ Tailwind, syntax highlighting, animations
```
---
## Recommend to Vercel
Skyplume fits the Vercel template community:
- **Category:** Blog, Next.js, Tailwind CSS, MDX
- **Repository:** [ruoduan-hub/next-blog-skyplume-template](https://github.com/ruoduan-hub/next-blog-skyplume-template)
- **Production reference:** [0x1ai.com](https://www.0x1ai.com/)
> Skyplume is a refined Next.js 15 blog template extracted from a production personal site. It ships with MDX publishing, Contentlayer, Tailwind CSS 4, local search, RSS, sitemap, JSON-LD, Open Graph defaults, dark mode, Giscus comments, static export support, security headers, and a baseline Lighthouse 100/100/100 setup for Performance, Best Practices, and SEO.
---
## Credits
Derived from the blog system powering [0x1ai.com](https://www.0x1ai.com/), built and maintained by [Ruoduan](https://www.0x1ai.com/).
## License
MIT — use, modify, and ship it.
Explore similar templates
Compare previews and descriptions within the same stack and category.
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
Nextjs-tailwindcss-blog-template
A Next.js blog styled with Tailwind CSS. The current branch processes Markdown with Velite; the earlier Contentlayer setup is retained in a separate historical branch.
Next.js · Blog
Next-js-Blog-Boilerplate
A blog starter built on Next.js 12 and Tailwind CSS 3, integrating TypeScript, ESLint, Prettier, and PostCSS.
Next.js · Blog
nextjs-blog-theme
A Next.js 15 and Tailwind CSS 4.x blog starter by Netlify, designed by Bejamas, with MDX support, dark/light theme switching, and environment-variable configuration. It includes a visual setup wizard for deploying to Netlify and manages content via local .mdx files.
Next.js · Blog
blog
A personal blog forked from Timlrx's tailwind-nextjs-starter-blog, built with Next.js, React, and Tailwind CSS. Content is stored as Markdown/MDX under data/, with site, author, navigation, and project data in separate files.
Next.js · Blog
tailnext
Tailnext is a free, open-source template built on the Next.js 14 App Router and Tailwind CSS, created by the onWidget team.
Next.js · Blog