README.md

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.

---

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!

Site	Author	Tags	Source
enscribe.dev	@jktrn	portfolio, interactive	→
emile.sh	@echoghi	minimal, flexoki	→
decentparadox.me	@decentparadox	portfolio, sci-fi	→
flocto.github.io	@flocto	blog	→
dumbprism.me	@dumbprism	portfolio, bento	→
hyuki.dev	@snow0406	minimal, blog	→
ldd.cc	@xJoyLu	blog	→
rezarezvan.com	@rezaarezvan	academic, blog	→
blog.z0x.ca	@z0x	minimal	→
angelaytchan.net	@wispyplant	portfolio, art	→
kaezr.xyz	@kaezrr	minimal, portfolio	→
worldwidewong	@brendanwong-web	portfolio, gallery	→
bgajjala.dev	@bgajjala8	minimal, blog	→
ankitz007.vercel.app	@ankitz007	blog	→
sadman.ca	@sadmanca	blog, media	→
marcel-to.vercel.app	@Marcel-TO	portfolio, docs	→
merox.dev	@meroxdotdev	blog, devops, homelab	→
Off by One	@cduruk	engineering, blog	→
holywater.dev	@holywater2372	cybersecurity, blog	→

Features

• Astro's Islands architecture for selective hydration and client-side interactivity while maintaining fast static site rendering.
• shadcn/ui with Tailwind color conventions for automatic light and dark theme styling. Features accessible, theme-aware UI components for navigation, buttons, and more.
• Expressive Code for enhanced code block styling, syntax highlighting, and code block titles.
• Blog authoring with MDX for component-rich content and $\LaTeX$ math rendering via KaTeX.
• Astro View Transitions in SPA mode for smooth route animations.
• SEO optimization with granular metadata and Open Graph tag control for each post.
• RSS feed and sitemap generation.
• Subpost support for breaking long content into digestible parts and organizing related series.
• Author profiles with a dedicated authors page and multi-author post support.
• Project tags with a dedicated tags page for post categorization and discovery.
• Custom Callout component variants for enhanced technical writing.

Technology stack

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

Category	Technology Name
Framework	Astro
Styling	Tailwind
Components	shadcn/ui
Content	MDX
Codeblocks	Expressive Code, Shiki
Graphics	Figma
Deployment	Vercel

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

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);
}

[data-theme='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:

Field	Type (Zod)	Requirements	Required
title	string	Should be ≤60 characters.	Yes
description	string	Should be ≤155 characters.	Yes
date	coerce.date()	Must be in YYYY-MM-DD format.	Yes
order	number	Sort order for subposts with the same date. Defaults to 0 if not provided.	Optional
image	image()	Should be exactly 1200px × 630px.	Optional
tags	string[]	Preferably use kebab-case for these.	Optional
authors	string[]	If the author has a profile, use the id associated with their Markdown file in src/content/authors/ (e.g. if their file is named jane-doe.md, use jane-doe in the array).	Optional
draft	boolean	Defaults to false if not provided.	Optional

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: 'jason@enscribe.dev'
---

The author schema is defined as follows:

Field	Type (Zod)	Requirements	Required
name	string	n/a	Yes
pronouns	string	n/a	Optional
avatar	string.url() or string.startsWith('/')	Should be either a valid URL or a path starting with /. Preferably use Gravatar with the ?size=256 size parameter.	Yes
bio	string	n/a	Optional
mail	string.email()	Must be a valid email address.	Optional
website	string.url()	Must be a valid URL.	Optional
twitter	string.url()	Must be a valid URL.	Optional
github	string.url()	Must be a valid URL.	Optional
linkedin	string.url()	Must be a valid URL.	Optional
discord	string.url()	Must be a valid URL.	Optional

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:

Field	Type (Zod)	Requirements	Required
name	string	n/a	Yes
description	string	n/a	Yes
tags	string[]	n/a	Yes
image	image()	Should be exactly 1200px × 630px.	Yes
link	string.url()	Must be a valid URL.	Yes
startDate	coerce.date()	Must be in YYYY-MM-DD format.	Optional
endDate	coerce.date()	Must be in YYYY-MM-DD format.	Optional

License

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

---

Star history

---

Built with ♥ by enscribe!