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 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 info 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 is 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 may then feel slow, especially on mobile devices. In addition, there is a risk that the page's SEO ranking will deteriorate as loading times are included in 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 exactly when the page is generated, and then 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 should 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 the user experience deteriorating. (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 available on the web. Essentially, any web host could 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. Each time new code is pushed to Github, a build runs that creates new files, uploads the new files to S3, and clears the cache on CloudFront. New builds can also be created when content is updated in Contentful with a webhook that calls Github.

Cheap, cheap, cheap!

An exceptionally good feature of our infrastructure choice is that it becomes very cheap.

• Since we have limited content, we 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 a few dollars a month.

There you have it! We now have a lightning-fast website that is easy to update and maintain with an infrastructure that is practically free.

Build your own site

If you want to build your own site using 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.