Working with Hugo — New Year, New Technology

How to format an image to be a link in markdown

Andrew Lloyd
3 min readJan 5, 2021


I am currently working on learning Hugo following along with Build Websites with Hugo by Brian P. Hogan. This was introduced to me by Tomas Gallucci last year. Towards the end of the previous year I got up to about the 3rd chapter of the book. I can already see the potential with Hugo static site generation and what that will come in useful for in it’s archetype based page generation using markdown format.

Markdown is something that I got acquainted with last year writing various different read-mes in my journey onto the web development scene. I took a lot of time writing different read-mes along the way in various levels of detail.

A readme for the forkitall project from last year

Hugo uses markdown in a different way to give you a base template or in Hugo’s lingo archetype:

This acts as a base template for any page generated using this archetype

With the command hugo new projects/ you end up with a new markdown file generated in the tree:

The has in effect acted as a boilerplate and created jabberwocky.MD. Jabberwocky.MD then works in conjunction with the layouts folder, the style.css and in this case specifically the projects folder and the single.html file:

To generate this page:

Now we come to the interesting bit! At the end of chapter 4 the gauntlet is thrown down to try creating a content type and archetype for yourself. So having videography work and considering the ease at which you can put boilerplated material together I thought I would create videos as a content type.

I wanted my banner sized image to go to a page. And after trying various combinations this is what I found worked:


This image now links to the video I made a while back for Anglican Campus spirituality!

I will continue to post on my progress and the things I am learning about Hugo as I go along during the course of the tutorial. You can find progress in my repo here.

Andrew is a dynamic full-stack developer and passionate learner who is comfortable speaking to clients as well as fellow developers. Eager to use cutting-edge technologies, alongside building long lasting applications and websites.

He is a graduate from Lighthouse Lab’s web development bootcamp, and is a part of the community.

He has learned and implemented various skills including

  • HTML5
  • JavaScript
  • JQuery
  • CSS3
  • MySQL/PostgreSQL
  • Bootstrap
  • MaterialUI
  • React
  • Redux

Prior to attending bootcamp in August 2020 his areas of work have been: administration, lecturing, film production and post-production and customer service across various sectors.

He would love to connect for opportunities and find a way to bring his knowledge and enthusiasm to your projects!