Blog Post

Stop Ignoring Alerts: How to Send “Graphic” HTML Emails with Bash

December 30, 2025 Automation, DevOps, Shell scripting by [email protected]

As Linux engineers, we stare at terminal text all day. When we get an automated email alert that is just 10 lines of plain text, it’s easy to ignore it.

But what if your server sent you a visual dashboard instead?

Today, I’m sharing a “too easy” script. It doesn’t require Python, Perl, or complex monitoring agents. It simply checks your Disk Usage and sends you a beautifully formatted HTML email with a visual progress bar.

The Concept

Most people don’t know that the standard sendmail command on Linux supports HTML. By changing the Content-Type header from text/plain to text/html, we can use CSS and HTML tags right inside our shell script.

The Script: pretty_alert.sh

Copy this code. You only need to change the TO_EMAIL at the top. (But try your html knowledge and redesign the html way)

#!/bin/bash

# --- CONFIGURATION ---
TO_EMAIL="[email protected]"
SUBJECT="Server Health Report: $(hostname)"
# ---------------------

# 1. Get Disk Usage % (Just the number, e.g., 45)
USAGE=$(df -h / | awk 'NR==2 {print $5}' | tr -d '%')

# 2. Determine Color based on usage
# Green if safe, Red if over 80%
if [ "$USAGE" -gt 80 ]; then
    COLOR="#ff4444" # Red
    STATUS="WARNING"
else
    COLOR="#00C851" # Green
    STATUS="HEALTHY"
fi

# 3. Create the HTML Content
# We use a Here-Doc (cat <<EOF) to build the graphic interface
HTML_CONTENT=$(cat <<EOF
<html>
<body style="font-family: Arial, sans-serif; background-color: #f4f4f4; padding: 20px;">
    <div style="max-width: 600px; margin: 0 auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
        
        <h2 style="color: #333;">Server Status: <span style="color: $COLOR;">$STATUS</span></h2>
        <p>This is an automated report from your server <strong>$(hostname)</strong>.</p>
        
        <hr style="border: 0; border-top: 1px solid #eee;">
        
        <h3>Disk Usage (Root Partition)</h3>
        <p style="font-size: 24px; font-weight: bold; margin: 0;">${USAGE}%</p>
        
        <div style="background-color: #e0e0e0; border-radius: 5px; width: 100%; height: 20px; margin-top: 5px;">
            <div style="background-color: $COLOR; width: ${USAGE}%; height: 100%; border-radius: 5px;"></div>
        </div>

        <br>
        <p style="font-size: 12px; color: #777;">Generated on $(date)</p>
    </div>
</body>
</html>
EOF
)

# 4. Send the Email
# We construct the headers manually to ensure it's treated as HTML
(
echo "To: $TO_EMAIL"
echo "Subject: $SUBJECT"
echo "MIME-Version: 1.0"
echo "Content-Type: text/html"
echo
echo "$HTML_CONTENT"
) | /usr/sbin/sendmail -t

See the sample output below

Server Status: HEALTHY

This is an automated report from your server production-db-01.

Disk Usage (Root Partition)

45%

Generated on Sat Dec 27 2025 21:20:00 IST

Why this is better than plain text

Visual Hierarchy: The usage percentage is big and bold. You see the important number instantly.
Color Coding: The script automatically switches the progress bar from Green to Red if usage goes above 80%. Your brain reacts to the color before you even read the text.
Simplicity: We didn’t install any new tools. We just used echo, awk, and sendmail.

How to run it

Save the file as pretty_alert.sh.
Make it executable: chmod +x pretty_alert.sh.
Run it: ./pretty_alert.sh.
add the script to cron and make it automation

Check your inbox. You just got a graphic report from your CLI!

Write a comment