Astro Blog Project

🌐 Live Site: https://technodrishti.vercel.app

📡 RSS Feed: https://technodrishti.vercel.app/rss.xml

🗺️ Sitemap: https://technodrishti.vercel.app/sitemap-index.xml

This repository contains a modern, fast, and fully content-driven blog built with Astro 5, MD content collections, and Tailwind CSS. It supports authors, tags, categories, RSS feeds, SEO, and a reusable component system (Starwind).

This project powers the public blog available at
👉 https://technodrishti.vercel.app,
a fast, SEO-optimized Astro 5 blog with RSS feeds, sitemap indexing, and content collections.

---

🔗 Live Demo

You can view the live production site here:

👉 https://technodrishti.vercel.app

The blog is fully statically generated using Astro 5 and optimized for:

• Fast load times
• SEO
• RSS-based content discovery

Astro Blog

A modern, fast, and SEO-friendly blog built with Astro 5, STARWIND UI components, MD, and Tailwind CSS.

• ✍️ Author-based blogging system
• 🏷️ Tags and categories
• 📡 RSS feed generation
• 🌗 Dark / light mode
• 🖼️ Optimized images with astro:assets
• 🧩 Reusable UI components (Starwind)
• ⚡ Fast static generation

---

🚀 Tech Stack

• Framework: Astro 5 (https://technodrishti.vercel.app)
• Styling: Tailwind CSS
• Content: Astro Content Collections (Markdown)
• RSS: @astrojs/rss → https://technodrishti.vercel.app/rss.xml
• Image Optimization: Sharp

---

📁 Project Structure

src/
├─ assets/           # Static assets (SVGs, backgrounds)
├─ components/      # UI and layout components
│  ├─ icons/        # SVG-based icon components
│  ├─ starwind/    # Reusable UI system (Button, Card, etc.)
│  └─ BlogCard.astro
├─ config/          # Site configuration (social links)
├─ content/         # Markdown collections
│  ├─ authors/     # Author profiles
│  └─ blog/        # Blog posts and images
├─ layouts/         # Page layouts
├─ pages/           # Routes (blog, authors, RSS, etc.)
├─ scripts/         # Utility scripts
└─ styles/          # Global styles

---

🛠️ Installation

pnpm install

---

▶️ Development

pnpm dev

Runs the site at: http://localhost:4321

---

🏗️ Build

pnpm build

Preview the production build:

pnpm preview

---

✍️ Writing a Blog Post

Create a new markdown file inside:

src/content/blog/

Example:

---
title: My First Blog Post
description: This is my first post using Astro
publishedAt: 2025-01-01
author: amruth-l-p
tags: [astro, tailwind]
category: web
heroImageDark: ./images/astro-logo-dark.png
heroImageLight: ./images/astro-logo-light.png
---

Your content goes here...

---

👤 Adding an Author

Create a file in:

src/content/authors/

Example:

---
name: Amruth L P
title: Full Stack Developer
bio: Building tools with Astro and modern web technologies.
avatar: /assets/avatar.png
socials:
  github: https://github.com/yourname
  linkedin: https://linkedin.com/in/yourname
---

---

📡 RSS Feed

RSS is generated at:

/rss.xml

Powered by @astrojs/rss.

---

🌐 SEO & Sitemap

• Sitemap: /sitemap-index.xml
• Robots file: /robots.txt

---

📦 Scripts

Command	Description
pnpm dev	Start dev server
pnpm build	Build for production
pnpm preview	Preview production

---

🧱 Architecture Overview

This project is based on Astro Content Collections and file-based routing.

Content Flow

Markdown
   ↓
Astro Content Collections
   ↓
Pages (routes)
   ↓
Layouts
   ↓
UI Components

---

📂 Content Collections

Defined in:

src / content / config.ts;

Blog Collection

Each blog post supports:

• title
• description
• publishedAt
• author (reference to authors collection)
• tags
• category
• heroImage

Authors Collection

Each author supports:

• name
• title
• bio
• avatar
• socials

---

🧩 UI System (Starwind)

Reusable components live in:

src/components/starwind/

Available Components

• Button
• Card
• CardHeader
• CardContent
• CardFooter
• CardTitle
• CardDescription

These components use Tailwind Variants for styling consistency.

---

🛣️ Routing

Path	Description
/	Homepage
/blog	Blog listing
/blog/[slug]	Blog post page
/blog/tag/[tag]	Tag filter
/blog/category/[category]	Category filter
/authors	Authors listing
/authors/[slug]	Author profile
/rss.xml	RSS feed

---

🖼️ Image Handling

Images inside blog posts use:

import { Image } from "astro:assets";

This provides:

• Automatic resizing
• Format optimization
• Lazy loading

---

🌗 Theme System

Theme logic is handled by:

src/components/theme-init.astro
src/components/theme-toggle.astro

Supports:

• Light mode
• Dark mode
• System preference

---

📜 RSS Configuration

Located at:

src/pages/rss.xml.ts

It pulls from the blog collection and generates a valid XML feed.

---

🔍 SEO

SEO is handled in:

src/layouts/BaseLayout.astro

Includes:

• Meta tags
• OpenGraph
• Twitter cards
• Canonical URLs

---

🧪 Development Tips

• Use pnpm dev for hot reload
• Validate frontmatter fields carefully
• Always optimize images in /content/blog/images

---

🚀 Deployment

This project can be deployed on:

• Vercel
• Netlify
• Cloudflare Pages

Recommended build command:

pnpm build

Output directory:

dist/

---

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Open a Pull Request

---

📜 Credits

🔗 Project Website: https://technodrishti.vercel.app
Built and maintained by Amruth L P

📜 License

MIT License