- Add 404 Page
- Adding Images, Fonts, and Files
- Browser Support
- Creating and Modifying Pages
- Create a source plugin
- Custom webpack config
- Customizing html.js
- Debugging HTML Builds
- Environment Variables
- Gatsby on Windows
- Managing Content with Netlify CMS
- How Gatsby Works with GitHub Pages
- Migrating from v0 to v1
- Path Prefix
- Proxying API Requests
- Using CSS-in-JS library Glamor
- Using CSS-in-JS library Styled Components
- Adding Markdown Pages
- Adding a List of Markdown Blog Posts
- Adding Tags and Categories to Blog Posts
- Creating Dynamically-Rendered Navigation
- Dropping Images into Static Folders
- Part One
- Part Two
- Part Three
- Part Four
- Recap of first half of the tutorial
- Data in Gatsby
- How Gatsby’s data layer uses GraphQL to pull data into components
- Our first GraphQL query
- Introducing GraphiQL
- Source Plugins
- Build a page with a GraphQL query
- Transformer Plugins
- Create a list of our site’s markdown files in src/pages/index.js
- Programmatically creating pages from data
How to contribute
Filing an issue
If you want your issue to be resolved quickly, please include in your issue:
- Gatsby version, node.js version, OS version
- The contents of your
package.jsonas well as your
gatsby-ssr.jsfiles depending on changes you’ve made there.
Gatsby uses a “monorepo” pattern to manage its many dependencies and relies on lerna and yarn to configure the repository for active development.
You can install the latest version of Gatsby by following these steps:
- Clone the repo, navigate to its directory.
- ensure you have the latest version of yarn installed (>= 1.0.2) https://yarnpkg.com/en/docs/install
- Install dependencies using
yarn run bootstrapin the root of the repo.
The usual contributing steps are:
- Fork the official repository.
- Clone your fork: git clone
- setup up repo and Install dependencies:
yarn run bootstrap
- Make sure tests are passing for you:
- Create a topic branch:
git checkout -b topics/new-feature-name
npm run watchfrom the root of the repo to first do an initial Babel build of all packages and then watch for changes to packages’ source code and compile these changes on-the-fly as you work.
- Install gatsby-dev-cli globally:
yarn global add gatsby-dev-cli
yarn installin each of the sites you’re testing with.
- For each of your Gatsby test sites, run the
gatsby-devcommand there to copy the built files from your cloned copy of Gatsby. It’ll watch for your changes to Gatsby packages and copy them into the site. For more detailed instructions see the gatsby-dev-cli README
- Add tests and code for your changes.
- Once you’re done, make sure all tests still pass:
- Commit and push to your fork.
- Create an pull request from your branch.
Contributing to the documentation.
Gatsby, unsurprisingly, uses Gatsby for it’s documentation website.
If you want to add/modify any Gatsby documentation, go to the docs folder on Github and use the file editor to edit and then preview your changes. Github then allows you to commit the change and raise a PR right in the UI. This is the easiest way you can contribute to the project!
However, if you want to make more changes to the website, that is, change layouts, add sections/pages, follow the steps below. You can then spin up your own instance of the Gatsby website and make/preview your changes before raising a pull request.
- Clone the repo and navigate to
yarnto install all of the website’s dependencies.
gatsby developto preview the website in
- The Markdown files for the documentation live in
/docsfolder. Make additions or modifications here.
- Make sure to double check your grammar and capitalise correctly.
- Commit and push to your fork.
- Create a pull request from your branch.
Gatsby uses Redux for managing state during development and building. It’s often helpful to see the flow of actions and builtup state for a site you’re working on or if adding new functionality to core. We leverage https://github.com/zalmoxisus/remote-redux-devtools and https://github.com/zalmoxisus/remotedev-server to give you use the Redux devtools extension for debugging Gatsby.
To use this, first install
in your browser. Then in your Gatsby repo, run
npm run remotedev. Then in your
site directory run
REDUX_DEVTOOLS=true gatsby develop. Depending on your
operating system and shell, you may need to modify how you set the
REDUX_DEVTOOLS environment variable.
At this point, your site will be sending Redux actions and state to the remote server.
To connect to this, you need to setup the devtools extension to talk to the remote server.
First open the remote devtools.
Then click settings along the bottom menu and set the host and port.
After this, the devtools extension should connect to the remote server and you’ll see actions start showing up.
Warning!! Lots of buginess. While having this available is extremely helpful, this setup is very buggy and fragile. There is a memory leak in the extension that’s triggered it seems every time you restart the Gatsby development server. Also the extension often, for no apparent reason, just won’t show any actions from the remote server. It’ll also often freeze up. The best solution seems to just be turning everything off and on again. Fixing up these tools would be very helpful for us and many others using these tools if someone wants to take this on!