Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps. This blog shares some of the basics to start a Gatsby project. Learning the basics of React is recommended before reading.
I built a blog using Hexo last year. There were various blog theme to choose from, and after trying a couple of them, I find it a bit difficult to personalize the layout and style. Basically anyone can build a beautiful blog from scratch, and deploy it within hours, which is great for most people. But when it comes to customization, either modify an existing theme or create their own one is not an easy job to do. Then I found Gatsby.
Gatsby is a open source framework based on React. What I really like about Gatsby is the way it pulls data from any source like APIs, Databases, Markdown, etc. using GraphQL as default, and uses server-side rendering to create static websites. In addition, there is a thriving Gatsby community, and the plugin library also makes things a lot easier.
To make things easier, a Gatsby Starter is recommended. Modifying a starter is a great way to understand how Gatsby works.
I used gatsby-starter-netlify-cms which comes with Netlify CMS and Netlify deployment configurations. Therefore the source code and data from my blogs can be stored in a Github repo, and I can write or modify blog posts using Netlify CMS in a browser with preview without doing anything locally.
Here I will introduce some basic structure/files in Gatsby to build a blog website. Full Gatsby Documentation is available here.
/src/pages folder contains pages that will be rendered into individual web pages. Each .js file (404.js, index.js) will be directly rendered into individual web page, while other files like Markdown will be queried using GraphQL, and rendered into pages through templates.src/templates stores the template files mentioned before.src/components is where the react components and 'css' files are./gatsby-config.js is the configuration file for the project. Most times we modify this file is for plugins/gatsby-node.js is where we can use Gatsby node APIs to create pages for Markdown files, or customize path for posts.These pretty much summarized the beginner knowledge of Gatsby. Hope you can have a good start.