How to Add Pictures to Your Hugo Page

Adding pictures to your Hugo page is quite straightforward. Here’s a step-by-step guide to help you do that:

Step 1: Add the Image to the Static Directory

Place the image you want to use in the static directory of your Hugo site. The static directory is intended for static assets like images, CSS files, and JavaScript files. For example, if your image is named example.jpg, you can place it in the static/images directory:

/static/images/example.jpg

Step 2: Insert the Image into Your Markdown Content

In your markdown file, use the Markdown syntax to insert the image. You need to provide the relative path to the image from the static directory. For example:

![Alt text](images/example.jpg)

Here’s an example of how your markdown file might look:

---
title: "My First Post"
date: 2025-02-17
---

# My First Post

Welcome to my first post! Here's an example image:

![My Example Image](images/example.jpg)

Step 3: Using HTML (Optional)

If you prefer, you can also use HTML to insert images into your markdown files. This gives you more control over the image attributes like width, height, and alignment. For example:

---
title: "My First Post"
date: 2025-02-17
---

# My First Post

Welcome to my first post! Here's an example image:

<img src="images/example.jpg" alt="My Example Image" width="600" height="400">

Step 4: Build and Serve Your Site

After adding the image to your content, build and serve your site to see the changes:

hugo
hugo server

You should now see the image displayed on your Hugo page.

Summary

  • Add your image to the static directory.
  • Insert the image into your markdown content using either Markdown or HTML syntax.
  • Build and serve your site to view the changes.

Chuck Norris Joke:
When Chuck Norris adds a picture to his Hugo site, the image doesn’t just load. It paints itself out of admiration.

Related Posts