From Template to Production in 30 Minutes

Templates promise speed. Most do not deliver. You clone the repo, spend two hours figuring out the folder structure, another hour ripping out the demo content, and by the time you have something that looks like your project, you could have started from scratch.

Astro Starter is designed to avoid that experience. Here is the actual workflow from clone to production, timed.

Minutes 0-3: Clone and Install

git clone https://github.com/your-org/astro-starter.git my-site
cd my-site
bun install
bun dev

The dev server starts in under 2 seconds. Open http://localhost:3002 and you have a fully functional marketing site with navigation, hero sections, blog, contact form, and footer. Everything works. Dark mode, responsive layout, SEO metadata.

This is the starting point, not a blank canvas.

Minutes 3-10: Rebrand the Design

Open src/styles/tokens.css. The entire color system is defined in one place using OKLCH values:

@theme {
  --color-primary: oklch(0.7 0.15 240);
  --color-secondary: oklch(0.5 0.1 280);
  --color-accent-light: oklch(0.75 0.18 160);
  --color-accent-dark: oklch(0.55 0.15 160);
  --color-muted: oklch(0.85 0.02 240);
}

Change the hue values to match your brand. Want a warm orange brand? Set the primary hue to 60. Green? Use 145. The lightness and chroma values are already tuned for accessibility contrast ratios, so you mostly just change the hue channel.

Update the company name and details in src/config/company.ts:

export const company = {
  name: 'Your Company',
  tagline: 'Your tagline here',
  email: 'hello@yourcompany.com',
  phone: '+1 555 000 0000',
  address: '123 Main St, Your City',
};

Every component in the template pulls from this config. Change it once, see it everywhere.

Minutes 10-18: Replace Content

The blog posts live in src/content/blog/ as Markdown files with frontmatter. Delete the example posts and add your own, or keep them as a starting point and edit the content.

For the main pages, open the page files in src/pages/. The structure is straightforward:

src/pages/
  index.astro          # Homepage
  about.astro          # About page
  contact.astro        # Contact page
  blog/
    [...slug].astro    # Blog post template

Each page is a composition of components. The homepage might look like:

---
import Layout from '../layouts/Layout.astro';
import Hero from '../components/Hero.astro';
import Features from '../components/Features.astro';
import CTA from '../components/CTA.astro';
---

<Layout title="Home">
  <Hero />
  <Features />
  <CTA />
</Layout>

Swap components, reorder sections, or remove what you do not need. Each component is self-contained and documented through its props interface.

Minutes 18-22: Configure SEO

The Layout.astro component handles meta tags, Open Graph, and structured data. Most of it is automatic: page titles, descriptions, and canonical URLs are derived from props and the site config.

For site-wide SEO settings, check astro.config.mjs:

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

Setting the site value generates correct canonical URLs and sitemap entries. The template includes a sitemap integration that auto-generates sitemap.xml at build time.

Minutes 22-25: Test the Build

bun run build

The build runs in a few seconds and outputs static HTML to the dist/ directory. Check the terminal for any warnings about missing images, broken links, or content validation errors.

If you want to preview the production build locally:

bun run preview

This serves the built files exactly as they will be served in production.

Minutes 25-30: Deploy to Vercel

Push to GitHub and connect the repository to Vercel:

git remote set-url origin https://github.com/your-org/my-site.git
git add -A
git commit -m "initial customization"
git push -u origin main

In the Vercel dashboard, import the repository. Vercel auto-detects Astro and configures the build settings. Click deploy.

The first deployment takes about 30-45 seconds. Every subsequent push to main triggers an automatic deployment. Pull requests get preview deployments with unique URLs for review.

Your site is live. Custom domain setup takes another 5 minutes in the Vercel dashboard if you have a domain ready.

What You Get Out of the Box

Without writing a single line of code beyond content and config changes, the deployed site includes:

• Perfect Lighthouse scores across performance, accessibility, best practices, and SEO
• Responsive design that works on every device from mobile to ultrawide
• Dark mode with system preference detection and manual toggle
• Blog with categories, tags, and reading time estimates
• SEO with meta tags, Open Graph images, structured data, and sitemap
• Contact form ready for your preferred form handler
• Analytics-ready markup with semantic HTML and proper heading hierarchy

What to Customize Next

Once the basics are live, common next steps include:

• Adding your own images and optimizing them with Astro’s Image component
• Connecting a form handler (Formspree, Resend, or a custom API route)
• Adding analytics (Plausible, Fathom, or Google Analytics)
• Creating additional landing pages for marketing campaigns
• Setting up a CMS for non-technical content editors

The template is designed to be a starting point that you grow from, not a framework you fight against. Every piece of it is standard Astro code with no proprietary abstractions or lock-in.

Thirty minutes from clone to production. That is the promise, and it holds up.