Whitespectre Site migration to Hugo

Getting to ‘blazingly’ fast; why we migrated to Hugo

Here at Whitespectre, a core part of our business is creating responsive, super fast web sites and applications for our clients. Naturally, our own site has to fit that bill too.

We recently revamped and moved our website to Hugo, a static site generator. During one of our brown bag sessions, Daniel Albornoz walked the team through why we moved our site to Hugo, how static site generators (SSG) make lightning fast websites while enabling developers to still customize all aspects of the design, and other improvements we made to improve performance.

Needing to move on from Locomotive

The previous Whitespectre site was built on Locomotive, a Ruby-based CMS. Although Locomotive is a great tool for building websites in some ways, we were finding issues with image loading that made the site feel sluggish. In addition, there were compatibility issues with our MongoDB heroku-based website.

As a result, we began evaluating other CMS options, with the main choice being between Wordpress or something similar or a Static Site Generator. The major factors for us were speed and ease of development. We didn’t need to focus on complex content management options- since we don’t frequently change our website, outside of our blog. We decided the way forward was a static site generator, and specifically Hugo for reasons I’ll outline below.

What is a static site generator?

A static site generator is somewhere between using a full CMS, such as WordPress, and doing all the coding work manually. It’s a way to use raw code to build your site, but with the generator doing much of the heavy lifting on features such as templates, multiple language pages and other design aspects.

Once you’ve chosen an SSG, (in our case Hugo), the developer creates the templates for the pages on the site, often added using markdown. The site is then generated by Hugo when built, not when requested by the site visitor.

The static nature of a generator like Hugo means it is best suited to either sites where the content doesn’t change often, or for users such as bloggers who are comfortable using code and text editors in place of dashboards. Both cases were true for us.

It’s important to note that for developers who are not experienced with building sites using code and text editors, initially it will take more time to build with an SSG versus using something like Wix or Wordpress with a Wordpress theme. Think of SSGs and specifically Hugo, like a knife in a chef’s hands; with the right experience, developers can do some awesome things with it.

What are the benefits of using Hugo as your SSG?

Extremely fast

With less complex components, an SSG site such as Hugo can load even large sites very quickly. They are also mostly unaffected by high traffic or slow connections, with the site loading lighting fast. Images, animations and even embedded video can appear to load instantaneously. Hugo is considered the fastest of all the static site generators currently on the market. It’s based on Go, also known as Golang.

Off the shelf support for international content

For a global company, such as Whitespectre, having international content is a necessity. With our HQ in Barcelona, and with clients and workers from across the world, we needed to be sure we could provide our content in English, Spanish and Catalan. Hugo supports i18n, the reference for internationalisation, straight off the shelf.

Cross-platform support

Another important feature to consider is support for all operating platforms, such as Windows, Mac OS and Linux. With multiple developers working on the project, it was important that they would all be able to work on different platforms concurrently. Hugo, like all SSGs, supports this.

Compatibility with lots of hosting options

Being able to host your site wherever you need is also a key feature of your choice of SSG. With any CMS it’s important to look for a host that supports your choice of programming language such as Ruby, PHP or Python. With SSG you don’t encounter this problem as static files can be hosted with any solution, such as GitHub, BitBucket and AWS Amplify. Hugo, being one of the more popular SSGs, has support from modern platforms, like Netlify, which we used the build the site on the server. But, of course, you can host your Hugo site pretty much anywhere.

Fewer files to manage & easy template options

Another benefit to using a static site generator in general is that there are less files to manage. And with Hugo you can easily use Go Templates to customise your site with the least amount of coding hassle.

The directory is easy to navigate

Another great feature of Hugo is that the directory structure is relatively simple. These are the standard folders you should see in a Hugo directory:

• Archetypes: These templates are created when making new content, such as newsletters or new pages. You can set up custom archetypes to save time creating new content whenever you need.
• Content: All of the site’s base content is in the content folder. Each top level folder is given its own content section, for example content/blog, content/about and content/services.
• Data: This folder is used for configuration files, which can be stored in JSON, TOML or YAML formats.
• I18n: Stores the site’s multilingual content.
• Layouts: This is where the .html templates for the site are stored, which specify how the site will be rendered.
• Static: All of the site’s static content such as images, CSS files, javascript and other HTML commands are stored here.

There is also a config.yaml file that Daniel highlights in the project which is used for setting categories, languages and even adding some content for SEO.

What performance improvements did we see after moving to Hugo and making other changes?

Desktop Audit

Mobile Audit

The Whitespectre site now loads incredibly quickly thanks to Hugo. There are also several tools that were used to make the process of creating the site much easier, all of which helped to speed up the site.

Purge CSS

We coded the site using bootstrap, and one thing we needed to do was use PurgeCSS, which helps to clean up the CSS code. Running PurgeCSS analyses and parses the javascript and HTML and removes the unused CSS content.

LazyLoad

We used LazyLoad which is a script that speeds up load times by loading image, video or iframes files only when they’re needed. By using LazyLoad it means no bandwidth is used on unnecessary images or video files, optimising the load speed of the site.

Critical CSS

Critical CSS is also applied to the site to maximise load speed further. This means only the styling of the above the fold content is loaded when requested, meaning the visible part of the site. In a similar way to LazyLoad with images, but applied to the entire site, loading only the viewable area means that the content loads quicker, after which the rest of the site is loaded.

The results

The results are that the Whitespectre site loads incredibly fast, both on mobile and over a wifi connection. We also think it looks pretty, thanks to updates from our UI/UX team. Take a look for yourself at our new site and see what you think!