Learn how to contribute code to the open source project Gatsby It's a managed with . In Gatsby all projects are packages including Gatsby, plugins, and themes: monorepo Lerna At the end of this tutorial, where you can test your changes to a Gatsby package. you'll have a working local setup Gatsby is one of the favorite static site generators right now. With more than 42.000 GitHub stars it's a major contributor to the . I would even say, one of their flagships. Jamstack concept The and everybody is welcome to contribute to the project. source code lives on Github If you encounter some problem while following this tutorial. Take a look at the troubleshooting section, at the end of this post. Let's start. Set Up the Gatsby Project Go to the Gatsby GitHub project and . fork it The Gatsby project itself, all his packages, and the contributors documentation use Yarn as the package manager ( find out how to install Yarn ). Clone the forked repo to your local machine. git --depth=1 https://github.com/<your-username>/gatsby.git gatsby/ yarn run bootstrap yarn # clone the fork clone # go to gatsby cd # install and build the projects # check if everything works test Configure the Git upstream. git remote -v git remote add upstream https://github.com/gatsbyjs/gatsby.git git remote -v git fetch upstream git merge upstream/master # check your current remote configuration # configure the original gatsby repo as your remote upstream # check if the configuration has updated # download objects and refs from the upstream # integrate the upstream master into your local branch Create a branch. git checkout -b <feature-or-bugfix>/<feature-or-bugfix-name> # create the branch where you're going to work Create a symlink to a Gatsby package. git checkout -b <feature-or-bugfix>/<feature-or-bugfix-name>
```

Create a symlink to a Gatsby package.

```bash packages/gatsby-transformer-remark/ yarn link yarn watch # create the branch where you're going to work # change to the package directory (in this case a gatsby plugin) cd # create the global symlink to the package # start watching the package files for changes Add to . console.warn(`HELLO_GATSBY_DEVELOPMENT`) gatsby-transformer-remark { createNode, createParentChildLink } = actions; .warn( ); (
  node.internal.mediaType !== &&
  node.internal.mediaType !== ) { {};
} // in packages/gatsby-transformer-remark/src/on-node-create.js:16 // code... const // Add the next line before the if: console `HELLO_GATSBY_DEVELOPMENT` // We only care about markdown content. if `text/markdown` `text/x-markdown` return // more code... Set Up a Gatsby Site Now you're going to set up a Gatsby site as an end-user would do. This will help you to test the changes you're doing to the Gatsby project. Gatsby CLI generated sites and the Gatsby end-user documentation use npm. Open a new terminal and create a Gatsby test site. npm i -g gatsby-cli ../../../ gatsby new gatsby-test-site gatsby-test-site/ # install gatsby-cli # go back to your workspace directory cd # create a new gatsby site # change directory into site folder cd Link the Gatsby plugin inside . gatsby-test-site npm link gatsby-transformer-remark # link the local package (the package will not appear in your package.json) Add configuration to . gatsby-config.js plugins: [
  { : , : { commonmark: , footnotes: , pedantic: , gfm: , plugins: []
    }
  }
]; // In your gatsby-config.js resolve `gatsby-transformer-remark` options // CommonMark mode (default: true) true // Footnotes mode (default: true) true // Pedantic mode (default: true) true // GitHub Flavored Markdown mode (default: true) true // Plugins configs Start the . gatsby-test-site gatsby develop You should see the in the terminal. HELLO_GATSBY_DEVELOPMENT Congratulations! You have a working Gatsby environment. And you can start contributing to the open source project right now. Find first-time friendly issues on the . Gatsby project issues tab You got questions or want to start a conversation? Contact me on or ! Twitter GitHub By the way: don't forget to test and lint the package you're changing. yarn jest gatsby-transformer-remark

yarn lint # from the root of the gatsby repo Happy coding! Troubleshooting gatsby develop throws errors When executing on your throws errors: gatsby develop gatsby-test-site Clean up the Gatsby cache with . If the problem persists remove , and and do gatsby clean node_modules package-lock.json npm i To make it easier for the future add a script to your . package.json { : { : }
} "scripts" "clean:npm" "rm -rf ./node_modules/ && rm ./package-lock.json" Error: ENOSPC: System limit for number of file watchers reached If you get a error, while watching files on a Linux distribution: System limit for number of file watchers reached Increase the file watch limit of your OS Software Versions These are the software versions used for this tutorial: Gatsby: 2.19.32 Gatsby CLI: 2.8.27 gatsby-transformer-remark: 2.6.55 Node.js: 12.16.1 npm: 6.13.4 Kudos for learning with this tutorial. Follow me on GitHub or Twitter . If for some casual the indications did not work for you; drop me a line with the infringing points . I'll update the post correspondingly. References Setting up Your Local Dev Environment Debugging the Build Process Adding Markdown Pages gatsby-dev-cli Usage Example Configuring a Remote for a Fork Syncing a Fork More Posts Routing an External Registered Apex Domain to an AWS S3 Bucket Welcome Previously published at https://rubenbelow.com/posts/contributing-to-the-gatsby-project/

Too Long; Didn't Read

Making security fun one episode at a time

How to Contribute to the Gatsby Repository

Too Long; Didn't Read

Rubén Below

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Contribute to the Gatsby Repository

Too Long; Didn't Read

Rubén Below

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES