Gatsby Emotion Template

  • Blazing fast static site
  • Lazy loading images
  • Google Analytics
  • Emotion & Tailwind CSS

A starter template to create lightening fast static websites. Comes pre-built with Gatsby, Emotion, and Tailwind to get you up and running quickly

Gatsby Emotion template logo
  • Gatsby JS logo

    GatsbyJS

  • React JS logo

    React

  • Emotion CSS in JS logo

    Emotion

  • Tailwind CSS logo/

    Tailwind

Sweat Base

A quick google search of the latest web building trends will usually surface a modern workflow, with a simpler developer experience, great performance, is easily scalable, and with higher security. The JAMstack is in my experience just that and a fantastic way of building websites and apps, creating high performing sites and apps for the modern web. It's also the same stack I'm using on this very website!

My personal preference of JAMstack static generator at the moment is Gatsby which is a React based framework with great support for varying use cases and integration of many other technologies and services.

With that said, below is a preview of a customisable template I've created for others to use, and which includes a few other favourites of mine.

  • Firstly the Emotion library. Although not to everyone’s taste, this is a CSS-in-JS library which allows for styling of components and elements, and much more besides.
  • Secondly Tailwind CSS library. I've come to realise that for me, I much prefer to opt into adding certain styles in a cherry-pick fashion, rather than having to bounce around the docs looking for the right combination of classes and certain element nesting other CSS frameworks require.
Homepage of a Gatsby Starter Template

As mentioned, this can be quickly customised, and as it outputs static content can be hosted anywhere and freely in a lot of cases. Places such as Netlify for instance, which is where the live version lives.

next