The Challenge

Managing a growing webstore with manual HTML pages quickly becomes unsustainable. Every product addition meant copying entire pages, updating navigation, and ensuring consistency across all files.

Why Astro?

Astro is a Static Site Generator (SSG) that ships zero JavaScript by default, making it perfect for content-focused sites like shops and blogs. Key benefits:

  • Faster loads - No client-side framework overhead
  • Better SEO - Pre-rendered HTML at build time
  • Scalable architecture - Add products via JSON or Markdown
  • Consistent layouts - Shared components across all pages

Migration Approach

1. Centralized Product Data

Instead of duplicating product info across multiple HTML files, we moved to a single products.json:

{
  "slug": "frohm-grid-v2",
  "title": "Frohm Grid v2",
  "price": "$149",
  "description": "Excel-style list editing for Salesforce..."
}

2. Dynamic Routing

Astro's file-based routing with [slug].astro automatically generates pages for each product.

3. Shared Components

Navigation, footer, mesh background - all extracted into reusable components. One change updates every page.

Results

  • 60% less code - No more duplication
  • Faster updates - Add products in minutes, not hours
  • Consistent design - Single source of truth for styling
  • Better performance - Optimized builds, smaller bundles

Lessons Learned

  1. Start with structure - Plan your data model before coding
  2. Test incrementally - Migrate one product at a time
  3. Keep it simple - Don't over-engineer early on

What's Next

With the shop scalable, we're applying the same approach to the blog. Expect more technical deep-dives and tutorials coming soon!

Have questions about Astro migrations? Reach out via the contact page.