Introducing Gatsby, the new & best SSG -Static Site Generator- *as of Today*

Built with webpack, React & GraphQL.

Who am I?

  • I'm Ismail Ghallou,
  • I work as a Front-end developer at Obytes along with Youssouf El Azizi & an amazing team.
  • I also work on side projects like Ai Hashtags & Beaf
  • I publish articles at my personal blog:
  • And I contribute to OSS whenever I'm free

As a web developer, who wants to make a website or web app, you're surrounded by so many choices, resources & communities.

But do you know what all these resources share in common when you're trying to make a website (web app)?

Yup, that's right!

Html, CSS & JavaScript

So, what if you could use JavaScript for everything?

Would you really bother exploring the other options?

Or you're like me and have already chosen to do it with JavaScript only?

Well then, you will have to narrow the choices down a bit and because you want to build a website (web app) & not an API or any server side thing.

And as a React developer, you will end up with these 3 choices



Next Js


Gatsby Js

PR (SSR on build time)

So What's Gatsby?

Gatsby logo

Gatsby is a new Static Site Generator - Built with React, webpack & GraphQL.

It creates hybrid websites: think of it as a mixture of a static website and a React app.
  • It generates HTML pages (files) at build time
  • Navigates between pages with pushState just like a SPA

What’s so awesome about it?

  • You can build your static website or dynamic app with Gatsby.
  • Use different Data sources or file formats to manage content.
  • You could also use different services for search/auth/cart/payments etc...

Pros & cons


  • Secured as it’s static
  • Cacheable
  • Cheap to host
  • Out of the box good performance, pwa & best practices.
  • Loads blazing fast
  • SPA look alike
  • Hot reload


  • Does Not generate new files on demand but does it during build time & for only predicted pages.
  • Plugins system

How Gatsby renders the content?

Step 1

  • It opens & validates gatsby config, then it loads the plugins after deleting the html/css files of the previous build.

Step 2

  • Gets the content (if there is any) from your files or platforms such as Contentful/Wordpress etc...

Step 3

  • Extracts & runs the static queries, then it generates necessary pages if you did so on gatsby-node file.

Page & Static queries

Gatsby has templates, pages & components
  • Page queries do accept variables via pageContext in gatsby-config but can only be added to page components & templates (templates === pages).

  • Static queries do not accept variables and can be used on components.

Gatsby plugins

    Source plugins

  • Add external data or content (e.g. your CMS, static files, a REST API) to your Gatsby GraphQL data.


  • Transform data from other formats (e.g. Markdown, YAML, CSV) to JSON objects.


  • Add different third-party services to your Gatsby site like (GA, Algolia, Auth0…).

Gatsby is used by popular corporations