Gatbsy is a very popular framework used to create static webpages. In this blog, we'll discuss what kind of tool Gatbsy is and why is it so helpful in building webpages that follow a JAMstack approach.
We will be going over:
- What is Gatsby?
- What is GraphQL?
- How to get started using Gatsby?
What is Gatsby?
The common definition for Gatsby is, it is a static site generator. But let’s discuss what this means.
This means Gatsby is a tool that will help us produce static sites using HTML, JS, CSS, images, and other static content, that we can then load onto a server. Which is a more JAMstack approach to building applications.
The traditional approach of server-side rendered applications is that that when you request a page on the application, generally it will then have to reach a database to retrieve the data and then build the page in real-time on the server to then send make to the client. With Gatsby, a JAMstack approach is taken to serving a website. Gatsby will create the pages ahead of time which is then served and the client is only requesting the static pages created. More specifically, Gatsby calls the endpoint with GraphQL, which fetches the data you need, and then a static page is created with that data. The data is only queried once and then served on to a server as a static HTML file.
Gatsby uses graphQL to query data from an external data source such as markdown files, JSON files, a database, or even an API. Gatsby includes plugin architecture, which allows us to load JavaScript, make API calls, add animations, build interactions onto the HTML files which allows us to still have very dynamic websites. Gatbsy also uses React for templating and CSS for styling.
What is GraphQL?
GraphQL is a querying language that allows you to query for data by describing the data you want to receive from a data source such as a markdown file. You are then given the data in the way that you asked for it
How to get started using Gatsby?
Gatbsy uses Node, so Node will need to be running on a development environment on your computer. You will need to have installed Node and Git before installing Gatsby. You start off by installing Gatsby on your local machine globally. You then run Gatsby on your computer, by creating a new Gatsby template and it will help you set up your application to generate static pages for you. The Gatsby documentation explains thoroughly how to get started with building sites on Gatsby from quickstarts for experienced developers who are ready to jump in, to step-by-step tutorials for beginners starting from anywhere.
Top comments (8)
Nicely described..I have developed my blog using Gatsby.
I'm using Gatsby to develop my personal site, thanks for the info!
Do you recommend a place to start other than the Gatsby tutorials? I've faced an environment problem on Windows and raised it on Github but there's nothing Gatsby can do about it, so I haven't been able to continue past the 4th tutorial.
I personally found this video helpful for getting started as well youtu.be/6YhqQ2ZW1sc
Gatsby is so dangerous. It's become my go to for every project now. The amount of abstraction is just wild. I'm not saying this is a good or a bad thing; I don't have the experience or ability to properly argue for either. All I know is when you start using it it'll be like a drug :D
Facts
I really want to build a real project using Gatsby. I have used create-react-app and Next.js but not Gatsby yet. Only in practice. Anyone tried combining it with Netlify CMS?
I'll try it.