Skip to main content

Structuring and Preparing Your Blog for Hugo Themes

·334 words·2 mins
SSG Hugo
UmmIt
Author
UmmIt
Loves to write about technology, and cybersecurity related topics :)
Table of Contents

Introduction
#

When transitioning to a new Hugo theme, it’s essential to have a well-organized blog structure. This guide will help you merge all your files into a format suitable for the new Hugo theme.

Step 1: Renaming Markdown Files
#

Start by renaming all your Markdown files to index.md for a cleaner structure. Execute the following command in your blog’s root directory:

find . -type f -name "*.md" -exec bash -c 'mv "$0" "${0%/*}/index.md"' {} \;

This simplifies your file structure and aligns it with Hugo’s expectations.

Step 2: Managing Thumbnails
#

For thumbnails, ensure they are named as featured.* for compatibility with your Hugo theme. If your index.md files include URLs for thumbnails, you can use the following script to download and rename them:

#!/bin/bash

find . -type f -name "index.md" -exec awk 'NR<=10 && /thumbnail: .+/{print $2, FILENAME}' {} \; | while read -r url filepath; do
    if [[ $url == https* ]]; then
        url=$(echo "$url" | tr -d '[:space:]')
        filename=$(basename "$url")
        dirpath=$(dirname "$filepath")

        cd "$dirpath" || exit
        wget "$url" -O "./featured.${filename##*.}"

        if [ $? -eq 0 ]; then
            echo "Downloaded and renamed to featured.${filename##*.}"
        else
            echo "Failed to download $filename"
        fi

        cd - || exit
    else
        echo "Skipping non-HTTPS URL: $url"
    fi
done

Note: Place this script in your blog’s root directory and run it to download and rename the thumbnails.

And Please check out the file, is it what you expected? Since this script might be overwrite your current file.

Step 3: Verify and Adjust
#

Review your blog’s content and ensure all links, images, and references are intact. Adjust any broken links or missing images.

Step 4: Test with the New Theme
#

Finally, test your blog with the new Hugo theme. Use Hugo’s built-in server for local testing:

hugo server --watch --loglevel debug

Visit http://localhost:1313 in your browser to see how your blog looks with the new theme.

Source code
#

The source code for these can also be found in my repositories! Please check out: https://codeberg.org/UmmIt/Markhugo

Related

Hugo: How to Disable the Sitemap After Generating Your Public Files
··659 words·4 mins
SSG Hugo
Converting SVG to PNG with Inkscape: A Quick Guide
·308 words·2 mins
Inkscape Convert
Firefox Plug-ins for Enhanced your appearance of your browser :)
··152 words·1 min
Browser Extensions Themes Color Schemes
Firefox Plug-ins for Enhanced Developer Productivity :)
··287 words·2 mins
Browser Extensions Developers Productivity
Firefox Plug-ins for Enhanced your Browsing Experience with extra features :)
··386 words·2 mins
Browser Extensions