Astro Erudite

astro-erudite is an opinionated, unstyled static blogging template built with Astro, Tailwind, and shadcn/ui. Extraordinarily loosely based off the Astro Micro theme by trevortylerlee.

[!NOTE] To learn more about why this template exists, read The State of Static Blogs in 2024, where I share my take on what constitutes a great blogging template and my goals while developing this one.

Community Examples

Below are some fantastic examples of websites based on this template. If you wish to add your site to this list, open a pull request!

Features

• Astro’s Islands architecture for partial/selective hydration and client-side interactivity while maintaining a fast-to-render static site.
• shadcn/ui’s Tailwind color convention for automatic styling across both light and dark themes. Includes accessible, theme-aware UI components for navigation, buttons, etc.
• Expressive Code for advanced code block styling, highlighting, and code block titles/captions.
• Blog post authoring using MDX for component-style content, alongside $\LaTeX$ rendering using KaTeX.
• Astro View Transitions in SPA mode for smooth, opt-in animations during route switching.
• SEO optimization with fine-grained control over metadata and Open Graph tags for each post.
• RSS feeds and sitemap generation!
• Supports author profiles (with a dedicated authors page) and adding multiple authors per post.
• Supports project tags (with a dedicated tags page) for easy post categorization and discovery.

Technology Stack

This is a list of the various technologies used to build this template:

Getting Started

1. Hit “Use this template”, the big green button on the top right, to create a new repository in your own GitHub account with this template.

2. Clone the repository:

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

3. Install dependencies:

   npm install
   

4. Start the development server:

   npm run dev
   

5. Open your browser and visit http://localhost:1234 to get started. The following commands are also available:

   Command	Description
   npm run start	Alias for npm run dev
   npm run build	Run type checking and build the project
   npm run preview	Previews the built project
   npm run astro	Run Astro CLI commands
   npm run prettier	Blanket format all files using Prettier

Customization

Site Configuration

Edit the src/consts.ts file to update your site's metadata, navigation links, and social links:

export const SITE: Site = {
  title: 'astro-erudite',
  description: // ...
  href: 'https://astro-erudite.vercel.app',
  featuredPostCount: 2,
  postsPerPage: 3,
}

export const NAV_LINKS: SocialLink[] = [
  {
    href: '/blog',
    label: 'blog',
  },
  // ...
]

export const SOCIAL_LINKS: SocialLink[] = [
  {
    href: 'https://github.com/jktrn',
    label: 'GitHub',
  },
  // ...
]

Color Palette

Colors are defined in src/styles/global.css in OKLCH format, using the shadcn/ui convention:

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
}

.dark {
  /* ... */
}

Favicons

Favicons are generated using RealFaviconGenerator. To adjust the favicons, replace the files in the public/ directory (such as favicon.ico, favicon.svg, apple-touch-icon.png, etc.) with your own. After updating the favicon files, you'll also need to adjust the references in src/components/Favicons.astro to match your new favicon filenames and paths:

<!-- Replace these with the generated meta tags -->
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="astro-erudite" />
<link rel="manifest" href="/site.webmanifest" />

Adding Content

Blog Posts

Add new blog posts as MDX files in the src/content/blog/ directory. Use the following frontmatter structure:

---
title: 'Your Post Title'
description: 'A brief description of your post!'
date: 2024-01-01
tags: ['tag1', 'tag2']
image: './image.png'
authors: ['author1', 'author2']
draft: false
---

The blog post schema is defined as follows:

Authors

Add author information in src/content/authors/ as Markdown files. A file named [author-name].md can be associated with a blog post if "author-name" (the id) is added to the authors field:

---
name: 'enscribe'
pronouns: 'he/him'
avatar: 'https://gravatar.com/avatar/9bfdc4ec972793cf05cb91efce5f4aaaec2a0da1bf4ec34dad0913f1d845faf6.webp?size=256'
bio: 'd(-_-)b'
website: 'https://enscribe.dev'
twitter: 'https://twitter.com/enscry'
github: 'https://github.com/jktrn'
mail: '[email protected]'
---

The author schema is defined as follows:

[!TIP] You can add as many social media links as you want, as long as you adjust the schema! Make sure you also support the new field in the src/components/SocialIcons.astro component.

Projects

Add projects in src/content/projects/ as Markdown files:

---
name: 'Project A'
description: 'This is an example project description! You should replace this with a description of your own project.'
tags: ['Framework A', 'Library B', 'Tool C', 'Resource D']
image: '/static/1200x630.png'
link: 'https://example.com'
startDate: '2024-01-01'
endDate: '2024-01-01'
---

The project schema is defined as follows:

License

This project is open source and available under the MIT License.

Star History

Built with ♥ by enscribe!