A lightweight starter template with atomic design structure, SEO optimization, and modern features. Perfect for fast-paced development!
- ⚡ 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
# 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
- Atoms:
ToggleTheme.astro(+ CSS) |HamburgerButton.astro|FormattedDate.astro - Molecules:
Blogcards.astro(Post grids) - Organisms:
Header.astro(Responsive nav with dropdowns)
// Example blog post (content/blog/post.md)
---
title: "My First Post"
date: 2024-01-01
---
Article content...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
MIT Licensed | Optimized for Astro v5+ | Full Documentation