How We Used Gatsby.js to Build a Blazing Fast E-Commerce Site

https://pixabay.com/en/space-rocket-travel-science-sky-1951858/

Static Sites vs. Web Servers

How Did We Do It?

Gatsby

Contentful

Circle CI

Amazon S3

Fastly

Our Hosting Architecture

A gorgeous diagram by yours truly

Deployment Flow

Ah, the joys of architecture diagrams

Circle CI Steps

  1. It runs Jest and checks to see if the Jest tests pass
  2. It runs Flow and makes sure all of our type-checking passes
  3. It runs the build and confirms the build passes
  4. It pushes changes to a branch
  5. It runs the Cypress tests
  6. (Optional Step) If we’re on master and all of the tests pass, Circle CI will rebuild the site with the production ENV variables.

The Whole System

The whole shebang!
  1. A developer or product manager pushes to Github or publishes to our CMS
  2. Circle CI triggers a build
  3. Gatsby builds the site
  4. Gatsby fetches data from our CMS.
  5. Gatsby passes data to GraphQL
  6. GraphQL passes data back to Gatsby
  7. Gatsby builds the static pages
  8. Circle CI pushes the static pages to S3
  9. Fastly fetches and serves the static site
  10. A user accesses shopflamingo.com

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store