BytesOfProgress

Wiki

Execute BASH Scripts (CGI) & HTMX updates

In this guide we will set up a way to execute BASH scripts with Nginx & fastcgi. After that we will make it update itself without reloading the page by using HTMX.

Setting it up

This method is tested on Debian 12.

Step 1: Install nginx and fastcgi


  # apt install nginx fcgiwrap -y

Step 2: Modify your server config file. Ussually it is located at "/etc/nginx/sites-available/default".

  server {
      listen 8088;
      server_name NAME;

      root /var/www/html;
      index index.html;
          
      location /cgi-bin/ {
          alias /usr/lib/cgi-bin/; # Default path for cgi scripts.
          fastcgi_pass unix:/var/run/fcgiwrap.socket;
          include fastcgi_params;
          fastcgi_param SCRIPT_FILENAME /usr/lib$fastcgi_script_name;
      }
  }

After that, test the nginx config with "# nginx -t". On success, restart the nginx system service with "# systemctl restart nginx"

Step 3: Now we write our BASH script: We create a file in "/usr/lib/cgi-bin". If the directory does not exist yet, create it with mkdir.


  # nano /usr/lib/cgi-bin/script.sh

In there you can bash-echo your HTML or simply write commands that provide an output.

#!/bin/sh

echo "Content-Type: text/html"
echo ""
echo "<!DOCTYPE html>"
echo "<html lang=\"de\">"
echo "<head>"
echo "  <meta charset=\"UTF-8\">"
echo "  <title>Monitoringl</title>"
echo "  <link rel=\"icon\" type=\"image/x-icon\" href=\"/assets/favicon.png\">"
echo "  <style>"
echo "    body { font-family: Arial, sans-serif; color: #ffffff; background-color: #000000; }"
echo "    .section { margin-bottom: 20px; }"
echo "    .section h2 { margin: 0; }"
echo "    pre { color: #ffffff; font-size: 14px; white-space: pre-wrap; }"
echo "  </style>"
echo "</head>"
echo "<body>"

# RAM Usage
echo "<div class='section'>"
echo "<h2>RAM Usage:</h2>"
echo "<pre>"
echo "$(awk '/MemTotal/ {total=$2} /MemAvailable/ {available=$2} END {usage=((total-available)/total)*100; printf "Percent: %.2f%%\n", usage}' /proc/meminfo)"
echo "$(awk '/MemTotal/ {total=$2} /MemAvailable/ {available=$2} END {printf "MiB: %d / %d MiB\n", (total-available)/1024, total/1024}' /proc/meminfo)"
echo "</pre>"
echo "</div>"

# Uptime
echo "<div class='section'>"
echo "<h2>Uptime:</h2>"
echo "<pre>$(uptime -p | sed 's/up //')</pre>"
echo "</div>"

echo "</body>"
echo "</html>"

# Removing temporary files.
rm /tmp/stat1 /tmp/stat2

This example script monitors the uptime and RAM usage of the server. Of course you can use any kind of script you wish, as long as it uses these HTML/BASH mixure. IMPORTANT: You have these two lines in the beginning, otherwise it will not work:


  echo "Content-Type: text/html"
  echo ""

Step 4: Start & enable the fastcgi system service:


  # systemctl start fcgiwrap && systemctl enable fcgiwrap

Step 5: Testing: If you now enter the IPv4 address of your webserver into your webbrowser and add "/script.sh" to the end, you should get an output.

Automating live updates with HTMX

Now we will edit our "/var/www/html/index.html". This requires you having a basic HTML file set up. Add these lines to your index.html:

<script src="https://unpkg.com/htmx.org@2.0.1"></script>

<div hx-get="/cgi-bin/script.sh" hx-swap="innerHTML" hx-trigger="every 1s">
        <!-- Script Content -->
</div>

This will create a div and swap its content to the content of the CGI-script every one second via HTMX. You can, of course, change this time.

Info on CSS, title, etc: I figured out, to change the title, favicon and CSS of your index.html, you might have to change it in the CGI-script instead of your HTML style tag or external stylesheet.

back