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
โ๏ธ 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
After successfully testing my code.
Deploying my code to the Linux self-hosted server in process.
๐ How It Works
- Every time I push to the
main
branch, the GitHub Action is triggered. - The self-hosted runner on my Ubuntu server picks it up.
- It copies the
index.html
file into/var/www/html/
. - It reloads NGINX to apply changes immediately.
Successful deployed and it running fine.
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!
Top comments (0)