This week, on Friday 13th September, we launched the new Safra London. Prior to today, the website was a simple holding page, whereas now it’s a full blown Gatsby-powered static website.
We launched the holding page a little over a month ago and then gave ourselves the challenge to get a full site (complete with a blog) up and running as quickly as possible. Did we mention, that this was a double challenge because this project meant learning Gatsby too.
Static sites explained
Static sites are all the rage in modern web development, but they are incredibly retro too. You could say that a static site generator is a new school way to make an old school website. From a developer’s perspective they’re easy (and dare we say ‘fun’) to code and from a user’s perspective static sites loads super fast.
Static site’s speed advantage
Because a static site is essentially just HTML and CSS… or to put it another way, a static website or webpage is simply a text file with some basic code that tells a web browser how it should look and behave. A normal or non-static website is generated by a server when you look at it. The code grabs the logo, all the words and images, and the boring stuff in the footer before building a webpage for you… while you wait. That takes time - not much time, we’re talking milliseconds here, but if you then put some of your website’s content inside a database (because that’s what WordPress and other similar software does) and all of a sudden it’s taking seconds and not milliseconds to generate each webpage.
Static site’s coding advantage
Static sites fell out of vogue because it’s hard to maintain a website this way. However, there is now a new breed of JavaScript-based software that helps developers to create static websites using modern tools. We’ve opted for Gatsby on this site which uses ReactJS. React is a JavaScript coding framework developed by Facebook to make coding websites and webapps easier. Developers love it and it has taken the world by storm…
With Gatsby, the developer gets to code in ReactJS and write their CSS (the programming language which determines how a website looks) in a really cool modular way.
Other JavaScript frameworks like VueJS and other static site generators like Eleventy are available too.
In future posts on this blog, we’ll talk about our experience using Gatsby and how it has helped this site score a 99-100 performance score in Google Chrome’s Lighthouse site auditing tool.