Script for Instantly Adding Images to a Hugo Webpage (macOS)

Published on: June 27, 2025

In this example I'm using the second script to add in an image to this article. It's not a good image, but I feel that it's still a fine demonstration of the script

Adding images to my blog posts used to be a chore:

Take a screenshot.
Resize the screenshot to a web-friendly size using GIMP
Export the image in the correct file type to the correct directory.
Hand-write the Markdown or HTML having to remember the name of the file path of the image.

This often took me over five minutes!

The bash scripts I made makes this ordeal a two-second process. The scripts automatically take a screenshot, formats the image to the correct size and type, renames the image, and then creates the markdown/html for me to paste from in the clipboard. The script is made possible by the screencapture and pbcopy command-line tools in MacOS, and also magick that can be installed with homebrew.

How my scripts work: when the script is ran it defines a FILENAME and HUGONAME paths in a directory (mine is in the static folder of my hugo website) named from the current time. It then runs the screencapture tool with the “-i” option that makes it an interactive screenshot and the “-t” option that allows the file type to be changed to .jpg. The script then saves the image to the absolute FILENAME path and checks if the screenshot was actually taken (this is needed as the interactive screenshot can be escaped by the user). The script then resizes the screenshot to the correct size and quality using magick. After screenshot is correctly sized, the relieve image path (i.e. HUGONAME) is embeded in markdown html and copied to the clipboard using pbcopy.

I use the scripts by using alias’s in my .zshrc that I call using Alfred with the Run Command workflow, although I’m sure that I could also call on the script using Apple’s Automator also. To use the scripts change the FILENAME and HUGONAME to your image directory. The first script outputs a larger markdown-embedded image and the second a smaller html-embedded image (that I style using css to be right-aligned).

#!/bin/bash

IMG_DIR="$HOME/site/static/images/screenshots"
mkdir -p "$IMG_DIR"

# Generate a unique filename with date/time stamp
FILENAME="$IMG_DIR/screenshot_$(date +%Y%m%d_%H%M%S).jpg"
HUGONAME="/images/screenshots/screenshot_$(date +%Y%m%d_%H%M%S).jpg"

# Take an interactive screenshot (you can select the area) in JPEG format
screencapture -t jpg -i "$FILENAME"

# Check that the screenshot was taken (file exists)
if [ ! -f "$FILENAME" ]; then
  echo "No screenshot taken."
  exit 1
fi

# Resize the image to 1000x1000 pixels and set quality to 85% using ImageMagick's magick command
if command -v magick >/dev/null 2>&1; then
  magick "$FILENAME" -resize 1000x1000 -quality 85 "$FILENAME"
else
  echo "Error: ImageMagick 'magick' not found. Please install it (e.g. brew install imagemagick)."
  exit 1
fi

# Create a Markdown image link
MARKDOWN_LINK="[![Screenshot]($HUGONAME)]($HUGONAME)"

# Copy the Markdown link to the clipboard using pbcopy
echo "$MARKDOWN_LINK" | pbcopy

echo "Screenshot saved to: $FILENAME"
echo "Markdown link copied to clipboard:"
echo "$MARKDOWN_LINK"

#!/bin/bash

IMG_DIR="$HOME/site/static/images/screenshots"
mkdir -p "$IMG_DIR"

# Generate a unique filename with date/time stamp
FILENAME="$IMG_DIR/screenshot_$(date +%Y%m%d_%H%M%S).jpg"
HUGONAME="/images/screenshots/screenshot_$(date +%Y%m%d_%H%M%S).jpg"

# Take an interactive screenshot (you can select the area) in JPEG format
screencapture -t jpg -i "$FILENAME"

# Check that the screenshot was taken (file exists)
if [ ! -f "$FILENAME" ]; then
  echo "No screenshot taken."
  exit 1
fi

# Resize the image to 300x300 pixels and set quality to 85% using ImageMagick's magick command
if command -v magick >/dev/null 2>&1; then
  magick "$FILENAME" -resize 600x600 -quality 85 "$FILENAME"
else
  echo "Error: ImageMagick 'magick' not found. Please install it (e.g. brew install imagemagick)."
  exit 1
fi

# Create a Markdown image link
MARKDOWN_LINK="<a href='$HUGONAME'><img  class=rightp src='$HUGONAME'  alt="image" width=150></a>"


# Copy the Markdown link to the clipboard using pbcopy
echo "$MARKDOWN_LINK" | pbcopy

echo "Screenshot saved to: $FILENAME"
echo "Markdown link copied to clipboard:"
echo "$MARKDOWN_LINK"

Tags:

Configuration

Scripts