Scaffold and configure static websites with Astro, React, TypeScript, and TailwindCSS, deployed to GitHub Pages via GitHub Actions. Use when creating a new static site, initializing an Astro project, setting up GitHub Pages deployment, adding SEO/social meta tags, configuring dev containers with dc-toolbelt, or when the user mentions building a static website, landing page, or marketing site.
Build static websites with Astro + React + TypeScript + TailwindCSS, deployed to GitHub Pages.
Astro must be created in an empty directory. For existing repos (the usual case), use /tmp:
cd /tmp
npm create astro@latest my-site -- --template minimal --typescript strictest
cp -a /tmp/my-site/. /path/to/repo/
cd /path/to/repo
npx astro add react
npx astro add tailwind
npx astro add sitemap
After initialization, set up the project structure:
docs/, mockups/ (for documentation and Google Stitch mockups)assets/ directory:
assets/deploy.yml → .github/workflows/deploy.ymlassets/devcontainer.json → .devcontainer/devcontainer.jsonassets/SEO.astro → src/components/SEO.astroassets/Layout.astro → src/layouts/Layout.astroassets/robots.txt → public/robots.txt (replace __SITE_URL__ with actual site URL)astro.config.mjs with site and base for GitHub Pagespublic/og-default.png (1200x630px)import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://<username>.github.io',
base: '/<repo-name>', // omit for user sites or custom domains
output: 'static',
integrations: [react(), sitemap()],
});
The project runs from totophe/dc-toolbelt. Available images:
ghcr.io/totophe/dc-toolbelt:node24-astro — lightweight, Astro-focusedghcr.io/totophe/dc-toolbelt:node24-toolbox — full toolbox with cloud CLIsPort 4321 is forwarded for the Astro dev server.
---
import Layout from '../layouts/Layout.astro';
---
<Layout title="Page Title" description="Page description">
<main><!-- content --></main>
</Layout>
<MyComponent client:load /> <!-- immediate -->
<MyComponent client:visible /> <!-- when scrolled into view (preferred) -->
Configuration is done in CSS via @import "tailwindcss" in src/styles/global.css.
.github/workflows/deploy.yml uses withastro/action@v5public/CNAME, update site, remove basesite set in astro.config.mjspublic/og-default.png (1200x630)public/robots.txt with sitemap URL<Image /> component for optimized imagesclient:visible preferred over client:load for non-critical componentsreferences/astro-setup.md — Detailed Astro project setup, integrations, content collections, view transitionsreferences/github-pages.md — GitHub Pages deployment, GitHub Actions workflow, dev container configurationreferences/seo.md — SEO meta tags, OG images, structured data, performance checklistWhen mockups exist in the mockups/ folder (typically Google Stitch exports), read them to understand the target design before building pages. Use them as the source of truth for layout, colors, and component structure.