render-static-sites
Render Static Sites
Deploys static frontends (React, Vue, Hugo, Gatsby, Docusaurus, Jekyll, etc.) to Render's global CDN with automatic TLS, Brotli compression, HTTP/2, and DDoS protection. Free tier available.
When to Use
- Deploying a static site or SPA (no server-side rendering)
- Choosing between a Static Site and a Web Service for a frontend
- Configuring SPA fallback routing, redirects/rewrites, or custom headers
- Setting up PR preview environments for a static site
- Troubleshooting build failures or stale content on a CDN-hosted site
For SSR frameworks (Next.js, Nuxt, SvelteKit) that need a running server, use render-web-services instead. For Blueprint authoring, see render-blueprints.
Static Site vs Web Service
| Need | Use | Why |
|---|---|---|
| Pure HTML/CSS/JS, SPA, docs, blog | Static Site | Free, global CDN, instant cache invalidation |
SSR (Next.js next start, Nuxt server) |
Web Service | Needs a running Node/Python/etc. process |
| Static export from SSR framework | Static Site | If the framework supports full static export (next export, nuxt generate) |
| API backend | Web Service | Static sites cannot run server code |
Key constraint: Static sites are not on the private network. They cannot communicate with other Render services over internal hostnames.
Build and Publish
| Setting | Purpose |
|---|---|
buildCommand |
Installs dependencies and builds assets (e.g. npm ci && npm run build) |
staticPublishPath |
Directory of built output to serve (e.g. build, dist, public) |
Render auto-detects and installs dependencies. Set SKIP_INSTALL_DEPS=true to handle installation yourself in the build command.
Common frameworks
| Framework | Build command | Publish path |
|---|---|---|
| Create React App | npm ci && npm run build |
build |
| Vite (React/Vue/Svelte) | npm ci && npm run build |
dist |
| Next.js (static export) | npm ci && next build |
out |
| Nuxt (static) | npm ci && nuxt generate |
.output/public |
| Hugo | hugo --minify |
public |
| Gatsby | npm ci && gatsby build |
public |
| Docusaurus | npm ci && npm run build |
build |
| Jekyll | bundle exec jekyll build |
_site |
| Astro | npm ci && astro build |
dist |
SPA Routing and Redirects
Single-page apps need a catch-all rule so the CDN serves index.html for all routes instead of returning 404.
Configure Redirect/Rewrite Rules in the Dashboard (Settings > Redirects/Rewrites) or via the Blueprint routes field:
routes:
- type: rewrite
source: /*
destination: /index.html
For multi-path redirects (e.g. old blog URLs), add specific rules above the catch-all so they take priority.
See references/routing-and-headers.md for redirect types, header rules, and caching patterns.
Custom Response Headers
Add security and performance headers from the Dashboard (Settings > Headers) or the Blueprint headers field:
headers:
- path: /*
name: X-Frame-Options
value: DENY
- path: /assets/*
name: Cache-Control
value: public, max-age=31536000, immutable
PR Previews
Static sites support automatic PR previews—each pull request gets a unique URL with the built site.
- Enable in Dashboard: Settings > PR Previews
- Blueprint: set
previews.generationtoautomaticormanual - Preview URLs follow the pattern
<service>-<pr-id>.onrender.com
Blueprint Configuration
services:
- type: web
runtime: static
name: my-frontend
buildCommand: npm ci && npm run build
staticPublishPath: dist
routes:
- type: rewrite
source: /*
destination: /index.html
headers:
- path: /*
name: X-Frame-Options
value: DENY
previews:
generation: automatic
Note: Static sites use type: web with runtime: static in Blueprints. There is no separate type: static.
CDN and Performance
- Global CDN with edge caching worldwide
- Brotli compression (better than gzip)
- HTTP/2 by default
- Immediate cache invalidation on every deploy (zero-downtime, atomic deploys)
- DDoS protection included free
Billing
Static sites have a free tier. They count against workspace-level monthly included amounts for:
- Outbound bandwidth (data served to users)
- Pipeline minutes (build time)
References
| Document | Contents |
|---|---|
references/routing-and-headers.md |
Redirect types, rewrite rules, header patterns, SPA config |
references/framework-configs.md |
Build commands and publish paths for 10+ frameworks |
Related Skills
- render-web-services — For SSR frameworks that need a running server
- render-blueprints — Full
render.yamlschema for static site fields - render-domains — Custom domain and TLS setup
- render-deploy — Deploy flows, CLI, MCP operations
More from render-oss/skills
render-deploy
Deploy applications to Render by analyzing codebases, generating render.yaml Blueprints, and providing Dashboard deeplinks. Use when the user wants to deploy, host, publish, or set up their application on Render's cloud platform.
58render-debug
Debug failed Render deployments by analyzing logs, metrics, and database state. Identifies errors (missing env vars, port binding, OOM, etc.) and suggests fixes. Use when deployments fail, services won't start, or users mention errors, logs, or debugging.
46render-monitor
Monitor Render services in real-time. Check health, performance metrics, logs, and resource usage. Use when users want to check service status, view metrics, monitor performance, or verify deployments are healthy.
45render-workflows
Sets up, develops, tests, and deploys Render Workflows. Covers first-time scaffolding (via CLI or manual), SDK installation (Python or TypeScript), task patterns (retries, subtasks, fan-out), local development, Dashboard deployment, and troubleshooting. Use when a user wants to set up Render Workflows for the first time, scaffold a workflow service, add or modify workflow tasks, test workflows locally, or deploy workflows to Render.
34render-migrate-from-heroku
Migrate from Heroku to Render by reading local project files and generating equivalent Render services. Triggers: any mention of migrating from Heroku, moving off Heroku, Heroku to Render migration, or switching from Heroku. Reads Procfile, dependency files, and app config from the local repo. Optionally uses Heroku MCP to enrich with live config vars, add-on details, and dyno sizes. Uses Render MCP or Blueprint YAML to create services.
27render-networking
>-
13