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

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

Step 1: Configure Domain Settings

1. Login to Your Domain Provider Website:

   • Access your domain provider’s website and log in to your account.

2. Navigate to Manage DNS:

   • Find and navigate to the DNS management section.

3. Add DNS Records:

   • Add the following DNS records to point your domain to your VPS:

     Type	Host/Name	Value
     A	@	Your Remote Server IP
     A	www	Your Remote Server IP
     AAAA	@	Your Remote Server IPv6
     AAAA	www	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.

2. 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:

     apache2 -v
     git --version

2. Install Apache and Git:

   • If any required software is missing, install Apache and Git using apt:

     sudo apt install apache2 git

3. Verify Apache2 and Firewall:

   • Ensure Apache is active and running, and verify firewall settings:

     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:

     ssh-keygen -t ed25519 -C "your_email@example.com"

   • If you encounter permission denied, change ownership of the .ssh directory:

     sudo chown -R user_name .ssh

2. Copy Public SSH Key to GitHub:

   • Copy the public SSH key and add it to your GitHub account’s deploy keys.

3. Verify Connection:

   • Verify the SSH connection between your server and GitHub:

     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:

     git clone https_repo_path

     or

     git clone ssh_repo_path

2. Move Project Folder to Web Directory:

   • Move the project folder to the web server’s public directory:

     sudo mv project_folder_name /var/www

3. Create Virtual Host File:

   • Create a virtual host configuration file for your domain:

     sudo nano /etc/apache2/sites-available/your_domain.conf

   • Add necessary configuration details for Apache.

4. Check Configuration and Restart Apache:

   • Verify the configuration and restart Apache to apply changes:

     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.

2. Set File Permissions:

   • Set execute permission for the deployment script:

     git update-index --add --chmod=+x .scripts/deploy.sh

3. 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.

4. Add Secrets to GitHub:

   • Add repository secrets for the server host, port, username, and SSH key.

5. 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.

---