Static sites are faster, cheaper to host, and more secure than server-rendered alternatives. By pre-building every page at deploy time, there's no database to query and no server-side processing on each request — just HTML, CSS, and JavaScript served directly to the browser.
The challenge is the build step. Frameworks like Astro, Hugo, Next.js, and Eleventy compile your content and templates into static files, but that compilation needs to happen somewhere before the files reach your server. DeployHQ's build pipeline handles this — your site is built in an isolated environment, and only the resulting files are deployed.
How static site deployment works in DeployHQ
The workflow is straightforward:
- Push your source code (templates, content, configuration) to your Git repository
- DeployHQ pulls the code and runs your build commands (e.g.,
npm run build) - The compiled static files are uploaded to your server — only files that changed since the last build are transferred
- Your site is live
Because the build runs on DeployHQ's servers, your production environment doesn't need Node.js, Ruby, or any other build tooling installed. This makes static site deployment work with any hosting — shared hosting, VPS, S3 buckets, or CDN origins.
Build commands by framework
Each static site generator has its own build command. Here are configurations for the most popular ones:
Astro
Astro is a modern framework optimised for content-heavy sites. It supports multiple UI frameworks (React, Vue, Svelte) and ships zero JavaScript by default:
npm ci
npx astro build
Output directory: dist/
Next.js (static export)
Next.js can generate a fully static site with the output: 'export' configuration in next.config.js:
npm ci
npx next build
Output directory: out/
Hugo
Hugo is one of the fastest static site generators, written in Go. If Go is available in the build environment:
hugo --minify
Output directory: public/
Eleventy (11ty)
Eleventy is a minimal, zero-config static site generator for Node.js:
npm ci
npx @11ty/eleventy
Output directory: _site/
Gatsby
Gatsby builds React-based static sites with a rich plugin ecosystem:
npm ci
npx gatsby build
Output directory: public/
Jekyll
Jekyll is a Ruby-based generator popular for documentation and blog sites:
bundle install
bundle exec jekyll build
Output directory: _site/
Hexo
Hexo is a Node.js blog framework with built-in deployment support:
npm ci
npx hexo generate
Output directory: public/
Vite-based sites
If your static site uses Vite directly (or a Vite-powered framework):
npm ci
npx vite build
Output directory: dist/
Speeding up builds with caching
Static site builds often spend most of their time downloading dependencies. DeployHQ's build cache keeps a copy of your dependency directories between deployments.
Under Build Pipeline → Build Configuration → Cached Build Files, add the appropriate paths:
For Node.js-based generators:
node_modules
node_modules/**
For Ruby-based generators (Jekyll):
vendor/bundle
vendor/bundle/**
For Hugo with Node.js modules:
node_modules
node_modules/**
With caching enabled, subsequent builds skip the download step and only fetch new or updated packages.
Excluding source files from deployment
Your server only needs the compiled output, not the source files. Configure excluded files under Settings → Excluded Files:
node_modules
node_modules/**
src
src/**
The specific exclusions depend on your framework. Generally, exclude your node_modules, source directories, and any files that aren't part of the built output.
Configuring the deployment path
If your build outputs to a subdirectory (e.g., dist/ or public/), you have two options:
- Set the deployment path on your server to include the output directory — DeployHQ uploads files relative to this path
- Use excluded files to prevent source files from being uploaded, and deploy everything from the root
The first approach is cleaner for most static sites.
Deploying to different hosting environments
Static sites work with virtually any hosting. DeployHQ supports:
- Traditional servers (SSH/SFTP): Upload to your
public_htmlor document root - Amazon S3: Ideal for static hosting with CloudFront CDN
- Shopify: Deploy themes directly to your store
- FTP/SFTP: Works with any hosting provider that offers file access
For high-traffic static sites, consider pairing your server deployment with a CDN for global distribution and caching.
Using environment variables in builds
Some static site generators use environment variables during the build step (for API keys, site URLs, analytics IDs, etc.). You can set these in your build commands:
SITE_URL=https://www.example.com npm run build
Or use DeployHQ's config files to manage environment-specific settings across multiple deployment environments.
Further reading
Check our framework guides for detailed setup instructions covering Angular, React, Vue, Gatsby, Jekyll, Hexo, and more.
Ready to automate your static site builds? Sign up for DeployHQ and deploy your first site in minutes.
If you have any questions about static site deployment, contact us at support@deployhq.com or reach out on X (Twitter).