A brand new website

The requirement analysis 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 informational 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 asks. 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 smooth 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 where it can easily be rebuilt into a full backend if needed.

Smart Components

Components are basically standard for all frontend development today. A component is an isolated part of a webpage that has its own style and functionality. Components can be easily 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. Our choice, however, fell on Solid.js, which has a syntax similar to React but has in many cases proven to be a faster framework.

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 used only 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, after which the code is not passed 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 particular 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 possible, without degrading the user experience. (Read more about islands in our Strawberry-case).

Hosting and Updates

Even though we don't need a backend server, we must have somewhere to store the files so they are available on the web. Any web host could actually work here. We chose, however, 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 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 extra good feature of our choice of infrastructure is that it becomes 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 single dollar per month.

There you go! Now we 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 with the same recipe, we have created a base repo on Github. It is easy to replace Contentful and Solid if you prefer other tools.