Deploying a static website is one of the simplest ways to get a site live: build your files, push them to a host, and configure a few settings. This guide covers practical options (Cloudflare Pages, Netlify, GitHub Pages), automated builds, domain DNS and SSL, and a few best practices for cache, redirects, and 404s.
1. Build artifact
* Ensure your static site generator produces a clean output directory (for this project: `dists/`). Use your usual build command:
```powershell
npm run build
# or, if your SSG exposes a CLI:
node src/cli.js build
```
2. Choose a host
* Cloudflare Pages: great for global distribution, automatic SSL, and Git-based deployments.
* Netlify: very easy CI + deploy previews, redirect rules, and functions.
* GitHub Pages: simple and free for public repos; limited features compared to Pages/Netlify.
3. Connect repository and configure continuous deploy
* Create a repo (if not already). Push your site source to GitHub.
* On Cloudflare Pages or Netlify, choose "New project" → connect GitHub → pick branch (usually `main`). Set the build command (`npm run build`) and publish directory (`dists`). The provider will run builds automatically on pushes.
4. DNS and custom domains
* Add your custom domain in the hosting dashboard and follow instructions to add DNS records. For Cloudflare Pages, you usually add a CNAME or an A record depending on provider instructions.
* Use Cloudflare DNS if possible; it simplifies SSL provisioning and configuration.
5. SSL and caching
* Most hosts provide automatic TLS (Let's Encrypt) after you add the domain. Wait for certificate issuance and use HTTPS-only.
* Configure far-future caching for static assets (CSS/JS/images) and shorter caching for HTML if your site updates frequently. Use cache-control headers or the host’s edge rules.
6. Redirects and SPA routing
* If your site uses pretty URLs (clean paths like `/about`), make sure the host can serve `index.html` for directory routes or add redirect rules. Netlify uses `_redirects`; Cloudflare Pages has a `/_redirects` or a `config` file depending on framework.
7. Asset hashing and references
* Modern bundlers emit hashed filenames for cache-busting (e.g., `styles-abc123.css`). You can reference hashed names via a manifest generated by the bundler and inject correct links at build time. As a simpler alternative, copy the generated stylesheet to a stable name (e.g., `assets/styles.css`) as part of your build pipeline.
8. Verify and test
* After deployment, visit the production domain and check:
* HTTPS is enabled.
* Assets load and CSS looks correct.
* Links and paginated pages work.
9. Rollouts and CI best practices
* Keep builds reproducible: commit lockfiles, pin critical dependency versions, and test `npm run build` locally.
* Use deploy previews (Netlify/Cloudflare Pages) for PR reviews.
Quick checklist
* Build locally: `npm run build`.
* Push to GitHub and confirm automated deploys.
* Add custom domain and update DNS records.
* Confirm SSL and cache headers.
* Test all routes and pagination.
Deploying is mostly about automating the build and making sure the host serves the correct directory with HTTPS and the expected caching behavior. For more complex needs (serverless functions, rewrites, or advanced redirects) pick a host whose feature set matches your requirements — Cloudflare Pages and Netlify are both excellent starting points for modern static sites.