Gatsby without GraphQL - only JSON
Number one misconception about Gatsby is that you need to know GraphQL to build something with Gatsby, which is not true. Yes, you don't need GraphQL. A Gatsby site can be built from an API or just with some data from a JSON file.
You don't need GraphQL.
If you don't know what Gatsby is, it is a static site generator built in React. You can use React to build the components of the website and give them to Gatsby, which will then generate a blazing fast website for you.
If you are interested in building it from an API, here is a well demonstrated example.
If most of you site is static and only certain part of it changes, why would you need GraphQL to fetch things.
Let us build a site from just a JSON file which contains some data.
Step One is to clone the
hello-world-starter and make sure everything works.
bash1npx gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world2cd hello-world3yarn develop4
http://localhost:8000 should say, "hello world!".
Adding the data
Add a JSON file at
content/data.json which has information on the pages. The path is just a personal preference ;)
Template to render the Page
Next, we create a template which will get the data from the JSON and render it to the webpage.
A very naive and basic React component which gets
paragraphs in the
pageContext and it renders them. We will get to how the data is passed to
pageContext in a while.
Create the Pages now!
How do we tell Gatsby what pages it should create? By creating
Here, we use
createPages() API, where we loop through all the pages from the JSON data, and call
createPage() action to create the actual page. Here we pass the template(which is component) and the URL(path) where the page has to be generated. The actual data is passed as
context. This is the context that we use in our Page template to populate the data.
Boom! It actually works of you have used
yarn develop. It hot reloads every change you make. Now you can navigate to
/about pages and see how they look (and feel good about yourself).
You realise the potential of Gatsby, right? Possibilities are limitless. In this case, you just have to add styles and you have a portfolio site.
Thanks for reading through.
Keep on hacking!