How to format an image to be a link in markdown
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/jabberwocky.md
you end up with a new markdown file generated in the tree:
![]() |
---|
The projects.md 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:
[](https://www.youtube.com/watch?v=soZ9rBhGM5k&feature=youtu.be)
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.