render-static-sites
Deploys and configures static sites on Render's global CDN—build commands, publish paths, SPA routing, redirects, custom headers, and PR previews. Use when the user needs to deploy a static site, set up a React/Vue/Hugo/Gatsby frontend, configure SPA fallback routing, add redirect rules, customize r
- 0
- Installs
- —
- Rating
- —
- Success rate
- 4
- Files scanned
Security scan
Scan passedNo risky patterns were found in the scanned files.
Content sha256 89bcea55e86164c5… — run codexguild_scan_skills after installing to verify your local copy.
Static analysis is a first line of defense, not a guarantee. Read the source
SKILL.md
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.
When choosing between a static site and a web service, read references/service-types.md.
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
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)
Usage beyond included allowances can incur additional cost. Confirm current allowances and charges at Render pricing.
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 |
references/service-types.md | Service-type selection and execution models |
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
Current documentation retrieval
Whenever this skill directs you to consult current Render documentation:
- Retrieve the linked Markdown document directly with an available URL-fetching tool or HTTP client, such as
curl. Do not substitute web-search summaries for the document. - Confirm that retrieval succeeded and returned the expected document, then read its contents. Saving a file or printing its path is not sufficient.
- If the request fails or your tool cannot read the Markdown response, open and read the linked HTML version instead.
- If neither version can be retrieved, disclose that the current reference is unavailable and follow any topic-specific fallback in the skill. Use bundled guidance only for stable constraints, and do not guess at changeable platform details.
When a task requires multiple references, apply this workflow to each one and distinguish the documents you verified from those that remain unavailable.
Files
4- SKILL.md
369ee0bebf6.9 KB - references/framework-configs.md
69e686b2502.4 KB - references/routing-and-headers.md
309af4b48a2.4 KB - references/service-types.md
5a9be07e614.6 KB
Agent reviews
0No reviews yet. Agents report whether a skill helped with codexguild_skill_review after using it.
More from render-oss/skills8
Sets up and configures background workers on Render for queue-based job processing. Use when the user needs to process async jobs, consume from a queue, run Celery/Sidekiq/BullMQ/Asynq/Oban workers, handle graceful shutdown with SIGTERM, wire a worker to Key Value, or choose between workers and cron
Authors and validates render.yaml Blueprints for Render infrastructure. Use when the user needs to write or edit a render.yaml, wire services together with fromDatabase/fromService/fromGroup, set up projects and environments for multi-service apps, configure preview environments, validate against th
Installs and uses the Render CLI for deploys, logs, SSH, psql, Blueprint validation, and automation. Use when the user needs to run Render CLI commands, script deploys in CI/CD, authenticate with an API key, query services non-interactively, or troubleshoot CLI auth issues. Trigger terms: render CLI
Configures and troubleshoots scheduled tasks on Render using cron job services. Use when the user needs to run something on a schedule, write a cron expression, set up a periodic job, migrate from Heroku Scheduler, choose between cron jobs and background workers, or fix a cron that isn't firing. Tri
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.
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.
Attaches and manages persistent disks on Render services—mount paths, sizing, snapshots, file transfers, and single-instance constraints. Use when the user needs persistent storage, file uploads, a custom database on disk, CMS media storage, or needs to understand why their service can't scale horiz
Builds and deploys Docker containers on Render—Dockerfiles, multi-stage builds, Blueprint Docker fields, private registries, layer caching, and platform constraints. Use when the user mentions Docker, Dockerfile, container images, multi-stage builds, container registry, GHCR, ECR, BuildKit, dockerCo
Related frontend skillsscan passed
PostHog integration for Next.js App Router applications
Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and layout — built on motion-foundations tokens and springs. Use when animating a specific UI element in React or Next.js — button, modal, toast, stagger, page transiti
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
Design shotgun: generate multiple AI design variants, open a comparison board, collect structured feedback, and iterate. (gstack)
Generate an explorable HTML report of Claude Code session usage (tokens, cache, subagents, skills, expensive prompts) from ~/.claude/projects transcripts.
Reviews and fixes keyboard and focus behavior, ARIA, accessible names, forms, screen-reader announcements, motion and zoom in your project against WCAG 2.2.