A brand new website

The requirements resulted in a website where it should be easy to update content and a technical platform that requires minimal maintenance. We therefore needed some form of content management system and a minimal web platform. We then chose to look at a headless CMS and build a statically generated site.

We don't need a backend

Most information websites today consist of a backend based on a CMS. When a visitor wants to view a page, a request is sent to the backend, which retrieves the latest information from the CMS system, creates an HTML file, and then responds to the visitor by sending the file. Instead of all this, we can ensure that the HTML file already exists and send it directly when the visitor requests it. The only thing we need to do is create the HTML files and update them when the content is updated. This is called "static site generation" (SSG)

The choice of CMS fell on Contentful. It is a tool where it is easy to set up an information structure. Contentful also has convenient APIs and ready-made packages for multiple languages and platforms. The technical platform was built on Astro, which is a JavaScript framework where SSG is the standard setup, but which can easily be rebuilt into a full backend if needed.

Smart components

Components are essentially standard for all frontend development today. A component is an isolated part of a webpage that has its own style and functionality. Components can easily be reused on different pages or multiple times on the same page. Astro has built-in support for many frameworks, such as React, preact, Vue, Angular, or Svelte. It's also possible to stick entirely to Astro's own framework. However, our choice fell on Solid.js, which has a syntax similar to React but has proven to be a faster framework in many cases.

A component often needs some logic to be rendered correctly given the parameters passed into the component. This logic then accompanies the component to the page where it is used. If a page has many components with a lot of logic, it can become heavy for the visitor's browser to load the page. The page might then feel slow, especially on mobile devices. Additionally, there's a risk that the page's SEO ranking will deteriorate as loading times are factored into search engine algorithms.

Often, the logic is only used to render the component once, and then the logic is not used again. Astro has solved this by only executing the logic precisely when the page is generated, after which the code is not sent on to the visitor. These are therefore not updated once the page has loaded.

Of course, there are components that need to be dynamic and update themselves when the visitor interacts with the site. In Astro, these must be marked as "islands", and Astro then understands that for this specific component, JavaScript should be optimized and sent to the visitor. The result is that the visitor only receives the JavaScript actually needed for the specific page being visited. The page becomes as light and fast as it can be, without compromising the experience. (Read more about islands in our Strawberry-case).

Hosting and updates

Even if we don't need a backend server, we must have somewhere to store the files so they become accessible on the web. Any web host could essentially work here. However, we chose to use a cloud service. In this case, we chose AWS, where we use the services S3 for storage and CloudFront as a CDN.

When the code is updated, the HTML files must be replaced. This is done quickly with Github-Actions. Every time new code is pushed to Github, a build runs, creating new files, uploading the new files to S3, and clearing the cache on CloudFront. New builds can also be triggered when content is updated in Contentful with a webhook that calls Github.

Cheap, cheap, cheap!

An extra good feature of our infrastructure choice is that it's very cheap.

• Since we have limited content, we can manage with Contentful's free tier.
• Astro and Solid are free to use.
• A build on Github-Actions takes less than a minute, so we can update the site up to 2000 times a month for free.
• Costs for S3 and CloudFront depend on how many visitors the site has and how often new files are uploaded, but we can estimate these to be a few dollars a month.

There you have it! So, we have a lightning-fast web that is easy to update and maintain with an infrastructure that is essentially free.

Build your own site

If you want to build your own site with the same recipe, we have created a base repo on Github. It's easy to swap out Contentful and Solid if you prefer other tools.