Skip to content

LekoArts/astro-theme-minimal-blog

Repository files navigation

Astro Theme: Minimal Blog

Welcome to Astro Theme: Minimal Blog, an ideal option to start sharing your ideas. It's easy to set up and features everything you'd need for a blog.

Demo Website

✨ Features

  • Write blog posts with MDX
  • Styled with Tailwind
  • Code blocks powered by Expressive Code
  • Custom asides component
  • Live coding powered by Sandpack
  • RSS, Sitemap
  • Light/Dark/System color mode toggle
  • Add tags to your blog posts
  • Pagefind search

🚀 Getting started

  1. Important: Ensure that pnpm is installed
  2. Clone the astro-theme-minimal-blog repository.
  3. Install dependencies.
    pnpm install
  4. Run the development server.
    pnpm dev

📝 Using & modifying this theme

Add content

This theme features a CLI to help you scaffold new blog posts. It asks you questions to fill out the frontmatter and creates a file in the end. Run the CLI:

pnpm assistant

If you want to extend it, change the assistant.ts file.

Change constants

Parts of the theme are referencing constants.ts to e.g. set the site title or main navigation. Modify its contents to suit your site before deploying it.

Change existing tags / Add new tags

Inside constants.ts the FRONTMATTER_TAGS map contains the available tags for your site. You need to add your display name and slug of the tag inside this map. The display name will be used in the UI and the slug will be used in the URL.

It's referenced by Astro's content collections and also by the assistant.ts file.

You can add a new tag like so:

export const FRONTMATTER_TAGS = new Map(
	[
		// Existing tags...
		['Display name', 'slug-of-your-tag'] as const,
	],
)

🔍 Reference

Blog post frontmatter

By default, these frontmatter fields are available. You need to change content.config.ts to adjust it.

title: Markdown Reference Overview
slug: markdown-reference-overview
description: A post showcasing the markdown formatting of a post
date: 2025-02-18
lastUpdated: 2025-02-18
tags:
  - General
  - MDX
searchIndex: true
image: https://absolute-link.google.com/image.png

Custom MDX components

<Aside>

:::note
Text
:::

:::caution[Watch out!]
Text
:::

:::tip
Text
:::

:::danger
Text
:::

Read the Aside Example to learn more.

<Playground>

<Playground template="react">

```js name=App.js active
export default function App() {
  return <h1>Hello World</h1>
}
```

</Playground>

Read the Playground Example to learn more.