Styling becomes much easier when the body of your HTML document has the right classes. The following classes are very useful. Note that this assumes you give your sections (folders in the root of the content) english plural names, like ‘products’ or ‘reviews’. It assumes this structure: content/ ├── products/ <-- section │ ├── _index.md <-- list page │ ├── product-1.md <-- single page │ └── product-2.md ├── _index.md <-- homepage ├── about.md ...| Home on Hugo Codex
We have added search with Lunr.js to this website. Lunr.js uses a local index which allows you to create a tailor made search function. It has all benefits of a ready to go system, but is still very configurable. Go ahead and give it a try.| Blog on Hugo Codex
To fully migrate to v0.147.9 you should follow the following steps (if you did not already do so): move everything from the _default directory to the root of the layouts folder remove the _default folder rename all single.html files to page.html rename all list.html files to section.html move everything from the layouts/page folder to the root of the layouts folder remove the page folder rename the config.yaml (or toml/json) file to hugo.yaml (or toml/json) replace :filename to :contentbasena...| Hugo Codex
In Hugo v0.146.0, we performed a full re-implementation of how Go templates are handled in Hugo. This includes structural changes to the layouts folder and a new, more powerful template lookup system. We have aimed to maintain as much backward compatibility as possible by mapping “old to new,” but some reported breakages have occurred. We’re working on a full overhaul of the documentation on this topic – until then, this is a one-pager with the most important changes.| Home on Hugo Codex
We have added an improvement to the Youtube shortcode. It now downloads the Youtube image automatically and resizes and crops it to fit a 16:9 layout. This requires assetDir: static in your config. It is a GDPR friendly/legal Youtube embed (no need for a cookie bar). The trick is that it is not an actual embed… but a link/image with a clear Youtube marking on it. Outgoing links are not subject to GDPR rules.| Hugo Codex
We have added a smooth transition to the lightbox, as well as the option to navigate with the arrow keys and close the lightbox with the Escape key. Check it out!| Hugo Codex
I found out that in release 0.134 of Hugo a breaking change was made. An automaticly generated {{ .Summary }} no longer outputs plain content. This might make you think twice about updating Hugo to the latest version. This problem can only be solved by replacing {{ .Summary }} by {{ .Summary | plainify }} wherever you use automatic summaries, which is quite some work. Be warned!| Blog on Hugo Codex
Sometimes all you need is a good excuse… I just found one to update Hugobricks, the ultimate Hugo theme. Not sure it is? Check out this page. Doesn’t that look awesome? I think it does. Go make your own website, using Hugobricks. The theme is MIT licensed. Check out the Github Repository for licensing details.| Home on Hugo Codex
I have updated the image render hook from my article Resize all images. It now checks for SVG images and handles them correctly. Additionally, I use with to check for the existence of the image resource. {{ with (resources.GetMatch .Destination) }} {{ if ne .MediaType.SubType "svg" }} <img src="{{ (.Resize `900x jpg Smart q50`).RelPermalink | safeURL }}" alt="{{ $.Text }}" /> {{ else }} <img src="{{ .RelPermalink | safeURL }}" alt="{{ $.| Blog on Hugo Codex
Since recent Hugo versions (we are now at v0.120) the ellegant ‘page’ notation was introduced. We can now have an easy access to a ‘global Page object’ ! Great. While we were happily using it like this in Hugo ‘shortcode’ : {{ page.File.BaseFileName }} We noticed some (apparently) weird behaviour when building the site and watching what Firefox browser was rendering. Weird. In the issue queue, at the Github repository we reported it :| Hugo Codex
When you are building multilingual websites and you are using a CMS then you want to upgrade to the latest Hugo version. Let me tell you why. Underscore index pages in your content directory (list pages of sections) needed a front matter entry to make the URL follow the permalink structure. In one of the more recent Hugo versions this has been fixed. You can now define the permalink of the list page in the config file!| Hugo Codex
It has been an honor to speak at HugoConf 2023. My talk was about Hugobricks, a theme/concept for stackable content blocks in Hugo. If you want to see my 7 minute (pre-recorded) talk, check it out on Vimeo or Youtube. This was my third conference talk. I have also been presenting at JekyllConf 2019 and HugoConf 2022. I was accompanied by some great speakers, like Joe Mooring (famous in the Hugo community for his excellent support).| Hugo Codex
After last year’s successful HugoConf, with 32 speakers and more than 500 registered attendees from 49 countries, we at CloudCannon had so much fun producing and taking part that they decided to do it again! Since its first public version, released back in 2013, Hugo has become an incredibly popular static site generator, most well known for its build speeds. Hugo is also the go-to tool of many of CloudCannon’s Partners and Experts, who bring live visual editing to their non-technical cli...| Hugo Codex
In my previous version of the auto-collapsing (nested) menu I chose to avoid Hugo’s subsections. However, due to an update of the breadcrumbs, I was motived to test the possibility to create a nested menu based on sections and subsections. I succeeded and the code became much cleaner/shorter and simpler, especially due to the ‘.Ancestors’ variable. The way to determine if a page is ‘active’ is done through the following code:| Hugo Codex
This is a true gem by Joe Mooring: Generating a trail of breadcrumbs became much simpler with Hugo v0.109.0 and later. Use the .Ancestors method on .Page. {{- range .Ancestors.Reverse }} {{ .Title }} {{- end }} {{ .Title }} UPDATED 2023-03-06: You can find this code now also in the breadcrumbs add-on.| Hugo Codex
We promoted Profile Page Images on this website, which relied on an integration with the Instagram API. Yesterday the people at Meta decided to disable this integration, because they could not login and find the integration that we were using. We are talking about an integration more than 200 of you apparently had found easily and were using happily (as I can see from the massive amount of bandwidth usage). Note that I was happily providing this tracking-free bandwidth.| Hugo Codex
To get analytics in a Hugo Jamstack website, you can use one of the following approaches: Third-party analytics tools such as Google Analytics or Matomo. These tools provide a tracking code that you can embed in your JAMstack website to collect user behavior data. Custom server-side tracking: You can use a serverless function to track user behavior data and store it in a database. Use an all-in-one service provider. It should be noted that all three options have their downsides.| Hugo Codex
I have added usage comments in the heads of my (relevant) shortcodes. You can see the comment in the youtube.html shortcode below: This is not only useful for developers, but is also instructing our own CMS ( Usecue CMS) on how to insert these shortcodes. The usage example is read from the comment by the CMS and an insert button is added to the CMS editor field.| Hugo Codex
I have been wanting to port the webshop from https://jekyllcodex.org to this website for a while, but could not find the time to do it. Fortunately, my Spanish friend Fenix wanted to help me out. He ported the Jekyll webshop to Hugo. You can find a demo by clicking on ‘Donate’ in the header. Fenix replaced the layouts with shortcodes, which improved the usability. He also replaced all Liquid code with the Go templating language.| Hugo Codex
Thanks to Guus Groenink we now have brand new share buttons. I have been working with Guus for quite some time now and the guy is a Hugo KING! He builds Hugo websites on a daily basis for Omelette Du Fromage (an advertising agency). You can see the new buttons in action in our new webshop (ported from Jekyll by Fenix) and under every blog post. The share buttons can share to different modern networks, it has embedded (inline) SVG’s and it even has a neat config part in the top of the partial.| Hugo Codex
Half a year ago I created a slider/carousel for Hugo, based on this codepen. Today I updated the code and fixed a bug (the bullets did not show the right position on mobile while swiping). The code now has an ’event listener’ to detect scrolling and I added a debounce function from Chris Ferdinandi, who happens to be an avid Hugo user as well. It should now be responsive and buttery smooth.| Hugo Codex
Still in early beta, and far from fully translated, is our Spanish version of this website. Do not expect the Spanish version to hold (exactly) the same information as the English one, as the Spanish version is maintained by Fenix, while the English version is maintained by me (Joost). Fenix is very passionate about Hugo and ’the stackless way’. We share the same vision on web development. We meet every week to discuss ‘all things Hugo’ and we even do some website assignments together.| Hugo Codex
Before 2015 I was building WordPress websites. Some things in WordPress I really liked. One of them was the image resizing. When I switched to Jekyll in 2015 I found out that I could no longer resize images automatically. Fortunately, I found images.weserv.nl, a Dutch image resizing service. This service was smarter than WordPress. It resized your images on the fly and kept it in their cache for 30 days. An excellent strategy.| Hugo Codex
My main reason to upgrade Hugo (from version 0.81) to version 0.96 was the language support for dates. This means that I no longer need complex lookups to get a language specific date display. I can now simply set the following things in my config file: defaultContentLanguage: nl languageCode: nl_NL This allows me to output a language specific date using: {{ .Date | time.Format ":date_long" }}. Which results in a Dutch date like this: ‘2 april 2022’.| Hugo Codex
I added a brand new ‘add-on’: a GDPR compliant way to add Youtube to your Hugo website using a shortcode. It is inspired by the code of Paul Irish. Installation is super simple. I even base64 encoded the images for you. All you need to do is put the Youtube shortcode in your shortcodes directory and you are good to go! Happy coding!| Hugo Codex
I have been building Hugo websites for half a year now some, and I am a BIG fan. Sure the documentation is a bit weird or incomplete at times. Where do you find the variable ‘resources’ (all lowercase), for example? I don’t know. On the other hand, the Discourse channel is absolutely amazing. The time people are devoting to help everybody out is just mind blowing. In the past six months I have stuggled a lot and learned a lot.| Hugo Codex
A lot of websites have a slider (or carousel). Most of them in the header. The big question is: Should I add a carousel to my Hugo website? This is something I cannot decide for you. If you decide you need one, I added a decent one under Add ons > Slider/carousel in the main menu. A demo is shown below: 1 2 3 4 ‹ › The carousel is based on a carousel with CSS scroll snap that I created earlier.| Hugo Codex
I have ported the Image Gallery from Jekyll Codex to Hugo Codex. A very exciting process as Hugo is able to resize the images without a third party. I have added two ways to include the image gallery: as a shortcode and as a partial (to use in the layout). I hope you like it, I sure do.| Hugo Codex
No, this is not about lazy loading. We are talking about image compression only, as images are an important part of your page load (20% on average). Every byte counts when you want to get a 100% Google Lighthouse Score. I was happy to find that Boris Smus did some great ground work on this topic, suggesting that a ‘highly compressed 2x image is smaller in size and looks better than the uncompressed 1x image’.| Hugo Codex
Thank you for joining this Lightning talk about ‘image resizing’. Hugo is known for its fast page loads. However, if you want to get instantly loading webpages, you also need to resize your images properly. Fortunately Hugo can resize images by itsself. In this talk I will tell you how you can configure Hugo so that it automatically resizes and compresses all images in your project, even the ones that are uploaded through an external CMS by your client.| Hugo Codex
A lot of websites use an auto-collapsing menu. It is a great and compact way to show a lot of content in a structured way, but it requires a hierarchical view of all your pages. This post explains how to do that. Different approaches I tried some different approaches. I started out with the assumption that I was not allowed to use folders in sections. I was under the impression that a folder in a section would create a subsection.| Hugo Codex
Netlify did some research on the priorities of Jamstack developers. The thing Jamstack developers value most is ‘performance’, which explains Hugo’s popularity. Hugo is the absolute king of performance. There is no SSG that is as fast as Hugo. Other priorities of Jamstack developers are uptime, security and speed of development, which are generally good for any Jamstack project. However, we know (and see in the data) that people increasingly struggle to get their Jamstack website compli...| Hugo Codex
I have been buiding around 30 Jekyll websites per year in the last 6 years. I recently switched completely to Hugo and I have been porting multiple websites from Jekyll to Hugo. I learned a few things along the way that you will need to know too, when you make the step from Jekyll to Hugo. I have been having a hard time learning Hugo, but in the end it was worth it, especially because of the low build times and the build-in image conversion I have gained.| Hugo Codex
I already told you that migrating from Jekyll to Hugo was a lot harder than I thought. But I had not expected that I would not look at Hugo for another 3.5 years. What changed? First of all CloudCannon started building Hugo websites, while Forestry stopt doing so. I am a big fan of CloudCannon, I have been asked to write blog posts for them and I am featured on their website, so I definitely wanted to take Hugo for a spin on their infrastructure.| Hugo Codex
Step 1. Create a basic website A website typically consists of a few elements. The header with a menu, a sidebar, the content and the footer. Back in the days we used frames to put these components together. Nowadays we use includes. These includes require a programming language to work, like PHP. Using PHP however introduces a lot of vulnerabilities. What if we could prevent that by design? Well… you can with Hugo…| Hugo Codex
Let me be honest. Migrating from Jekyll to Hugo was not as easy as I thought. The first problem was understanding the folder structure. The Hugo manual was not very clear about the best practise. I have figured out that you need at least three files. You need an ‘home.html’ for the front page which you should place in your ’layouts’ folder. Additionally you need a ‘_default’ folder with a ‘single.| Hugo Codex