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

Table Of Content
How to Point Domain and Host HTML Static Project using GitHub on Apache Web Server VPS Hosting
Step 1: Configure Domain Settings
-
Login to Your Domain Provider Website:
- Access your domain provider’s website and log in to your account.
-
Navigate to Manage DNS:
- Find and navigate to the DNS management section.
-
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
-
Create .gitignore File (If Needed):
- If your project doesn’t have a
.gitignore
file, create one to exclude unnecessary files from version control.
- If your project doesn’t have a
-
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
-
Verify Required Software:
-
SSH into your remote server and verify that all necessary software is installed:
apache2 -v git --version
-
-
Install Apache and Git:
-
If any required software is missing, install Apache and Git using apt:
sudo apt install apache2 git
-
-
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
-
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
-
-
Copy Public SSH Key to GitHub:
- Copy the public SSH key and add it to your GitHub account’s deploy keys.
-
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
-
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
-
-
Move Project Folder to Web Directory:
-
Move the project folder to the web server’s public directory:
sudo mv project_folder_name /var/www
-
-
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.
-
-
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
-
Create Deployment Script:
- Create a deployment script (
deploy.sh
) inside the project’s.scripts
folder.
- Create a deployment script (
-
Set File Permissions:
-
Set execute permission for the deployment script:
git update-index --add --chmod=+x .scripts/deploy.sh
-
-
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.
-
-
Add Secrets to GitHub:
- Add repository secrets for the server host, port, username, and SSH key.
-
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.