How to deploy a responsive web design project on a VPS using Git?

Question

I’m working on a fully responsive website created with HTML, CSS, and JavaScript. I’ve completed the local development and now want to deploy it to a VPS server using Git for version control and automatic deployment.

Here’s what I have:

A VPS running Ubuntu 22.04
Git repository hosted on GitHub
SSH access to the server
Apache/Nginx is installed

Can someone guide me on how to set up the VPS for deployment from GitHub? Also, how can I automate deployments every time I push updates to the main branch?

Thanks in advance!

Bobby · Answer

Hi, You can keep it simple by SSH-ing into your VPS, cloning the repo, and serving the files via Nginx or Apache from the right directory (like /var/www/html). Here’s a guide to connect with SSH and another to install Nginx on Ubuntu . To automate deployments, you could set up a GitHub webhook that triggers a pull on your server, or use a small GitHub Actions workflow with SSH deploy. If you’re open to alternatives, DigitalOcean App Platform can auto-deploy static sites from GitHub with almost zero setup, no need to manage servers manually. - Bobby

KFSys · Answer

Heya, Here’s a somewhat straightforward guide to deploy your HTML/CSS/JavaScript site to your VPS with Git and automate deployments when you push to main. Prepare Your VPS SSH into your server : ssh youruser@your_server_ip Install Git if you haven’t : sudo apt update sudo apt install git -y Set up a directory for your site , e.g., sudo mkdir -p /var/www/mywebsite sudo chown -R youruser:youruser /var/www/mywebsite Add SSH Key for GitHub Access This allows your server to pull code without password prompts. Generate an SSH key on your server (if you haven’t already): ssh-keygen -t ed25519 -C "deploy@mywebsite" (Just press Enter through the prompts.)2. Copy the public key : cat ~/.ssh/id_ed25519.pub Copy the output. Add it to GitHub : Go to GitHub > Settings > Deploy keys (in your repo) > Add deploy key Give it a title (e.g., “VPS Deploy Key”) Paste the public key Check “Allow write access” if you want to push from the server, but for pulls only, leave it unchecked. ## Clone Your Repo to the Server Go into your website directory: cd /var/www/mywebsite Clone: git clone git@github.com:yourusername/your-repo.git . Now onto the good stuff Configure Apache or Nginx You’ll want to point your web server to /var/www/mywebsite.Example for Nginx : server { listen 80; server_name yourdomain.com www.yourdomain.com; root /var/www/mywebsite; index index.html; location / { try_files $uri $uri/ =404; } } Then reload: sudo systemctl reload nginx Automate Deployments To automate deployments you can use github actions. Here is a quick example on how to configure it Add the Private Key to GitHub Secrets In your repo: Go to Settings > Secrets and variables > Actions > New repository secret Name it: VPS_SSH_KEY Paste the entire contents of id_ed25519 (the private key) Create the GitHub Actions Workflow In your repo, create: .github/workflows/deploy.yml Example workflow: name: 🚀 Deploy Website on: push: branches: - main jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v4 - name: Copy files to VPS uses: appleboy/scp-action@v0.1.7 with: host: ${{ secrets.VPS_HOST }} username: youruser key: ${{ secrets.VPS_SSH_KEY }} port: 22 source: "." target: "/var/www/mywebsite" rm: true - name: SSH commands (optional) uses: appleboy/ssh-action@v1.0.0 with: host: ${{ secrets.VPS_HOST }} username: youruser key: ${{ secrets.VPS_SSH_KEY }} port: 22 script: | cd /var/www/mywebsite git pull origin main Note: The scp-action copies your files to the server. The ssh-action can run commands after upload. You can skip git pull if you’re fully copying all files each time This became far too long. Here are some links you can follow that are wayy more structured than my response and def easier to read: https://docs.digitalocean.com/products/app-platform/how-to/deploy-from-github-actions/ https://www.digitalocean.com/community/tutorials/how-to-install-linux-nginx-mysql-php-lemp-stack-on-ubuntu-20-04

James Wood · Answer

To deploy a responsive web design project on a VPS using Git: SSH into your VPS and install Git + a web server (e.g., Nginx). Clone your Git repo to /var/www/your_project. Configure Nginx to serve files from that directory. Use git pull to update the project whenever changes are made. (Optional) Set up HTTPS with Let’s Encrypt.

Become a contributor for community

DigitalOcean Documentation

Resources for startups and AI-native businesses

The developer cloud

Start building today

Report this

How to deploy a responsive web design project on a VPS using Git?

Related questions

Is it safe to run production apps on a single DigitalOcean Droplet?

403 Forbidden on DigitalOcean App Platform with FastAPI Backend & Streamlit Frontend

I'm getting this ERROR: you dont' have permission to complete this action

App.yaml file is not detected in the root or .do directory

ReferenceError: module is not defined in ES module scope

npm run build/vite build time out killed

Droplet's Nginx Reverse Proxy Fails with 502 Bad Gateway Only After Deploy Any Thoughts?

Cannot deploy from private github repo

Django/Nginx/Gunicorn "unknown errors" in nginx logs

How to skip build step for a service in app platform

Does a DO function do npm install, or I need to manually upload the node_modules folder?

How to deploy Streamlit using st.login() to Digital Ocean

Report this

How to deploy a responsive web design project on a VPS using Git?

Related questions

Is it safe to run production apps on a single DigitalOcean Droplet?

403 Forbidden on DigitalOcean App Platform with FastAPI Backend & Streamlit Frontend

I'm getting this ERROR: you dont' have permission to complete this action

App.yaml file is not detected in the root or .do directory

ReferenceError: module is not defined in ES module scope

npm run build/vite build time out killed

Droplet's Nginx Reverse Proxy Fails with 502 Bad Gateway Only After Deploy Any Thoughts?

Cannot deploy from private github repo

Django/Nginx/Gunicorn "unknown errors" in nginx logs

How to skip build step for a service in app platform

Does a DO function do npm install, or I need to manually upload the node_modules folder?

How to deploy Streamlit using st.login() to Digital Ocean