https://github.com/sofidevo/astro-blog-starter

Template to start simple astro project with clean design and utitlities
https://github.com/sofidevo/astro-blog-starter

astro astrotheme javascript template

Last synced: 3 months ago
JSON representation

Template to start simple astro project with clean design and utitlities

• Host: GitHub
• URL: https://github.com/sofidevo/astro-blog-starter
• Owner: SofiDevO
• License: mit
• Created: 2025-01-19T20:41:56.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-04T04:56:27.000Z (about 1 year ago)
• Last Synced: 2025-08-01T12:49:20.756Z (10 months ago)
• Topics: astro, astrotheme, javascript, template
• Language: Astro
• Homepage: https://astro-blog-starter-beryl.vercel.app
• Size: 2.56 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          

# 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)