Chip’s brand new website

The tools we used to build a ultra fast website in 2019

The Brief

I was tasked with rebuilding Chip’s website from the ground up.
The site had to be fast, content managed, and be easy to navigate and understand.

Design

Using our new look and brand colours, our designer Harry worked alongside Liam, our UX expert to put together some wireframes & designs.

Liam at work.

Copy

Tom, the guy behind the voice of Chip, provided the copy for the site and helped me with the layout to ensure our message was clear, no matter the device.

Content Management

The content management system we chose to use for this project is called Ghost. It’s simple, fast, has a great API and community of committed developers behind it. It’s actually built with Node.

Ghost also provides a fantastic Desktop UI also.

Photo by Patrick Tomasso on Unsplash

Familiar tooling

Ghost sports a similarly feature-rich experience with features comparable to those on Medium. Anyone who is familiar with Medium can easily hit the ground running.

Adaptable Codebase

With Ghost being open source, we have the ability to build plugins to allow our copywriters to do more without requiring developer assistance.

Standalone CMS

Ghost has it’s own templating ability and can offer a frontend but in this case, we want to use it as a stand-alone CMS service and let Gatsby get content from the API. I’ll get into why in the next section.

Static Site Generation

The reason we wanted to use Ghost as a stand-alone CMS is that we wanted to compile our website down to static files rather than having a dynamic site slowing things down.

Photo by Luke Brugger on Unsplash

Server delay

Instead of the user relying on a CMS service being available (and fast) every time it is requested, the site is compiled down to HTML, CSS & JS (static) files.

Static files are easier to serve quickly than complex programs, so if the use case allows it, static site generation is a great thing to do if you want a better performing website.

Photo by Guillaume Bolduc on Unsplash

Automatic regeneration

A new site will be automatically recompiled whenever new source code is deployed, or content is updated via the CMS.

Short publishing delay

The small downside to static site generation is that authors may experience a small delay in seeing their content go live, this is usually a short time while the new version of the static site is being built.

Photo by chuttersnap on Unsplash

Benefits of static sites

• Performance— The end user doesn’t experience an initial delay when requesting a page
• Improved security — CMS can be away from the public internet, making this much safer
• Better efficiency — Less CPU & disk usage allowing for a smaller, cheaper and more an eco-friendly hosting solution

Meet; Gatsby

Gatsby is a static site generator for React. It’s also great at pulling in data from various sources.

In our case, we use the `gatsby-source-ghost` package to get our content from Ghost into Gatsby. It uses Facebook’s GraphQL to query data.

SassPhoto by NeONBRAND on Unsplash

Detecting devices

As we show buttons linking to our iOS & Andriod apps, we decided that hiding the Andriod button for iOS (and vice versa) would be a nice touch. To achieve this, a package called react-device-detect was used. It makes the process of reliably detecting devices very easy.

if (isAndroid) {
    return <AppButton store="android" />
} else if (isIOS || isMobileSafari) {
    return <AppButton store="ios" />
} else {
return <div>
        <AppButton store="android" />
        <AppButton store="ios" />
    </div>
}

Reusable Components

I took the time to build beautiful and reliable UI components. These components may be useful for future Chip user interfaces, what’s to say the header should be written for every new project we do? Yes, we can copy and paste, but how do we maintain every instance and keep those consistent?

Photo by Maik Jonietz on Unsplash

Syntactically Awesome Style Sheets

To style websites, we use a technology called CSS, this can get complex very quickly. The more features a site gets, the more complex the stylesheets generally get.

Pre-compiler

A solution to the mess that CSS can become is Sass, it’s a pre-compiler and is eventually compiled to raw CSS. Sass code is not understood by browsers and should be compiled and shipped to the users’ browser.

The Sass compiler is run as part of the static site generation process and reaches the user as plain-old CSS, essentially Sass just makes style-sheets easier to maintain.

Summary

• Ghost provides an easy to use Web (and Desktop!) UI for managing content
• Sass helps us build maintainable style sheets
• Webpack bundles assets together
• Gatsby pulls content down from Ghost’s API
• Hosting is made easier as the end result is just HTML, CSS & JS.

https://github.com/TryGhost/gatsby-starter-ghost
https://github.com/duskload/react-device-detect