DEV Community

Cover image for ๐Ÿš€ How I Deployed My Static Website Using GitHub Actions
BAKRE JAMIU
BAKRE JAMIU

Posted on

1

๐Ÿš€ How I Deployed My Static Website Using GitHub Actions

Deploying a static website manually can be tedious, especially when youโ€™re updating it frequently. Thatโ€™s why I decided to automate my deployment process using GitHub Actionsโ€”a powerful CI/CD tool built right into GitHub.

In this post, Iโ€™ll walk you through how I deployed my static website automatically to an NGINX server using GitHub Actions.


๐Ÿ› ๏ธ Tools I Used

  • GitHub โ€“ to store my websiteโ€™s source code
  • GitHub Actions โ€“ to automate the deployment
  • Ubuntu Server with NGINX โ€“ to host the static site
  • Self-Hosted GitHub Runner โ€“ on the Ubuntu server

๐Ÿ“ Project Structure

My website files are stored in this directory:

_work/ci-static-simple-website/ci-static-simple-website/
โ”‚
โ”œโ”€โ”€ index.html
โ””โ”€โ”€ README.md
Enter fullscreen mode Exit fullscreen mode

โš™๏ธ Setting Up the GitHub Action

I created a .github/workflows/deploy.yml file in my repo to define the deployment pipeline.

Hereโ€™s a simple version of my GitHub Actions workflow:

name: Deploy Static Website

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: self-hosted

    steps:
    - name: Checkout Code
      uses: actions/checkout@v3

    - name: Copy index.html to NGINX Web Directory
      run: |
        cp _work/ci-static-simple-website/ci-static-simple-website/index.html /var/www/html/index.html
        sudo systemctl reload nginx
Enter fullscreen mode Exit fullscreen mode

Image description

Image description

After successfully testing my code.


Image description

Deploying my code to the Linux self-hosted server in process.


๐Ÿ”— How It Works

  1. Every time I push to the main branch, the GitHub Action is triggered.
  2. The self-hosted runner on my Ubuntu server picks it up.
  3. It copies the index.html file into /var/www/html/.
  4. It reloads NGINX to apply changes immediately.

Image description

Successful deployed and it running fine.

Image description

My Code is running Live.

๐ŸŽ‰ Final Result

Once the action runs, my static website is instantly live at my serverโ€™s public IP!


๐Ÿ’ก Why This Is Awesome

  • I never have to manually copy files again
  • It works perfectly for personal portfolios, landing pages, or project demos
  • Super fast and reliable!

Let me know in the comments if you'd like a step-by-step guide to setting up your own self-hosted runner or customizing your deployment pipeline!

Tiugo image

Modular, Fast, and Built for Developers

CKEditor 5 gives you full control over your editing experience. A modular architecture means you get high performance, fewer re-renders and a setup that scales with your needs.

Start now

Top comments (0)

Image of Quadratic

Free AI chart generator

Upload data, describe your vision, and get Python-powered, AI-generated charts instantly.

Try Quadratic free

๐Ÿ‘‹ Kindness is contagious

Please drop a โค๏ธ or a kind comment on this post if it resonated with you!

Got it!