Skip to main content

Gatsby

Introduction

Gatsby is an open-source framework that combines functionality from React, GraphQL and Webpack into a single tool for building static websites and apps. Owing to the fast performance of the sites it powers, impressive out-of-the-box features like code splitting, and friendly developer experience, Gatsby is fast becoming a staple of modern web development.

Why Gatsby?

Gatsby is a modern web framework for blazing fast websites.

  • Go Beyond Static Websites Get all the benefits of static websites with none of the limitations. Gatsby sites are fully functional React apps, so you can create high-quality, dynamic web apps, from blogs to e-commerce sites to user dashboards.
  • Use a Modern Stack for Every Site No matter where the data comes from, Gatsby sites are built using React and GraphQL. Build a uniform workflow for you and your team, regardless of whether the data is coming from the same backend.
  • Load Data From Anywhere Gatsby pulls in data from any data source, whether it’s Markdown files, a headless CMS like Contentful or WordPress, or a REST or GraphQL API. Use source plugins to load your data, then develop using Gatsby’s uniform GraphQL interface.
  • Performance Is Baked In Ace your performance audits by default. Gatsby automates code splitting, image optimization, inlining critical styles, lazy-loading, prefetching resources, and more to ensure your site is fast — no manual tuning required.
  • Host at Scale for Pennies Gatsby sites don’t require servers, so you can host your entire site on a CDN for a fraction of the cost of a server-rendered site. Many Gatsby sites can be hosted entirely free on Gatsby Cloud and other similar services.

Features

  • SEO Gatsby gives you built-in SEO boosts through faster page speeds, and provides plugins to ensure that search engines capture the correct page metadata.

  • i18n Serving users content in their preferred language is part of a great user experience. Gatsby works with i18n libraries allowing you to create multiple URLs for a page based on language and serve the correct one to users.

  • Page Transitions The TransitionLink component provides a way of describing a page transition via props on a Link component. It works with many animation libraries, like react-pose, GSAP, animejs, and many others.

  • 404 Page Add a nice UI flourish to your site. Gatsby ensures that your 404 page is built as 404.html as many static hosting platforms default to using this as your 404 error page. If you’re hosting your site another way you’ll need to set up a custom rule to serve this file for 404 errors.

  • Analytics Drop in tracking from GA, use Google Tag Manager, or a number of other analytics providers like Hotjar and Segment.

  • Search Add search from hosted providers like Algolia or use open source libraries like elasticlunr.

  • Forms Use vanilla React forms or more full-featured libraries like Formik or Final Form.

  • Authentication Many sites require user authentication in order to protect private data. Implement this in your Gatsby site by using client-side routing and connecting to third-party services like Auth0.

Getting started with Gatsby

  1. Create a new site

     npm init gatsby

    Follow the prompts to choose your preferred CMS, styling tools and additional features.

  2. Once everything is downloaded you will see a message with instructions for navigating to your site and running it locally. It will look like this, but use your project’s directory.

    Start by going to the directory with

    ```shell
    cd my-gatsby-site
    ```
    Start the local development server with

    ```shell
    npm run develop
    ```
    Gatsby will start a hot-reloading development environment accessible by default at http://`localhost:8000`.

  3. Now you can make changes to your site.

    Try editing the home page in src/pages/index.js. Saved changes will live reload in the browser. 

### NOTE :-

Migration Guides

If you already have a Gatsby site, these handy guides will help you add the improvements of Gatsby v3 to your site without starting from scratch.

See Also :