How to establish CI/CD for a static website on an Ubuntu 20.04 server without utilizing Docker?

edit

Here is a step-by-step guide to establish CI/CD for a static website on an Ubuntu 20.04 server without utilizing Docker:

1. Install Git on the Ubuntu 20.04 server:

   sudo apt update
   sudo apt install git
   

2. Configure SSH for Git by generating a new SSH key and adding it to the Git account:

   ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
   

   Copy the SSH key to the clipboard:

   cat ~/.ssh/id_rsa.pub
   

3. Create a new repository on GitHub or GitLab and add the generated SSH key to the repository.

4. Install Nginx on the Ubuntu 20.04 server:

   sudo apt update
   sudo apt install nginx
   

5. Configure Nginx to serve the static website by editing the default Nginx configuration file:

   sudo nano /etc/nginx/sites-available/default
   

   Add the following configuration, replacing the example.com and path/to/static/files with your domain and path to your static files:

   server {
       listen 80;
       server_name example.com;
       root /var/www/path/to/static/files;
       index index.html;
       location / {
           try_files $uri $uri/ /index.html;
       }
   }
   

   Save and close the file.

6. Create a new directory to store the static website files:

   sudo mkdir -p /var/www/path/to/static/files
   

7. Clone the repository with the static website files:

   git clone git@github.com:<username>/<repository>.git /var/www/path/to/static/files
   

   Replace <username> and <repository> with your GitHub or GitLab username and repository name.

8. Install Node.js and npm on the Ubuntu 20.04 server:

   sudo apt update
   sudo apt install nodejs npm
   

9. Install the npm install serve package globally:

   sudo npm install -g serve
   

10. Create a serve script in the root directory of the cloned repository with the following content:

    #!/bin/bash
    serve -s -l 3000 build
    

11. Make the serve script executable:

    sudo chmod +x serve
    

12. Create a new webhook on GitHub or GitLab that triggers a POST request to a specific URL when a push is made to the repository.

13. Install nginx-extras package on the Ubuntu 20.04 server:

    sudo apt install nginx-extras
    

14. Use Lua to create a new location block on the Nginx configuration file. This new location will receive the POST request from the webhook and execute the deploy.sh script:

    location /deploy {
        # Only allow access from GitHub IPs
        allow <github-ip-address>;
        # The script checks out the latest changes and deploys the updated version
        # of the website
        content_by_lua_block {
            os.execute("/var/www/path/to/static/files/deploy.sh")
        }
        # Deny all other requests
        deny all;
    }
    

    Replace <github-ip-address> with the IP address range of GitHub.

15. Create a new script named deploy.sh in the root directory of the cloned repository with the following content:

    #!/bin/bash
    
    # Change to the cloned repository directory
    cd /var/www/path/to/static/files
    
    # Pull the latest changes from the repository
    git pull origin master
    
    # Build the static website files with your favorite static site generator
    npm run build
    
    # Start the website with the serve script
    ./serve &
    

    Replace path/to/static/files with the actual path to the directory where the website files are located.

16. Make the deploy.sh script executable:

    sudo chmod +x deploy.sh
    

17. Restart Nginx to apply the new configuration:

    sudo systemctl restart nginx
    

18. After pushing changes to the repository, the webhook should trigger a POST request to the server, which will execute the deploy.sh script and update the website.