xdeb.org

Development

Move a Hugo site to CloudCannon CMS

I found Hugo in 2017 and since then I have used it to build a lot of web sites. Building sites with Hugo is fun! For customer sites where an editor need to keep the site updated I early on started to use Forestry.

Build Hugo site with Notion and Airtable API

Last year I built a number of Hugo sites that takes the content from Notion and Airtable via their respective API. It works really well. Users manage the data in Notion or Airtable and the sites are kept updated in the background automatically.

Automatically deploy Hugo site to GitHub pages with actions

One of the big advantages with static sites are that you can host them almost anywhere. I have found that GitHub pages is one of the most convenient hosting solutions. With the help of GitHub actions the deployment process can be completely automated.

Using Hugo pipes to process sass and cache-bust css and js files

Hugo Pipes was added in version 0.46 and give Hugo the possibility to process sass and postcss files as well as fingerprint, minify and concat asset files. My own Zen theme for Hugo have used Gulp to process sass and js but now I have updated it to make use of pipes.

Go multilingual with Hugo

I have made my small company site multilingual, in Swedish and in English. It’s a static site built with Hugo and my own Zen theme for Hugo. Hugo has good multilingual support. What took the most time was building a language selector that works both when content is translated and when it is not.

My Zen Hugo theme now uses css grid

I have released the css grid version of my Zen theme for Hugo. This site have been using it for a couple of month. Read more at Layout with CSS grid and flex, it’s really nice. With the resent release of Microsoft Edge 16 there is support for css grid in all the major browsers.

Layout with CSS grid and flex, it's really nice

This site is now using CSS grid layout and it’s a real pleasure to work with. This is part of the Zen Hugo theme and you find the code at frjo/hugo-theme-zen at grid. CSS grid is supported in resent versions of Chrome, Firefox and Safari.

A HTML5+PHP+JavaScript contact form with spam protection

Setting out to create a simple contact form turned out to involve more work than I anticipated. I need it for one of my new static sites. The examples I found was to old, lacking spam protection and/or relied on multiple/large libraries.

Make Hugo generate a JSON search index and JSON Feed

Hugo introduced custom output formats in version 0.20 and here I will be using it to generate two different JSON outputs for my site. First a search index that can be used with various search solutions. Second a JSON Feed, a new alternative for RSS feeds.