Gatsby Introduction

Gatsby is a platform for building apps and websites using React

Gatsby is a platform for building applications and websites using React.

It is a tool that allows you to build on a set of techniques and practices, collectively referred to asJAMstack.

Gatsby is currently one of the coolest kids in Frontend Development. why? I think the reason is:

  • The explosive growth of the JAMstack method for building web applications and websites
  • Rapid adoptionProgressive web applicationTechnology, this is one of Gatsby's key features
  • It is built-inreactionwithGraphQL, These are two very popular and rising technologies
  • It's really powerful
  • It's fast
  • The documentation is great
  • Network effects (people use it, create sites, make tutorials, people learn more about it, create a loop)
  • Everything is JavaScript (no need to learn a new template language)
  • At first it masked the complexity, but allowed us to go into each step for customization

All of these are very important points, and Gatsby is definitely worth seeing.

How does it work?

With Gatsby, your application is built using React components.

The content you will present on the website is usually written in Markdown, but you can use any type of data source, such as a headless CMS or a web service such as Contentful.

Gatsby builds the site and compiles it into static HTML, which can be deployed on any web server needed, such asNetlify, AWS S3, GitHub Pages, regular hosting providers, PAAS, etc. All you need is a place to provide clients with normal HTTP pages and your assets.

I mentioned progressive web applications in the list. Gatsby automatically generates your site as a PWA through service workers to speed up page loading and resource caching.

You can enhance Gatsby's functionality through plug-ins.

installation

You can runterminal:

npm install -g gatsby-cli

This will installgatsbyCLI utility.

(When a new version is released, please call this command again to update it)

You can create a new "Hello World" site by running

gatsby new mysite https://github.com/gatsbyjs/gatsby-starter-hello-world

This command creates a brand new Gatsby website in the following location:mysiteFolder, usestarterAvailable athttps://github.com/gatsbyjs/gatsby-starter-hello-world.

A kindstarterIt is a sample site that can be built. Another common launcher isdefault,lie inhttps://github.com/gatsbyjs/gatsby-starter-default.

Here you can find a list of all the launchers that can be used

Run the Gatsby website

After the launcher is installed on the terminal, you can run the website in the following ways

cd mysite
gatsby develop

It will start a new web server and serve the site on port 8000 of localhost.

This is an example of our Hello World entry:

Check the scene

If you open a website created with your favorite code editor (I useVS code), you will find 3 folders:

  • .cache, A hidden folder containing Gatsby internals, you don’t need to change anything now
  • public, Which contains the resulting website after construction
  • srcContains React components, in this case,indexingredient
  • staticIt will contain static resources such as CSS and images

Now you can easily make changes by simply opening the default pagesrc/pages/index.jsAnd change "Hello world!" to something else, then save. The browser should immediatelyHot loadingComponents (this means that the page is not actually refreshed, but the content has changed-the underlying technology can implement this trick).

To add a second page, just create another .js file in this folder with the same content asindex.js(Adjust the content) and save.

For example, I created asecond.jsFiles containing the following content:

import React from 'react'

export default () => <div>Second page!</div>

Then I open the browserhttp: // localhost: 8000 / second:

Link page

You can link these pages by importing the React component (called) provided by GatsbyLink:

import { Link } from "gatsby"

And use it in your componentJSX:

<Link to="/second/">Second</Link>

Add css

You can use JavaScript import to import any CSS file:

import './index.css'

You can use React style:

<p style={{
    margin: '0 auto',
    padding: '20px'
  }}>Hello world</p>

Use plug-ins

Gatsby provides many functions out of the box, but many other functions are provided byPlug-in.

There are 3 kinds of plugins:

  • Source pluginGet data from the source. Create nodes that can be filtered by the converter plugin
  • Transformer plug-inConvert the data provided by the source plugin into data that Gatsby can use
  • Functional plug-inAchieve a certain function, such as adding sitemap support or more

Some commonly used plugins are:

The installation of Gatsby plug-in is divided into 2 steps. First you install usingnpm, And then add it to the Gatsby configurationgatsby-config.js.

For example, you can install the Catch Links plugin:

npm install gatsby-plugin-catch-links

ingatsby-config.js(If not, please create it in the root folder of the website), add the plugin topluginsExported array:

module.exports = {
  plugins: ['gatsby-plugin-catch-links']
}

That's it, the plugin can now do its job.

Build a static website

After adjusting the site and want to generate a production static site, you will call

gatsby build

At this point, you can check if all functions are working as expected by starting the local web server with the following command

gatsby serve

This will make the site as close as possible to the way you display it in production.

Deployment method

Once you use to build a websitegatsby build, All you need to do is to deploy thepublicfolder.

Depending on the solution you choose, different steps will be required here, but usually you will push to the Git repository and let the Git commit hook to complete the deployment.

This is an excellent guide for some popular hosting platforms.

Download mine for freeResponse Handbook


More response tutorials: