“One Click Deploy”: Automate Static Site Publishing via GitHub Actions

Shipping your static website manually every time you make a change can become repetitive and error-prone. With GitHub Actions, you can fully automate the deployment process so that a commit to the main branch triggers an automatic deployment. This approach follows the principles of continuous deployment (CD) and creates a seamless, reliable workflow for publishing your site.

1. Why Automate Static Site Deployment?

Static websites are efficient, fast, and easy to host — especially on services like GitHub Pages, Netlify, or S3. However, manually uploading files can break your momentum or introduce inconsistencies. Automation eliminates human intervention and allows teams to:

Reduce deployment steps to a single git push
Enforce consistent build environments
Deploy changes faster and safer
Enable preview or staging deployments

Let’s walk through how to automate static site deployment using GitHub Actions for GitHub Pages.

2. Project Setup: A Minimal Static Site

We’ll start by using a simple HTML/CSS site stored in a my-static-site GitHub repository. Here’s a minimal example of the project layout:

my-static-site/
├── index.html
├── styles.css
└── .github/
    └── workflows/
        └── deploy.yml

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Static Site</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

styles.css:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  text-align: center;
}

3. Creating the Deployment Workflow

GitHub Actions uses YAML files to define workflows. We’ll create a deploy workflow under .github/workflows/deploy.yml to publish our site to GitHub Pages.

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      # Setup Pages
      - uses: actions/configure-pages@v3

      # Upload artifact
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: '.'

      # Deploy to GitHub Pages
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

This YAML workflow does the following:

Triggers on push to main
Checks out the repository
Configures GitHub Pages for Pages deployment
Uploads site artifacts for deployment
Publishes the site using GitHub’s deploy action

Important: Ensure you enable GitHub Pages on your repo settings and set the source to GitHub Actions.

4. Tips for Optimizing Your Deployment

Here are some tricks to make the most out of deploying static sites through GitHub Actions:

Minify assets: Use tools like html-minifier or Webpack plugins to reduce file sizes before deployment.
Use a build step: If your static site is generated using a framework (like Astro, Hugo, or Eleventy), add a step to build it before uploading artifacts.

      - name: Build Site
        run: npm run build

Example with Hugo:

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.110.0'

      - name: Build Site
        run: hugo

5. Going Further: Preview Deploys and Branch Isolation

You can extend your workflow to create staging or preview environments using deploy previews. For example, use a workflow for pull requests:

on:
  pull_request:
    branches:
      - main

Tagging deployments with branch names or git hashes allows testers to review changes before merging to main. You might also integrate with services like Vercel or Netlify that can offer preview URLs automatically.

Bonus: Protect Your Branches

Enable branch protection rules with required checks to ensure all build and deploy steps pass before code is merged.

Conclusion

By using GitHub Actions to automate the publishing of static sites, you transform your deployment process into a one-click operation triggered by a simple git push. This not only saves time but greatly reduces the chances of human error, enforces consistency, and simplifies maintenance over time.

Whether you’re building a personal portfolio, documentation site, or small product landing page, GitHub Actions can help automate tedious tasks and let you focus on building awesome experiences.

Useful links: