astro-website

Astro Website Builder

Build polished, multi-page static websites from provided content using Astro 5, deployed to Cloudflare Pages with custom domains.

When This Skill Applies

The user provides content in one of these forms (placed in the project root before starting):

• Markdown (.md) articles
• A PDF or eBook on a topic
• A collection of text files on a theme
• A WordPress XML export
• Sometimes just a topic and verbal description

The job is to transform that into a professional, fast, accessible website.

Before Starting: Gather Requirements

Ask these questions (skip any already answered):

1. Site name and domain — What's it called? What custom domain? (e.g., myproject.com)
2. Purpose and audience — Who is this for?
3. Content sections — What pages should the site have? (Suggest a structure based on the provided content)
4. Theme preference — Dark mode default, light mode, or both with toggle? Color preferences?
5. Font style — Editorial/serif, clean modern, or technical? (See references/design-tokens.md for options)

Project Initialization

Run in the empty project folder:

npm create astro@latest . -- --template minimal --typescript strict --install --git --no
npm install @astrojs/sitemap marked sanitize-html

Create the folder structure:

src/
├── components/    # Header, Footer, cards, reusable UI
├── layouts/       # BaseLayout.astro
├── pages/         # File-based routes
├── data/          # Content as TypeScript arrays
├── styles/        # global.css
└── utils/         # Helpers (if needed)
public/
├── images/
├── fonts/         # Self-hosted fonts (if any)
├── favicon.svg
├── favicon.ico
├── robots.txt
└── _headers

Create these config files:

astro.config.mjs:

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
  site: 'https://[your-domain.com]',
  integrations: [sitemap()],
});

wrangler.jsonc:

{
  "name": "[project-name]",
  "compatibility_date": "[YYYY-MM-DD]",
  "assets": { "directory": "./dist" }
}