Close Up Photo of Mining Rig

How to Point Domain and Host HTML Static Project using GitHub on Apache Web Server VPS Hosting

Deploying a static HTML project on a VPS hosting server involves configuring your domain, setting up GitHub for version control, and automating deployment using GitHub Actions. Let’s walk through each step in detail.

Step 1: Configure Domain Settings

  1. Login to Your Domain Provider Website:
  • Access your domain provider’s website and log in to your account.
  1. Navigate to Manage DNS:
  • Find and navigate to the DNS management section.
  1. Add DNS Records:
  • Add the following DNS records to point your domain to your VPS:
    • A Record:
    • Host/Name: @
    • Value: Your Remote Server IP
    • A Record:
    • Host/Name: www
    • Value: Your Remote Server IP
    • AAAA Record (for IPv6):
    • Host/Name: @
    • Value: Your Remote Server IPv6
    • AAAA Record (for IPv6):
    • Host/Name: www
    • Value: Your Remote Server IPv6

Step 2: Prepare HTML Project and Push to GitHub

  1. Create .gitignore File (If Needed):
  • If your project doesn’t have a .gitignore file, create one to exclude unnecessary files from version control.
  1. Push Your Project to GitHub:
  • Push your HTML static project to your GitHub account as a private repository for version control.

Step 3: Access Remote Server via SSH

  1. Verify Required Software:
  • SSH into your remote server and verify that all necessary software is installed:
bash apache2 -v git --version
  1. Install Apache and Git:
  • If any required software is missing, install Apache and Git using apt:
bash sudo apt install apache2 git
  1. Verify Apache2 and Firewall:
  • Ensure Apache is active and running, and verify firewall settings:
bash sudo service apache2 status sudo ufw status verbose

Step 4: Make Connection between Remote Server and GitHub via SSH Key

  1. Generate SSH Keys:
  • Generate SSH keys on your remote server:
bash ssh-keygen -t ed25519 -C "your_email@example.com"
  • If you encounter permission denied, change ownership of the .ssh directory:
bash sudo chown -R user_name .ssh
  1. Copy Public SSH Key to GitHub:
  • Copy the public SSH key and add it to your GitHub account’s deploy keys.
  1. Verify Connection:
  • Verify the SSH connection between your server and GitHub:
bash ssh -T git@github.com

Step 5: Clone and Deploy HTML Project on Remote Server

  1. Clone Project from GitHub:
  • Clone your HTML project from GitHub to your server’s home directory:
bash git clone https_repo_path
or
bash git clone ssh_repo_path
  1. Move Project Folder to Web Directory:
  • Move the project folder to the web server’s public directory:
bash sudo mv project_folder_name /var/www
  1. Create Virtual Host File:
  • Create a virtual host configuration file for your domain:
bash sudo nano /etc/apache2/sites-available/your_domain.conf
  • Add necessary configuration details for Apache.
  1. Check Configuration and Restart Apache:
  • Verify the configuration and restart Apache to apply changes:
bash sudo apache2ctl configtest cd /etc/apache2/sites-available/ sudo a2ensite your_domain.conf sudo service apache2 restart

Step 6: Automate HTML Deployment using GitHub Actions

  1. Create Deployment Script:
  • Create a deployment script (deploy.sh) inside the project’s .scripts folder.
  1. Set File Permissions:
  • Set execute permission for the deployment script:
bash git update-index --add --chmod=+x .scripts/deploy.sh
  1. Configure GitHub Actions:
  • Create a GitHub Actions workflow file (deploy.yml) inside the .github/workflows directory.
  • Define the workflow to trigger deployment on push or pull request events.
  1. Add Secrets to GitHub:
  • Add repository secrets for the server host, port, username, and SSH key.
  1. Generate SSH Key for GitHub Actions:
  • Generate SSH key on the remote server and add it as a repository secret on GitHub.

By following these steps, you can successfully host your static HTML project on a VPS hosting server using GitHub for version control and automation. With automated deployment via GitHub Actions, you can streamline your deployment process and ensure seamless updates to your live website.