Gatsby Starter Github API

Gatsby Starter Github API is a Gatsby boilerplate template that sources data from the GitHub GraphQL API v4 through the gatsby-source-graphql plugin, producing a statically generated portfolio site. The starter takes a GitHub personal access token as configuration and outputs a site showing the authenticated user's profile and repositories, with a live demo hosted at https://gatsby-starter-github-api.netlify.com/.

What is Gatsby Starter Github API?

Gatsby Starter Github API is an open-source starter project by lundgren2 that demonstrates how to query GitHub's GraphQL API v4 (not REST) and pull that data into the Gatsby data layer. It uses the gatsby-source-graphql plugin to fetch viewer information and repositories, then renders them on a default Gatsby page at src/pages/index.js. The project includes a configuration file at config/site.js where you can adjust site-level settings, and an example environment file (.env.example) that you rename to .env and fill with your GITHUB_API_TOKEN. The resulting site is a static site that can be deployed anywhere Gatsby runs, including Netlify via the built-in deploy button.

Key Features

• gatsby-source-graphql integration — The template is built around the gatsby-source-graphql plugin, which queries the GitHub GraphQL API v4 directly from Gatsby's build step and makes the data available in GraphQL queries.
• GitHub token authentication — You must create a personal access token on GitHub and store it in .env as GITHUB_API_TOKEN; the starter reads this token to authorize API calls.
• Editable site configuration — Site-wide preferences live in config/site.js, letting you change what profile data and repositories are displayed without touching component code.
• Development workflow — Run gatsby develop to get live-reloading at http://localhost:8000 and a GraphiQL interface at http://localhost:8000/___graphql for experimenting with queries.
• Modifiable GraphQL query — The starter includes a sample query using a number_of_repos variable so you can control how many repositories the site fetches.
• One-click Netlify deployment — A Deploy to Netlify button is included in the README, allowing you to connect the GitHub repository and deploy automatically.
• Live demo — A working demo of the starter output is available at gatsby-starter-github-api.netlify.com, so you can see the final result before setting up locally.

Who is it for?

• Gatsby developers — Use this starter to learn how to integrate an external GraphQL API with gatsby-source-graphql and to see a complete working example with environment variables.
• Developers building a portfolio — If you want a site that automatically displays your GitHub profile and latest repositories, this starter gives you a base to customize.
• Open-source contributors — Showcase your public repositories on a static site without maintaining a separate backend, since the data is fetched at build time.

What can you do with it?

• Display repositories: Pull a configurable number of your public GitHub repositories and render them on the homepage.
• Show profile details: Fetch viewer data (such as your GitHub name) and display it using a GraphQL query on the viewer object.
• Experiment with GraphQL: Use the built-in GraphiQL interface at the ___graphql route to test queries against your GitHub data before editing the site code.

How does it work?

To get started, you create a new Gatsby site from this starter, generate a GitHub personal access token, copy .env.example to .env and paste the token in, then run gatsby develop. The starter reads your token, runs the GraphQL query against GitHub's API at build time, and generates a static site. After customizing the config file and source code, you can deploy it to Netlify with one click.