render-static-sites

Deploys and configures static sites on Render's global CDN with SPA routing and headers.

Updated Aug 17, 2026
One-click install
npx skills add https://github.com/DingJun1028/esggo-kv --skill render-static-sites-dingjun1028
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: render-static-sites
Source: https://github.com/DingJun1028/esggo-kv/tree/main/.agents/skills/render-static-sites
Command: npx skills add https://github.com/DingJun1028/esggo-kv --skill render-static-sites-dingjun1028

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Deploying static frontends involves many configuration decisions—build commands, publish paths, SPA fallback routing, redirect rules, and response headers—and mistakes cause 404s on refresh, stale cached content, or misconfigured security headers. This Skill provides the correct Render static site configuration for each framework and routing scenario. ## Core Features & Use Cases - Framework Build Configuration: Provides build commands and publish paths for React, Vite, Next.js static export, Nuxt, Hugo, Gatsby, Docusaurus, Jekyll, Astro, Angular, and Eleventy. - SPA Routing & Redirects: Configures catch-all rewrite rules so client-side routes serve index.html instead of returning 404, with correct rule ordering for specific redirects. - Headers, Previews & CDN: Sets security and cache-control headers, enables PR preview environments, and explains Brotli compression, HTTP/2, and instant cache invalidation. - Use Case: You have a Vite React app and need it live on a CDN with SPA routing. The Skill supplies the Blueprint with buildCommand: npm ci && npm run build, staticPublishPath: dist, and the catch-all rewrite rule. ## Quick Start Ask the assistant to deploy your Vite React app as a Render static site with SPA fallback routing and security headers.

Frequently Asked Questions about render-static-sites

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I deploy a React or Vite app to Render as a static site?▼

Create a static site with buildCommand `npm ci && npm run build` and staticPublishPath `dist` for Vite or `build` for Create React App. Add a rewrite rule from `/*` to `/index.html` so client-side routes work on refresh.

Should I use a Render static site or a web service for my frontend?▼

Use a static site for pure HTML/CSS/JS, SPAs, and static exports like `next export` or `nuxt generate`. Use a web service when the framework needs a running server, such as Next.js SSR with `next start`, or for API backends.

Why does my SPA return 404 when refreshing a route on Render?▼

The CDN returns 404 because no file exists at that path. Add a catch-all rewrite rule with source `/*` and destination `/index.html`, placed after any specific redirect rules, so the CDN serves your app for all routes.

Can a Render static site talk to other Render services over the private network?▼

No. Static sites are served from the CDN and are not on Render's private network, so they cannot reach other services via internal hostnames. Your frontend must call backends over their public URLs.

How do I set cache and security headers on a Render static site?▼

Configure headers in the Dashboard under Settings > Headers or via the Blueprint `headers` field. A common pattern sets `Cache-Control: public, max-age=31536000, immutable` on hashed assets and `no-cache` on index.html, plus X-Frame-Options and X-Content-Type-Options.

Does Render support PR previews for static sites?▼

Yes. Enable PR previews in Dashboard Settings or set `previews.generation` to `automatic` or `manual` in the Blueprint. Each pull request gets a unique URL following the pattern `<service>-<pr-id>.onrender.com`.