DEV Community

Alao Abdul-zahir
Alao Abdul-zahir

Posted on

Deploying a Live Netlify Site with Deploying a Live Netlify Site with Terraform + HCP Terraform Remote State

🔹 The Idea: Simplicity + Reproducibility

Instead of manually spinning up a Netlify project, I wanted a fully automated pipeline:

  • Terraform provisions everything:

    • Creates a GitHub repo for the static site.
    • Configures Netlify hosting.
    • Manages infrastructure and state remotely in HCP Terraform.

  • Push changes to GitHub → Netlify auto-deploys.

This setup means anyone can clone the Terraform code, set a few variables, and spin up their own live site—no manual clicks in the UI.

🔹 Architecture Overview

  1. Terraform: Core IaC engine, manages all resources declaratively.
  2. HCP Terraform (Terraform Cloud): Stores remote Terraform state, ensuring collaboration and state locking.
  3. GitHub: Hosts both the Terraform code and the deployed static site.
  4. Netlify: Automatically builds and serves the site from GitHub.

Workflow looks like this:

Terraform Code → HCP Terraform (remote state) → GitHub Repo → Netlify → Live Site
Enter fullscreen mode Exit fullscreen mode

Live Site: https://curious-pasca-da123e.netlify.app/

🔹 Why It’s Unique

  • No manual configuration: Terraform does the heavy lifting.

  • Secure Secrets Management:

    • Netlify tokens stored as sensitive HCP workspace variables, not in the repo.

  • Re-runnable: Run terraform init/plan/apply with fresh creds, and everything just works.

🔹 Step-by-Step Setup

Here’s the high-level setup (full code is in the repo, not here):

  1. Prerequisites
  • Terraform CLI installed
  • Netlify & GitHub accounts
  • HCP Terraform org + workspace (CLI-driven)
  1. HCP Terraform Remote Backend
  • terraform { cloud { organization = "your-org" ... } } block points Terraform to HCP.
  • State stored remotely, enabling team collaboration.
  1. Secrets in HCP Workspace
  • github_token and netlify_token set as sensitive variables in the workspace.
  • No secrets are ever committed.
  1. Terraform Code

  • Declares:

    • GitHub repo for the site.
    • Netlify site linked to that repo.
    • Simple HTML page and netlify.toml.
  1. Deploy 
   terraform init
   terraform plan
   terraform apply
Enter fullscreen mode Exit fullscreen mode

Terraform provisions the repo, uploads files, links Netlify, and your site is live instantly.

🔹 Lessons Learned

  • Terraform + Netlify is underrated: You can treat front-end hosting as IaC.
  • HCP Terraform simplifies collaboration: State locking and workspace variables make teamwork painless.
  • Small IaC projects are great for practice: Even a static site helps you practice production-grade workflows.

🔹 Next Steps

  • Improve the site design and make it dynamic with environment variables via Terraform.
  • Explore integrating GitHub Actions for CI/CD to trigger Terraform runs.
  • Scale this pattern to multi-env (staging/prod) setups.

🔗 Links

🙌 Thanks & Tagging

Thanks to HashiCorp User Group (HUG) Ibadan for the challenge!
📌 Tagging: HUG Ibadan LinkedIn Page

💡 This post shows how easy it is to use Terraform to automate frontend hosting as if it were backend infra.
Would love feedback from the community—how would you extend this setup?

Top comments (0)