The Heffernan Utilities website is built using a static site generator (SSG) called Hugo. Hugo takes static Markdown documents (a bit like MS Word docs) and converts them to HTML to build a website.
Under the hood the website is basically just a bunch of files and folders a bit like on your computer. When you make changes to these files and save your changes, Hugo will run and re-build all the files and include the changes you just made. Once Hugo has rebuilt the website the files are stores in a Git repository (a bit like Dropbox but for code) and a new version of the website is deployed on the server and published on the internet.
The advantage of this is it makes the website super fast and robust. The pages are already ‘pre-rendered’ in the browser, so we don’t need to make server requests to load a page. There’s not a whole lot that can go wrong with the website.
The disadvantage is that the changes you make to the content won’t show instantaneously (like you might be used to if you’ve worked with CMS’s like Wordpress), instead there’s a slight delay whilst Hugo rebuilds the files and publishes the website.
The good news is that Hugo builds pages really fast, so you can preview your changes usually within a few seconds. This shouldn’t change much until the website reaches a good few thousand pages. So it’s not all bad news and the performance gains definitely make it worthwhile.
Every piece of content on the website is a page. To organise these pages more easily they’re grouped into several different collections.
Think of a collection as a group of pages with a similar type. Collections usually (but not always) have a list page associated with them, where you can find a list all of the pages in the collection.
To give you a real world example think of blog posts. Usually you find lots of posts on a blog page. In this case blog is the collection and the posts are the pages within the collection.
The Heffernan Utilities website is made up of 5 different collections: Page, Services, Team, Testimonials and Work.
The content for each collection should be fairly obvious based on the name of the collection and we will look at editing content in each collection separately later in the guide. But for now the main thing to remember is that the website content is made up of collections of pages.