Working with Hugo — New Year, New Technology
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.
Hugo uses markdown in a different way to give you a base template or in Hugo’s lingo 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.
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 mintbean.io 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!