Building a Blog with Astro

In this post, I’ll walk through the tech stack and design decisions behind this blog.

The Tech Stack

This blog is built with:

• Astro - The web framework for content-driven websites
• Tailwind CSS v4 - Utility-first CSS framework
• React - For interactive components (theme toggle, progress bar)
• Cloudflare Pages - Fast, global hosting with automatic deployments

Project Structure

The project follows a clean, organized structure:

src/
├── blog/          # Markdown blog posts
├── components/    # Reusable UI components
├── layouts/       # Page layouts
├── pages/         # Route handlers
└── styles/        # Global and typography styles

Content Collections

Astro’s Content Collections make managing blog posts a breeze:

const blogs = defineCollection({
  loader: glob({ pattern: '**/[^_]*.md', base: './src/blog' }),
  schema: z.object({
    slug: z.string(),
    title: z.string(),
    description: z.string(),
    date: z.date(),
    author: z.string(),
    tags: z.array(z.string()),
    featured: z.boolean(),
  }),
});

Dark Mode

The site supports both light and dark modes:

1. Checks localStorage for saved preference
2. Falls back to system preference
3. Persists user choice across sessions

Performance

Astro ships minimal JavaScript by default. The only client-side JS is for:

• Theme toggle functionality
• Reading progress bar
• Prefetching links for faster navigation

Deployment

Cloudflare Pages makes deployment simple:

1. Connect your GitHub repository
2. Set build command: npm run build
3. Set output directory: dist
4. Deploy automatically on every push

Conclusion

Astro provides an excellent foundation for building fast, content-focused websites. The combination with Tailwind CSS and Cloudflare Pages creates a powerful, modern stack.

Feel free to explore the source code and use it as inspiration for your own projects!