Built on React and GraphQL, the learning curve for setting up a GatsbyJS powered site is insignificant. You’ll be working with mostly the same UI principles as any React app, using components, and relevant CSS and HTML standards. For a general introduction to the framework, this post summarizes the valuable concepts and tools at play with a GatsbyJS build.
GraphQL is a query language and when used with Gatsby, allows you to access your data and express your data needs. If you’re curious as to why there is such a need in a simple site that Gatsby generates, check out GatsbyJS’ documentation here.
After creating a new Gatsby site from the command line, you may see a similar structure in your new project as the following:
The main folder worth mentioning for a high-level overview is the src folder, which contains the pages and templates folders as well as a custom configuration of default .cache/default_html.js.
What’s neat here is that Gatsby generates routes under the hood for the components included in src/pages — they automatically become their own page with paths based on their file name. For instance, if you have an about component exported from src/pages/About.js, once you run gatsby develop (to start the development server), the user can navigate to ‘localhost:8000/about’ and find the about component rendered to the screen. Again, Gatsby docs go into greater detail.
Plugins are simply packages that can integrate services for your site — they include various CMS (Content Management Systems) options, design tools, analytics tools, and many more.
Starters provide you with a default working site that you can customize and modify to your liking and need. Checkout the available templates for a faster development process at the get-go.
Deploying and Hosting
I used Netlify for a CMS and hosting service, and also bought my domain name through the site. Netlify offers continuous deployment (you can also revert back to a previous version as well) after pushing to your Github repository from your local machine (you will have to link your Github beforehand, as part of the setup). Install the Netlify CMS plugin with the following command:
These are just a few features of Gatsby that I think make it worthwhile for its simple solutions and integrations, ultimately another great tool for automating a process that will save you time and heartache in the end.