How We Built Flaunt Digital’s Serverless New Website

We are beyond excited at Flaunt Digital to have finally launched our new and improved website. It’s the product of a lot of hard work and we’re so proud of the result — the new site provides a fantastic user experience, intuitive design and lightning-fast load times.

To help celebrate the occasion, we wanted to pass on a few insights into the impressive behind-the-scenes tech we used to shape and build our serveless new website, including Amazon S3 cloud storage, flat HTML, the Gatsby framework and ‘headless’ architecture. 

Read on to learn more about the key elements of our new website, why we chose them and the benefits they’ve provided.

The Great Benefits of Building With Gatsby

The new Flaunt website has been built on an innovative open-source framework called Gatsby. Based on React, a JavaScript library that helps to create user interfaces (UI), Gatsby has provided a great platform to help our web development team take speed benefits to the next level. 

The ability to access the React framework offers fantastic advantages for coding as it enables us to componentalise code effortlessly, making it easy to redistribute. This basically means we can divide code up into components, simplifying the process of reusing it across a host of pages because there’s no longer a need to rewrite it first.

Utilising Cloud-Based Storage for Global Reach

Deciding to use Amazon S3 for cloud server storage gave our team the chance to take advantage of several impressive benefits. With all of the assets of the new Flaunt website stored in the cloud rather than on a physical server, our web pages are able to load quickly, no matter where the visitor is located.

The cloud storage offered by S3 links with CloudFront, a CDN (Content Delivery Network) which stores the site in multiple locations across the world. This helps to decrease the time it takes to download the webpage and is another way we have been able to leverage new approaches to improve user experience. 

How Flat HTML Provides Soaring Gains

The decision to use Gatsby gave us the ability to build a flat HTML site, sometimes called a static or stationary page. To put it simply, this means the site is not generated on a server but instead contains fixed content that is displayed identically to every website visitor. 

The flat HTML is built from our WordPress install, which helps our site’s content editors make changes to copy and media whilst preserving the speed gains that come from using flat HTML files. This framework was vital to help us make using our new website a fast and intuitive experience that makes it easy for visitors to find the information they need quickly.

A Headless Approach to Website Building

Headless architecture is increasingly popular in web design circles and basically involves a decoupling of the front-end of the site from the Content Management System (CMS), with the two elements hosted on separate servers. The CMS can be hosted on a low-cost server, while the full website build can be hosted through a service such as CloudFront.

Embracing headless architecture allows content editors to keep using familiar tools such as WordPress, while also giving developers the freedom to build a website using a wide range of tools rather than tying them to a single CMS. This gives us much greater flexibility and opens up new possibilities when it comes to building an omnichannel content strategy, offering the potential for a host of exciting opportunities in the future.

Do you have any further tips to share on improving page speed or user experience? Why not let us know in the comments or on Instagram or Twitter?