By Chris Rhymes (Web Developer)
When people want a new microsite, it is often the case that people jump straight into building a new site using a Content Management System (CMS), such as WordPress or Drupal, or decide to use a CMS in headless mode with a custom frontend built with the latest tools, such as React and Next.js.
Sometimes, these solutions can quickly become over complicated and difficult to manage, resulting in a lot of time spent managing databases and servers, instead of producing quality content and improving usability. This can feel like a lot of effort for a small microsite.
I’m a developer, so personally, I would rather spend my time developing new things rather than putting a lot of effort into keeping the lights on. I have spent some time thinking about what the easiest way to build and host a website is and have decided that a static site is probably it.
What is a static site?
To help explain what a static site is, let’s explore how most websites using a CMS work under the hood.
A standard CMS powered website can be considered dynamic, rather than static. A request comes into the webserver from a user’s browser for the web page. The webserver then loads some code, sends a request to the database for the page content, then compiles the content and a template together into HTML, which is then returned to the user’s browser. They browser then displays (or renders) the webpage.
As you can see, there is quite a lot going on here just to fetch a single webpage.
Sometimes, caching can be used, where a copy of the compiled HTML result is stored, either on the webserver or in a Content Delivery Network (CDN) that sits between the webserver and the user. This cache essentially turns the dynamically generated page into a static page. The server doesn’t need to do as much work as before to get everything, it just returns the static HTML page.
A static site goes one step further than this concept.
There is no server or database. All of the content is stored in files, usually using markdown format (a lighweight formatting language). When changes are made to the files, a process is run that builds the site all at once, processing the markdown files and templates into static HTML pages. These static HTML pages are then uploaded somewhere to be served to the user.
What are the benefits of a static site?
The two processes sound similar, dynamic pages are built when needed and static pages are built ahead of time, but a dynamic CMS driven webpage needs a server and a database. A static site doesn’t.
This means the static site can be hosted from services such as Netlify, GitHub Pages or an Amazon S3 bucket. You no longer have the costs of running and maintaining database servers and webservers, with AWS S3 you only pay for the bandwidth and storage you are using.
As the pages are built before they are deployed, the pages can be served much faster to the user, leading to a better user experience for them.
As the content is stored in files instead of a database, it means this is perfect for use with version control too. Any changes that are made to the files can be seen in the git history when using GitHub. It records who made the change and when.
What is LocalGovStatic?
So now you can see some of the benefits of static sites, I want to introduce you to LocalGovStatic. It is a starter theme built in Jekyll, a ruby gem, and it also uses TailwindCSS for the styles, so it is highly customisable to fit your needs.
The idea of this project is that it is a starting point to use to build your own microsite with. It has a lot of components and features that are ready to go. You can customise the existing components or add your own as you need for your own sites needs.
Here are some of the built in features and components.
Navigation components
The navigation components built in are:
- Breadcrumbs
- Footer links
- Main navigation
- Related links (other pages related to the page)
- Section links (used on landing pages)
Page components
There are a variety of page components that can be used across pages or within your page content:
- Accordion
- Button
- Contents
- File download
- Hero image
- Image
- Notification
- Phase banner
- Popular links
- Site wide alert
- Video
- Warning text
Templates
The project includes templates for the following page layouts to get you started:
- Homepage
- Landing page
- Content page
- News/Blog page
- Post page
What LocalGovStatic is not!
This project can do quite a lot, but it is not suitable for every project.
There is no server, so you can’t use standard forms with this project as there is no server to handle the form submission. However, there are services that allow you to post your form to them from static pages, such as Netlify Forms (when hosting with Netlify), or you could build your own API to handle the form submissions.
You can fetch data from other sources and display it in the browser as part of the webpage, such as a list of events from an API, but this can only be done in the browser using JavaScript, so you need to consider if this is suitable for you.
There is no CMS. The content is stored in files and should be version controlled so this can make the editing process a bit more difficult for non-technical users. Learning markdown may seem a bit daunting at first, but it is very quick to get to grips with. You have to weigh up the benefits of the static site against this and decide if it is a suitable compromise.
There are potential solutions for a lack of a CMS, such as Prose.io, which is a web based tool for editing markdown pages and content in GitHub, they may just need a bit more training than with a traditional CMS.
When to use LocalGovStatic?
In web development there is never a perfect solution to hosting a website. You must balance performance with costs and maintenance requirements.
If you are constantly making changes to your microsite, or have many users managing content, then this may not be the solution for you, you may prefer a traditional CMS.
If you need a microsite up and running quickly, that is mainly text based to provide information to a lot of users, then definitely consider this project.
If you are interested, take a look at the GitHub repository for how to get started and check out the demo website for a preview of how it looks and further documentation for how each component works.
GitHub repository: https://github.com/FutureNorthants/LocalGovStatic
Demo website: https://d3h9bp4584rx6.cloudfront.net/