Personal Blog

A minimal personal blog built with Astro, deployed on Netlify.

Stack

• Framework: Astro 4 (static site generator)
• Content: Markdown files in src/content/posts/
• Styling: Plain CSS with CSS custom properties (no Tailwind or UI libraries)
• Theme: Automatic dark/light mode (respects system preference + manual toggle)
• Feed: RSS at /rss.xml
• Hosting: Netlify

Getting started

# Install dependencies
npm install

# Start dev server
npm run dev
# → http://localhost:4321

# Build for production
npm run build

# Preview production build locally
npm run preview

Writing posts

Create a new .md file in src/content/posts/:

---
title: "My post title"
pubDate: 2026-03-07
description: "A short description (used in RSS and meta tags)."
---

Your post content here, in Markdown.

The filename becomes the URL slug: my-new-post.md → /posts/my-new-post/.

To hide a draft post from the list, add draft: true to the frontmatter.

Customising

What	Where
Site title & author name	src/layouts/BaseLayout.astro
Site URL (for RSS & canonical)	astro.config.mjs → site
About page text	src/pages/about.astro
Favicon	public/favicon.svg
Colours & fonts	<style> block in src/layouts/BaseLayout.astro

Deploying to Netlify

Option 1 — Netlify UI (easiest)

1. Push this repo to GitHub.
2. Go to app.netlify.com → Add new site → Import an existing project.
3. Connect your GitHub repo. Netlify will auto-detect the netlify.toml settings.
4. Click Deploy site.

Option 2 — Netlify CLI

npm install -g netlify-cli
netlify init
netlify deploy --prod

After deploying

Update site in astro.config.mjs with your real Netlify URL (or custom domain):

export default defineConfig({
  site: 'https://yourdomain.com',
});

This ensures RSS feed links and canonical URLs are correct.

Custom domain

In Netlify: Site settings → Domain management → Add custom domain. Then update site in astro.config.mjs.