Modern Static Blog Template

Astro Erudite is a minimal static blogging template that combines Astro, Tailwind CSS, and shadcn/ui components to deliver a modern blogging experience.

Built on Astro’s Islands architecture, this template provides selective hydration and client-side interactivity while maintaining the speed advantages of static site generation.

You can use it to build technical blogs, documentation sites, and content-heavy platforms that require both content and performance.

GitHub Repo

Live Demo

More Features

🎨 shadcn/ui Integration – Pre-built accessible components with automatic light/dark theme support through Tailwind color conventions.

📝 MDX Content Authoring – Write blog posts with embedded React components and LaTeX math rendering via KaTeX.

🎯 Enhanced Code Blocks – Expressive Code integration provides syntax highlighting, code block titles, and advanced styling options.

🔄 Smooth Page Transitions – Astro View Transitions in SPA mode create fluid navigation experiences.

📊 SEO Optimization – Granular metadata control and Open Graph tag support for each post ensures proper social media sharing.

📡 RSS and Sitemap Generation – Automatic feed generation keeps readers updated and improves search engine discoverability.

📚 Subpost Support – Break long content into digestible parts and organize related series effectively.

👥 Multi-Author Support – Author profiles with dedicated pages enable collaborative content creation.

🏷️ Tag System – Comprehensive categorization and discovery through dedicated tags pages.

📢 Custom Callout Components – Enhanced technical writing capabilities with various callout component variants.

blog-template-erudite-post — ***Blog Post***

Installation

1. Create a new repository from the template on GitHub and clone your new repo as follows:

git clone https://github.com/[YOUR_USERNAME]/[YOUR_REPO_NAME].git
cd [YOUR_REPO_NAME]

2. Install the necessary dependencies

npm install

3. Start the local development server:

npm run dev

Your site is now running at http://localhost:1234.

Customization

You can now customize your blog’s configuration, color palette, and favicons.

Site Configuration

Modify the src/consts.ts file to update your site’s metadata, navigation, and social media links.

export const SITE: Site = {
  title: 'Your Blog Title',
  description: 'Your blog description.',
  href: 'https://your-domain.com',
  featuredPostCount: 3,
  postsPerPage: 5,
}
export const NAV_LINKS: SocialLink[] = [
  { href: '/blog', label: 'Blog' },
  { href: '/projects', label: 'Projects' },
]
export const SOCIAL_LINKS: SocialLink[] = [
  { href: 'https://github.com/your-username', label: 'GitHub' },
]

Color Palette

Colors are defined in src/styles/global.css using OKLCH format, following shadcn/ui conventions. You can adjust these CSS variables to match your brand.

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.45 0.15 260); /* Example: A custom primary color */
  /* ... other color variables */
}
[data-theme='dark'] {
  --background: oklch(0.145 0 0);
  --foreground: oklch(1 0 0);
  --primary: oklch(0.65 0.2 260); /* Example: A custom dark primary color */
  /* ... other dark theme variables */
}

Favicons

Replace the favicon files in the public/ directory with your own. After updating the files, you must also adjust the paths in src/components/Favicons.astro to reflect your new filenames.

Adding Blog Content

Blog Posts

Create new blog posts by adding MDX files to the src/content/blog/ directory. Each post requires a frontmatter section with metadata.

title: (String) The title of the post, with a maximum of 60 characters. Required.
description: (String) A brief summary of the post, with a maximum of 155 characters. Required.
date: (Date) The publication date in YYYY-MM-DD format. Required.
order: (Number) The sort order for subposts that share the same date. Defaults to 0. Optional.
image: (Image) A feature image with exact dimensions of 1200×630 pixels. Optional.
tags: (Array of Strings) A list of tags, preferably in kebab-case, for categorization. Optional.
authors: (Array of Strings) A list of author IDs corresponding to the author files in src/content/authors/. Optional.
draft: (Boolean) Set to true to mark the post as a draft. Defaults to false. Optional.

---
title: 'My First Blog Post'
description: 'This is a summary of my first post.'
date: '2025-08-15'
tags: ['astro', 'blogging']
authors: ['your-author-id']
draft: false
---
Your content starts here.

Authors

Add author profiles as Markdown files in the src/content/authors/ directory. The filename (without the .md extension) serves as the author ID used in the authors field of a blog post.

name: (String) The full name of the author. Required.
pronouns: (String) The author’s pronouns. Optional.
avatar: (String) A URL or a local path (starting with /) to the author’s avatar image. Required.
bio: (String) A short biography for the author. Optional.
mail: (String) The author’s email address. Optional.
website: (String) A valid URL to the author’s personal website. Optional.
twitter: (String) A valid URL to the author’s Twitter/X profile. Optional.
github: (String) A valid URL to the author’s GitHub profile. Optional.
linkedin: (String) A valid URL to the author’s LinkedIn profile. Optional.
discord: (String) A valid URL to the author’s Discord profile or server. Optional.

---
name: 'Your Name'
avatar: '/path/to/your-avatar.png'
bio: 'A short bio about yourself.'
website: 'https://your-website.com'
github: 'https://github.com/your-username'
---

Projects

Showcase your work by adding project files to the src/content/projects/ directory.

name: (String) The name of the project. Required.
description: (String) A description of the project. Required.
tags: (Array of Strings) A list of technologies or categories associated with the project. Required.
image: (Image) A project image with exact dimensions of 1200×630 pixels. Required.
link: (String) A valid URL to the live project or its repository. Required.
startDate: (Date) The project’s start date in YYYY-MM-DD format. Optional.
endDate: (Date) The project’s end date in YYYY-MM-DD format. Optional.

---
name: 'My Awesome Project'
description: 'A description of this amazing project.'
tags: ['Astro', 'Tailwind CSS']
image: '/static/project-image.png'
link: 'https://example.com'
startDate: '2025-01-01'
---

Related Resources

Astro Documentation – Complete guide to Astro framework features, concepts, and best practices for modern web development.
shadcn/ui Component Library – Collection of accessible React components built with Radix UI and Tailwind CSS.
Tailwind CSS Documentation – Utility-first CSS framework documentation covering all classes, customization options, and design patterns.
MDX Documentation – Learn how to combine Markdown with JSX components for interactive content creation and enhanced documentation.

FAQs

Q: Can I use this template for commercial projects?
A: Yes, Astro Erudite is available for both personal and commercial use.

Q: How do I add custom React components to my MDX posts?
A: Create your components in the src/components/ directory and import them directly in your MDX files.

Q: How do I customize the code syntax highlighting?
A: The template uses Expressive Code with Shiki for syntax highlighting. Configure themes and languages in your Astro configuration file under the expressiveCode settings.

Q: Can I migrate existing blog content to this template?
A: Yes, you can migrate content by converting existing posts to MDX format and ensuring the frontmatter matches the required schema.