Gatsby.js

What is it

Gatsby.js is a static site generator that uses Graphql to feed the component data from an "internal api", served by gatsby itself, and the plugins that you might add in it. It utilizes React.js, and generally it works the same as any normal react project. But it has some special quirks, specifically what we do to programmatically create pages from data.

Learn

• Official Gatsby.js Tutorials from step 0 to step 7(the most important step. But other ones are also important).
• How to Build Your Coding Blog From Scratch Using Gatsby and MDX.

How to learn

If you understand React.js and graphql, by following the two first links in the "Learn" section you will be able to work with Gatsby just fine.

Special quirks

• gatsby-config.js is the file where the plugins and metadata is configured. The ordering of plugins there is REALLY IMPORTANT.
• gatsby-node.js is the most important file for gatsby. There are two functions exported there: onCreateNode which is used to programmatically create nodes in the graphql based on data that plugins offer us. And createPages, which is used to create routes but from graphql data, and is one of the most important points of gatsby.
• Routes on graphql comes from the pages folder, similar to Next.js. But most routes comes from createPages function.

Also, it is important to read the readme.md of the website, since it also has tips on how to do that.

Known bugs

• Windows has a known bug which makes transparent images have a black background

---

If you will work with the appmasters.io website, it's also important to know how Netlify works.