Astro Construction Template

Overview

An open-source, production-ready Astro website template designed for construction companies, freelancers, and agencies. The template combines multilingual support, CMS-driven content, and a custom design system into a reusable starter that can be deployed with zero configuration.

This project was built to practice building scalable, SEO-optimized Astro applications with a focus on clean architecture, reusability, and real-world content management needs.

What I Built

Multilingual Architecture (i18n)

• Built a full i18n system with English and Greek locales, including automatic locale detection, locale-aware routing, and a footer language switcher.
• All SEO metadata is localized per language, stored in YAML content files for easy editing through the CMS.

Keystatic CMS Integration

• Integrated Keystatic CMS with a visual editing interface at /keystatic, supporting both local mode and GitHub mode.
• Made all major sections CMS-editable: hero, slider images, about, services, work/projects, contact info, footer, and SEO metadata.
• Learned how to structure content collections for a CMS-first workflow in Astro.

Custom Design System

• Created a handcrafted construction-themed design system in Tailwind CSS 4, including responsive typography (H1-H4), paragraph system, badge components, section wrappers, utility presets, and color tokens.
• Defined everything in a dedicated construction-theme.css for easy customization and reuse.

Interactive Components

• Used React 19 islands selectively where client-side interactivity was needed, keeping the rest of the site static for performance.
• Integrated Embla Carousel with autoplay for image sliders, Radix Accordion for collapsible sections, and a sticky scroll-based work showcase gallery.

Image Optimization and SEO

• Implemented image optimization using astro:assets for automatic WebP conversion, resizing, and lazy loading.
• Set up full SEO tooling with @astrolib/seo, canonical URLs, astro:sitemap, astro-robots-txt, and configurable OG images via CMS.

Deployment

• Configured for zero-config deployment on Vercel with the official Vercel adapter, environment variable support, and fast builds.

Skills Practiced

• Astro 5 static site generation and island architecture
• React 19 selective hydration within Astro
• Tailwind CSS 4 custom design systems and theming
• Keystatic CMS content modeling and integration
• i18n routing, locale detection, and localized SEO
• Image optimization pipelines
• Vercel deployment and CDN delivery

Open Source

This template is freely available under the MIT License for personal and commercial use.

If this project saved you time or inspired your own work, you can support my open-source efforts: Buy Me A Coffee

Outcome

The Astro Construction Template demonstrates how to combine Astro, React, Tailwind CSS, and a headless CMS into a fast, maintainable, and fully localized website starter. It serves as both a practical tool for building construction business websites and a reference for modern Astro application architecture.