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.
- 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
- Important: Ensure that pnpm is installed
- Clone the astro-theme-minimal-blog repository.
- Install dependencies.
pnpm install
- Run the development server.
pnpm dev
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.
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.
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,
],
)
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
:::note
Text
:::
:::caution[Watch out!]
Text
:::
:::tip
Text
:::
:::danger
Text
:::
Read the Aside Example to learn more.
<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.