Static Site Generator (SSG) β bu build vaqtida HTML, CSS, JavaScript fayllarini avtomatik yaratuvchi tool. Foydalanuvchi sayt'ga kirganda β server PHP yoki database query qilmaydi, balki tayyor static HTML yuboradi. Natija: o'ta tez sahifa, kuchli xavfsizlik, oson hosting. Modern web rivojlanishda eng ommabop yondashuvlardan biri.
SSG vs Dynamic vs SPA
Dynamic (PHP/Python/Node.js): server har request'da kontent generate qiladi. WordPress, Django, Laravel.
SPA (Single Page Application): JavaScript brauzerda render qiladi. React, Vue, Angular.
SSG: build vaqtida HTML generate qilinadi. Hugo, Jekyll, Gatsby, Astro.
SSG'ning afzalliklari
Tezlik: static HTML β eng tez. CDN orqali millisoniyalarda.
Xavfsizlik: database yoki server-side code yo'q. Hack qilinmaydigan.
Hosting arzon: oddiy static file hosting (Netlify, Vercel, GitHub Pages bepul).
Scalability: trafik 10x oshsa, problem yo'q.
Reliability: server crashes yo'q (faqat static file).
SSG'ning kamchiliklari
Build vaqti: ko'p sahifa β uzoq build.
Dynamic content qiyin: e-commerce, user-generated content.
Real-time update yo'q: rebuild kerak.
Form handling external: Netlify Forms, Formspree.
Popular SSG'lar
Hugo
Go'da yozilgan. Eng tez SSG (10000 sahifa 5 soniyada).
Theme'lar ko'p. Markdown content.
Bepul, open source.
Jekyll
Eng eski SSG. Ruby'da. GitHub Pages default.
Blog uchun mos.
Gatsby
React'da. GraphQL data layer.
Plugin'lar ko'p, ecosystem kuchli.
Build sekin (ko'p sahifa uchun).
Next.js
React framework. SSG + SSR + ISR.
Eng ommabop modern framework.
Vercel'da deploy.
Nuxt
Vue'ning Next.js'i. SSG + SSR.
Astro
Yangi va kuchli. Islands architecture β har komponent alohida.
Multi-framework (React, Vue, Svelte birgalikda).
Performance kuchli.
11ty (Eleventy)
JavaScript'da. Oddiy va fleksibel.
Template language qaratamlik: Nunjucks, Liquid, Markdown.
Hexo
Node.js'da. Blog uchun.
SSG ish jarayoni
1. Kontent yozish: Markdown, CMS, JSON.
2. Template yaratish: HTML + template language.
3. Build: SSG tool kontent + template β HTML.
4. Deploy: static fayllar Netlify, Vercel, S3'ga.
5. CDN: foydalanuvchiga eng yaqin server'dan.
Content sources
Markdown fayllar (.md) β eng oddiy.
Headless CMS (Contentful, Sanity) β kontent menejer uchun.
JSON fayllar β structured data.
External API β third-party.
Template languages
Liquid (Jekyll, Shopify).
Nunjucks (11ty).
Handlebars.
JSX (Gatsby, Next.js).
Pug β minimal HTML.
Deploy strategiyalari
Netlify β push to git β automatic deploy. Bepul plan yaxshi.
Vercel β Next.js native. Bepul plan.
GitHub Pages β bepul, Jekyll native.
Cloudflare Pages β yangi, kuchli.
AWS S3 + CloudFront β manual lekin scalable.
Build optimization
Incremental build β faqat o'zgargan sahifalarni rebuild.
Parallel build β multi-core CPU.
Build cache β repeat build tez.
Dynamic content SSG'da
Comment, form, search β JavaScript bilan client-side.
External service: Disqus (comment), Algolia (search), Netlify Forms.
Serverless functions: AWS Lambda, Netlify Functions, Vercel Functions.
E-commerce SSG
Headless commerce: Shopify Storefront API + SSG.
Snipcart β simple SSG e-commerce.
Commerce.js β API-based.
Real-time data
SSG + client-side fetch: build vaqtida static, runtime'da API call.
ISR (Next.js) β periodic rebuild.
On-demand revalidation β kontent o'zgargach rebuild.
SEO va SSG
SSG SEO uchun ideal. HTML server-side render'lanadi β Google darrov indekslaydi.
Performance high β Core Web Vitals yaxshi.
Meta tags, structured data β easy implement.
JAMstack
SSG β JAMstack'ning markaziy qismi.
JavaScript + APIs + Markup.
SSG vs WordPress
WordPress: dynamic, plugin'lar, theme'lar, kontent menejer uchun oson.
SSG: tezlik, xavfsizlik, modern dev experience.
Tanlash: kontent menejer texnik bo'lmasa β WordPress. Dev team modern bo'lsa β SSG.
SSG va WordPress birgalikda
Headless WordPress + SSG: WordPress admin, frontend SSG.
WP REST API yoki WPGraphQL β Next.js/Gatsby.
Common SSG xato
1. Dynamic content forsing β qiyin va sekin.
2. Build vaqti ignorate β 10000+ sahifa = uzoq build.
3. Form handling planning yo'q.
4. SEO ignorate β meta tags yo'q.
5. Image optimization yo'q.
SSG misol use case'lar
Marketing sayt β sayt content, fast load.
Documentation β Docusaurus, MkDocs.
Blog β Hugo, Jekyll, Gatsby.
Portfolio β sodda, tezroq.
Landing page β single sahifa.
Sayt.uz SSG amaliyot
Sayt.uz hozircha PHP β SSG emas.
Blog uchun SSG migration rejada. Markdown content + Hugo build.
Tezlik 100ms gacha kamayadi (hozir 800ms).
Hosting plan'larda SSG support: Node.js, build automation, Cloudflare Pages deploy.
Mijozlar uchun: Hugo va Jekyll uchun tayyor template'lar. Bir click deploy.
Documentation: blog'da SSG qo'llanma'lar.
Hozirgi tavsiya mijozlarga: blog yoki marketing sayt β SSG, dynamic sayt β WordPress yoki PHP.