render-static-sites
GitHub用于在Render部署静态网站和SPA，支持React/Vue/Hugo等框架。涵盖构建配置、发布路径设置、SPA路由回退、重定向规则及自定义响应头配置，适用于前端静态资源托管场景。
Trigger Scenarios
Install
npx skills add fanfan-de/anybox --skill render-static-sites -g -y
SKILL.md
Frontmatter
{
"name": "render-static-sites",
"license": "MIT",
"metadata": {
"author": "Render",
"version": "1.0.0",
"category": "compute"
},
"description": "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 response headers, or choose between a static site and a web service for their frontend. Trigger terms: static site, CDN, SPA, single-page app, React deploy, Vue deploy, Hugo, Gatsby, Docusaurus, Jekyll, staticPublishPath.",
"compatibility": "Render static sites (free tier available)"
}
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
Version History
- 08dc189 Current 2026-07-05 19:05
