Getting Started with astro-blog

This template gives you a fully-featured MDX blog with a built-in admin panel, syntax highlighting, dark/light mode, and Vercel deployment — all pre-wired. Delete this post when you’re done reading it.

Prerequisites

You’ll need Bun installed (or Node 20+ with npm). That’s it.

Installation

1. 1

   Clone the repository

   git clone https://github.com/your-username/astro-blog.git && cd astro-blog

2. 2

   Install dependencies

   bun install

3. 3

   Start the dev server

   bun run dev — then open http://localhost:4321

Configure your site

All site-wide settings live in a single file. Open src/site.config.ts and update the identity block:

export const SITE = {
  website: "https://yourdomain.com",
  title: "Your Blog Name",
  author: "Your Name",
  description: "One-line description of your blog.",
  // ...
};

Customise navigation

The nav links are an array in site.config.ts. Each item needs a label and an href:

nav: [
  { label: "Blog", href: "/posts/" },
  { label: "Tags", href: "/tags/" },
  { label: "About", href: "/about/" },
],

Add, remove, or rename as needed. The About page lives at src/data/pages/about.md — edit it directly.

Light and dark mode

The theme toggle is included by default. You can disable it by setting lightAndDarkMode: false in site.config.ts. The chosen theme is stored in localStorage and persists across visits.

Deploy to Vercel

1. 1

   Push to GitHub

   git add . && git commit -m 'initial' && git push

2. 2

   Import on Vercel

   Go to vercel.com/new, import your repo, and click Deploy. No configuration needed — the build command and output directory are detected automatically.

3. 3

   Set your domain

   Add a custom domain in Vercel's project settings, then update SITE.website in site.config.ts to match.

What’s next