Insert Images in Hugo and Automatically Clear `public` Folder

Sun, 30 Nov 2025 11:43:43 +0800

When I updated my website, I faced some technical issues: how to insert images into posts and how to automatically clear the public folder. Now I have solutions to both challenges and would like to share them with you.

Insert Images

To insert images into posts, I researched online resources and found two important considerations: the correct location for images and the method to load them.

First, there are two methods to store images in your project. The first method is to place images in the same folder as the post’s index.md file, so they are only loaded by that post. For example:

..
|
└───content
    |   _index.md
    |
    └───posts
        |   ...
        |
        └───time_management_with_Apple's_App
            index.md
            img1.png
            img2.png

The second method is to place images in the static folder, making them accessible to every page. For example: /static/images/logo.png.

Second, after placing images in the correct location, you can load them using three methods:

Markdown style: Use ![description](path/to/image). For a page bundle, write ![daily tasks](img1.png).
Figure shortcode (my preferred method): Hugo’s built-in feature. Example: {{ < figure src="img1.png" title="Daily tasks" alt="" width="600" class="center" >}}. (⚠️Please remove the blank between { and < when you use it.) This method offers more control over styling through CSS or SCSS. I used an AI tool to create custom shortcode templates and stylesheets.
Page Resources: A more advanced method that I haven’t explored yet.

I hope this helps you successfully display images in your posts. If you encounter problems, check your image paths and clear your cache using hugo --gc.

Clean The `public` Folder

After testing many methods for inserting images, I accumulated many outdated pages in the public folder. Rather than manually deleting them, I wanted an automatic solution. I found an elegant method from essesoul¹: simply add one line to hugo.toml:

cleanDestinationDir = true

Finally, I’d like to thank the authors I referenced, especially Brain Build, who compiled helpful resources² about inserting images in Hugo.

Brew Install Local Files

Sun, 09 Nov 2025 20:10:49 +0800

How to install a local file with Homebrew

Find the cache location

brew --cache -s <your package name>

For example, I want to install dart-lang/dart/dart from https://storage.googleapis.com/dart-archive/channels/stable/release/3.9.4/sdk/dartsdk-macos-arm64-release.zip, which may be inaccessible from within China. So I first downloaded it to my Downloads folder, then I used the command above to find Homebrew’s cache directory for dart.

Replace <your package name> with the formula name (e.g. dart-lang/dart/dart) and <your file> with the downloaded file name (e.g. dartsdk-macos-arm64-release.zip).

By the way, if you want to run dart pub get quickly, you need to add export PUB_HOSTED_URL="https://mirrors.tuna.tsinghua.edu.cn/dart-pub" to ~/.bashrc or ~/.zshrc.

Move the local file

mv ~/Downloads/<your file> "$(brew --cache -s <your package name>)"

Reinstall

If your Homebrew version is greater than or equal to 4.0, you may need to add the following to ~/.bash_profile or ~/.zprofile before installing:

export HOMEBREW_NO_INSTALL_FROM_API=1

Then run:

brew install <your package>

Issues on FloCal

Insert Images in Hugo and Automatically Clear `public` Folder

Insert Images

Clean The public Folder

Brew Install Local Files

How to install a local file with Homebrew

Clean The `public` Folder