Static Site Generator Development: Astro, 11ty, Gatsby

Static site generator development means building your website as plain, pre-rendered HTML files at build time instead of assembling every page on a server for every visitor. The result is a site that loads almost instantly from a CDN anywhere in the world, has no database or admin panel for attackers to target, survives traffic spikes without breaking a sweat and costs very little to host.

At CodeWiz we build static and Jamstack websites with Astro, Eleventy (11ty) and Gatsby, connect them to the content workflow that suits your team – Markdown in Git, a Git-based CMS or a headless CMS – and deploy them through automated pipelines to edge hosting. We also maintain existing static sites and migrate sites away from slow, plugin-heavy platforms when a static architecture makes more sense.

Static site generators are a strong fit for company and marketing websites, documentation portals, blogs and magazines, landing pages, product catalogues and multilingual sites where content changes a few times a day rather than every second. If your current site is slow, expensive to keep patched or nervous about every traffic peak, a static build is often the cleanest fix.

Static Site: Two monitors on a dark desk showing source code and a website preview

Astro Setup: Content-Driven Sites with Islands Architecture

Astro is our default choice for most new static sites. It renders everything to HTML at build time and ships zero JavaScript by default. Interactive parts – a search box, a product configurator, a mobile menu – become “islands” that hydrate on their own, only when they are needed. You can write those islands in React, Vue, Svelte, Solid or plain web components, so existing UI code is reusable.

What our Astro setup includes

Type-safe content collections with a schema, so a missing image or an over-long meta title fails the build instead of reaching production.
Built-in image optimization through astro:assets: responsive sizes, AVIF and WebP output and correct width and height to prevent layout shift.
Islands loaded with client:visible or client:idle rather than on page load, and the View Transitions router for smooth navigation where it adds value.
Sitemap, RSS, canonical URLs, Open Graph tags and structured data generated from content, plus i18n routing for multilingual sites.
Static output by default, with selected routes switched to on-demand rendering or server islands if a page truly needs live data.

Content collections with validation

// src/content.config.ts
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({ pattern: '**/*.md', base: './src/content/blog' }),
  schema: ({ image }) => z.object({
    title: z.string().max(60),
    description: z.string().min(140).max(160),
    pubDate: z.coerce.date(),
    cover: image(),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog };

The official Astro documentation covers content collections and islands in depth; our job is to choose the right patterns for your content model and keep the project simple for whoever maintains it next.

11ty Configuration: Lean, Flexible Static Sites

Eleventy (11ty) is a minimal, JavaScript-based static site generator with no client-side framework at all. It takes Markdown, Nunjucks, Liquid, WebC or plain HTML templates and data from JSON, JavaScript files or APIs, and outputs exactly the HTML you wrote. It builds very fast, has few dependencies and is easy to keep running for years – a big advantage for documentation, content-heavy sites and projects that must stay maintainable with little effort.

A typical Eleventy configuration

// eleventy.config.js
import { eleventyImageTransformPlugin } from '@11ty/eleventy-img';

export default function (eleventyConfig) {
  eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
    formats: ['avif', 'webp', 'jpeg'],
    widths: [480, 960, 1600],
    htmlOptions: { imgAttributes: { loading: 'lazy', decoding: 'async' } },
  });
  eleventyConfig.addPassthroughCopy({ 'src/static': '/' });
  eleventyConfig.addCollection('posts', (api) =>
    api.getFilteredByGlob('src/posts/*.md').filter((p) => !p.data.draft));
  return { dir: { input: 'src', output: '_site' } };
}

How we configure 11ty projects

A clear folder structure with layouts, partials, global data files and collections defined in one place.
Image transforms, HTML minification and inlined critical CSS as part of the build.
Data fetched from APIs or a headless CMS at build time and cached locally with @11ty/eleventy-fetch, so rebuilds stay fast.
Pagination for listings, tag pages and multilingual folders without extra plugins.

The Eleventy documentation is short and practical, which is part of the appeal: a new developer can understand the whole project in an afternoon.

Gatsby Development, Maintenance and Migration

Gatsby popularised React-based static sites with a GraphQL data layer and a large plugin ecosystem. Many company sites still run on it, and we develop and maintain them: dependency and Node.js upgrades, broken source plugins, slow builds, image pipeline issues and new features. Gatsby’s development has slowed considerably since Netlify acquired it in 2023, so for new projects we usually recommend Astro or Eleventy instead.

Maintain: keep an existing Gatsby site secure and buildable, update plugins, fix GraphQL schema errors and cut build times with caching in CI.
Migrate: move React components into Astro islands, replace GraphQL queries with content collections or direct API calls and keep every URL intact with redirects.
Decide with data: we compare build times, bundle sizes and Core Web Vitals before and after, so the migration decision is not a matter of taste.

Choosing a Static Site Generator: Astro vs Eleventy vs Gatsby vs Hugo

Generator	Language and templates	JavaScript shipped by default	Build speed	Best for
Astro	Astro components, Markdown, MDX; React, Vue, Svelte islands	None, islands opt in	Fast	Marketing sites, blogs, catalogues with some interactivity
Eleventy (11ty)	Markdown, Nunjucks, Liquid, WebC, HTML	None	Very fast	Documentation, content sites, long-lived low-maintenance projects
Gatsby	React with a GraphQL data layer	React runtime on every page	Slower on large sites	Existing Gatsby projects and teams invested in its plugins
Hugo	Go templates, Markdown	None	Extremely fast	Very large sites with thousands of pages
Next.js static export	React	React runtime	Moderate	Teams already on Next.js who need a static deployment

The right choice depends on who edits content, how much interactivity you need and what your developers already know. We are not tied to one tool and will recommend the one that keeps your total cost lowest over the site’s lifetime.

Static Site Performance Optimization

Static HTML gives you a head start, but it does not guarantee a fast site – a static page with a 3 MB hero image and five tracking scripts is still slow. Performance optimization for static sites focuses on what the browser downloads after the HTML arrives:

Images: responsive srcset, AVIF and WebP, explicit dimensions, lazy loading below the fold and a preloaded, high-priority hero image for a good Largest Contentful Paint.
Fonts: self-hosted, subset to the characters you use (including č, ć, š, ž and đ for regional languages), preloaded and served with font-display: swap.
Styles and scripts: critical CSS inlined, unused styles purged, islands hydrated late and third-party scripts audited one by one.
Caching: hashed assets cached for a year as immutable, HTML revalidated on every request so new deployments appear instantly.
Budgets in CI: Lighthouse CI or size limits fail a pull request that makes the site noticeably heavier.

# _headers (Cloudflare Pages / Netlify)
/_astro/*
  Cache-Control: public, max-age=31536000, immutable

/*
  Cache-Control: public, max-age=0, must-revalidate
  Content-Security-Policy: default-src 'self'; img-src 'self' data:
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin

This is the same discipline we apply when chasing perfect 100/100 page vitals, and static output makes those scores far easier to reach and keep.

Developer workstation with a monitor, backlit keyboard and laptop on a wooden desk

Content Editing Without Touching Code

A common worry is that a static site means editors have to learn Git. They do not. We match the editing workflow to your team:

Markdown in Git: ideal for developer documentation and technical teams; every change is reviewed and versioned.
Git-based CMS: Decap CMS or TinaCMS give editors a visual interface that commits changes to the repository behind the scenes.
Headless CMS: Strapi, Sanity, Contentful or WordPress as a headless backend; publishing triggers a webhook that rebuilds and deploys the site in minutes.
Preview builds: every draft or pull request gets its own preview URL, so editors see exactly what will go live.

Adding Dynamic Features to a Static Website

Static does not mean static in functionality. Most “dynamic” needs are solved with small, focused services:

Forms: a lightweight serverless function or your existing API, with spam protection such as Cloudflare Turnstile and delivery to email or a CRM.
Search: Pagefind builds a static search index at build time for small and medium sites; larger catalogues get instant, typo-tolerant search with Typesense – see our article on fast search engines built on Typesense.
Personalisation and A/B tests: edge functions or Cloudflare Workers that adjust responses close to the visitor without a central server.
E-commerce and bookings: embedded checkout from Stripe or Shopify, or a separate API for carts and accounts.
Comments, maps and video: loaded only after user interaction, so they never slow down the first view.

Hosting, Deployment and Security

A static site is a folder of files, so hosting is simple and cheap. We deploy to Cloudflare, Netlify, Vercel, GitHub Pages, an S3-compatible bucket behind a CDN or your own Nginx server, depending on where the rest of your infrastructure lives. Our Cloudflare configuration guide explains many of the edge settings we use.

Builds run in CI (GitHub Actions or GitLab CI) with dependency caching, link checking and HTML validation.
Deployments are atomic: the new version goes live all at once, and rolling back is a single click to the previous build.
Security headers, HTTPS everywhere and no server-side code on the public site, so there is no database to inject and no plugin to exploit.
Scheduled rebuilds publish time-based content, such as posts set for a future date.

When a Static Site Is the Right Choice – and When It Is Not

Situation	Static site generator	Traditional CMS or server-rendered app
Company website, blog, documentation	Excellent fit	Works, but heavier to run and secure
Content updated a few times a day	Excellent fit with webhook rebuilds	Good fit
Tens of thousands of pages changing constantly	Possible, needs incremental strategy	Usually better
User accounts, dashboards, real-time data	Only as a static shell plus APIs	Better fit
Large online store with live stock and prices	Partial: static catalogue plus dynamic cart	Usually better

Migrating from WordPress or Another CMS to a Static Site

Migrations are where SEO is won or lost. We export content through the WordPress REST API or a database dump, convert it to Markdown or load it into a headless CMS, download and optimise media, and keep the URL structure identical wherever possible. Every changed URL gets a 301 redirect, and we compare the old and new sitemaps and crawl both sites before launch. WordPress can also remain your editor as a headless backend while visitors get the static front end.

Open laptop on a bright wooden table with a second laptop in the background

How We Work

Discovery: we review your content, editors, integrations and traffic, and confirm that a static architecture fits your needs.
Plan: we choose the generator, content workflow, hosting and the list of dynamic features with the services that will power them.
Build: we develop templates and components, the content model, image pipeline and CI/CD with preview deployments.
Test: we check Core Web Vitals, accessibility, broken links, redirects and every form and integration on real devices.
Launch: we switch DNS with minimal downtime, submit sitemaps and monitor search console and error reports.
Support: we keep dependencies current, train your editors and add features as your site grows.

Why CodeWiz

Performance is our everyday work: from static builds to Varnish and Cloudflare, fast websites are what we do.
Tool-agnostic advice: Astro, Eleventy, Gatsby or a classic CMS – we recommend what fits, not what is trendy.
Full-stack coverage: forms, search, APIs, serverless functions and hosting come from the same team as the front end.
Open-source first: generators, CMS options and tooling without lock-in or licence fees.
Fair pricing: premium development without premium prices, from Banja Luka, working remotely with clients locally and internationally – learn more about CodeWiz.

Frequently Asked Questions

How much does a static website cost to build?

It depends on the number of templates, the content workflow, the dynamic features and whether content needs to be migrated. A focused company site is a modest project; a multilingual site with a headless CMS, search and a large migration is bigger. We give a clear estimate after reviewing your requirements, and hosting costs afterwards are usually very low.

Can non-technical editors update a static site?

Yes. With a Git-based CMS such as Decap or TinaCMS, or a headless CMS such as Strapi or Sanity, editors work in a familiar visual interface. Publishing triggers an automatic rebuild, and changes are live within minutes.

Which is better, Astro or Gatsby?

For new projects we usually recommend Astro: it ships less JavaScript, builds faster and is actively developed. Gatsby still makes sense for existing sites that work well, and we maintain or migrate those depending on their condition.

Are static sites good for SEO?

Very good. Search engines receive complete HTML immediately, pages load fast, and metadata, sitemaps and structured data are generated consistently at build time. The main risk is a migration without proper redirects, which we handle carefully.

Can a static site handle contact forms and search?

Yes. Forms are sent to a small serverless function or your existing API, and search runs either from a static index built with Pagefind or from a dedicated search engine like Typesense for larger sites.

Ready for a Faster, Safer Website?

Tell us about your current site, your editors and your goals, and we will recommend a static architecture that fits. Contact us to discuss your project, or see the full scope of our static site generator services.

Static Site Generator Development: Astro, 11ty, Gatsby

Contents