How to set up automated CI/CD for a static website using Netlify or GitHub Pages
Automating deployment for a static website saves time, reduces errors, and gives you instant feedback when you change code. This guide walks you through setting up CI/CD with either Netlify or GitHub Pages, from repo preparation to automated builds and previews. Expect to finish setup in about 20–40 minutes depending on complexity.
Step 1: Prepare your repository
Create a new Git repository or use an existing one with a clear branch strategy (main or master as production). Add a simple static site structure (index.html, assets/, and optionally a build script) and commit at least one change so the CI system has something to build. Keeping a README and .gitignore helps collaborators understand the workflow.
[Illustration: Screenshot of a Git repo file tree with index.html and assets folder visible]
Step 2: Choose hosting platform
Decide between Netlify for built-in CI and previews or GitHub Pages for a minimal free option tied to GitHub. Consider Netlify if you need branch deploys, serverless functions, or form handling; choose GitHub Pages for straightforward user/organization pages. This choice affects later steps like build settings and DNS configuration.
[Illustration: Comparison graphic: Netlify logo vs GitHub Pages icon with simple pros listed]
Step 3: Add build scripts
If your site uses a generator (Hugo, Jekyll, Eleventy) or bundler (Webpack, Parcel), add npm scripts like "build" that produce a publishable directory (e.g., public/ or dist/). Test locally with npm run build and verify the output folder contains index.html. Having a reproducible build command ensures CI can build the site in a consistent environment.
[Illustration: Terminal window showing npm run build and generated dist folder contents]
Step 4: Configure Netlify deploy (optional)
On Netlify, connect your Git provider, pick the repo and branch (main), and set the build command and publish directory (e.g., npm run build and dist). Enable deploy previews and automatic branch deploys for feature branches so each pull request gets its own URL. Netlify will run builds on every push, typically within 30–90 seconds for small sites.
[Illustration: Netlify site settings page with build command and publish directory fields highlighted]
Step 5: Configure GitHub Pages deploy (optional)
For GitHub Pages, enable GitHub Actions or use the built-in Pages setting to publish from the main branch or the gh-pages branch. Add a workflow file (e.g., .github/workflows/deploy.yml) that runs node, builds the site, and pushes the output to the pages branch. A typical action runs in under 2 minutes for small sites and uses 1–2 job steps: checkout, install, build, and deploy.
[Illustration: GitHub repository settings showing Pages source selection and sample Actions workflow file]
Step 6: Set up CI checks and previews
Add lightweight checks like HTML/CSS linters and spellcheck as part of the CI pipeline to catch issues before deploy. Configure branch deploy previews (Netlify) or pull request comments with preview URLs (via Actions) so reviewers can inspect changes. These automated checks speed up reviews and prevent broken deploys, usually adding 30–120 seconds per run.
[Illustration: Pull request screen with a deployment preview link and CI status checks listed]
Step 7: Configure custom domain and HTTPS
Point your custom domain by adding DNS records: for Netlify, add an A or CNAME record per their instructions; for GitHub Pages, add a CNAME file and update DNS to CNAME or A records. Enable automatic HTTPS/SSL — Netlify and GitHub Pages both provide free TLS certificates that typically provision within 5–30 minutes. Verify the site over HTTPS after propagation (up to 24 hours globally).
[Illustration: DNS settings panel showing A and CNAME records being added]
- Use a dedicated deploy key or service account for CI pushes to avoid personal token expirations.
- Keep your build under 200 MB and less than 1 minute when possible to reduce CI time and resource use.
- Store secrets (API keys, tokens) in the hosting platform or GitHub Secrets, not in the repo; rotate tokens every 90 days.
- Test the build locally in a clean environment (e.g., docker or node:current image) to match CI runtime.
- Use semantic branch names like feature/login or fix/footer so deploy previews are easy to interpret.
- Add a simple health-check endpoint or index.html that returns 200 so monitoring can detect broken publishes.
- Do not commit secrets or private keys to the repository; they can be leaked and compromise your site or accounts.
- Changing DNS records can take up to 24 hours to fully propagate; do not repeatedly modify settings during that window.
- Automatic deploys overwrite the publish directory; ensure your build produces the complete site to avoid losing pages.
Was this guide helpful?
More Computers & Electronics guides
How to set up Git, create a repository, and commit code locally
Setting up Git and committing code locally is a small, reliable skill that pays off immediately. In about 10–20 minutes you can install Git, create a repository, and make your first commits so your work is tracked and easy to manage. Follow these clear steps to get a solid local workflow going.
How to migrate email from one provider to another without losing folders or contacts
Migrating email between providers can feel risky, but with a plan you can preserve folders, labels, and contacts while minimizing downtime. This guide walks you through a careful, step-by-step transfer you can complete in a few hours to a couple days depending on mailbox size. Follow the checklist and you’ll keep structure and address data intact.
How to clean dust and replace a laptop fan to fix overheating and throttling
Overheating and CPU/GPU throttling are often caused by dust buildup or a failing fan. This guide walks you through safely cleaning dust and replacing a laptop fan to restore cooling performance and reduce temperature spikes. Read through all steps, gather basic tools, and work in a well-lit, static-safe area.