{"post":{"slug":"how-to-deploy-a-static-site-2026","title":"How to deploy a static site in 2026","excerpt":"Static site deployment is fast and cheap in 2026, but the choices between platforms, CDN strategies, and build pipelines still matter. Here is the clear path.","category":"code","date":"April 15, 2026","author":"ByteLedger Team","content":"<span class=\"dropcap\">S</span>tatic sites are HTML, CSS, JavaScript, and assets with no server-side execution at request time. In 2026, \"static\" does not mean simple — it includes statically exported Next.js, Astro, SvelteKit, and Eleventy apps that may pull data at build time. Deploying them correctly means getting CDN distribution, TLS, cache control, and rollbacks right. Here is how.\n\n## What changed in 2026\n\n- **Cloudflare Pages** closed the gap with Vercel and Netlify on build speed and now has parity on framework detection. Its global network (300+ PoPs) often wins on TTFB.\n- **Astro 5** became the go-to framework for content-heavy static sites, with partial hydration and server islands replacing the need for a full SSR server.\n- **Edge middleware** (Vercel Edge, Cloudflare Workers) lets you run lightweight personalization logic at deploy time without a dedicated server.\n- **All three major platforms** added build caching by default — a full Next.js rebuild takes ~30 s instead of ~90 s on warm cache.\n\n## Platform comparison\n\n| Platform | Free tier limits | Build minutes | Edge functions | Best for |\n| --- | --- | --- | --- | --- |\n| Vercel | 100 GB bandwidth | 6,000/month | Yes | Next.js, React |\n| Netlify | 100 GB bandwidth | 300/month | Yes | Any framework |\n| Cloudflare Pages | Unlimited bandwidth | 500/month | Yes (Workers) | High-traffic sites |\n| GitHub Pages | 1 GB, 100 GB/month | GitHub Actions | No | Docs, portfolios |\n\n## Deploy to Vercel\n\n```bash\nnpm install -g vercel\nvercel login\nvercel --prod\n```\n\nOr connect via the Vercel dashboard: import your GitHub/GitLab repo, set the framework, and every push to `main` deploys automatically. Every branch gets a preview URL.\n\n## Deploy to Cloudflare Pages via GitHub Actions\n\n```yaml\n# .github/workflows/deploy.yml\nname: Deploy\non:\n  push:\n    branches: [main]\njobs:\n  deploy:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with: { node-version: '22' }\n      - run: npm ci && npm run build\n      - uses: cloudflare/wrangler-action@v3\n        with:\n          apiToken: ${{ secrets.CF_API_TOKEN }}\n          command: pages deploy ./dist --project-name=my-site\n```\n\n## Cache header strategy\n\nCorrect caching is the highest-leverage performance win for static sites. Set it at the platform level:\n\n| File type | Cache-Control value | Why |\n| --- | --- | --- |\n| `index.html` | `no-cache` | Ensure new deploy is seen immediately |\n| `/assets/*.js` (hashed) | `public, max-age=31536000, immutable` | Hash changes with content; safe to cache forever |\n| `/assets/*.css` (hashed) | `public, max-age=31536000, immutable` | Same as JS |\n| Images (hashed) | `public, max-age=31536000, immutable` | Same |\n| `robots.txt`, `sitemap.xml` | `public, max-age=3600` | Stale is fine for an hour |\n\nIn a Vercel `vercel.json`:\n\n```json\n{\n  \"headers\": [\n    {\n      \"source\": \"/assets/(.*)\",\n      \"headers\": [{ \"key\": \"Cache-Control\", \"value\": \"public, max-age=31536000, immutable\" }]\n    },\n    {\n      \"source\": \"/(.*).html\",\n      \"headers\": [{ \"key\": \"Cache-Control\", \"value\": \"no-cache\" }]\n    }\n  ]\n}\n```\n\n## How to set up preview deployments\n\n1. **Vercel / Netlify** — enabled by default when you connect a git repo. Every PR gets `https://my-site-git-branch-org.vercel.app`.\n2. **Cloudflare Pages** — also automatic; previews are at `https://<commit-hash>.my-project.pages.dev`.\n3. **Post the preview URL as a PR comment** — most platforms do this automatically; if yours does not, add a GitHub Actions step using `actions/github-script`.\n\n## How to pick your platform\n\n1. **Using Next.js?** → Vercel is the lowest-friction choice; first-party support.\n2. **Need unlimited bandwidth on free tier?** → Cloudflare Pages.\n3. **Need form handling, split-testing, or identity built in?** → Netlify.\n4. **Internal tool, docs, or portfolio?** → GitHub Pages is free and sufficient.\n5. **Enterprise with existing AWS?** → S3 + CloudFront + a GitHub Action is the path; managed platforms are simpler but may not fit procurement requirements.\n\n## Common mistakes\n\n**No preview deployment URL in PR checks.** Reviewers cannot verify visual changes without a running preview. Make sure the platform integration posts the URL.\n\n**Deploying directly to `main` without a build check.** Add a CI job that builds the site and fails the PR if the build breaks. Never merge a broken build.\n\n**Ignoring build output size.** Static site bundles can bloat with unoptimized images and duplicate dependencies. Run `npm run build -- --analyze` (Next.js) or equivalent to catch regressions.\n\n**Not setting `baseUrl` for subdirectory deploys.** If your site lives at `/docs/`, configure `basePath` or `base` in the framework config, or all asset paths break.\n\n## What to skip\n\n- **Self-hosted Nginx for a purely static site.** You handle patching, TLS renewal, and CDN yourself. Managed platforms are free for most use cases and objectively less work.\n- **Server-Side Rendering for content that does not change per-user.** Static export + ISR (Incremental Static Regeneration) covers most content sites without a running server.\n- **Complex deployment scripts.** A `npm run build` + a platform git integration is the entire pipeline for most teams.\n\n## FAQ\n\n**Can I use a custom domain on all these platforms?**\nYes. All three support custom domains and handle TLS certificate provisioning via Let's Encrypt automatically.\n\n**How do I roll back a bad deploy?**\nVercel, Netlify, and Cloudflare Pages all provide one-click rollback to any previous deployment in their dashboard.\n\n**What about environment variables for build-time data fetching?**\nSet them in the platform dashboard (never commit them). They are available during `npm run build` as `process.env.VAR_NAME`.\n\n**Is a static site the same as a JAMstack site?**\n\"JAMstack\" is the older marketing term. Today the common term is \"static site\" or \"statically exported framework app.\"\n\n## Where to go next\n\n- [How to deploy to Vercel in 2026](/blog/how-to-deploy-to-vercel-2026)\n- [How to write a GitHub Action in 2026](/blog/how-to-write-a-github-action-2026)\n- [How to containerize an app in 2026](/blog/how-to-containerize-an-app-2026)","hue":308,"metaTitle":"How to Deploy a Static Site in 2026","metaDescription":"Learn how to deploy a static site in 2026 on Vercel, Netlify, or Cloudflare Pages. Covers git integration, cache headers, preview deployments, and CI.","keywords":["how to deploy a static site 2026","static site deployment 2026","vercel deploy 2026","netlify deployment guide 2026","cloudflare pages deploy","static site hosting 2026","deploy next.js static site","cache headers static site","preview deployments 2026","static site ci cd 2026"],"tldr":["**Vercel, Netlify, and Cloudflare Pages are all good defaults** — pick by team familiarity, not benchmarks.","**Connect to your git repo and push** — every major platform auto-deploys on merge to main; no manual steps needed.","**Set cache headers correctly** — immutable assets (hashed filenames) get long TTLs; HTML gets `no-cache` so deploys propagate instantly.","**Preview deployments are essential** — every PR should get a unique URL before merging.","**Skip:** configuring your own Nginx or S3 + CloudFront for a simple static site in 2026 — managed platforms handle CDN, TLS, and rollbacks for free."],"readTime":"4 min read","wordCount":940},"related":[{"slug":"how-to-deploy-to-vercel-2026","title":"How to deploy to Vercel in 2026: the complete guide","excerpt":"Vercel remains the fastest path from git push to live app for most frontend and full-stack projects. This guide covers every step correctly for 2026.","category":"code","date":"March 12, 2026","author":"ByteLedger Team","readTime":"5 min read","hue":320},{"slug":"how-to-deploy-a-website-2026","title":"How to Deploy a Website in 2026: a step-by-step guide","excerpt":"Deploying a website in 2026 means pushing your code to a host that serves it to the public. Here is the simplest reliable path, from static sites to apps.","category":"code","date":"June 20, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":205},{"slug":"best-web-hosting-developers-2026","title":"Best web hosting for developers in 2026: Vercel vs Netlify vs Cloudflare Pages vs Render","excerpt":"Honest 2026 comparison of developer-friendly hosting platforms. Free tiers, real costs at scale, and which one to pick for your stack.","category":"code","date":"January 14, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":320}],"sameCategory":[{"slug":"bazel-build-explained-2026","title":"Bazel Explained: What Hermetic Builds Actually Cost","excerpt":"Bazel delivers reproducible, precisely cached builds and demands that you describe everything. Here is what you get, what it costs, and who should say no.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":145},{"slug":"graphql-federation-2026","title":"GraphQL Federation: One Graph, Many Teams","excerpt":"Federation composes independently-owned subgraphs into a single API. Here is what it solves, the operational cost it adds, and when a simpler gateway is enough.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":300},{"slug":"hermetic-builds-explained-2026","title":"Hermetic Builds Explained: Same Inputs, Same Output","excerpt":"A hermetic build depends only on declared inputs. Here is what that property gives you, the common leaks that break it, and how to move toward it incrementally.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":130},{"slug":"monorepo-tooling-compared-2026","title":"Monorepo Tooling Compared: What You Actually Need","excerpt":"Monorepo tools solve task orchestration and caching, not repository layout. Here is what each tier provides and how to tell when you have outgrown the simple option.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":150}],"newer":{"slug":"how-to-deploy-a-fastapi-app-2026","title":"How to deploy a FastAPI app in 2026: containers, cloud, and production config","excerpt":"Deploying FastAPI in 2026 means a minimal Docker image, a proper process manager, and the right cloud target. This guide covers every step from Dockerfile to live traffic.","category":"code","date":"April 15, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":320},"older":{"slug":"how-to-deploy-a-web-app-2026","title":"How to deploy a web app in 2026: from local to live in the right way","excerpt":"Deploying a web app in 2026 is faster than ever, but the choices are overwhelming. Here is the clear path from working locally to running reliably in production.","category":"code","date":"April 15, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":321}}