[{"data":1,"prerenderedAt":327},["ShallowReactive",2],{"hub:tools-astro":3},{"path":4,"key":5,"title":6,"h1":7,"description":8,"crumbs":9,"blocks":17},"\u002Ftools\u002Fastro\u002F","tools-astro","Astro in Production: Guides and Comparisons","Astro","Guides that use Astro in depth: islands and hydration, images, content collections, i18n routing, deployment and comparisons with Eleventy.",[10,13,16],[11,12],"Home","\u002F",[14,15],"Tools","\u002Ftools\u002F",[7,4],[18,21,23,26,166,168,259,294,296],{"k":19,"text":20},"p","Astro appears in more guides here than any other generator, partly because it is where a lot of teams moving off client-rendered frameworks land, and partly because its model — static HTML by default, JavaScript only in islands that ask for it — makes it a useful reference point for performance work. The guides below cover it end to end: content collections and the content layer, image optimization with astro:assets, hydration directives and server islands, i18n routing, and deployment to Cloudflare Workers.",{"k":19,"text":22},"Roughly a quarter of them are comparisons, most against Eleventy and Next.js, measured on the same content. Read those if you are still deciding; read the how-tos if you have decided and want the setup that measured best.",{"k":24,"html":25},"fig","\u003Cfigure>\n\u003Csvg viewBox=\"0 0 760 152\" role=\"img\" aria-labelledby=\"hub-astro-hero-title hub-astro-hero-desc\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Ctitle id=\"hub-astro-hero-title\">The Astro pipeline covered by these guides\u003C\u002Ftitle>\n  \u003Cdesc id=\"hub-astro-hero-desc\">Five stages. Content collections load and validate Markdown and MDX. Components render to static HTML. Islands hydrate only interactive parts. astro:assets optimizes images at build time. The output deploys to an edge host.\u003C\u002Fdesc>\n  \u003Crect x=\"0\" y=\"0\" width=\"760\" height=\"152\" fill=\"#ffffff\"\u002F>\n  \u003Cg style=\"font-family:system-ui, sans-serif;font-size:12px\">\n    \u003Crect x=\"20.0\" y=\"64.0\" width=\"116.8\" height=\"71.5\" rx=\"8\" fill=\"#6a4c93\" opacity=\"0.14\" stroke=\"#6a4c93\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Crect x=\"170.8\" y=\"64.0\" width=\"116.8\" height=\"71.5\" rx=\"8\" fill=\"#1982c4\" opacity=\"0.14\" stroke=\"#1982c4\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Cpath d=\"M138.8 99.8 L166.8 99.8\" fill=\"none\" stroke=\"#556071\" style=\"stroke-width:2px;marker-end:url(#hub-astro-hero-arrow)\"\u002F>\n    \u003Crect x=\"321.6\" y=\"64.0\" width=\"116.8\" height=\"71.5\" rx=\"8\" fill=\"#ffca3a\" opacity=\"0.24\" stroke=\"#a97b00\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Cpath d=\"M289.6 99.8 L317.6 99.8\" fill=\"none\" stroke=\"#556071\" style=\"stroke-width:2px;marker-end:url(#hub-astro-hero-arrow)\"\u002F>\n    \u003Crect x=\"472.4\" y=\"64.0\" width=\"116.8\" height=\"71.5\" rx=\"8\" fill=\"#1982c4\" opacity=\"0.14\" stroke=\"#1982c4\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Cpath d=\"M440.4 99.8 L468.4 99.8\" fill=\"none\" stroke=\"#556071\" style=\"stroke-width:2px;marker-end:url(#hub-astro-hero-arrow)\"\u002F>\n    \u003Crect x=\"623.2\" y=\"64.0\" width=\"116.8\" height=\"71.5\" rx=\"8\" fill=\"#8ac926\" opacity=\"0.2\" stroke=\"#5a8a16\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Cpath d=\"M591.2 99.8 L619.2 99.8\" fill=\"none\" stroke=\"#556071\" style=\"stroke-width:2px;marker-end:url(#hub-astro-hero-arrow)\"\u002F>\n    \u003Ctext x=\"380.0\" y=\"30.0\" fill=\"#1f2937\" style=\"font-size:16px;text-anchor:middle;font-weight:700\">Astro, from content to edge\u003C\u002Ftext>\n    \u003Ctext x=\"78.4\" y=\"90.4\" fill=\"#1f2937\" style=\"font-size:13px;text-anchor:middle;font-weight:700\">Collections\u003C\u002Ftext>\n    \u003Ctext x=\"78.4\" y=\"107.3\" fill=\"#556071\" style=\"font-size:11px;text-anchor:middle\">content layer,\u003C\u002Ftext>\n    \u003Ctext x=\"78.4\" y=\"121.6\" fill=\"#556071\" style=\"font-size:11px;text-anchor:middle\">schemas\u003C\u002Ftext>\n    \u003Ctext x=\"229.2\" y=\"90.4\" fill=\"#1f2937\" style=\"font-size:13px;text-anchor:middle;font-weight:700\">Render\u003C\u002Ftext>\n    \u003Ctext x=\"229.2\" y=\"107.3\" fill=\"#556071\" style=\"font-size:11px;text-anchor:middle\">components to\u003C\u002Ftext>\n    \u003Ctext x=\"229.2\" y=\"121.6\" fill=\"#556071\" style=\"font-size:11px;text-anchor:middle\">HTML\u003C\u002Ftext>\n    \u003Ctext x=\"380.0\" y=\"90.4\" fill=\"#1f2937\" style=\"font-size:13px;text-anchor:middle;font-weight:700\">Islands\u003C\u002Ftext>\n    \u003Ctext x=\"380.0\" y=\"107.3\" fill=\"#556071\" style=\"font-size:11px;text-anchor:middle\">hydrate what\u003C\u002Ftext>\n    \u003Ctext x=\"380.0\" y=\"121.6\" fill=\"#556071\" style=\"font-size:11px;text-anchor:middle\">needs it\u003C\u002Ftext>\n    \u003Ctext x=\"530.8\" y=\"90.4\" fill=\"#1f2937\" style=\"font-size:13px;text-anchor:middle;font-weight:700\">Assets\u003C\u002Ftext>\n    \u003Ctext x=\"530.8\" y=\"107.3\" fill=\"#556071\" style=\"font-size:11px;text-anchor:middle\">astro:assets\u003C\u002Ftext>\n    \u003Ctext x=\"530.8\" y=\"121.6\" fill=\"#556071\" style=\"font-size:11px;text-anchor:middle\">images\u003C\u002Ftext>\n    \u003Ctext x=\"681.6\" y=\"90.4\" fill=\"#1f2937\" style=\"font-size:13px;text-anchor:middle;font-weight:700\">Deploy\u003C\u002Ftext>\n    \u003Ctext x=\"681.6\" y=\"107.3\" fill=\"#556071\" style=\"font-size:11px;text-anchor:middle\">Workers, Netlify,\u003C\u002Ftext>\n    \u003Ctext x=\"681.6\" y=\"121.6\" fill=\"#556071\" style=\"font-size:11px;text-anchor:middle\">Pages\u003C\u002Ftext>\n  \u003C\u002Fg>\n  \u003Cdefs>\n    \u003Cmarker id=\"hub-astro-hero-arrow\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"7\" markerHeight=\"7\" orient=\"auto-start-reverse\">\n      \u003Cpath d=\"M0 0 L10 5 L0 10 z\" fill=\"#556071\"\u002F>\n    \u003C\u002Fmarker>\n  \u003C\u002Fdefs>\n\u003C\u002Fsvg>\n\u003Cfigcaption>Each stage has its own guides below; the hydration and image stages have the most.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>",{"k":27,"h":28,"items":29},"group","Choosing the Right Static Site Generator for Production",[30,35,39,43,47,51,55,59,63,67,71,76,80,84,88,92,96,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,162],{"t":31,"u":32,"d":33,"y":34},"Astro vs Eleventy Build Times at 10,000 Pages","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fastro-vs-eleventy-for-documentation-sites\u002Fastro-vs-eleventy-build-times-at-10000-pages\u002F","Astro and Eleventy benchmarked on the same docs corpus from 1,000 to 10,000 pages: cold, warm and one-page-edit builds, memory, and where each scales badly.","Comparison",{"t":36,"u":37,"d":38,"y":34},"Astro vs Eleventy for Large Docs (1000+ Pages)","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fastro-vs-eleventy-for-documentation-sites\u002Fchoosing-between-astro-and-eleventy-for-large-docs\u002F","A decision guide for documentation sites of 1000+ pages — comparing Astro and Eleventy on build scaling, search, MDX\u002Fcomponents, and authoring ergonomics with measured numbers.",{"t":40,"u":41,"d":42,"y":34},"Comparing Docs Framework Build Times","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fdocs-frameworks-docusaurus-starlight-vitepress\u002Fcomparing-docs-framework-build-times\u002F","Benchmark Docusaurus, Starlight and VitePress on the same 2,000-page docs corpus: cold and warm builds, memory, output size and what drives each number.",{"t":44,"u":45,"d":46,"y":34},"Content Collections vs the Eleventy Data Cascade","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fastro-vs-eleventy-for-documentation-sites\u002Fcontent-collections-vs-eleventy-data-cascade\u002F","Two ways to model documentation content: a typed schema that fails the build, or a layered cascade that resolves at render. What each buys, and how to get validation in both.",{"t":48,"u":49,"d":50,"y":34},"Dev Server Performance: Astro vs Eleventy","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fastro-vs-eleventy-for-documentation-sites\u002Fdev-server-performance-astro-vs-eleventy\u002F","Measure cold start, hot reload and memory for Astro and Eleventy dev servers on a 1,300-page docs site, and the settings that keep writers’ previews fast.",{"t":52,"u":53,"d":54,"y":34},"Gatsby vs Astro for Content Sites in 2026","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fssg-framework-selection-matrix\u002Fgatsby-vs-astro-for-content-sites-in-2026\u002F","Gatsby and Astro compared for content sites today: build time, JavaScript shipped, Core Web Vitals, ecosystem health and the cost of moving.",{"t":56,"u":57,"d":58,"y":34},"MDX vs Markdoc for Docs Content","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fdocs-frameworks-docusaurus-starlight-vitepress\u002Fmdx-vs-markdoc-for-docs-content\u002F","Choose between MDX and Markdoc for documentation components: authoring errors, validation, build speed and safety for contributor-heavy docs repos.",{"t":60,"u":61,"d":62,"y":34},"Markdown Pipelines: remark vs markdown-it","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fastro-vs-eleventy-for-documentation-sites\u002Fmarkdown-pipelines-remark-vs-markdown-it\u002F","Compare the remark and rehype pipeline in Astro with markdown-it in Eleventy: plugin models, speed, custom syntax, heading anchors and link rewriting.",{"t":64,"u":65,"d":66,"y":34},"Next.js Static Export vs Astro for Marketing","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fnextjs-static-export-for-content-sites\u002Fnextjs-static-export-vs-astro-for-marketing-sites\u002F","A measured head-to-head of Next.js static export and Astro for marketing sites — JavaScript shipped, LCP and INP, developer experience, and build speed on the same pages.",{"t":68,"u":69,"d":70,"y":34},"Shortcodes vs Components for Docs Authors","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fastro-vs-eleventy-for-documentation-sites\u002Fshortcodes-vs-components-for-docs-authors\u002F","Eleventy shortcodes and Astro components compared from the writer's chair: syntax, error messages, reuse, JavaScript cost and how to keep the vocabulary small.",{"t":72,"u":73,"d":74,"y":75},"Choosing an SSG for API Reference Documentation","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fssg-framework-selection-matrix\u002Fchoosing-an-ssg-for-api-reference-documentation\u002F","API docs are generated, versioned and enormous. Compare Hugo, Astro, Eleventy and Next export on build scale, schema-driven pages, versioning and search.","Concept",{"t":77,"u":78,"d":79,"y":75},"Choosing an SSG for a Marketing Site with Non-Technical Editors","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fssg-framework-selection-matrix\u002Fchoosing-an-ssg-for-a-marketing-site-with-non-technical-editors\u002F","Pick a generator and editing setup for a marketing site edited by non-developers: visual editing, previews, publish speed, guardrails and page performance.",{"t":81,"u":82,"d":83,"y":75},"Picking an SSG for a Multi-Language Docs Site","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fssg-framework-selection-matrix\u002Fpicking-an-ssg-for-a-multi-language-documentation-site\u002F","Compare i18n in Astro, Hugo, Eleventy, and Jekyll for multi-language documentation — routing, content organization, and build cost — with measured numbers across locales.",{"t":85,"u":86,"d":87,"y":75},"SSG Selection Checklist for Engineering Teams","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fssg-framework-selection-matrix\u002Fssg-selection-checklist-for-engineering-teams\u002F","A practical SSG selection checklist for engineering teams — score build scale, team skills, content model, i18n, hosting, ecosystem, and maintenance before you commit.",{"t":89,"u":90,"d":91,"y":75},"Scoring SSG Long-Term Maintenance Risk","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fssg-framework-selection-matrix\u002Fscoring-ssg-long-term-maintenance-risk\u002F","Score a static site generator’s five-year maintenance risk: project health, upgrade history, dependency surface, plugin ecosystem and your exit cost.",{"t":93,"u":94,"d":95,"y":75},"Total Cost of Ownership for Static Site Generators","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fssg-framework-selection-matrix\u002Ftotal-cost-of-ownership-for-static-site-generators\u002F","Estimate the three-year cost of running a static site on Hugo, Eleventy, Astro, Next.js export or a docs framework: people time, builds, hosting, upgrades.",{"t":97,"u":98,"d":99,"y":100},"Adding JSON-LD Structured Data at Build Time","\u002Fchoosing-the-right-static-site-generator-for-production\u002Ftechnical-seo-for-static-sites\u002Fadding-json-ld-structured-data-at-build-time\u002F","Emit valid JSON-LD from frontmatter in Astro, Eleventy and Hugo: build objects not strings, pick the right schema.org types, and validate every page in CI.","How-to",{"t":102,"u":103,"d":104,"y":100},"Adding Pagefind to an Astro Site","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fsearch-for-static-sites\u002Fadding-pagefind-to-an-astro-site\u002F","Add Pagefind search to a plain Astro site: post-build indexing, content boundaries, heading weights, a lazy-loaded UI and a CI relevance check.",{"t":106,"u":107,"d":108,"y":100},"Converting Front Matter at Scale During Migration","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fmigrating-between-static-site-generators\u002Fconverting-front-matter-at-scale-during-migration\u002F","Script front matter conversion across thousands of Markdown files between generators: field maps, type fixes, validation against a schema, and reviewable diffs.",{"t":110,"u":111,"d":112,"y":100},"Customizing Starlight Without Forking the Theme","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fdocs-frameworks-docusaurus-starlight-vitepress\u002Fcustomizing-starlight-without-forking-the-theme\u002F","Brand a Starlight docs site with CSS custom properties, component overrides and plugins so every upgrade stays a one-line version bump instead of a merge.",{"t":114,"u":115,"d":116,"y":100},"Generating Breadcrumb Structured Data in Astro","\u002Fchoosing-the-right-static-site-generator-for-production\u002Ftechnical-seo-for-static-sites\u002Fgenerating-breadcrumb-structured-data-in-astro\u002F","Generate visible breadcrumbs and matching BreadcrumbList JSON-LD in Astro from the URL or content collections, with readable names, and test both in CI.",{"t":118,"u":119,"d":120,"y":100},"How to Benchmark Hugo vs Astro Build Speeds","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fhugo-build-times-for-large-repositories\u002Fhow-to-benchmark-hugo-vs-astro-build-speeds\u002F","Build a reproducible Hugo-vs-Astro benchmark with hyperfine — identical corpus, pinned containers, production builds only — so numbers reflect the generators, not your laptop.",{"t":122,"u":123,"d":124,"y":100},"Loading Remote Content With Astro Content Layer Loaders","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fastro-vs-eleventy-for-documentation-sites\u002Floading-remote-content-with-astro-content-layer-loaders\u002F","Pull content from an API or CMS into Astro collections with a custom content layer loader, cache it between builds with digests, and validate it with a schema.",{"t":126,"u":127,"d":128,"y":100},"Migrating From Hugo to Astro Without Breaking URLs","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fmigrating-between-static-site-generators\u002Fmigrating-from-hugo-to-astro-without-breaking-urls\u002F","Move a Hugo site to Astro content collections while reproducing every permalink: slug mapping, a typed schema, shortcodes as MDX components, and a URL parity gate in CI.",{"t":130,"u":131,"d":132,"y":100},"Migrating from Gatsby to Astro","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fmigrating-between-static-site-generators\u002Fmigrating-from-gatsby-to-astro\u002F","Move a Gatsby content site to Astro: replace GraphQL queries with content collections, port React components as islands, and keep image quality and URLs.",{"t":134,"u":135,"d":136,"y":100},"Migrating from Next.js Pages Router to Astro","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fmigrating-between-static-site-generators\u002Fmigrating-from-nextjs-pages-router-to-astro\u002F","Move a content-heavy Next.js Pages Router site with getStaticProps to Astro: routes, data fetching, MDX, React islands, images, redirects and the measured result.",{"t":138,"u":139,"d":140,"y":100},"RSS and Atom Feeds for Static Blogs","\u002Fchoosing-the-right-static-site-generator-for-production\u002Ftechnical-seo-for-static-sites\u002Frss-and-atom-feeds-for-static-blogs\u002F","Publish valid RSS and Atom feeds from Eleventy, Astro or Hugo with full content, absolute URLs, stable IDs and correct headers, then check them in CI.",{"t":142,"u":143,"d":144,"y":100},"Sidebar Navigation in Astro and Eleventy","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fastro-vs-eleventy-for-documentation-sites\u002Fsidebar-navigation-in-astro-and-eleventy\u002F","Build a docs sidebar from content in Astro and Eleventy: ordering, nesting, active state, collapsed sections, page weight, and keeping incremental builds fast.",{"t":146,"u":147,"d":148,"y":100},"Syntax Highlighting with Shiki in Astro and Eleventy","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fastro-vs-eleventy-for-documentation-sites\u002Fsyntax-highlighting-with-shiki-in-astro-and-eleventy\u002F","Highlight code at build time with Shiki in Astro and Eleventy: dual light and dark themes, line annotations, build-time cost and zero runtime JavaScript.",{"t":150,"u":151,"d":152,"y":100},"hreflang and Language Alternates on Static Sites","\u002Fchoosing-the-right-static-site-generator-for-production\u002Finternationalization-for-static-sites\u002Fhreflang-and-language-alternates-on-static-sites\u002F","Generate reciprocal hreflang alternates from a translation key at build time in Hugo, Astro or Eleventy, and validate every language group in CI.",{"t":154,"u":155,"d":156,"y":100},"i18n Routing in Astro","\u002Fchoosing-the-right-static-site-generator-for-production\u002Finternationalization-for-static-sites\u002Fi18n-routing-in-astro\u002F","Configure Astro i18n routing: locales, an unprefixed default language, fallbacks, locale-aware links and content collections organised per language.",{"t":158,"u":159,"d":160,"y":161},"Fixing Astro Build Errors After Upgrading to Astro 5","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fastro-vs-eleventy-for-documentation-sites\u002Ffixing-astro-build-errors-after-upgrading-to-astro-5\u002F","Work through the build errors an Astro 4 site hits on Astro 5, from legacy collections and slug to removed hybrid output, and prove the URLs did not change.","Fix",{"t":163,"u":164,"d":165,"y":161},"Fixing Slow Astro Builds Caused by Large MDX Collections","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fastro-vs-eleventy-for-documentation-sites\u002Ffixing-slow-astro-builds-caused-by-large-mdx-collections\u002F","Find why an Astro build with thousands of MDX files is slow, then convert plain pages to Markdown, trim plugins and cache the content layer in CI.",{"k":24,"html":167},"\u003Cfigure>\n\u003Csvg viewBox=\"0 0 760 295\" role=\"img\" aria-labelledby=\"hub-astro-kinds-title hub-astro-kinds-desc\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Ctitle id=\"hub-astro-kinds-title\">Number of Astro guides of each kind\u003C\u002Ftitle>\n  \u003Cdesc id=\"hub-astro-kinds-desc\">Vertical bars: How-tos 37, Fixes 6, Comparisons 14 and Concepts 6.\u003C\u002Fdesc>\n  \u003Crect x=\"0\" y=\"0\" width=\"760\" height=\"295\" fill=\"#ffffff\"\u002F>\n  \u003Cg style=\"font-family:system-ui, sans-serif;font-size:12px\">\n    \u003Crect x=\"80.0\" y=\"76.0\" width=\"90.0\" height=\"170.0\" rx=\"3\" fill=\"#1982c4\" opacity=\"0.3\" stroke=\"#1982c4\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"250.0\" y=\"218.4\" width=\"90.0\" height=\"27.6\" rx=\"3\" fill=\"#ff595e\" opacity=\"0.3\" stroke=\"#d83b41\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"420.0\" y=\"181.7\" width=\"90.0\" height=\"64.3\" rx=\"3\" fill=\"#ffca3a\" opacity=\"0.45\" stroke=\"#a97b00\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"590.0\" y=\"218.4\" width=\"90.0\" height=\"27.6\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Cpath d=\"M30.0 246.0 L730.0 246.0\" fill=\"none\" stroke=\"#556071\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Ctext x=\"380.0\" y=\"30.0\" fill=\"#1f2937\" style=\"font-size:16px;text-anchor:middle;font-weight:700\">Astro guides by kind\u003C\u002Ftext>\n    \u003Ctext x=\"125.0\" y=\"69.0\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:middle;font-weight:700\">37\u003C\u002Ftext>\n    \u003Ctext x=\"125.0\" y=\"264.0\" fill=\"#556071\" style=\"font-size:11.5px;text-anchor:middle\">How-tos\u003C\u002Ftext>\n    \u003Ctext x=\"295.0\" y=\"211.4\" fill=\"#b32b30\" style=\"font-size:12px;text-anchor:middle;font-weight:700\">6\u003C\u002Ftext>\n    \u003Ctext x=\"295.0\" y=\"264.0\" fill=\"#556071\" style=\"font-size:11.5px;text-anchor:middle\">Fixes\u003C\u002Ftext>\n    \u003Ctext x=\"465.0\" y=\"174.7\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:middle;font-weight:700\">14\u003C\u002Ftext>\n    \u003Ctext x=\"465.0\" y=\"264.0\" fill=\"#556071\" style=\"font-size:11.5px;text-anchor:middle\">Comparisons\u003C\u002Ftext>\n    \u003Ctext x=\"635.0\" y=\"211.4\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:middle;font-weight:700\">6\u003C\u002Ftext>\n    \u003Ctext x=\"635.0\" y=\"264.0\" fill=\"#556071\" style=\"font-size:11.5px;text-anchor:middle\">Concepts\u003C\u002Ftext>\n  \u003C\u002Fg>\n\u003C\u002Fsvg>\n\u003Cfigcaption>63 guides use Astro in depth; each is listed below under the section it belongs to.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>",{"k":27,"h":169,"items":170},"Core Web Vitals Optimization for SSGs",[171,175,179,183,187,191,195,199,203,207,211,215,219,223,227,231,235,239,243,247,251,255],{"t":172,"u":173,"d":174,"y":34},"Astro Islands vs Full Hydration Performance","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fjavascript-hydration-partial-rendering\u002Fastro-islands-vs-full-hydration-performance\u002F","Measured comparison of Astro islands against full SPA hydration — JavaScript bytes, Total Blocking Time, and INP numbers, plus which directive to reach for.",{"t":176,"u":177,"d":178,"y":34},"Preact vs React Islands Bundle Size","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fjavascript-hydration-partial-rendering\u002Fpreact-vs-react-islands-bundle-size\u002F","Measure React against Preact for Astro islands: runtime size, hydration time, compatibility gaps with preact\u002Fcompat, and when switching is worth the effort.",{"t":180,"u":181,"d":182,"y":100},"Art Direction with the Picture Element","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fimage-optimization-pipelines-in-astro\u002Fart-direction-with-the-picture-element\u002F","Serve different crops of a hero image to mobile and desktop with picture and media queries in Astro, Eleventy and Hugo, without hurting LCP or causing layout shift.",{"t":184,"u":185,"d":186,"y":100},"Blur-Up Placeholders with LQIP","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fimage-optimization-pipelines-in-astro\u002Fblur-up-placeholders-with-lqip\u002F","Generate tiny blurred placeholders for images at build time in Astro or Eleventy, inline them without slowing LCP, and decide when a solid colour is better.",{"t":188,"u":189,"d":190,"y":100},"Caching Processed Images Between Builds","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fimage-optimization-pipelines-in-astro\u002Fcaching-processed-images-between-builds\u002F","Persist Astro and Eleventy image caches between CI builds so AVIF and WebP variants are generated once, with correct cache keys, pruning and measured build times.",{"t":192,"u":193,"d":194,"y":100},"Code Splitting and Module Preload in Vite-Based SSGs","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fcss-and-javascript-asset-optimization\u002Fcode-splitting-and-module-preload-in-vite-based-ssgs\u002F","Find JavaScript that loads on every page of an Astro or VitePress site, split it with dynamic imports and manualChunks, and keep modulepreload hints honest.",{"t":196,"u":197,"d":198,"y":100},"Deferring Hydration with client:visible in Astro","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fjavascript-hydration-partial-rendering\u002Fdeferring-hydration-with-client-visible-in-astro\u002F","Use client:visible, client:idle and client:media to delay Astro island hydration until it is needed, cut startup JavaScript and protect INP on content pages.",{"t":200,"u":201,"d":202,"y":100},"Generating Open Graph Images at Build Time","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fimage-optimization-pipelines-in-astro\u002Fgenerating-open-graph-images-at-build-time\u002F","Render a unique social preview image for every page at build time with Satori and resvg, cache the output, and wire og:image tags into Astro, Hugo or Eleventy.",{"t":204,"u":205,"d":206,"y":100},"Inlining Critical CSS on Static Sites","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fcss-and-javascript-asset-optimization\u002Finlining-critical-css-on-static-sites\u002F","Remove the render-blocking stylesheet on static sites: inline small CSS whole, or extract critical rules per page with Beasties, and measure the trade-off.",{"t":208,"u":209,"d":210,"y":100},"Lazy-Loading Images Without Hurting LCP","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fimage-optimization-pipelines-in-astro\u002Flazy-loading-images-without-hurting-lcp\u002F","loading=\"lazy\" saves bytes below the fold but delays the LCP image when applied to it. How to decide per image, per template, in Astro, Hugo and Eleventy.",{"t":212,"u":213,"d":214,"y":100},"Optimizing LCP on Astro with Priority Hints","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Flargest-contentful-paint-optimization-for-static-sites\u002Foptimizing-lcp-on-astro-with-priority-hints\u002F","Use fetchpriority=\"high\", rel=preload, and Astro Image priority to load the hero first and cut LCP — with measured before\u002Fafter numbers from Lighthouse and WebPageTest.",{"t":216,"u":217,"d":218,"y":100},"Optimizing WebP Images in Hugo Without Plugins","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fimage-optimization-pipelines-in-astro\u002Foptimizing-webp-images-in-hugo-without-plugins\u002F","Generate WebP at build time using only Hugo's built-in image processing — no Node, no plugins, no system libraries. Requires the hugo-extended edition for WebP.",{"t":220,"u":221,"d":222,"y":100},"Prefetching Links in Astro","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fresource-hints-and-navigation-speed\u002Fprefetching-links-in-astro\u002F","Configure Astro's built-in prefetch — strategies, defaults, per-link overrides and speculation rules — and measure what it does to navigation speed.",{"t":224,"u":225,"d":226,"y":100},"Replacing React Islands with Web Components","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fjavascript-hydration-partial-rendering\u002Freplacing-react-islands-with-web-components\u002F","Small interactive widgets rarely need React. Rewriting islands as custom elements removes the framework runtime, cuts JavaScript and improves INP.",{"t":228,"u":229,"d":230,"y":100},"Server Islands in Astro","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fjavascript-hydration-partial-rendering\u002Fserver-islands-in-astro\u002F","Use Astro server islands to add small per-request parts to a static page, such as stock or account state, with fallbacks, caching headers and measured costs.",{"t":232,"u":233,"d":234,"y":100},"Serving Astro Images Through Cloudflare Image Resizing","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fimage-optimization-pipelines-in-astro\u002Fserving-astro-images-through-cloudflare-image-resizing\u002F","Move Astro image processing from build time to Cloudflare Images transformations with a custom image service, cutting build time while keeping srcset and AVIF.",{"t":236,"u":237,"d":238,"y":100},"Tailwind v4 in Astro Without PostCSS Plugins","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fcss-and-javascript-asset-optimization\u002Ftailwind-v4-in-astro-without-postcss-plugins\u002F","Move an Astro site from Tailwind 3 with the PostCSS integration to Tailwind 4 on its Vite plugin: CSS-first config, sources, dark mode and build time, measured.",{"t":240,"u":241,"d":242,"y":100},"View Transitions in Astro Without Hurting Vitals","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fresource-hints-and-navigation-speed\u002Fview-transitions-in-astro-without-hurting-vitals\u002F","Add view transitions to an Astro site with the ClientRouter or native cross-document transitions, then keep LCP, INP and CLS intact with measured settings.",{"t":244,"u":245,"d":246,"y":161},"Eliminating Render-Blocking CSS on Static Sites","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Flargest-contentful-paint-optimization-for-static-sites\u002Feliminating-render-blocking-css-on-static-sites\u002F","Inline critical CSS, defer the rest, and purge unused rules to cut render delay on static sites — with measured LCP and FCP before\u002Fafter from Lighthouse.",{"t":248,"u":249,"d":250,"y":161},"Fixing Blurry Images From astro:assets Resizing","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fimage-optimization-pipelines-in-astro\u002Ffixing-blurry-images-from-astro-assets-resizing\u002F","Find why images from Astro's Image and Picture components look soft on high-density screens, and fix widths, sizes, densities and quality settings.",{"t":252,"u":253,"d":254,"y":161},"Fixing Hydration Mismatch Errors in Astro Islands","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fjavascript-hydration-partial-rendering\u002Ffixing-hydration-mismatch-errors-in-astro-islands\u002F","Track down hydration mismatch warnings in React, Preact and Vue islands on Astro pages, from dates to invalid HTML, and fix them without client:only.",{"t":256,"u":257,"d":258,"y":161},"Reducing LCP from Hero Images on Static Sites","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Flargest-contentful-paint-optimization-for-static-sites\u002Freducing-lcp-from-hero-images-on-static-sites\u002F","Size, format, and preload hero images to cut LCP on static sites — responsive srcset, AVIF\u002FWebP, explicit dimensions, and why you must never lazy-load the hero.",{"k":27,"h":260,"items":261},"Production-Ready Deployment & CI\u002FCD for SSGs",[262,266,270,274,278,282,286,290],{"t":263,"u":264,"d":265,"y":34},"Incremental Rebuild Times Across Astro, Eleventy and Hugo","\u002Fproduction-ready-deployment-cicd-workflows\u002Fincremental-builds-and-build-caching-for-ssgs\u002Fincremental-rebuild-times-across-astro-eleventy-and-hugo\u002F","Astro, Eleventy and Hugo measured on the same 5,000-page site for full, cached and single-page rebuilds, in CI and the dev server, with what each skips.",{"t":267,"u":268,"d":269,"y":34},"Vercel ISR vs Static Generation for SSGs","\u002Fproduction-ready-deployment-cicd-workflows\u002Fnetlify-vs-vercel-deployment-strategies\u002Fvercel-isr-vs-static-generation-for-ssgs\u002F","ISR rebuilds pages on demand; static generation builds everything upfront. Astro, Eleventy, Hugo, and Jekyll have no ISR — they rebuild and purge at the CDN.",{"t":271,"u":272,"d":273,"y":100},"Build Caching on Netlify and Vercel","\u002Fproduction-ready-deployment-cicd-workflows\u002Fincremental-builds-and-build-caching-for-ssgs\u002Fbuild-caching-on-netlify-and-vercel\u002F","Make Netlify and Vercel reuse dependency, framework and image caches between static site builds, verify cache hits in logs, and measure the savings.",{"t":275,"u":276,"d":277,"y":100},"Building Astro Sites with GitHub Actions","\u002Fproduction-ready-deployment-cicd-workflows\u002Fgithub-actions-for-automated-ssg-builds\u002Fbuilding-astro-sites-with-github-actions\u002F","A production GitHub Actions workflow for Astro: pinned Node, dependency and image caches, astro check, build artifacts and a deploy job that only runs on main.",{"t":279,"u":280,"d":281,"y":100},"Deploying Astro to Cloudflare Workers Static Assets","\u002Fproduction-ready-deployment-cicd-workflows\u002Fcloudflare-pages-edge-caching-setup\u002Fdeploying-astro-to-cloudflare-workers-static-assets\u002F","Deploy a static Astro site to Cloudflare Workers with static assets: wrangler config, trailing slashes, 404 handling, headers, previews and optional server routes.",{"t":283,"u":284,"d":285,"y":100},"Deploying Astro to Vercel as a Fully Static Site","\u002Fproduction-ready-deployment-cicd-workflows\u002Fnetlify-vs-vercel-deployment-strategies\u002Fdeploying-astro-to-vercel-as-a-fully-static-site\u002F","Deploy an Astro site to Vercel as pure static output with no functions: skipping the adapter, headers and redirects in vercel.json, and images.",{"t":287,"u":288,"d":289,"y":100},"Hash-Based CSP for Inline Scripts in Astro","\u002Fproduction-ready-deployment-cicd-workflows\u002Fsecurity-headers-for-static-sites\u002Fhash-based-csp-for-inline-scripts-in-astro\u002F","Compute SHA-256 hashes for every inline script in an Astro build, write them into the CSP header automatically, and keep unsafe-inline out of the policy.",{"t":291,"u":292,"d":293,"y":100},"Incremental Builds in Astro with the Content Layer","\u002Fproduction-ready-deployment-cicd-workflows\u002Fincremental-builds-and-build-caching-for-ssgs\u002Fincremental-builds-in-astro-with-the-content-layer\u002F","How the Astro content layer caches entries between builds, how to write loaders with digests, and how to persist the data store in CI so builds stay fast.",{"k":24,"html":295},"\u003Cfigure>\n\u003Csvg viewBox=\"0 0 760 278\" role=\"img\" aria-labelledby=\"hub-astro-topics-title hub-astro-topics-desc\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Ctitle id=\"hub-astro-topics-title\">Topics with the most Astro guides\u003C\u002Ftitle>\n  \u003Cdesc id=\"hub-astro-topics-desc\">Horizontal bars, largest first: Astro vs Eleventy for Documentation Sites 11, Image Optimization Pipelines in Astro 8, SSG Framework Selection Matrix 7, JavaScript Hydration & Partial Rendering 6, Migrating Between Static Site Generators 4 and Docs Frameworks: Docusaurus, Starlight and VitePress 3.\u003C\u002Fdesc>\n  \u003Crect x=\"0\" y=\"0\" width=\"760\" height=\"278\" fill=\"#ffffff\"\u002F>\n  \u003Cg style=\"font-family:system-ui, sans-serif;font-size:12px\">\n    \u003Crect x=\"350.0\" y=\"65.0\" width=\"357.2\" height=\"20.0\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"350.0\" y=\"99.0\" width=\"259.8\" height=\"20.0\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"350.0\" y=\"133.0\" width=\"227.3\" height=\"20.0\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"350.0\" y=\"167.0\" width=\"194.8\" height=\"20.0\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"350.0\" y=\"201.0\" width=\"129.9\" height=\"20.0\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"350.0\" y=\"235.0\" width=\"97.4\" height=\"20.0\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Cpath d=\"M350.0 60.0 L350.0 260.0\" fill=\"none\" stroke=\"#556071\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Ctext x=\"380.0\" y=\"30.0\" fill=\"#1f2937\" style=\"font-size:16px;text-anchor:middle;font-weight:700\">Where Astro comes up\u003C\u002Ftext>\n    \u003Ctext x=\"20.0\" y=\"79.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start\">Astro vs Eleventy for Documentation…\u003C\u002Ftext>\n    \u003Ctext x=\"715.2\" y=\"79.5\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">11\u003C\u002Ftext>\n    \u003Ctext x=\"20.0\" y=\"113.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start\">Image Optimization Pipelines in Astro\u003C\u002Ftext>\n    \u003Ctext x=\"617.8\" y=\"113.5\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">8\u003C\u002Ftext>\n    \u003Ctext x=\"20.0\" y=\"147.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start\">SSG Framework Selection Matrix\u003C\u002Ftext>\n    \u003Ctext x=\"585.3\" y=\"147.5\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">7\u003C\u002Ftext>\n    \u003Ctext x=\"20.0\" y=\"181.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start\">JavaScript Hydration & Partial Rendering\u003C\u002Ftext>\n    \u003Ctext x=\"552.8\" y=\"181.5\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">6\u003C\u002Ftext>\n    \u003Ctext x=\"20.0\" y=\"215.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start\">Migrating Between Static Site Generators\u003C\u002Ftext>\n    \u003Ctext x=\"487.9\" y=\"215.5\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">4\u003C\u002Ftext>\n    \u003Ctext x=\"20.0\" y=\"249.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start\">Docs Frameworks: Docusaurus, Starlight…\u003C\u002Ftext>\n    \u003Ctext x=\"455.4\" y=\"249.5\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">3\u003C\u002Ftext>\n  \u003C\u002Fg>\n\u003C\u002Fsvg>\n\u003Cfigcaption>Topic pages give the wider context for each group; the numbers count only guides that use this tool in depth.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>",{"k":27,"h":297,"items":298},"Often used with Astro",[299,304,309,314,318,323],{"t":300,"u":301,"d":302,"y":303},"Eleventy","\u002Ftools\u002Feleventy\u002F","Incremental builds, image pipelines and the data cascade.","22 shared guides",{"t":305,"u":306,"d":307,"y":308},"Hugo","\u002Ftools\u002Fhugo\u002F","Build time at scale, image caches, modules and multilingual sites.","17 shared guides",{"t":310,"u":311,"d":312,"y":313},"Starlight","\u002Ftools\u002Fstarlight\u002F","Astro-based docs: overrides, translation and migration in.","4 shared guides",{"t":315,"u":316,"d":317,"y":313},"Next.js","\u002Ftools\u002Fnextjs\u002F","Static export for content sites, its limits and alternatives.",{"t":319,"u":320,"d":321,"y":322},"Jekyll","\u002Ftools\u002Fjekyll\u002F","Plugins, reproducible builds, upgrades and migration away.","3 shared guides",{"t":324,"u":325,"d":326,"y":322},"Vercel","\u002Ftools\u002Fvercel\u002F","Non-Next.js generators, the Build Output API and caching.",1790943190466]