render-static-sites

v2026.09.24

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.

GitHub
安装命令
npx skhub add render-oss/render-static-sites
Markdown
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.

Static Site vs Web Service

NeedUseWhy
Pure HTML/CSS/JS, SPA, docs, blogStatic SiteFree, global CDN, instant cache invalidation
SSR (Next.js next start, Nuxt server)Web ServiceNeeds a running Node/Python/etc. process
Static export from SSR frameworkStatic SiteIf the framework supports full static export (next export, nuxt generate)
API backendWeb ServiceStatic 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

SettingPurpose
buildCommandInstalls dependencies and builds assets (e.g. npm ci && npm run build)
staticPublishPathDirectory 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

FrameworkBuild commandPublish path
Create React Appnpm ci && npm run buildbuild
Vite (React/Vue/Svelte)npm ci && npm run builddist
Next.js (static export)npm ci && next buildout
Nuxt (static)npm ci && nuxt generate.output/public
Hugohugo --minifypublic
Gatsbynpm ci && gatsby buildpublic
Docusaurusnpm ci && npm run buildbuild
Jekyllbundle exec jekyll build_site
Astronpm ci && astro builddist

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.generation to automatic or manual
  • 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

DocumentContents
references/routing-and-headers.mdRedirect types, rewrite rules, header patterns, SPA config
references/framework-configs.mdBuild commands and publish paths for 10+ frameworks

Related Skills

  • render-web-services — For SSR frameworks that need a running server
  • render-blueprints — Full render.yaml schema for static site fields
  • render-domains — Custom domain and TLS setup
  • render-deploy — Deploy flows, CLI, MCP operations
发现
标签

此技能尚未发布标签。

版本
最新版本元数据

版本

v2026.09.24

发布时间

Sep 24, 2026

分类

未分类

许可证

MIT

源路径

skills/render-static-sites

默认分支

main

最新提交

3f2aa30

Tree SHA

c2911ed