Static situs Generators

Bagaimana Hugo, Jekyll, Eleventy, Hexo, Gatsby, dan Astro pre-bangun setiap halaman ke static HTML — bypassing Google's JS rendering queue so konten adalah dapat diindeks pada pertama fetch.

Pertama kali diterbitkan: 26 Jun 2026 · Terakhir diperbarui: 3 Agu 2026 · Lanjutan
1 sinyal bukti di halaman ini

sebuah static situs generator (SSG) membangun setiap halaman ke finished HTML di bangun time, so Anda konten adalah sudah di mentah HTML sebelum sebuah crawler ever menanyakan untuk ini — Tidak JavaScript rendering queue, Tidak Wave 2 delay, immediately dapat diindeks. itu's core SEO advantage di atas client-side kerangka kerja. Hugo, Jekyll, Eleventy, Hexo, Gatsby, dan Astro semua share ini; mereka differ di language, bagaimana banyak JS mereka ship untuk browser, dan dibangun-di image/sitemap tooling. satu nyata gotcha adalah bangun freshness: sebuah static situs adalah hanya sebagai saat ini sebagai -nya terakhir bangun, so konten perubahan perlu sebuah rebuild dan redeploy untuk reach mesin pencari. I dibangun ini situs (dan patrickstox.com) dengan Astro untuk persis ini alasan.

TL;DR — sebuah SSG pre-renders setiap route untuk static HTML di bangun time, so konten ada di respons sebelum pertama crawler permintaan — Tidak Web rendering Service, Tidak rendering queue, Tidak “Wave 2” (terjemahan) “Wave 2” delay. itu’s single biggest indexability advantage Anda dapat memberikan sebuah situs. SSGs differ dari CSR kerangka kerja (yang bangun halaman di browser) dan dari meta-kerangka kerja (yang dapat SSR per permintaan). six di ini cluster — Hugo, Jekyll, Eleventy, Hexo, Gatsby, Astro — semua ship static HTML; mereka vary di language, JS payload, dan dibangun-di sitemap/image tooling. nyata failure mode tidak rendering, ini adalah bangun freshness: sebuah static situs adalah hanya sebagai saat ini sebagai -nya terakhir bangun, so changed konten itu tidak trigger sebuah rebuild silently menyajikan stale HTML untuk mesin pencari. I jalankan ini situs pada Astro untuk persis ini set dari trade-offs.

«## What “static” actually means » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian delapan belas, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

sebuah static situs generator berjalan Anda konten dan templates melalui sebuah bangun langkah dan emits sebuah folder dari finished HTML, CSS, dan assets. crucial bagian untuk SEO adalah ketika HTML adalah produced: di bangun time, setelah, untuk everyone — tidak per permintaan, dan tidak di browser. Google’s JavaScript guidance mendeskripsikan crawling, rendering, dan pengindeksan sebagai distinct processing stages. sebuah SSG menghapus client-side rendering dari critical path untuk -nya generated konten karena HTML adalah sudah menyelesaikan. Bukti untuk klaim ini Google processes JavaScript through crawling, rendering, and indexing, while pre-rendered HTML is present before client execution. Cakupan: Google Search JavaScript processing; indexing is not guaranteed. Tingkat keyakinan: tinggi · Diverifikasi: Google: JavaScript SEO basics

ini adalah mengapa static situs adalah safest mungkin architecture untuk getting terindeks. konten adalah di pertama byte dari respons. ada Tidak parity kesenjangan antara mentah dan dirender HTML, Tidak dependency pada renderer succeeding, Tidak stateless-Chrome quirks untuk design sekitar.

SSG vs. rendering sisi klien vs. meta-kerangka kerja

Three architectures, three berbeda moments HTML muncul ke existence:

  • Static situs generation (SSG). HTML adalah dibangun setelah, di bangun time, sebelum apa pun permintaan. disajikan sebagai flat files (sering dari sebuah CDN). konten adalah di mentah HTML. ini adalah Hugo, Jekyll, Eleventy, Hexo — dan Gatsby dan Astro di mereka default static mode.
  • rendering sisi klien (CSR). server mengirim sebuah minimal shell; JavaScript membangun halaman di browser di permintaan/runtime. konten bergantung pada rendering succeeding. ini adalah sebuah default-CSR React atau Vue SPA — riskiest setup untuk SEO (see JavaScript SEO).
  • Meta-kerangka kerja (SSR / hybrid). Kerangka kerja like Berikutnya.js, Nuxt, dan SvelteKit dapat render HTML per permintaan pada server (SSR), pre-render beberapa routes (SSG), atau mix keduanya. konten adalah di HTML, tetapi produced di permintaan time, yang menambahkan server cost dan latency Anda tidak memiliki dengan sebuah pure SSG.

line blurs di edges — Gatsby dan Astro adalah sometimes called meta-kerangka kerja karena mereka’re component-based dan dapat melakukan lebih daripada emit flat files. tetapi di mereka bread-dan-butter mode mereka’re static generators, dan itu’s bagaimana Anda harus treat them untuk SEO. mental model itu penting: ** sebelumnya HTML ada, lebih sedikit dapat go wrong sebelum sebuah crawler sees ini.** SSG adalah earliest.

six generators, compared

semua six produce dapat diindeks static HTML. Di sini’s bagaimana mereka differ pada axes itu sebenarnya memengaruhi sebuah SEO decision:

GeneratorLanguage / dibangun diJS shipped untuk browserSitemapImage optimizationBest untuk
HugoGoNone oleh defaultdibangun-di (sitemap.xml auto-generated)dibangun-di image processing (resize, WebP)besar konten situs itu perlu fast membangun
JekyllRubyNone oleh defaultPlugin (jekyll-sitemap)Plugins (jekyll-picture-tag dan seterusnya.)GitHub halaman blogs; original SSG
Eleventy (11ty)JavaScript (Node)None oleh defaultTemplate/plugin (Anda generate ini)Plugin (@11ty/eleventy-img)JS devs siapa ingin zero-JS output dan flexibility
HexoJavaScript (Node)None oleh default (theme-dependent)Plugin (hexo-generator-sitemap)PluginsBlogs, terutama di Node/Asia ecosystem
GatsbyJavaScript / ReactReact bundle (hydrates)Plugin (gatsby-plugin-sitemap)dibangun-di (gatsby-plugin-image, strong)React tim wanting sebuah data-driven static situs
AstroJS/TS, apa pun UI kerangka kerjaNone oleh default (islands hanya)Official (@astrojs/sitemap)dibangun-di (astro:assets)konten situs wanting components tanpa JS tax

sebuah sedikit hal worth pulling out dari itu table:

  • JS payload adalah SEO-berdekatan differentiator. Hugo, Jekyll, Eleventy, dan Hexo ship essentially Tidak JavaScript unless Anda tambahkan ini. Gatsby rehydrates sebuah penuh React bundle pada client — masih dapat diindeks ( HTML adalah static), tetapi ini carries sebuah Core Web Vitals cost others jangan. Astro splits perbedaan dengan islands architecture: static HTML oleh default, JavaScript hanya untuk spesifik interactive components (“islands” (terjemahan) “islands”) itu perlu ini.
  • bangun speed scales differently. Hugo (Go) adalah famously fast dan menangani tens dari thousands dari halaman comfortably. Node-based generators adalah lebih lambat di besar scale, dan Gatsby’s bangun times memiliki secara historis telah -nya biggest complaint.
  • Sitemaps dan image optimization adalah mostly solved di mana-mana — tetapi Hugo dan Astro memberikan Anda paling out dari box, sementara Jekyll/Eleventy/Hexo lean pada (well-maintained) plugins.
  • Gatsby’s rilis cadence memiliki slowed noticeably. project tidak archived dan masih ships patches, tetapi sebagai dari July 2026 -nya GitHub repo menampilkan hanya sebuah handful dari commits di atas trailing 90 days dan satu minor rilis since February. itu’s worth weighing terhadap sebuah lebih actively-developed option jika Anda’re picking sebuah generator hari ini, pada top dari hydration/CWV cost di atas.

Mengapa I dibangun ini pada Astro

I dibangun ini situs — dan patrickstox.com — dengan Astro, dan reasoning adalah straight out dari ini halaman. I wanted untuk author di Markdown/MDX dengan nyata components, tetapi I melakukan tidak ingin untuk pay JavaScript tax pada setiap halaman hanya untuk mendapatkan them. Astro’s default adalah zero client-side JS: halaman Anda’re reading ship sebagai static HTML, dan hanya JavaScript itu memuat adalah untuk handful dari interactive pieces (like lens tabs dan quiz). itu mendapatkan me indexability dari sebuah classic SSG dan baik Core Web Vitals, tanpa giving up sebuah component-based authoring experience. jika I needed blistering bangun speed di seluruh sebuah huge konten set dengan zero interactivity, Hugo akan menjadi obvious panggil; untuk sebuah React data layer, Gatsby. untuk ini — sebuah konten-berat situs dengan sebuah sedikit interactive flourishes — Astro adalah right trade.

satu nyata gotcha: bangun freshness

Semuanya di atas adalah upside. Di sini’s catch itu bites orang.

sebuah static situs adalah hanya sebagai saat ini sebagai -nya terakhir bangun. HTML adalah sebuah snapshot frozen di bangun time. perubahan sebuah price, correct sebuah fact, publish sebuah post, perbarui sebuah tag judul — none dari ini reaches mesin pencari until Anda rebuild dan redeploy. ada Tidak langsung server assembling halaman dari sebuah database pada setiap permintaan, so ada tidak ada apa pun untuk pick up Anda perubahan secara otomatis. Bukti untuk klaim ini Static build output remains a snapshot until the project is rebuilt and redeployed. Cakupan: Astro static build workflow as a representative example. Tingkat keyakinan: tinggi · Diverifikasi: Astro: Build and deploy

dalam praktik ini berarti:

  • konten edits harus trigger sebuah bangun. jika Anda author di sebuah CMS headless atau Git, wire up sebuah webhook so sebuah publish kicks off sebuah deploy. sebuah manual-hanya bangun proses adalah bagaimana stale prices dan “ghost” (terjemahan) “ghost” 404s sneak ke indeks.
  • Frequently-mengubah data adalah awkward. Inventory, prices, langsung counts — jika ini perubahan lebih cepat daripada Anda rebuild, static copy lags. itu’s di mana incremental membangun, scheduled rebuilds, atau sebuah hybrid (sebuah meta-kerangka kerja dengan SSR/ISR untuk volatile routes) earn mereka pertahankan.
  • Time-sensitive halaman perlu sebuah cadence. jika “hari ini’s deals” (terjemahan) “hari ini’s deals” adalah baked di bangun time, bangun memiliki untuk jalankan setidaknya daily, atau halaman lies.

None dari ini adalah sebuah dealbreaker — ini adalah sebuah discipline. seluruh alasan SSGs adalah great untuk SEO (HTML decided ahead dari time) adalah yang sama alasan Anda memiliki untuk menjadi deliberate tentang re-deciding ini ketika konten perubahan.

Di mana untuk go berikutnya: static situs generators cluster

ini hub adalah map. setiap generator di bawah adalah -nya own deep dive — language, JS payload, sitemap/image tooling, kerangka kerja-spesifik SEO gotchas, dan cara pertahankan membangun fresh:

  • Hugo SEO — Go-powered, zero-JS, blazing membangun; auto-generated sitemap, dibangun-di image processing, dan managing huge konten sets.
  • Jekyll SEO — original SSG dan GitHub halaman default; jekyll-seo-tag, jekyll-sitemap, dan plugin-pada-GitHub-halaman limitation.
  • Eleventy (11ty) SEO — JavaScript-based, zero-JS output; generating sitemaps dari templates dan eleventy-img untuk responsive images.
  • Hexo SEO — Node blog generator; sitemap/feed plugins, theme JS, dan permalink/canonical hygiene.
  • Gatsby SEO — React-based static generation; hydration/CWV trade-off, gatsby-plugin-image, gatsby-plugin-sitemap, dan bangun-time data sourcing.
  • Astro SEO — zero-JS oleh default, islands architecture, @astrojs/sitemap, astro:assets, View Transitions, dan server Islands fallback perilaku.

setiap topic di atas adalah nested di bawah ini hub dan lives di sidebar too.

untuk lebih luas context — bagaimana Google renders JavaScript, parity dan interaction failure modes, dan yang rendering mode untuk pick ketika Anda melakukan perlu JS — see parent JavaScript SEO hub.

Tambahkan catatan pakar

Sematkan kutipan pakar

Orang baru? Buat profilnya yang belum diklaim di /admin/experts/ → Sematkan kutipan pakar terlebih dahulu.