Astro Dev Template

A free, design-token-driven Astro 6 starter for dark-mode blogs and product showcases.

Live Demo

One-Click Deploy

Deploy your own copy in under 2 minutes:

Or use the CLI:

# Clone
git clone https://github.com/baflow/baselayer.git my-site
cd my-site

# Install & dev
npm install
npm run dev

Stack

Built with Astro 6, Tailwind CSS v4, Basecoat CSS, Svelte 5, Solar icons, and Inter + Newsreader fonts. Deploys to Cloudflare Pages.

Features

• Content Collections with typed frontmatter for blog posts and projects
• Design-token-driven Tailwind theme — tweak colors, typography, and spacing through a single source of truth
• Basecoat UI — debloated components, no React needed
• Expressive Code for beautiful fenced code blocks
• RSS, Sitemap, Open Graph out of the box, thanks to Astro
• Optional contact form — Cloudflare Workers + Resend API

Project Structure

├── public/                          # Static assets
├── src/
│   ├── assets/                      # Images processed by Astro
│   ├── components/                  # Astro + Svelte UI components
│   │   └── ui/                      # Reusable Svelte components
│   ├── content/                     # Markdown/MDX collections
│   ├── layouts/                     # Page layouts
│   ├── pages/                       # File-based routes
│   ├── styles/                      # Tailwind theme + Basecoat imports
│   └── types/                       # Local type definitions
├── integrations/                    # Git submodules (optional)
│   └── email-cloudflare-resend/     # Email worker (separate deploy)
├── scripts/                         # Dev / deploy helpers
├── DESIGN.md                        # Design system spec
├── astro.config.mjs
├── wrangler.toml
└── README.md

Before you publish your site

1. Set your site URL in astro.config.mjs:

   site: 'https://your-domain.com',
   

2. Update placeholders in src/consts.ts (title, description, contact links).
3. Replace the footer text in src/components/Footer.astro.
4. Add your own content to src/content/blog/ and src/content/projects/.
5. Replace thumbnail — add public/thumbnail.png (1200x630 recommended).
6. Configure Wrangler (optional) in wrangler.toml and .env.
7. Update repo URL in the deploy buttons above.

Git Submodules

This template uses a git submodule for the email worker so it can evolve independently while remaining version-pinned here.

# After cloning, initialise the submodule
git submodule update --init

# The submodule is mounted at:
# integrations/email-cloudflare-resend/

The submodule points to email-cloudflare-resend — a standalone Cloudflare Worker that acts as a secure email proxy (Turnstile, rate limiting, Resend relay). It is deployed separately from the Astro site. The frontend talks to it via EMAIL_WORKER_URL.

Email Worker (submodule)

The worker lives in integrations/email-cloudflare-resend/ (git submodule). It validates contact-form submissions from the static Astro site and relays them in a secure way through Resend.

Required secrets & variables (inside submodule)

Quick start

1. Initialise the submodule (if you haven't yet):

   git submodule update --init
   

2. Install & configure inside the submodule:

   cd integrations/email-cloudflare-resend
   npm install
   

   Edit wrangler.toml with your SENDER_DOMAIN and create a KV namespace if needed.

3. Add secrets:

   npx wrangler secret put RESEND_API_KEY
   npx wrangler secret put TURNSTILE_SECRET
   

4. Deploy:

   npm run email:deploy
   # or manually: cd integrations/email-cloudflare-resend && npx wrangler deploy
   

5. Wire the frontend — set the worker URL in .env:

   EMAIL_WORKER_URL=https://email-cloudflare-resend.<subdomain>.workers.dev/send
   [email protected]
   

Contributing

Feature requests and PRs are welcome. See CONTRIBUTING.md for guidelines.

License

MIT -- free for personal and commercial use.