gatsby | fastest frontend for the headless web | Static Site Generator library

 by   gatsbyjs JavaScript Version: 5.13.0-next.2 License: MIT

kandi X-RAY | gatsby Summary

kandi X-RAY | gatsby Summary

gatsby is a JavaScript library typically used in Web Site, Static Site Generator, React, Gatsby applications. gatsby has no bugs, it has a Permissive License and it has medium support. However gatsby has 1 vulnerabilities. You can install using 'npm i willit' or download it from GitHub, npm.

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps. It combines the control and scalability of dynamically rendered sites with the speed of static-site generation, creating a whole new web of possibilities.

            kandi-support Support

              gatsby has a medium active ecosystem.
              It has 54548 star(s) with 10544 fork(s). There are 766 watchers for this library.
              There were 10 major release(s) in the last 6 months.
              There are 76 open issues and 13822 have been closed. On average issues are closed in 33 days. There are 69 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of gatsby is 5.13.0-next.2

            kandi-Quality Quality

              gatsby has no bugs reported.

            kandi-Security Security

              gatsby has 1 vulnerability issues reported (0 critical, 0 high, 1 medium, 0 low).

            kandi-License License

              gatsby is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              gatsby releases are available to install and integrate.
              Deployable package is available in npm.
              Installation instructions are not available. Examples and code snippets are available.

            Top functions reviewed by kandi - BETA

            kandi has reviewed gatsby and discovered the below as its top functions. This is intended to give you an instant insight into gatsby implemented functionality, and help decide if they suit your requirements.
            • Initialize the source nodes .
            • Sets the translation of a matrix
            • Loops over an hash .
            • Watch the packages .
            • Returns true if the current document is relevant for the current browser .
            • Tests if the current context is in focusable .
            • Run async runner .
            • Factory to create a new object
            • Flip a markdown file
            • Fetches a range of arguments
            Get all kandi verified functions for this library.

            gatsby Key Features

            No Key Features are available at this moment for gatsby.

            gatsby Examples and Code Snippets

            gatsby-theme-headless-wordpress, Quick start
            JavaScriptdot img1Lines of Code : 16dot img1no licencesLicense : No License
            copy iconCopy
            yarn add gatsby-theme-headless-wordpress gatsby-source-wordpress
            module.exports = {
              plugins: [
                  resolve: `gatsby-source-wordpress`,
                  options: {
                    // the only required plugin option for WordPress is the GraphQL url.
            Gatsby default starter
            JavaScriptdot img2Lines of Code : 14dot img2License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            npm install --global windows-build-tools --vs2015
            npm install -g gatsby-cli
            gatsby new gatsby-site
            cd gatsby-site
            gatsby develop
            npm install imagemin-pngquant@5.0.1 --save
            npm install p
            How to solve dependency error in gatsby js?
            JavaScriptdot img3Lines of Code : 4dot img3License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            npm install gatsby-plugin-typography typography react-typography typography-theme-kirkham gatsby-plugin-emotion @emotion/react --legacy-peer-deps 
            npm cache clean --force
            gatsby-plugin-image not installing via npm
            JavaScriptdot img4Lines of Code : 6dot img4License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            npm install gatsby@latest --legacy-peer-deps
            npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp
            npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-transfor
            In Gatsby how do I pass a relative path file to a template that is also pulling a query?
            JavaScriptdot img5Lines of Code : 58dot img5License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
     => {
                    const slug = edge.node.frontmatter.slug
                    const id =
                    const imagePath = edge.node.featureImg || 'default.jpg'
                      path: slug,
            I cannot install gatsby-plugin-sharp
            JavaScriptdot img6Lines of Code : 4dot img6License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            npm install --global windows-build-tools
               npm i gatsby-plugin-sharp
            Gatsbyjs + Google analytics - tracking custom events?
            JavaScriptdot img7Lines of Code : 49dot img7License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import React from 'react'
            import Link from 'gatsby-link'
            import ReactGA from 'react-ga'
            import logo from './logo.png'
            import financials from './Annual_Report_Financials_2017_FINAL.pdf'
            class LoggingDownload extends React.Component {
            NPM Mac OS error: EACCES: permission denied, access '/usr/local/lib/node_modules'
            JavaScriptdot img8Lines of Code : 2dot img8License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            sudo npm install -g gatsby-cli
            Only change content using Gatsby Link
            JavaScriptdot img9Lines of Code : 19dot img9License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            npm install --save gatsby-plugin-layout
            module.exports = {
              plugins: [
                // Etc…
                  resolve: `gatsby-plugin-layout`,
                  options: {
                    component: require.resolve(`./relative/path/to/layout/comp
            npm ERR! Unexpected end of JSON input while parsing near '...tore-4.0.0.tgz","file'
            JavaScriptdot img10Lines of Code : 6dot img10License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            npm config set registry ""
            npm cache clean --force
            npm install -g gatsby-cli

            Community Discussions


            Restore scroll position when navigating with React Router 6
            Asked 2022-Mar-25 at 23:34

            How do I set up React Router 6 to restore scroll position when I navigate and when the browser window is refreshed?

            React Router 5 has a page about scroll restoration, but I can't find anything about scrolling in the docs for v6, so I guess that you're supposed to handle this yourself with another package. Fair enough, but I can't find anything that's compatible with React Router 6.

            The packages react-scroll-restoration and oaf-react-router require v5. (oaf-react-router does list that it supports v6, but the basic usage code example isn't compatible with v6, and the related issue #210 is still open.)

            Gatsby and Next.js support scroll restoration out of the box, but I doesn't look like there's a neatly packaged package that you can just use.

            This little demo app with server side rendered pages does what I want. Scroll position is restored when navigation back and forth and refreshing the browser window.

            Here is the same app using React Router 6, where the scroll position isn't saved and restored, but actually reused between pages. The usual workaround for that is to scroll to the top whenever the page is navigated, but I am not interested in that behaviour.

            Edit: React Query writes that the issue with scroll restoration is that pages are refetching data, thereby implying that if the data for rendering the pages is there, scroll restoration just works. I cannot confirm that, because my small React Router 6 app has the issue even without doing any data fetching at all. I feel like there is something small think I am missing in order to get it to work.

            Rant: I am quite surprised that the typical answer to this issue is to call window.scrollTo(0, 0) when navigating. This only fixes the issue of the scroll position being transferred between pages. When the scroll position isn't restored, the user experience when navigating between pages is seriously deteriorated. I guess this is partly why pop-up windows have become so popular, but they bring a long suite of other UX issues, so I really want to avoid using them.



            Answered 2022-Feb-05 at 16:52

            Thanks to this comment in oaf-react-router I was able to get it to work with React Router 6. There are a few caveats, though, so I do not consider this a viable solution for a professional web app.

            1. As stated in this code comment, oaf-react-router has to use the same version of history as react-router-dom does. That's why HistoryRouter is exported as unstable_HistoryRouter. This solution does indeed feel quite unstable.

            2. oaf-react-router does not restore the scroll position when refreshing a web page. I don't know if this can be achieved easily, and it's something that might be acceptable.



            How to create schema customization to use optional field "featureImage" from gatsby blog
            Asked 2022-Mar-15 at 16:54

            I'm making a Gatsby blog as a side project.

            I want to use the "featureImage" optional field in mdx frontmatter.

            I tried to refer to the document according to the error message, but it was difficult to understand.

            This is part of my code.




            Answered 2022-Mar-15 at 16:54

            You may find this GitHub thread insightful. Following it, try using:



            Can't require remark and rehype plugins for gatsby-plugin-mdx
            Asked 2022-Mar-03 at 23:15

            I was trying to follow the documentation on including rehype plugins for gatsby-plugin-mdx. Specifically I was trying to use the rehype-slug plugin. I installed the packaged with npm and set my gatsby.config.js file to



            Answered 2021-Sep-14 at 04:51

            Not sure if it will work but, instead of using require from ES modules have you tried something like:



            Could not find a declaration file for module 'gatsby-plugin-dark-mode'
            Asked 2022-Feb-17 at 09:47

            I'm getting the below error, trying to import ThemeToggler from gatsby-plugin-dark-mode



            Answered 2022-Feb-17 at 08:33

            You can simply do : npm i gatsby-plugin-dark-mode --force



            Node.js 17.0.1 Gatsby error - "digital envelope routines::unsupported ... ERR_OSSL_EVP_UNSUPPORTED"
            Asked 2022-Feb-13 at 04:42

            I am building a Gatsby site. I upgraded Node.js to v17.0.1, and when I run a build, there is an error:



            Answered 2022-Jan-04 at 23:33

            Gatsby must be using an algorithm or key size which is no longer allowed by default with OpenSSL 3.0.

            UPDATE ⚠️

            This is most likely a webpack issue -

            They have since released a fix in version 5.61.0 - - so upgrading webpack should address the issue as well

            A member of the webpack team has stated they do not plan to backport the fix to webpack 4, so if you are on webpack 4 you may need to look to upgrading to webpack 5 first.

            From Node.js 17's announcement post:

            If you hit an ERR_OSSL_EVP_UNSUPPORTED error in your application with Node.js 17, it’s likely that your application or a module you’re using is attempting to use an algorithm or key size which is no longer allowed by default with OpenSSL 3.0. A new command-line option, --openssl-legacy-provider, has been added to revert to the legacy provider as a temporary workaround for these tightened restrictions.

            Running this on the terminal might look like:



            Netlify says, "error Gatsby requires Node.js 14.15.0 or higher (you have v12.18.0)"—yet I have the newest Node version?
            Asked 2022-Jan-08 at 07:21

            After migrating from Remark to MDX, my builds on Netlify are failing.

            I get this error when trying to build:



            Answered 2022-Jan-08 at 07:21

            The problem is that you have Node 17.2.0. locally but in Netlify's environment, you are running a lower version (by default it's not set as 17.2.0). So the local environment is OK, Netlify environment is KO because of this mismatch of Node versions.

            When Netlify deploys your site it installs and builds again your site so you should ensure that both environments work under the same conditions. Otherwise, both node_modules will differ so your application will have different behavior or eventually won't even build because of dependency errors.

            You can easily play with the Node version in multiple ways but I'd recommend using the .nvmrc file. Just run the following command in the root of your project:



            Migrate from react-router to react router v6
            Asked 2021-Dec-13 at 18:34

            I am trying to complete this tutorial Securing Gatsby With Auth0, but have hit a roadblock due to reach/router not being compatible with react 17. After a bit of googling around, I found this issue Which router project to use moving forward which has a migration guide: Migrate to React Router from Reach

            However, as a beginner, I am not well versed enough to make sense of what it contains.

            The source code from the tutorial is as follows:



            Answered 2021-Dec-13 at 18:28

            The Routes component only replaces the Switch component from react-router-dom v5, but is required to wrap Route components in v6. The routed components, Home, etc... need to be rendered by a Route.



            Gatsby deployment failure on AWS Amplify
            Asked 2021-Nov-02 at 11:16

            I have a gatsby portfolio page that's simply all in an index.js file.

            I am having trouble deploying it on AWS Amplify, here are the build logs:



            Answered 2021-Nov-02 at 11:16

            I think there's a mismatching Node version between your local environment and the AWS Amplify's. If you run different versions of Node, the installed dependencies in the npm install will be different so your application will behave differently in both environments, assuming that it builds locally (if don't, there might be another underlying problem).

            As you pointed, you can use nvm to set the provision version. Based on How to change Node Version in Provision Step in Amplify Console you can try:



            How to change the background color of a parent component from inside a child component in react, gatsby
            Asked 2021-Oct-27 at 13:26

            I am using react, gatsby and I have 2 components



            Answered 2021-Oct-16 at 04:06

            You can do something like this:



            How to use Gatsbys wrapPageElement with Typescript in a local plugin?
            Asked 2021-Oct-13 at 19:34

            I'm trying to create a new Gatsby plugin. I started with developing it as a local plugin. In this plugin I want to provide a wrapPageElement for server side rendering and during runtime, so I've create the following configuration files:




            Answered 2021-Sep-28 at 04:29

            It seems to be unresolved (yet) according to this GitHub thread, where apparently types are not properly exported by Gatsby.

            As a hacky workaround you can try:


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install gatsby

            You can install using 'npm i willit' or download it from GitHub, npm.


            Whether you're helping us fix bugs, improve the docs, or spread the word, we'd love to have you as part of the Gatsby community!. Check out our Contributing Guide for ideas on contributing and setup steps for getting our repositories up and running on your local machine.
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • npm

            npm i gatsby

          • CLONE
          • HTTPS


          • CLI

            gh repo clone gatsbyjs/gatsby

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link

            Consider Popular Static Site Generator Libraries


            by gohugoio


            by gatsbyjs


            by jekyll


            by mkdocs


            by 11ty

            Try Top Libraries by gatsbyjs


            by gatsbyjsJavaScript


            by gatsbyjsJavaScript


            by gatsbyjsJavaScript


            by gatsbyjsJavaScript