index

Building This Blog with Astro

· 2min

In this post, I’ll walk through the process of building this blog using Astro and the Chiri theme, including the technical decisions and setup process.

Why Astro?

I chose Astro for several compelling reasons:

Performance First

Astro ships zero JavaScript by default, delivering pure HTML and CSS. This means blazingly fast page loads and excellent Core Web Vitals scores. JavaScript is only loaded when needed through Astro’s “islands architecture.”

Content Focused

Astro is designed for content-heavy sites like blogs, documentation, and portfolios. It has built-in support for:

  • Markdown and MDX
  • Content collections with type safety
  • RSS feeds
  • Sitemap generation

Developer Experience

The DX is excellent:

---
// Component script runs at build time
const posts = await getCollection('posts');
---

<!-- Template is pure HTML -->
<h1>My Blog</h1>
{posts.map(post => (
  <article>
    <h2>{post.data.title}</h2>
    <p>{post.data.description}</p>
  </article>
))}

Framework Agnostic

While this blog uses vanilla Astro, you can integrate React, Vue, Svelte, or any other framework for interactive components only where needed.

The Chiri Theme

Chiri is a minimal, elegant theme that emphasizes content readability. Key features include:

  • Clean, distraction-free design
  • Light and dark mode support
  • Responsive layout
  • Syntax highlighting for code blocks
  • KaTeX for mathematical equations
  • MDX support for rich content

Technical Setup

Initial Configuration

The setup was straightforward:

# Clone the theme
git clone https://github.com/the3ash/astro-chiri.git

# Install dependencies
pnpm install

# Start development server
pnpm dev

Deployment on Vercel

I configured the blog for Vercel deployment by:

  1. Installing the Vercel adapter
  2. Updating astro.config.ts
  3. Connecting the GitHub repository to Vercel
import vercel from '@astrojs/vercel/static';

export default defineConfig({
  adapter: vercel(),
  // ... other config
});

Customization

The theme is highly customizable through src/config.ts:

export const themeConfig = {
  site: {
    website: 'https://valics.com/',
    title: 'valics.com',
    author: 'Vali',
    description: 'Personal blog - thoughts, code, and projects',
  },
  general: {
    themeToggle: true,
    readingTime: true,
    // ... more options
  }
};

Content Structure

Posts are written in Markdown with YAML frontmatter:

---
title: 'Post Title'
pubDate: '2025-11-27'
---

Content goes here...

The content collections feature provides type safety and validation for all posts.

Performance Results

The results speak for themselves:

  • First Contentful Paint: < 1s
  • Time to Interactive: < 2s
  • Total Bundle Size: < 50KB
  • Lighthouse Score: 100/100

All achieved with zero optimization effort beyond what Astro provides out of the box.

What’s Next?

Future improvements I’m considering:

  • Adding a search feature
  • Implementing view counters
  • Setting up a newsletter
  • Adding comments via a service like Giscus

Conclusion

Building this blog with Astro and Chiri was a pleasant experience. The performance is excellent, the developer experience is smooth, and the end result is a clean, fast blog that puts content first.

If you’re looking to start a blog or personal site, I highly recommend checking out Astro and the Chiri theme.

Tech Stack:

  • Framework: Astro 5
  • Theme: Chiri
  • Hosting: Vercel
  • Package Manager: pnpm