astro-erudite

astro-erudite is an opinionated, unstyled static blogging template built with Astro and native CSS, designed for developers who want a fast, zero-framework personal blog or portfolio with advanced Markdown features.

What is astro-erudite?

astro-erudite is an open-source blogging template by enscribe (Jason), distributed on GitHub under the MIT License. It takes Markdown content — blog posts, author profiles, and project entries — and produces a static site with RSS, sitemap, per-post Open Graph metadata, and a responsive table of contents. The template deliberately uses no UI framework and no CSS framework; its design system is built entirely with native CSS, autonomous custom elements, and the Utopia fluid type and space scales. It is built on Astro and keeps dependencies minimal (15 per the badge).

Key Features

• Native CSS design system — Colors are defined in src/styles/color.css using Radix Colors scales with light-dark() pairs, so the site respects system color preference out of the box, and the theme toggle only stores an override.
• Sätteri Markdown processor — Blog posts are processed by the Rust-based Sätteri engine, which contributes to fast builds.
• Expressive Code highlighting — Code blocks and inline code are highlighted using Expressive Code, with support for inline code annotations like code{:ts} and TextMate scope colors.
• MathML math rendering — LaTeX math written as $inline$ or $$display$$ is converted to browser-native MathML at build time via Temml.
• Subposts for series — A series is created by nesting sibling Markdown files next to an index.md; the entire series renders as one continuous document while each subpost still gets its own URL, ordered by the order frontmatter field.
• Responsive table of contents — The table of contents follows the scroll position with scrollspy highlighting, and every heading gets a clickable permalink anchor.
• GitHub-style callouts — Five variants (note, tip, warning, caution, important) are rendered as collapsible <details> elements using the ::: directive syntax.
• SEO and feed generation — Granular metadata per post, Open Graph tag control, RSS feed, and sitemap generation are included; the production URL is set in astro.config.ts.

Who is it for?

• Technical bloggers who write posts with code and math benefit from Expressive Code highlighting and MathML rendering without extra JavaScript.
• Developers and designers who want full control over the visual style will appreciate that the template ships unstyled, with a clean native CSS groundwork to customize.
• Portfolio owners can use the built-in projects content type to showcase projects with start/end dates, links, tags, and images.
• Multi-author blogs can set up author profiles in src/content/authors/ and reference them from posts; the template generates a dedicated authors page.

What can you do with astro-erudite?

• Launch a blog in minutes: Create a repo from the template, clone it, run bun install and bun dev, then write your first post in src/content/blog/.
• Publish a multi-part tutorial: Create a folder with an index.md and sibling files; the series becomes one scrollable page with synchronized sub-URLs.
• Customize the theme: Replace the Radix color scale in src/styles/color.css and the favicons in the public/ folder (generated via RealFaviconGenerator) to match your brand.
• Generate an RSS feed and sitemap: Set the site field in astro.config.ts and the feed, sitemap, and canonical URLs are built automatically.

How does astro-erudite work?

The workflow starts with the "Use this template" button on GitHub, which copies the repository into your own account. After cloning, you run bun install and bun dev to start the development server at http://localhost:4321. Site metadata, navigation, and social links are edited in src/consts.ts, while the production URL is configured in astro.config.ts. Content is added as Markdown files with frontmatter validated by Zod schemas, and the build command bun run build outputs the static site to dist/.

Pros and cons

Pros

• Minimal dependencies (15 total) and no CSS framework, giving a lean starting point.
• Advanced authoring features like subposts, callouts, MathML, and Expressive Code are built in.
• Fully responsive with scrollspy TOC and clickable anchors.

Cons

• The template is deliberately unstyled, so you must implement your own visual design from scratch.
• The documented commands are written for Bun; no npm or pnpm equivalents are listed.

Pricing

Free — the template is open source under the MIT License.

Alternatives

Other Astro-based blog templates include Astro Paper and Astro Cactus.

FAQ

Is astro-erudite free?

Yes, astro-erudite is open source and available under the MIT License. You can use it for personal or commercial projects without paying licensing fees.

Does astro-erudite use Tailwind CSS?

No, it uses native CSS with a design system based on autonomous custom elements and Radix Colors scales. There is no CSS framework included.

What package manager do I need?

The template's commands are written for Bun, such as bun install, bun dev, and bun run build. You may need to adapt them if you prefer npm or pnpm.

How do I add a new blog post?

Add a Markdown file to src/content/blog/ with frontmatter containing title, description, date, and authors (matching an author file id). Optional fields include tags, image, draft, and order for subposts.

Can I display math on my blog?

Yes, LaTeX math written as $inline$ or $$display$$ is rendered to browser-native MathML via Temml at build time, with no client-side JavaScript required.