Learning the great “Gatsby JS” — a tutorial for beginners — Part I
So, here we are. Before we get started, I know it’s been a while since I sat down and wrote something meaningful, but yeah, here we are anyways.
All this time, I’ve been exploring various different frameworks, libraries both in JavaScript and Python. I’ve watched tons of video tutorials and made a bunch of projects by myself too. I had just started learning React, the amazing library everyone’s talking about. Anyways, I stumbled across various other frameworks and libraries that were based off React primarily. And somehow I went to the docs of this purply official site of Gatsby.js and I did something very new. Instead of jumping into video tutorials like I always do, I gave a shot at the beginner-tutorial-docs that they offered and I jumped right at it.
Before, we get any further, I’m assuming you are familiar with React, even if you aren’t hang on, Gatsby.js is very familiar to React, you might pick a thing or two along the way about React too 😄
So, why Gatsby.js ? What is so unique about this React-based framework? A simple google search would spin off something like this:
Gatsby is a React-based, GraphQL powered, static site generator.
What is a static site?
Since the dawn of the modern web, performance has been a key consideration when designing a website or a web app. When a website requires no server interaction whatsoever, what is hosted on the web is served to a user as is, this is referred to as a static site.
Or simply, It can be a site which contains fixed content. Several use cases including event listings, portfolio pages and blogs & many more.
Why a static site?
Why’d you wanna prefer a static site anyways ? In case of dynamic websites (requiring client-server interaction) because of challenges including slow load-time, security flaws, and hosting costs amongst others. The absence of a server mitigates these risks. Static Site Generators are tools used develop static sites, effectively and efficiently.
And finally how does GatsbyJs work ?
What separates Gatsby.js from the others is the way it handles data. In Gatsby.js, as we are not concerned about the server, data could come from several types of files in the project — markdown, CSV, JSON, or it could come from external services like NetlifyCMS, Medium, or even CMS like Drupal and Wordpress. And to make this possible Gatsby.js has a very cool plugin architecture, which would really come in handy as we go along.
Oh, but what about GraphQL ?
When you are building sites with Gatsby, you can access your data using this query language called “GraphQL” GraphQL allows you to declaratively express your data needs. This is done with queries, queries are the representation of the data you need. A query looks like this:
Which will return,
Notice how the query signature exactly matches the returned JSON signature. This is possible because in GraphQL, you query against a schema that is the representation of your available data. Don’t worry about where the schema comes from right now, Gatsby takes care of organizing all of your data for you and making it discoverable with a tool called GraphiQL. GraphiQL is a UI that lets you 1) run queries against your data in the browser, and 2) dig into the structure of data available to you through a data type explorer.
Now, we’re all set! Let’s dive in !!!
Prerequisites & Environment Set up
- Knowledge of HTML, CSS, and JavaScript is required with a focus on ES6 Syntax and JavaScript Classes.
- Basic knowledge of React and GraphQL is also of advantage.
Check if the following things are installed,
To make Gatsby sites easily, let’s install the Gatsby CLI
npm install -g gatsby-cli
Alright, we’re all set now!
Creating our first Gatsby Site!
Open up an editor of your choice and fire up the terminal. We’ll use the starter template that is provided to us through the CLI.
- Getting started :
Type the following command into the terminal
gatsby new hello-world https://www.github.com/gatsby/gatsby-starter-hello-world
Note: hello-world is an arbitary name, it’s basically your name, you are free to choose the title of your choice.
This is will bring up a bunch of folders and files into your directory.
Note: the .prettierignore, .prettierrc are present here because I have an extension called Prettier installed in my VSCode, to make my js files look “prettier”
If you are familiar with React, you’ll find the similarites in the structure of the project. And the fact that we usually only work with the src folder.
2. Change into this directory
cd hello-world
3. Starting the developer server
gatsby develop
This command would start the local development server in our machine. You’ll be able to see and interact with your new site here, just you do with React app.
As suggested, let’s check out https://localhost:8000/
Wondering how “Hello world!” is being displayed ? This is because of the index.js file that lies in the pages folder of src directory of your project hello-world. To make this visible, try changing the index.js file and see for yourself.
And there it is! 👯 Your very first Gatsby site, up and running in your local host.
Next, we’ll look into detail how to customise our pages.
Using page components:
Previously we saw that the index.js was resided inside the pages folder. Any react component that is present inside src/pages/*.js will become a page!
Let’s create a new page, by adding a new file src/pages/about.js !
Now navigate to https://localhost:8000/about
I know, it’s that simple yet very efficient.
Well, you could ask me, all this is cool but what about styling ?
Styling in Gatsby:
To add your css files in Gatsby all you gotta do is,
Create the css file in a folder, if you want to, it’s totally upto you.
To make this css work it’s magic, you gotta do a bit more, for Gatsby to know this css file exists you gotta create a new file gatsby-browser.js in the root of the project. And then add the following code:
Now, restart the development server and go to the local host!
Yass, there are many other ways to style like CSS modules, CSS-in-JS etc., you can try them all :D
Plugins in Gatsby :
A plugin simply adds or modifies a functionality in a very simple and straight forward way. There are hundred of plugins made for Gatsby that are available on their site and are maintained by the community members. And you make one too.
For this section, Let’s install and implement a Gatsby plugin for Typography.js.
- Create a new site:
gatsby new plugins-and-data https:/github.com/gatsbyjs/gatsby-starter-hello-world
then cd into it
cd plugins-and-data
2. Now, let’s install the plugin, for this I’d like to use the “Kirkham” themed, typography and nice CSS-in-JS, “Emotion”.
npm install --save gatsby-plugin-typography typography react-typography typography-theme-kirkham gatsby-plugin-emotion @emotion/core
To let Gatsby know about this plugin, we shall mess with the gatsby-configure.js that’s present in the root of this project. Add the following lines.
Next, the typography.js needs a configuration file, we shall create a folder called “utils” in src and add a “typography.js” there. Then, add the following into that file.
For this second site, let’s have a nice Layout component that can be used by all other pages. Create a folder “components” inside src and create a layout.js file. We’ll be using “Emotion” here. Add the following lines there.
To link various pages, we use Link from the core of Gatsby.
Then, the about.js,
Next, the index.js,
Now, let’s start the development server as usual using gatsby develop
And open up the local host at 8000 port!!
Yass, there you go! Your first ever proper Gatsby site that uses a Plugin !!!!! 😍
If you’ve come this far, give yourself a pat on the back! You’ve learned something new today.
And that’s it for this post ! Next, we’ll check out how to use GraphQL to get our data!! And how to render markdown files as if they are HTML using a new plugin, should be exciting!!! Stay tunedd for Part II !!!!
Did you like what you read?
Hold the “clap” button, please feel free to share your thoughts and ideas.
