Deploy_HTML_Static_Apache_Github.md

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

• Login to Your Domain Provider Website
• Navigate to Manage DNS
• Add Following Records:

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

• Open Project on VS Code then add .gitignore file (If needed)
• Push your Poject to Your Github Account as Private Repo
• To Access Remote Server via SSH

Syntax:- ssh -p PORT USERNAME@HOSTIP
Example:- ssh -p 22 [email protected]

Note:- Run Below Commands on Your Remote Server Linux Machine or VPS, Not on Your Local Windows Machine

• Verify that all required softwares are installed

apache2 -v
git --version

• Install Apache

sudo apt install apache2

• Install Git

sudo apt install git

• Verify Apache2 is Active and Running

sudo service apache2 status

• Verify Web Server Ports are Open and Allowed through Firewall

sudo ufw status verbose

• Make Connection between Remote Server and Github via SSH Key
• Generate SSH Keys

ssh-keygen -t ed25519 -C "[email protected]"

• If Permission Denied then Own .ssh then try again to Generate SSH Keys

Syntax:- sudo chown -R user_name .ssh
Example:- sudo chown -R raj .ssh

• Open Public SSH Keys then copy the key

cat ~/.ssh/id_ed25519.pub

• Go to Your Github Repo
• Click on Settings Tab
• Click on Deploy Keys option from sidebar
• Click on Add Deploy Key Button and Paste Remote Server's Copied SSH Public Key then Click on Add Key
• Verify the Connection, Go to Your Server Terminal then run below

ssh -T [email protected]
// OR
ssh -vT [email protected]

• You may get an error git @ github.com: Permission denied (publickey) If you will try to clone it directly on Web Server Public Folder /var/www So we will clone github repo in User's Home Directory then Move it to Web server Public Directory
• Clone Project from your github account

- Using HTTPS Path It doesnt require to setup SSH Key on Github
Syntax:- git clone https_repo_path
Example:- git clone https://github.com/geekyshow1/miniblog.git

- Using SSH Path It requires to setup SSH Key on Github
Syntax:- git clone ssh_repo_path
Example:- git clone [email protected]:geekyshow1/miniblog.git

• Run ls command to verify that the project is present

ls

• Move Project Folder to Web Server public directory

Syntax:- sudo mv project_folder_name /var/www
Example:- sudo mv miniblog /var/www

• Create Virtual Host File

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

• Add Following Code in Virtual Host File

<VirtualHost *:80>
    ServerName www.example.com
    ServerAdmin [email protected]
    DocumentRoot /var/www/project_folder_name
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

• Check Configuration is correct or not

sudo apache2ctl configtest

• Enable Virtual Host

cd /etc/apache2/sites-available/
sudo a2ensite your_domain.conf

• Restart Apache2

sudo service apache2 restart

• You can check error logs If you get any error:

cd /var/log
su
cd apache2
cat error.log

• You can Clear Error Logs (Optional)

sudo bash -c 'echo > /var/log/apache2/error.log'

How to Automate HTML Static Website Deployment using Github Action

• On Your Local Machine, Open Your Project using VS Code or any Editor
• Create A Folder named .scripts inside your root project folder e.g. miniblog/.scripts
• Inside .scripts folder Create A file with .sh extension e.g. miniblog/.scripts/deploy.sh
• Write below script inside the created .sh file

#!/bin/bash
set -e

echo "Deployment started ..."

# Pull the latest version of the app
git pull origin master
echo "New changes copied to server !"

echo "Deployment Finished!"

• Go inside .scripts Folder then Set File Permission for .sh File

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

• Create Directory Path named .github/workflows inside your root project folder e.g. miniblog/.github/workflows
• Inside workflows folder Create A file with .yml extension e.g. miniblog/.github/workflows/deploy.yml
• Write below script inside the created .yml file

name: Deploy

# Trigger the workflow on push and
# pull request events on the master branch
on:
  push:
    branches: ["master"]
  pull_request:
    branches: ["master"]

# Authenticate to the the server via ssh
# and run our deployment script
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Deploy to Server
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          port: ${{ secrets.PORT }}
          key: ${{ secrets.SSHKEY }}
          script: "cd /var/www/miniblog && ./.scripts/deploy.sh"

• Go to Your Github Repo Click on Settings
• Click on Secrets and Variables from the Sidebar then choose Actions
• On Secret Tab, Click on New Repository Secret
• Add Four Secrets HOST, PORT, USERNAME and SSHKEY as below

Name: HOST
Secret: Your_Server_IP

Name: PORT
Secret: Your_Server_PORT

Name: USERNAME
Secret: Your_Server_User_Name

• You can get Server User Name by loging into your server via ssh then run below command

whoami

• Generate SSH Key for Github Action by Login into Remote Server then run below Command OR You can use old SSH Key But I am creating New one for Github Action

Syntax:- ssh-keygen -f key_path -t ed25519 -C "[email protected]"
Example:- ssh-keygen -f /home/raj/.ssh/gitaction_ed25519 -t ed25519 -C "gitactionautodep"

• Open Newly Created Public SSH Keys then copy the key

cat ~/.ssh/gitaction_ed25519.pub

• Open authorized_keys File which is inside .ssh/authroized_keys then paste the copied key in a new line

cd .ssh
nano authorized_keys

• Open Newly Created Private SSH Keys then copy the key, we will use this key to add New Repository Secret On Github Repo

cat ~/.ssh/gitaction_ed25519

Name: SSHKEY
Secret: Private_SSH_KEY_Generated_On_Server

• Commit and Push the change to Your Github Repo
• Get Access to Remote Server via SSH

Syntax:- ssh -p PORT USERNAME@HOSTIP
Example:- ssh -p 22 [email protected]

• Go to Your Project Directory

Syntax:- cd /var/www/project_folder_name
Example:- cd /var/www/miniblog

• Pull the changes from github just once this time.

git pull

• Your Deployment should become automate.
• On Local Machine make some changes in Your Project then Commit and Push to Github Repo It will automatically deployed on Live Server
• You can track your action from Github Actions Tab
• If you get any File Permission error in the action then you have to change file permission accordingly.
• All Done