Step-by-Step Guide: Deploy a Static Website on Netlify Using Git

Deploying a static website doesn’t have to feel like rocket science. With Netlify’s generous free tier and Git’s version‑control magic, you can push a site from your local machine to a live URL in minutes. This guide walks you through every click and command, so even if you’ve never touched a terminal before, you’ll end up with a polished site that updates automatically whenever you push changes.

What You’ll Need

• A static site ready to publish (HTML, CSS, JS, or a static‑site generator output)
• Git installed locally (git --version should return a version number)
• A GitHub, GitLab, or Bitbucket account (we’ll use GitHub in examples)
• A Netlify account (free plan works perfectly)
• Basic command‑line familiarity

Step 1: Prepare Your Local Repository

Open a terminal and navigate to the folder that contains your site files. If the folder isn’t already a Git repository, initialise one:

cd /path/to/your/site
git init

Now add all files, commit them, and set up a remote that points to a new repository on GitHub.

git add .
git commit -m "Initial commit – ready for Netlify"
# Create a new repo on GitHub, then copy its HTTPS URL, e.g. https://github.com/youruser/your‑site.git
git remote add origin https://github.com/youruser/your-site.git
git branch -M main
git push -u origin main

After this step you should see your code on GitHub and have a clean commit history to work from.

Step 2: Sign Up and Connect Netlify to Your Repo

Log in to Netlify (or create an account). From the dashboard click New site from Git. Choose the Git provider you used—GitHub in our case—and authorize Netlify to read your repositories. Locate the repo you just pushed and click Configure the site.

Netlify will auto‑detect common build settings. For a plain HTML site you can leave the build command blank and set the publish directory to /. If you’re using a generator like Hugo or Jekyll, specify the appropriate build command (e.g., hugo) and the folder that contains the generated files (e.g., public).

Click Deploy site. Netlify clones the repo, runs the build (if any), and serves the result on a temporary .netlify.app domain.

Step 3: Verify the Live Preview

Once the deployment finishes, Netlify shows a live preview link. Click it to confirm that your site looks exactly as expected. If something is missing, check the console for 404 errors—most often they’re caused by an incorrect publish directory or a missing index.html.

At this stage you can also set a custom domain (e.g., www.yourdomain.com) under Domain settings**. Netlify provides free SSL certificates, so your site will be served over HTTPS automatically.

Step 4: Enable Continuous Deployment

One of Netlify’s biggest perks is automatic redeployment whenever you push new commits. To test it, make a tiny change locally—perhaps add a comment in index.html—and push it:

git add index.html
git commit -m "Add comment for testing CI"
git push

Within seconds Netlify detects the new commit, pulls the latest code, rebuilds (if needed), and updates the live site. You’ll see a new deployment entry in the Netlify UI, complete with a timestamp and commit SHA.

Step 5: Configure Environment Variables (Optional)

If your static site relies on API keys, third‑party services, or build‑time variables, you shouldn’t hard‑code them. Netlify lets you store them securely:

1. Go to Site settings → Build & deploy → Environment.
2. Click Edit variables and add key‑value pairs (e.g., API_URL=https://api.example.com).

During the build Netlify injects these variables, and they’re also available to client‑side code via the process.env object if you’re using a bundler like Vite or Webpack. Remember to reference them correctly in your code; a common mistake is forgetting the VITE_ prefix required for client exposure.

Step 6: Optimize and Protect Your Site

Before you call it a day, take advantage of Netlify’s built‑in optimizations:

• Asset compression: Netlify automatically serves gzipped or Brotli‑compressed files.
• Redirects and rewrites: Create a _redirects file in the root of your repo to handle SPA routing or legacy URLs. Example:

  /old-page   /new-page   301

• Branch deploys: If you want a staging environment, push a branch named staging and enable a separate Netlify site that tracks that branch.

Finally, enable the Password protection option under Site settings → Access control** if you need a private preview before the public launch.

Common Mistakes to Avoid

Even beginners stumble over a few recurring issues:

• Wrong publish directory: Netlify will serve whatever folder you specify. If you set it to /dist but your build outputs to /public, you’ll get a blank page.
• Forgetting to push the main branch: Netlify watches the branch you configured. Pushing to a different branch leaves the live site unchanged.
• Hard‑coding secrets: Exposing API keys in the repo not only compromises security but also breaks builds when Netlify strips them out.
• Case‑sensitive file names: Windows ignores case, but Netlify runs on Linux. A file named Style.css referenced as style.css will 404 in production.
• Missing index.html at the root: Netlify expects an entry point. If you rely on a framework that generates index.html in a subfolder, adjust the publish directory accordingly.

Tips and Tricks

Here are a few pro‑level shortcuts that keep your workflow smooth:

• Use Netlify CLI: Install with npm install -g netlify-cli. Then run netlify deploy --prod to preview a production build locally before pushing.
• Deploy previews for pull requests: Enable the “Deploy previews” toggle. Each PR gets a unique URL, perfect for stakeholder review.
• Batch deploy multiple sites: If you manage several micro‑sites, group them under a single Netlify team to share settings and billing.
• Leverage Netlify Functions: Add a netlify/functions folder and write serverless JavaScript for simple back‑end tasks without leaving the static paradigm.

Frequently Asked Questions

Do I need a build tool for a plain HTML site?

No. Netlify can serve static files directly. Just set the publish directory to / and leave the build command empty.

Can I use a custom domain that I already own?

Absolutely. In Netlify’s Domain settings add your domain, then update your DNS provider with the Netlify nameservers or CNAME records as instructed. SSL is provisioned automatically.

What happens if I delete the GitHub repository?

Netlify will lose its source of truth and can’t rebuild on new commits. The last deployed version stays live, but you’ll need to reconnect a new repo or re‑upload the site manually.

Conclusion

Deploying a static website with Netlify and Git is a fast, repeatable process that scales from a personal portfolio to a multi‑site portfolio for a small business. By following the steps above, you gain version control, automatic builds, and a global CDN—all without touching a server. Keep an eye on the common pitfalls, experiment with the advanced features, and you’ll have a rock‑solid publishing pipeline that lets you focus on what matters most: creating great content.

Photo by Jackson Sophat on Unsplash