AstroBlogStarter

astro-blog-starter — Astro Blog Template

By SofiDevO

A lightweight Astro blog starter template that organizes components using atomic design, with built-in light/dark theme switching, SEO metadata, and Markdown content collections.

Open Source Site Download Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

3 previews

Desktop homepage1 / 3

Visit websiteOpens in a new tab

Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 3

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-05View source

What stands out

A quick read of the recorded project description.

Uses an atomic design directory structure, with components organized into atoms, molecules, and organisms

Built-in light/dark theme switching with corresponding CSS

Preconfigured SEO settings such as OpenGraph and Meta tags

Articles are managed using Markdown and Astro content collections, with routes dynamically generated by [...slug].astro

Styling is plain CSS with no CSS framework dependency

Includes an Iconify icon wrapper component

Template Details

This is a starter template for quickly building an Astro blog, with both the repository and demo site publicly accessible. The template includes a homepage, a blog archive page, and article detail pages. Articles are stored as Markdown in the content/blog directory, and content collections are defined via content/config.ts. Components are layered according to atomic design: atoms include the theme toggle button, hamburger menu button, date formatting, and an Iconify icon wrapper; molecules provide a blog card grid; organisms provide a responsive header with a dropdown menu. Navigation items are maintained centrally in data/menuElements.js. Styling uses plain CSS with no UI framework. The template comes with OpenGraph and Meta tag SEO configuration and provides light/dark theme switching.

Usage limitations: the template is positioned as a starter project, with functionality limited to blog display and content management; it does not include comments, search, a CMS backend, or a user system. Licenses for third-party assets such as demo images, fonts, and icons must be checked separately and cannot be assumed based solely on the code's MIT license. The "production-ready configuration" mentioned in the README is the author's own statement; this introduction does not make any judgment about its production readiness.

AstroBlogStarter

Is it right for your project?

Use Cases

Building a personal blog focused on Markdown writing from scratch
Using it as a sample project to learn Astro content collections and dynamic routing
Needing a blog frontend starting point with light/dark themes and responsive navigation
Extending custom components on top of the atomic design structure

Suitable For

Developers familiar with Markdown who want to publish articles with Astro
Frontend developers who need a lightweight blog template with no UI framework dependency
Learners who want to reference an atomic design approach to organizing Astro component structure

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

1
Create a project with npm create astro@latest -- --template SofiDevO/astro-blog-starter, or clone the repository and run npm install
2
The development server runs on port 4321 by default; start it with npm run dev, and build the production version with npm run build
3
Articles go in the src/content/blog directory, and navigation items are configured in src/data/menuElements.js
4
The code is MIT licensed; when distributing, retain the copyright notice and license notice. Third-party assets such as demo images, fonts, and icons require separate license checks

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version in the public repository under the MIT license; the free scope applies to that version's code and does not mean external services or third-party assets are free.

Must comply with when using

You may use, modify, commercially use, and distribute the code of this version for free.
When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be assumed based solely on the code's MIT license.
External services such as domains, hosting, databases, payments, or AI may incur separate charges.
The README includes GitHub Sponsors and Ko-fi sponsorship links; these are voluntary donations and not a prerequisite for using the template, which remains free under the MIT license.

View Original Text Basis

Permission is hereby granted, free of charge
Original License Text

## Support Development ☕ [![GitHub Sponsors](https://img.shields.io/badge/Sponsor-%E2%9D%A4%EF%B8%8F-ea4aaa?logo=githubsponsors)](https://github.com/sponsors/SofiDevO?o=esb) [![Ko-fi](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ff5e5b?logo=kofi)](https://ko-fi.com/sofidev)
Original README

https://github.com/SofiDevO/astro-blog-starter/blob/main/LICENSE https://github.com/SofiDevO/astro-blog-starter/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-05. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms: Astro Themes
Documentation and maintenance reference score: More documented · 82 / 100
Technologies: Astro
Website type: Blog · Starter

How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded: 2025-04-04
Screenshot last checked: 2026-10-05

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Astro as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: [email protected] · 2026-10-06

Inspect the recorded source material

SHA-256: 4481376cbca6d35088ebd0cf33d6a579f29625f1de92e145bdaeba6bda64b82a

2026-10-05T16:25:05.648Z

Source file / repository


# Astro Blog Starter 🌟

A lightweight starter template with atomic design structure, SEO optimization, and modern features. Perfect for fast-paced development!

## Features ✨

- ⚡ SEO Pre-configured (OpenGraph, Meta Tags)
- 🌓 Light/Dark theme toggle
- 🧩 Atomic Design structure
- 🪝 Dynamic dropdown menu
- 🎨 Vanilla CSS (no frameworks)
- 📦 Iconify integration
- 🚀 Production-ready configuration

## Installation ⚙️

```bash
# Clone template
npm create astro@latest -- --template SofiDevO/astro-blog-starter

# Install dependencies
npm install

# Start dev server (port 4321)
npm run dev

# Build for production
npm run build
````


[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)
[![Astro](https://img.shields.io/badge/Astro-5.5.5-FF5D01.svg?logo=astro)](https://astro.build)

![Portada](./public/img/portada.png)

## Key Components 🔑

### Atomic Design Implementation
- **Atoms**:
  `ToggleTheme.astro` (+ CSS) | `HamburgerButton.astro` | `FormattedDate.astro`
- **Molecules**:
  `Blogcards.astro` (Post grids)
- **Organisms**:
  `Header.astro` (Responsive nav with dropdowns)

### Content Management
```astro
// Example blog post (content/blog/post.md)
---
title: "My First Post"
date: 2024-01-01
---

Article content...
```







## Core Structure 🌐

```
src/
├── components/
│   ├── atoms/
│   │   ├── CardBlog/           # Blog post cards
│   │   ├── HamburgerButton/    # Mobile menu toggle
│   │   ├── Icons/              # Iconify wrapper
│   │   ├── ToggleTheme/        # Dark/light switcher (+ CSS)
│   │   └── utilsComponents/    # Date formatter
│   ├── molecules/
│   │   └── Blogcards/          # Blog post grid system
│   └── organisms/
│       ┗── Header/             # Navigation with dropdowns
├── content/
│   ├── blog/                   # Markdown posts
│   └── config.ts               # Content collection config
├── data/
│   └── menuElements.js         # Navigation items
├── layouts/
│   ├── Layout.astro            # Default layout
│   └── LayoutBlogPost.astro    # Article template
├── pages/
│   ├── blog/
│   │   ├── [...slug].astro     # Dynamic blog routes
│   │   └── index.astro         # Blog archive
│   └── index.astro             # Homepage
└── styles/
    └── global.css              # Base styles
```


## Support Development ☕
[![GitHub Sponsors](https://img.shields.io/badge/Sponsor-%E2%9D%A4%EF%B8%8F-ea4aaa?logo=githubsponsors)](https://github.com/sponsors/SofiDevO?o=esb)
[![Ko-fi](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ff5e5b?logo=kofi)](https://ko-fi.com/sofidev)

---

**MIT Licensed** | Optimized for Astro v5+ | [Full Documentation](https://github.com/SofiDevO/astro-blog-starter)

Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

astrowind

AstroWind is a free, open-source Astro starter theme using Astro and Tailwind CSS, released under the MIT license.

Astro · Blog

astro-paper

AstroPaper is a minimal, responsive, accessible, and SEO-friendly Astro blog theme. Articles are stored as Markdown/MDX in src/content/posts/, with subdirectories affecting URLs.

Astro · Blog

fuwari

Fuwari is a static blog template built with Astro and Tailwind CSS for personal blogs. It manages posts as Markdown files in src/content/posts/, with frontmatter for title, date, description, cover, tags, categories, draft status, and language.

Astro · Blog

Firefly

Firefly is a clean personal blog theme forked from Astro and Fuwari, offering four background modes, single/double sidebar and list/grid layouts, Pagefind client-side full-text search, and a six-language UI.

Astro · Blog

astro-theme-cactus

Astro Cactus is an Astro-based blog and portfolio theme that uses Markdown/MDX content collections to manage posts, notes, and tags, with frontmatter type-checked by a schema.

Astro · Portfolio

astrofy

Astrofy is a free and open-source personal portfolio website template built with Astro and TailwindCSS, with built-in blog, CV timeline, project showcase, store, and RSS feed modules.

Astro · Portfolio