If you buy this, I will sponsor BEP \nthrough Github<\/a>, which will get me some very cool Hugo stickers. That enables me to decorate my laptop, my walls, my doors, my bike and my kids! I feel that I need at least 3 months of sponsoring on the 9 dollar plan, but feel free to buy me 6 months or a full year. BEP deserves it and I will keep sponsoring as long as the money keeps coming in.<\/p>"},{"title":"Sponsor a feature","link":"https:\/\/hugocodex.org\/donate\/feature\/","pubDate":"Mon, 01 Jan 0001 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/donate\/feature\/","description":" You can sponsor a feature from the ‘without plugins’ page\/library. I will not only give you an honourable mention on the site, but I will also let you suggest some additional functionalities of this feature.<\/p>"},{"title":"Sponsor a feature","link":"https:\/\/hugocodex.org\/simple-donate\/feature\/","pubDate":"Mon, 01 Jan 0001 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/simple-donate\/feature\/","description":" You can sponsor a feature from the ‘without plugins’ page\/library. I will not only give you an honourable mention on the site, but I will also let you suggest some additional functionalities of this feature.<\/p>"},{"title":"Sitepins: An awesome CMS for Hugo","link":"https:\/\/hugocodex.org\/blog\/awesome-cms-for-hugo\/","pubDate":"Tue, 23 Dec 2025 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/awesome-cms-for-hugo\/","description":" So you have a Hugo website but you have no CMS? \nCheck out Sitepins.<\/a> Take it from somebody who created \na CMS for Hugo<\/a> himself: it is good. A very smooth interface (using React). Easy on the eyes… full-featured… and best of all: check that \npricing page<\/a>. No way I can (or want to) compete with that! I am sure that once this goes out of beta the price will go up, so make sure you grab yourself on of those amazing deals on this awesome product. (click the image below)<\/p>"},{"title":"Creating a URL Redirect","link":"https:\/\/hugocodex.org\/blog\/hugo-url-redirect\/","pubDate":"Fri, 14 Nov 2025 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/hugo-url-redirect\/","description":" Sometimes you have an page that moved to a new URL. To prevent loss of SEO link juice, you want the old URL to forward to the new one. Fortunately Hugo has built in support for this. Just put the old relative url in the front matter in the aliases key, like this:<\/p>\n Hugo now creates pages based on the built-in \nalias.html template<\/a>. That looks like this:<\/p>"},{"title":"Slider carousel improved","link":"https:\/\/hugocodex.org\/blog\/carousel-slider-improved\/","pubDate":"Thu, 23 Oct 2025 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/carousel-slider-improved\/","description":" I was looking at \nFlickety<\/a> from Metafizzy, after I created a \nmodern version of their Isotope component<\/a>. I noticed that Flickety supports grabbing and dragging slides on desktop. After some searching I found \nthis codepen<\/a>, which did the same. I added this functionality to my 3kb slider component… and voila… The sliders\/carousels now support dragging with the mouse as well. Check out this \nfront-end code library<\/a>.<\/p>\n I might have just saved you 25 dollar in licensing fees! Happy coding!<\/p>"},{"title":"Automatic carousel added","link":"https:\/\/hugocodex.org\/blog\/automatic-carousel-added\/","pubDate":"Thu, 11 Sep 2025 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/automatic-carousel-added\/","description":" My friend and colleague Guus came with a great idea: let Hugo parse the content and transform lists with only images to carousels. A vibe coding demo and some optimalisations later, we now have a great new feature for Hugo. You can \ncheck it out<\/a>. The old carousel is also still available if you need a more complex setup. Thanks Guus and happy coding everybody!<\/p>"},{"title":"Useful body classes","link":"https:\/\/hugocodex.org\/blog\/useful-body-classes\/","pubDate":"Wed, 09 Jul 2025 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/useful-body-classes\/","description":" 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:<\/p>\n The code below will add the class ‘home’ to your body for the homepage.<\/p>"},{"title":"Search with Lunr.js","link":"https:\/\/hugocodex.org\/blog\/search-with-lunr-js\/","pubDate":"Wed, 02 Jul 2025 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/search-with-lunr-js\/","description":" 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 \n\n \n \n give it a try<\/a>.<\/p>"},{"title":"Migration steps for Hugo v0.147.9","link":"https:\/\/hugocodex.org\/blog\/migration-steps-for-v-0-147-9\/","pubDate":"Tue, 01 Jul 2025 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/migration-steps-for-v-0-147-9\/","description":" To fully migrate to v0.147.9 you should follow the following steps (if you did not already do so):<\/p>\n If you had a In Hugo \nv0.146.0<\/a>, 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.<\/p>\n We have aimed to maintain as much backward compatibility as possible by mapping \u201cold to new,\u201d but some reported breakages have occurred. We\u2019re working on a full overhaul of the documentation on this topic \u2013 until then, this is a one-pager with the most important changes.<\/p>"},{"title":"Improvement of the Youtube shortcode","link":"https:\/\/hugocodex.org\/blog\/improving-the-youtube-shortcode\/","pubDate":"Fri, 20 Jun 2025 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/improving-the-youtube-shortcode\/","description":" We have added an improvement to the \n\n \n \n Youtube shortcode<\/a>. It now downloads the Youtube image automatically and resizes and crops it to fit a 16:9 layout. This requires 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. \n\n \n \n Check it out<\/a>!<\/p>"},{"title":"Breaking summary change","link":"https:\/\/hugocodex.org\/blog\/breaking-summary-change\/","pubDate":"Thu, 10 Oct 2024 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/breaking-summary-change\/","description":" I found out that in \nrelease 0.134 of Hugo<\/a> a breaking change was made. An automaticly generated Sometimes all you need is a good excuse… I just found one to update Hugobricks, the ultimate Hugo theme. Not sure it is? \nCheck out this page<\/a>. Doesn’t that look awesome? I think it does. Go make your own website, using Hugobricks. The theme is MIT licensed. Check out the \nGithub Repository<\/a> for licensing details.<\/p>"},{"title":"Updated image render hook","link":"https:\/\/hugocodex.org\/blog\/updated-image-hook\/","pubDate":"Mon, 23 Sep 2024 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/updated-image-hook\/","description":" I have updated the image render hook from my article \n\n Resize all images<\/a>. It now checks for SVG images and handles them correctly. Additionally, I use with to check for the existence of the image resource.<\/p>\n 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’ !\nGreat.<\/p>\n While we were happily using it like this in Hugo ‘shortcode’ :<\/p>\n We noticed some (apparently) weird behaviour when building the site and watching what Firefox browser was rendering. Weird.<\/p>\n In the issue queue, at the Github repository we reported it :<\/p>"},{"title":"Why you should upgrade to Hugo v0.120","link":"https:\/\/hugocodex.org\/blog\/why-you-should-upgrade-hugo-to-0-120\/","pubDate":"Thu, 02 Nov 2023 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/why-you-should-upgrade-hugo-to-0-120\/","description":" 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! The individual pages are called ‘page’ and the list page is called ‘section’. It looks like this if you use yaml:<\/p>"},{"title":"Speaking at HugoConf 2023","link":"https:\/\/hugocodex.org\/blog\/speaking-at-hugoconf-2023\/","pubDate":"Sun, 01 Oct 2023 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/speaking-at-hugoconf-2023\/","description":" 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 \nVimeo<\/a> or \nYoutube<\/a>.<\/p>\n This was my third conference talk. I have also been presenting at \nJekyllConf 2019<\/a> and \nHugoConf 2022<\/a>. I was accompanied by some great speakers, like Joe Mooring (famous in the Hugo community for his excellent support). He talked about contributing to open-source. \nHis talk<\/a> was my personal favorite. I also really liked \nthe talk of Christian Oliff<\/a> about render hooks, as well as \nthe talk from Liam Bigelow<\/a> about Pagefind. If you want to be astonished by numbers and magnitude, I recommend \nthe talk of John Phamvan<\/a>, who spoke about a Hugo website with 4 million pages. Finally, for anyone who has ever migrated a website to Hugo: you must \nwatch George Phillips<\/a> with his mind blowing automatic migration concept.<\/p>"},{"title":"HugoConf 2023","link":"https:\/\/hugocodex.org\/blog\/hugoconf-2023\/","pubDate":"Tue, 19 Sep 2023 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/hugoconf-2023\/","description":" After last year\u2019s 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!<\/p>\n 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\u2019s Partners and Experts, who bring live visual editing to their non-technical clients with the help of our CMS.<\/p>"},{"title":"New auto-collapsing menu","link":"https:\/\/hugocodex.org\/blog\/new-auto-collapsing-menu\/","pubDate":"Mon, 06 Mar 2023 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/new-auto-collapsing-menu\/","description":" In my \n\n previous version<\/a> of the auto-collapsing (nested) menu I chose to avoid Hugo’s subsections. However, due to an update of the \n\n \n \n breadcrumbs<\/a>, 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:<\/p>\n To check if it has children we simply check the length of the .Pages variable:<\/p>"},{"title":"Breadcrumbs since Hugo v0.109.0","link":"https:\/\/hugocodex.org\/blog\/breadcrumbs-since-1-09\/","pubDate":"Sun, 19 Feb 2023 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/breadcrumbs-since-1-09\/","description":" This is a \ntrue gem<\/a> by Joe Mooring:<\/p>\n Generating a trail of breadcrumbs became much simpler with Hugo v0.109.0 and later. Use the .Ancestors method on .Page.<\/p><\/blockquote>\n UPDATED 2023-03-06: You can find this code now also in the \n\n \n \n breadcrumbs add-on<\/a>.<\/em><\/p>"},{"title":"Instagram solution broken","link":"https:\/\/hugocodex.org\/blog\/instagram-solution-broken\/","pubDate":"Fri, 17 Feb 2023 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/instagram-solution-broken\/","description":" We promoted \nProfile Page Images<\/a> 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. Privacy is something I care about deeply.<\/p>"},{"title":"Adding analytics to your Hugo website","link":"https:\/\/hugocodex.org\/blog\/adding-analytics-to-your-hugo-website\/","pubDate":"Fri, 03 Feb 2023 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/adding-analytics-to-your-hugo-website\/","description":" To get analytics in a Hugo Jamstack website, you can use one of the following approaches:<\/p>\n It should be noted that all three options have their downsides.<\/p>"},{"title":"Shortcodes with usage comments","link":"https:\/\/hugocodex.org\/blog\/shortcodes-with-usage-comments\/","pubDate":"Sun, 13 Nov 2022 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/shortcodes-with-usage-comments\/","description":" I have added usage comments in the heads of my (relevant) shortcodes. You can see the comment in the youtube.html shortcode below:<\/p>\n This is not only useful for developers, but is also instructing our own CMS (\nUsecue CMS<\/a>) 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. This makes it easy for your editors\/clients to (re-)use these shortcodes. For more information on this read \nA CMS with Hugo shortcode support<\/a>.<\/p>"},{"title":"Hugo webshop ported from Jekyll","link":"https:\/\/hugocodex.org\/blog\/hugo-webshop-ported-from-jekyll\/","pubDate":"Wed, 12 Oct 2022 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/hugo-webshop-ported-from-jekyll\/","description":" I have been wanting to port the webshop from \nhttps:\/\/jekyllcodex.org<\/a> 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 \n\n demo<\/a> by clicking on ‘Donate’ in the header.<\/p>\n Fenix replaced the layouts with shortcodes, which improved the usability. He also replaced all Liquid code with the Go templating language. The webshop is using Mollie, which is great for European payments. If you want to sell in the US you can replace the dynamic payment link from Mollie with a dynamic Paypal link.<\/p>"},{"title":"New share buttons","link":"https:\/\/hugocodex.org\/blog\/new-share-buttons\/","pubDate":"Wed, 12 Oct 2022 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/new-share-buttons\/","description":" Thanks to \nGuus Groenink<\/a> we now have brand \n\n \n \n new share buttons<\/a>. 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 \nOmelette Du Fromage<\/a> (an advertising agency). You can see the new buttons in action in our \n\n new webshop<\/a> (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. Check it out for yourself in the \n\n \n \n Add-ons<\/a> section!<\/p>"},{"title":"Resize all images","link":"https:\/\/hugocodex.org\/blog\/resize-all-images\/","pubDate":"Mon, 04 Jul 2022 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/resize-all-images\/","description":"---\ntitle: Some post\naliases\n- \/my-old-url\n- \/even-older-url\n---\n<\/code><\/pre>content\/\n\u251c\u2500\u2500 products\/ <-- section\n\u2502 \u251c\u2500\u2500 _index.md <-- list page\n\u2502 \u251c\u2500\u2500 product-1.md <-- single page\n\u2502 \u2514\u2500\u2500 product-2.md\n\u251c\u2500\u2500 _index.md <-- homepage\n\u251c\u2500\u2500 about.md <-- other page\n\u2514\u2500\u2500 contact.md\n<\/code><\/pre>\n
_default<\/code> directory to the root of the layouts<\/code> folder<\/li>\n_default<\/code> folder<\/li>\nsingle.html<\/code> files to page.html<\/code><\/li>\nlist.html<\/code> files to section.html<\/code><\/li>\nlayouts\/page<\/code> folder to the root of the layouts<\/code> folder<\/li>\npage<\/code> folder<\/li>\n:filename<\/code> to :contentbasename<\/code><\/li>\n<\/ul>\nsingle.html<\/code> in your layouts<\/code> directory and a single in your layouts\/page<\/code> directory, you should follow \nthese instructions<\/a>.<\/p>"},{"title":"New template system in Hugo v0.146.0","link":"https:\/\/hugocodex.org\/blog\/new-template-system\/","pubDate":"Thu, 26 Jun 2025 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/new-template-system\/","description":"assetDir: static<\/code> 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.<\/p>"},{"title":"Improvement of the lightbox","link":"https:\/\/hugocodex.org\/blog\/improving-the-lightbox\/","pubDate":"Fri, 29 Nov 2024 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/improving-the-lightbox\/","description":"{{ .Summary }}<\/code> 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 }}<\/code> by {{ .Summary | plainify }}<\/code> wherever you use automatic summaries, which is quite some work. Be warned!<\/p>"},{"title":"Hugobricks has gotten an update","link":"https:\/\/hugocodex.org\/blog\/hugobricks-updated\/","pubDate":"Thu, 26 Sep 2024 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/hugobricks-updated\/","description":"{{ with (resources.GetMatch .Destination) }}\n {{ if ne .MediaType.SubType "svg" }}\n <img src="{{ (.Resize `900x jpg Smart q50`).RelPermalink | safeURL }}" alt="{{ $.Text }}" \/>\n {{ else }}\n <img src="{{ .RelPermalink | safeURL }}" alt="{{ $.Text }}" \/>\n {{ end }}\n{{ end }}\n<\/code><\/pre>"},{"title":"Using 'page' in shortcodes ( cache \/ issue ? ) - be aware off","link":"https:\/\/hugocodex.org\/blog\/using-page-in-shortcodes-cache-issue-be-aware-off\/","pubDate":"Wed, 08 Nov 2023 00:00:00 +0000","guid":"https:\/\/hugocodex.org\/blog\/using-page-in-shortcodes-cache-issue-be-aware-off\/","description":"{{ page.File.BaseFileName }}\n<\/code><\/pre>{{ if or (in $.ancestors .) (eq $.curRelPermalink .RelPermalink) }}active{{ end }}\n<\/code><\/pre>\n
<ul id="breadcrumbs">\n {{- range .Ancestors.Reverse }}\n <li><a href="{{ .RelPermalink }}">{{ .Title }}<\/a><\/li>\n {{- end }}\n <li><a href="{{ .RelPermalink }}">{{ .Title }}<\/a><\/li>\n<\/ul>\n<\/code><\/pre>\n
<!-- \n{{\/* \n \n Usage: \n {{< youtube id="qtIqKaDlqXo" image="\/uploads\/youtubeposter.jpg" >}} \n \n*\/}}\n-->\n<\/code><\/pre>
![\"Vimeo](\"https:\/\/hugocodex.org\/uploads\/resizeallimages_hu_f88dd820a58353da.jpg\")
\n