Introduction and Getting Started with GatsbyJS
GatsbyJS is a free, open-source React-based static site generator. It is specifically built with performance in mind and delivers 2-3x fast results as compared to same kind of applications built using different tools.
Pre-Requisites:
Before you start working with Gatsby, it’s better to have some prior knowledge of JavaScript, ES6, React and obviously HTML and CSS.
Misconceptions about Gatsby:
It is a general misconception about Gatsby which may be due to the slogan that it’s a static site generator which makes people think, what if we have to use dynamic content? Brace yourselves, everyone, because the answer is YES! You can use dynamic content without any problem in Gatsby.
Get Started:
So now as we know what Gatsby is, let’s get started:
First of all, you should have the latest version of NodeJS installed on your system. If you don’t have Node installed, you can visit the NodeJS website (link provided at the bottom) to install Node.
Now open the terminal and install Gatsby CLI:
npm install -g gatsby-cli
This command installs Gatsby CLI globally on your system.
Gatsby CLI will help us use specific functionality like creating a new website, running development server and creating production build, etc.
Now let’s create a new project using CLI. Run the following command in terminal:
gatsby new gatsby-site-name
This command will generate a new website for us which is ready to run (no configuration required whatsoever) HURRAAAYYY!
Running Development Server:
In order to start the development server, use the following command in terminal:
gatsby develop
It will start a hot-reloading development environment on port 8000. You can access the website using URL: localhost:8000
Project Breakup:
By now you have installed and seen the running demo website. Time to explore the code doesn’t you think! Open project in your favorite text editor, I prefer Visual Studio Code, but you can choose whichever code editor you feel comfortable with.
Once you will open the project on the code editor, you will see the following project structure:
|-- / node_modules |-- /src |-- / components |-- Images |-- /pages |-- gatsby-config.js |-- gatsby-node.js |-- gatsby-ssr.js |-- gatsby-browser.js |-- package.json
Notable files/folders and their definitions:
- node_modules — contains all of the installed modules and packages
- gatsby-config.js — configure options for a Gatsby site, with metadata for the project title, description, plugins, etc.
- gatsby-node.js — implement Gatsby’s Node.js APIs to customize and extend default settings affecting the build process
- gatsby-browser.js — customize and extend default settings affecting the browser, using Gatsby’s browser APIs
- gatsby-ssr.js — use Gatsby’s server-side rendering APIs to customize default settings affecting server-side rendering
- src/components — this folder contains the components and some essential components that you need are created by default here like header and layout.
- src/images — contains images for your website
- src/pages — website pages will reside in this folder
Pages, Routing and Internal page linking:
The most important question that comes to our mind now is how pages and routing work.
When you create a new file under the src/pages folder, file name automatically becomes the path of that page. For example, if the file name is “test_page”, page route will become “localhost:8000/test_page”.
Now next question that comes to our mind is how internal page links work. Although you can use an HTML anchor tag if you have some prior knowledge of React, your answer should be a big NO. If you will use anchor tag, it will destroy the whole purpose of Single Page Application (SPA) as it will reload the page.
Gatsby offers us a very elegant solution for page linking. It has a built-in <Link> component which enables linking internal pages and offers a performance boost by using the preloading features. This means if you are on a certain page that contains the Link tag, Gatsby will preload the page defined in that tag for a smooth user experience.
Example
import React from "react"
import { Link } from "gatsby"
const Page = () => (
<div>
<p>
Check out my <Link to="/blog">blog</Link>!
</p>
<p>
{/* Note that external links still use `a` tags. */}
Follow me on <a href="https://twitter.com/gatsbyjs">Twitter</a>!
</p>
</div>
)
In the example mentioned above, you can see the basic usage of Link tag. In order to use it, you must import the Link component and in the link tag, you must define “to” attribute for the destination link. Link tag offers tons of cool features too like active link class and active link styles etc, but as the scope of this article is just an intro and is meant for beginners so we are not going to discuss them here. You can check out the official Gatsby documentation for more details.
Gatsby Plugins:
Gatsby is designed to be extensible so it offers tons of cool features in the form of plugins. The advantage of using Gatsby plugins is that they offer prepackaged integration into the core Gatsby APIs to save you time and energy, with minimal configuration.
You can install these plugins (https://www.gatsbyjs.org/plugins/) as node packages and add functionality to your website.
Installation and Configuration:
To install the Gatsby plugin, just run the nom install command with the name of the plugin:
npm install --save gatsby-transformer-json
In order to make the plugin work, you also have to add the plugin name in a gatsby-config.js file in plugins array.
module.exports = {
plugins: [`gatsby-transformer-json`],
}
If the plugin takes options, you can also define them here too.
Using Third-Party Plugins:
Plugins offered by Gatsby are just an added feature, it doesn’t mean that it is mandatory only to use these plugins. If you want to install other third party plugins/packages like Axios, lodash, etc, you can install and use them too.
Generating files for deployment on the server:
Once your website is created, obviously you want to deploy it on the server. Run the following command in terminal:
gatsby build
Once done, you will find all the files required for deployment in the public directory at the root of the project.
Important Links:
https://www.gatsbyjs.org/plugins/
https://nodejs.org/en/download/
