### Run an Example Site with Gatsby CLI

Source: https://github.com/gatsbyjs/gatsby/blob/master/examples/README.md

Follow these steps to navigate into an example site directory, install its dependencies, and start the Gatsby development server.

```bash
cd gatsbygram
npm install
gatsby develop
```

--------------------------------

### Install Dependencies and Start Development

Source: https://github.com/gatsbyjs/gatsby/blob/master/examples/functions-sendgrid-email/README.md

Navigate to the example directory, install npm packages, and start the Gatsby development server. Access the function at http://localhost:8000/api/sendgrid.

```shell
cd examples/functions-sendgrid-email
npm install
npm run develop
```

--------------------------------

### Install Dependencies and Develop

Source: https://github.com/gatsbyjs/gatsby/blob/master/examples/functions-basic-form/README.md

Install project dependencies and start the development server.

```shell
cd examples/functions-basic-form
npm install
npm run develop
```

--------------------------------

### Install and Build Gatsby Example

Source: https://github.com/gatsbyjs/gatsby/blob/master/examples/using-redux-w-page-code-splitting/README.md

Navigate to the example directory, install dependencies, build the project, and serve it locally to test the Redux code-splitting pattern.

```shell
cd examples/using-redux-w-page-code-splitting
npm install
npm run build
npm run serve
```

--------------------------------

### Start the Example Gatsby Site

Source: https://github.com/gatsbyjs/gatsby/blob/master/examples/creating-source-plugins/README.md

Use this command to start the Gatsby development server for the example site.

```bash
yarn workspace example-site develop
```

--------------------------------

### Install Dependencies and Develop

Source: https://github.com/gatsbyjs/gatsby/blob/master/examples/functions-google-sheets/README.md

Install necessary packages and start the development server for local testing. Ensure your environment variables are set up correctly.

```shell
cd examples/functions-google-sheets
npm install
npm run develop
```

--------------------------------

### Install Dependencies

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/tutorial/creating-a-source-plugin/part-1/index.mdx

Run this command to install all necessary project dependencies before starting the development server.

```shell
yarn
```

--------------------------------

### Build All Gatsby Example Websites

Source: https://github.com/gatsbyjs/gatsby/blob/master/examples/README.md

Execute this bash script from the examples directory to automate the process of installing dependencies and building all example websites. Be aware that this process can take several hours.

```bash
cd examples
./build-all-examples.sh > build-results.txt
```

--------------------------------

### Checkout the Start Branch

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/tutorial/creating-a-source-plugin/part-1/index.mdx

After cloning the repository, switch to the 'start' branch to begin with a clean boilerplate. This branch contains the initial project setup for the tutorial.

```shell
git checkout start
```

--------------------------------

### Start Example Site Development

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/tutorial/creating-a-source-plugin/part-1/index.mdx

Run this script in a separate terminal to start the Gatsby development server for the example site. This allows independent restarting of the site process.

```shell
yarn develop:site
```

--------------------------------

### Install Dependencies and Start Development

Source: https://github.com/gatsbyjs/gatsby/blob/master/examples/functions-google-gmail/README.md

Installs necessary packages and starts the development server for the Gatsby project. Ensure you have set up Google OAuth credentials and environment variables before running.

```shell
cd examples/functions-google-gmail
npm install
npm run develop
```

--------------------------------

### Install Dependencies and Develop

Source: https://github.com/gatsbyjs/gatsby/blob/master/examples/functions-twilio-text/README.md

Install necessary packages and start the development server. Ensure Twilio environment variables are set in `.env.development`.

```shell
cd examples/functions-twilio-text
npm install
npm run develop
```

--------------------------------

### Install Dependencies and Start Gatsby Development Server

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/sourcing-from-flotiq.md

Navigate to your project directory, install necessary npm packages, and start the Gatsby development server.

```shell
cd my-blog-starter/
npm install
gatsby develop
```

--------------------------------

### Install Node Modules and Build

Source: https://github.com/gatsbyjs/gatsby/blob/master/benchmarks/markdown_table/README.md

Installs the necessary Node.js modules and then builds the project. This is a one-time setup followed by the build process.

```shell
yarn
yarn build
```

--------------------------------

### Install a Community Gatsby Starter

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/creating-a-starter.md

Example of installing a community-contributed starter from a GitHub repository using the Gatsby CLI. This demonstrates how users can leverage starters not hosted within the official Gatsby repository.

```bash
gatsby new my-app https://github.com/netlify-templates/gatsby-starter-netlify-cms
```

--------------------------------

### Install Dependencies and Develop

Source: https://github.com/gatsbyjs/gatsby/blob/master/examples/functions-hello-world/README.md

Use these commands to set up the project locally and start the development server. This allows you to test Gatsby Functions.

```shell
cd examples/functions-hello-world
npm install
npm run develop
```

--------------------------------

### Install Dependencies and Develop

Source: https://github.com/gatsbyjs/gatsby/blob/master/examples/functions-google-oauth/README.md

Installs necessary packages and starts the development server for the Gatsby project. Ensure environment variables are set in `.env.development`.

```shell
cd examples/functions-google-oauth
npm install
npm run develop
```

--------------------------------

### Start Gentics Mesh Demo Server

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/sourcing-from-gentics-mesh.md

Run a Gentics Mesh demo server using Docker. Ensure Docker is installed and accessible.

```shell
docker run -p 8080:8080 -d gentics/mesh-demo
```

--------------------------------

### Example Plugin Output

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/tutorial/creating-a-source-plugin/part-1/index.mdx

This output indicates that the compilation process for the API and plugin has started in watch mode and that the GraphQL server is running.

```shell
[develop:api   ] 14:48:03 - Starting compilation in watch mode...
[develop:api   ]
[develop:plugin] 14:48:03 - Starting compilation in watch mode...
[develop:plugin]
[develop:api   ] Server is running at http://localhost:4000/graphql
[develop:api   ]
[develop:api   ] 14:48:04 - Found 0 errors. Watching for file changes.
[develop:plugin]
[develop:plugin] 14:48:04 - Found 0 errors. Watching for file changes.
[develop:api   ] Server is running at http://localhost:4000/graphql

```

--------------------------------

### Set up a New Gatsby Site

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/tutorial/building-a-theme.md

Create a new Gatsby project and install necessary dependencies, including your custom theme. Replace the example theme name with your published theme.

```shell
mkdir theme-test
cd theme-test
npm init -y
npm install react react-dom gatsby @jlengstorf/gatsby-theme-events
```

--------------------------------

### Run a Gatsby Site Locally

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/how-to/local-development/starters.md

After creating a new site, navigate to the project directory, install dependencies, and start the development server.

```shell
cd {your-project-name}
npm install
gatsby develop
```

--------------------------------

### Example Gatsby Config with Metadata and Plugins

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/reference/config-files/gatsby-config.md

Illustrates a typical `gatsby-config.js` setup including `siteMetadata` and a list of plugins, some with configurations.

```javascript
module.exports = {
  siteMetadata: {
    title: `Gatsby`,
  },
  plugins: [
    `gatsby-transform-plugin`,
    {
      resolve: `gatsby-plugin-name`,
      options: {
        optionA: true,
        optionB: `Another option`,
      },
    },
  ],
}
```

--------------------------------

### Example Plugin README Structure

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/contributing/docs-contributions/how-to-write-a-plugin-readme.md

This markdown structure provides a template for a plugin's README file. It includes sections for description, installation, options, usage, and contribution.

```markdown
## Description

Include a summary of what this plugin accomplishes. Is there a demo site that shows how this plugin operates? If so, include a link to the deployed demo site and/or its source code here.

Themes are considered plugins in the Gatsby ecosystem and should follow this README as well. Note that themes include multiple READMEs. One inside the theme directory with configuration instructions, one inside the example project directory, and one in the root of the repository which will follow this guide.

### Dependencies (optional)

Are there any plugins that must be installed in order to make this plugin work? If so, please include a list of those plugins and links to their pages here.

### Learning Resources (optional)

If there are other tutorials, docs, and learning resources that are necessary or helpful to someone using this plugin, please link to those here.

## How to install

Please include installation instructions here.

Gatsby documentation uses `npm` for installation. This is the recommended approach for plugins as well.

If the plugin is a theme that needs to use `yarn`, please point to [the documentation for switching package managers](/docs/reference/gatsby-cli/#how-to-change-your-default-package-manager-for-your-next-project) in addition to the `yarn`-based instructions.

## Available options (if any)

## When do I use this plugin?

Include stories about when this plugin is helpful and/or necessary.

## Examples of usage

This usually shows a code example showing how to include this plugin in a site's `config.js` file.

    code example

See this [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code) on how to format code examples.

This section could also include before-and-after examples of data when the plugin is enabled, if applicable.

## How to query for data (source plugins only)

If this is a source plugin README, source plugins ought to allow people to query for data within their Gatsby site. Please include code examples to show how to query for data using your source plugin.

If this is a theme that requires data in a specific format in order to match an existing query, include those examples here.

## How to run tests

## How to develop locally

## How to contribute

If you have unanswered questions, would like help with enhancing or debugging the plugin, it is nice to include instructions for people who want to contribute to your plugin.
```

--------------------------------

### Markdown Structure for Starter README

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/contributing/docs-contributions/how-to-write-a-starter-readme.md

This markdown structure provides a template for a starter's README file, guiding users through installation, features, and next steps.

```markdown
## Name of starter

## Quick start

Give instructions on how to install this starter

## Features

Tell features comes with this starter. This is a chance to give users a brief tour of how to use this starter effectively.

## Next steps

Any tips on how to deploy this starter? What CMS to use? Other fun ways to build on top of the starter? Say those here!
```

--------------------------------

### Install gatsby-plugin-transition-link

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/how-to/adding-common-features/adding-page-transitions-with-plugin-transition-link.md

Install the plugin using npm.

```shell
npm install gatsby-plugin-transition-link
```

--------------------------------

### Install a Starter from a Local Path

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/starters.md

Use this command to install a starter from a local directory. Provide the relative or absolute path to the starter folder. Dependencies are installed and Git history is cleared.

```shell
gatsby new [SITE_DIRECTORY] [LOCAL_PATH_TO_STARTER]
```

```shell
gatsby new blog ./Code/my-local-starter
```

--------------------------------

### Navigate to Example Directory

Source: https://github.com/gatsbyjs/gatsby/blob/master/examples/using-multiple-themes/README.md

Change your current directory to the specific example you want to run.

```shell
cd gatsby/examples/using-multiple-themes
```

--------------------------------

### Install a Gatsby Starter from GitHub

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/creating-a-starter.md

Use the Gatsby CLI to install a new site using a starter hosted on GitHub. Replace `<site-name>` with your desired project name and `<starter-url>` with the GitHub repository URL of the starter.

```bash
gatsby new <site-name> <starter-url>
```

--------------------------------

### Install Dependencies

Source: https://github.com/gatsbyjs/gatsby/blob/master/examples/functions-airtable-form/README.md

Install necessary packages for the Gatsby Functions Airtable form example.

```shell
cd examples/functions-airtable-form
npm install
```

--------------------------------

### Install Dependencies and Develop Gatsby Site

Source: https://github.com/gatsbyjs/gatsby/blob/master/examples/using-multiple-local-plugins/README.md

Commands to install project dependencies and start the Gatsby development server.

```shell
cd gatsby-site-using-local-plugins
npm install
gatsby develop
```

--------------------------------

### Install a Starter from GitHub Username and Repo

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/starters.md

This command allows installation of a starter by specifying the GitHub username and repository name. It also installs dependencies and clears Git history.

```shell
gatsby new [SITE_DIRECTORY] [GITHUB_USER_NAME/REPO]
```

```shell
gatsby new blog gatsbyjs/gatsby-starter-blog
```

--------------------------------

### Benchmark Postinstall Script Example

Source: https://github.com/gatsbyjs/gatsby/blob/master/benchmarks/README.md

Example of a postinstall script for benchmarks that require code generation. It cleans previous runs and then generates new code.

```text
"postinstall": "del-cli ./generated && gatsby clean && npm run generate"
```

--------------------------------

### Install a Starter from a Git Repository URL

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/starters.md

Use this command to clone a starter from any public Git repository URL. It installs dependencies and clears Git history.

```shell
gatsby new [SITE_DIRECTORY] [URL_OF_STARTER_GIT_REPO]
```

```shell
gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
```

--------------------------------

### Example .env.development file

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/how-to/local-development/environment-variables.md

This is an example of how your .env.development file might look, containing API URLs and keys.

```text
GATSBY_API_URL=https://dev.example.com/api
API_KEY=927349872349798
```

--------------------------------

### Create a new Gatsby site with the hello world starter

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/how-to/styling/global-css.md

Use this command to create a new Gatsby site for practicing global styles.

```shell
gatsby new global-styles https://github.com/gatsbyjs/gatsby-starter-hello-world
```

--------------------------------

### Example contentTypeFilter configuration

Source: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-contentful/README.md

Use contentTypeFilter to limit the content types created in GraphQL, reducing memory usage. This example excludes content types starting with 'page'.

```javascript
contentTypeFilter: contentType => !contentType.sys.id.startsWith('page')
```

--------------------------------

### Copy .env.example to .env

Source: https://github.com/gatsbyjs/gatsby/blob/master/benchmarks/source-strapi/README.md

Create a local environment configuration file by copying the example template.

```shell
cp .env.example .env
```

--------------------------------

### Add Plugins with and without Options

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/reference/config-files/gatsby-config.md

Demonstrates how to include both simple plugin names and plugins with configuration options in the `plugins` array.

```javascript
module.exports = {
  plugins: [
    `gatsby-transform-plugin`,
    {
      resolve: `gatsby-plugin-name`,
      options: {
        optionA: true,
        optionB: `Another option`,
      },
    },
  ],
}
```

--------------------------------

### Install Theme from npm

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/how-to/plugins-and-themes/converting-a-starter.md

After publishing your theme to npm, install it into your starter project using npm.

```shell
npm install gatsby-theme-NAME
```

--------------------------------

### Initial Post Query

Source: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-wordpress/docs/tutorials/querying-data.md

This is an example of a query to fetch a single WordPress post along with its author details. It's a starting point before introducing fragments.

```graphql
query ($id: String) {
  wpPost(id: { eq: $id }) {
    id
    title
    uri
    content
    author {
      node {
        id
        name
        description
      }
    }
  }
}
```

--------------------------------

### Configure Development Environment

Source: https://github.com/gatsbyjs/gatsby/blob/master/examples/ecommerce-tutorial-with-stripe/README.md

Copy the example environment file and add your Stripe API keys for local development.

```bash
cp .env.example .env.development
```

--------------------------------

### Basic Hello World Function

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/how-to/cloud/deploying-functions-on-gatsby-cloud.md

A simple example of a serverless function that returns a JSON response. This can be used as a starting point for creating API endpoints.

```javascript
const sample = (req, res) => {
    res.status(200).json({"message": "Hello, World!"})
};

export default sample;
```

--------------------------------

### StaticImage GraphQL Query Example

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/how-to/images-and-media/using-gatsby-plugin-image.md

This GraphQL query can be used to verify if your StaticImage setup is returning expected data. Check for results with `.cache/caches/gatsby-plugin-image` in the path.

```graphql
query MyQuery {
  allFile {
    nodes {
      relativePath
    }
  }
}
```

--------------------------------

### Set Number of Pages and Install Dependencies

Source: https://github.com/gatsbyjs/gatsby/blob/master/benchmarks/md/README.md

Configure the number of pages for the benchmark by exporting NUM_PAGES. Then, install project dependencies and build the project.

```bash
$ export NUM_PAGES=1024
$ yarn install    # or npm install
$ gatsby build    # or npm run build
```

--------------------------------

### Visit Text Nodes with unist-util-visit

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/tutorial/remark-plugin-tutorial.md

This example shows how to use `unist-util-visit` to find all 'text' nodes in a Markdown AST and log them to the console. Ensure `unist-util-visit` is installed in your plugin.

```javascript
var remark = require("remark")
var visit = require("unist-util-visit")

var tree = remark().parse("Some _emphasis_, **importance**, and `code`.")

visit(tree, "text", visitor)

function visitor(node) {
  console.log(node)
}
```

--------------------------------

### Import Example Data into Flotiq Account

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/sourcing-from-flotiq.md

Run this Node.js script to populate your Flotiq account with example blog posts and an image. Ensure your Full Access API key is in .env for this operation.

```shell
node ./.flotiq/importExample.js
```

--------------------------------

### Use StaticImage Component

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/reference/release-notes/image-migration-guide.md

Example of using the StaticImage component for images with static queries. Ensure gatsby-source-filesystem is installed if using remote image URLs or relative paths.

```javascript
import { StaticImage } from "gatsby-plugin-image"

const HomePage = () => (
        <StaticImage src="./example.jpg" alt="please include an alt" />
    )
  }
```

--------------------------------

### Install Dependencies

Source: https://github.com/gatsbyjs/gatsby/blob/master/benchmarks/gabe-csv-markdown/README.md

Run this command to install project dependencies.

```shell
yarn install
```

```shell
npm install
```

--------------------------------

### Product HTML with Snipcart Data Attributes

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/tutorial/e-commerce-with-datocms-and-snipcart/index.md

Use data-item-* attributes on HTML elements to define product details for Snipcart. This example shows the initial setup in index.js.

```jsx
render={data => (
  <Layout site={data.site}>
    <div className="Catalogue">
      {
        data.products.edges.map(({ node: product }) => (
          <div className="Catalogue__item" key={product.id}>
            <div
              className="Product snipcart-add-item"
              data-item-id={product.id}
              data-item-price={product.price}
              data-item-image={product.image.url}
              data-item-name={product.name}
              data-item-url={`/`}
            >
              <div className="Product__image">
                <Img sizes={product.image.sizes} />
              </div> <div className="Product__details">
                <div className="Product__name">
                  {product.name}
                  <div className="Product__price">
                    ${product.price}
                  </div>
                </div>
                <span className="Product__buy">Buy now</span>
              </div>
            </div>
          </div>
        ))
      }
    </div>
  </Layout>
)}
```

--------------------------------

### Install Dependencies

Source: https://github.com/gatsbyjs/gatsby/blob/master/benchmarks/gabe-fs-markdown-route-api/README.md

Run this command to install project dependencies.

```shell
yarn
or
npm install
```

--------------------------------

### Cloning and Setting Up Gatsby Monorepo

Source: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-design-tokens/README.md

Follow the official guide to clone, fork, and set up the Gatsby monorepo for local development. This includes installing dependencies and running tests.

```shell
# clone the repo/your fork
git clone https://github.com/gatsbyjs/gatsby.git
cd gatsby

# set up the repo, install dependencies for `packages`, and build the latter
yarn run bootstrap

# make sure tests are passing
yarn test

# create a new feature branch
git checkout -b topics/new-feature-name
```

--------------------------------

### Initialize Git Repository and Push to GitHub

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/tutorial/blog-netlify-cms-tutorial/index.md

Set up a new Git repository, commit your project files, and push them to a remote GitHub repository.

```shell
git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/[your-username]/[your-repo-name].git
git push -u origin master
```

--------------------------------

### Start and Connect to Docker Container

Source: https://github.com/gatsbyjs/gatsby/blob/master/benchmarks/docker-runner/README.md

Starts the Docker container and immediately connects to it. This is a convenient command for accessing the container's shell.

```bash
yarn docker:start-and-connect
```

--------------------------------

### Basic gatsby-config.js Setup

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/how-to/sourcing-data/sourcing-from-wordpress.md

This snippet shows the basic structure of a gatsby-config.js file, including siteMetadata and the initial plugins array. It's a starting point before adding specific data sourcing plugins.

```javascript
module.exports = {
  siteMetadata: {
    title: "Gatsby Default Starter",
  },
  plugins: ["gatsby-plugin-react-helmet"],
  ...
}
```

--------------------------------

### Create Gatsby Site with Starter Template

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/tutorial/blog-netlify-cms-tutorial/index.md

Use the Gatsby CLI to create a new project from a specific starter template.

```shell
gatsby new [your-project-name] https://github.com/thomaswangio/gatsby-personal-starter-blog
```

--------------------------------

### Compose Apollo Links for Production Network Setup

Source: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-graphql/README.md

Configure custom Apollo Links using the `createLink` option to add retries, error handling, and logging to GraphQL requests. This example composes a `RetryLink` with the default `HttpLink`.

```javascript
// gatsby-config.js
const { createHttpLink, from } = require(`@apollo/client`)
const { RetryLink } = require(`@apollo/client/link/retry`)

const retryLink = new RetryLink({
  delay: {
    initial: 100,
    max: 2000,
    jitter: true,
  },
  attempts: {
    max: 5,
    retryIf: (error, operation) =>
      Boolean(error) && ![500, 400].includes(error.statusCode),
  },
})

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-graphql",
      options: {
        typeName: "SWAPI",
        fieldName: "swapi",
        url: "https://api.graphcms.com/simple/v1/swapi",

        // `pluginOptions`: all plugin options
        //   (i.e. in this example object with keys `typeName`, `fieldName`, `url`, `createLink`)
        createLink: pluginOptions =>
          from([retryLink, createHttpLink({ uri: pluginOptions.url })]),
      },
    },
  ],
}
```

--------------------------------

### Gatsby Image Component Usage Example

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/reference/built-in-components/gatsby-image.md

Demonstrates how to use the Gatsby Image component with various props for customization. Includes options for alt text, disabling fade-in, custom classes, placeholder styles, and event handlers for load, start load, and errors. Also shows how to set the HTML tag and loading behavior.

```jsx
<Img
  fluid={data.file.childImageSharp.fluid}
  alt="Cat taking up an entire chair"
  fadeIn={false}
  className="customImg"
  placeholderStyle={{ `backgroundColor`: `black` }}
  onLoad={() => {
    // do loading stuff
  }}
  onStartLoad={({ wasCached }) => {
    // do stuff on start of loading
    // optionally with the wasCached boolean parameter
  }}
  onError={(error) => {
    // do error stuff
  }}
  Tag="custom-image"
  loading="eager"
/>
```

--------------------------------

### Create a new default Gatsby site and start development server

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/how-to/styling/global-css.md

Commands to set up a new Gatsby site for demonstrating global styles without a layout component.

```shell
gatsby new global-style-tutorial https://github.com/gatsbyjs/gatsby-starter-default
cd global-style-tutorial
npm run develop
```

--------------------------------

### Install gatsby-plugin-subfont

Source: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-subfont/README.md

Install the plugin using npm. If you need to run font subsetting locally, ensure Python is installed and install the necessary Python packages.

```bash
npm install gatsby-plugin-subfont
```

```bash
pip install fonttools brotli zopfli
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/tutorial/getting-started/part-1/index.mdx

Before creating a new site, change your current directory to where you want the site to be created. For example, navigating to the Desktop.

```shell
cd Desktop
```

--------------------------------

### Create a new Gatsby site with the blog starter

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/adding-search-with-algolia.md

Use this command to create a new Gatsby project based on the Gatsby starter blog, which will be used for indexing.

```shell
gatsby new gatsby-algolia-guide https://github.com/gatsbyjs/gatsby-starter-blog
```

--------------------------------

### Install gatsby-transformer-yaml

Source: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-transformer-yaml/README.md

Install the plugin using npm. Ensure gatsby-source-filesystem is also installed and configured.

```bash
npm install gatsby-transformer-yaml
```

--------------------------------

### Verify Node.js Installation

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/how-to/local-development/gatsby-on-linux.md

Check the installed Node.js version to confirm the nvm installation was successful.

```shell
node -v
```

--------------------------------

### Create New Gatsby Site with Builder.io Starter

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/sourcing-from-builder-io.md

Use this command to quickly set up a new Gatsby project pre-configured with Builder.io integration.

```shell
gatsby new my-builder-site https://github.com/BuilderIO/gatsby-starter-builder
```

--------------------------------

### Create Gatsby Site with Default Starter

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/adding-search-with-js-search.md

Use this command to create a new Gatsby site using the official hello-world starter.

```shell
gatsby new js-search-example https://github.com/gatsbyjs/gatsby-starter-default
```

--------------------------------

### Install gatsby-remark-embed-snippet

Source: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-embed-snippet/README.md

Install the plugin and its peer dependencies. Ensure prismjs is also installed for syntax highlighting.

```shell
npm install gatsby-remark-embed-snippet gatsby-remark-prismjs gatsby-transformer-remark prismjs
```

--------------------------------

### Install Development Dependencies

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/how-to/testing/end-to-end-testing.md

Installs TypeScript as a dev dependency. Ensure you have TypeScript installed for type checking.

```shell
npm install --save-dev typescript
```

--------------------------------

### Install Curl (Ubuntu/Debian)

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/tutorial/getting-started/part-0/index.mdx

Install curl, a utility for transferring data, which is needed to download the nvm installation script.

```shell
sudo apt-get install curl
```

--------------------------------

### Install Dependencies and Run Benchmark

Source: https://github.com/gatsbyjs/gatsby/blob/master/benchmarks/markdown_id/README.md

Installs project dependencies and runs the markdown benchmark. Use `yarn benchnb` to run the benchmark with pre-generated pages.

```shell
yarn
yarn bench
```

--------------------------------

### Configure Main and Files in package.json

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/how-to/previews-deploys-hosting/creating-an-adapter.md

Specify the main entry point (`dist/index.js`) and the files to include in the package (`dist/*`) after compilation.

```json
{
  "main": "./dist/index.js",
  "files": [
    "./dist/*"
  ]
}
```

--------------------------------

### Install Xcode Command Line Tools

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/tutorial/getting-started/part-0/index.mdx

Install necessary command line tools for development on macOS. This is a prerequisite for some installations.

```shell
xcode-select --install
```

--------------------------------

### CodeSandbox Multi-File Example Link

Source: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-code-repls/README.md

Demonstrates how to create a CodeSandbox link for an example involving multiple files.

```html
[Try it on
CodeSandbox](codesandbox://my-example/index.js,my-example/util.js,my-example/index.css)
```

--------------------------------

### Verify Node.js and npm Installation

Source: https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/tutorial/getting-started/part-0/index.mdx

Confirms that Node.js and npm have been installed correctly by checking their versions. The output should display the installed version numbers.

```shell
node --version
npm --version
```

--------------------------------

### Create Gatsby Site with Minimal Starter

Source: https://github.com/gatsbyjs/gatsby/blob/master/integration-tests/functions/README.md

Use the Gatsby CLI to create a new site, specifying the minimal starter.

```shell
# create a new Gatsby site using the minimal starter
npm init gatsby
```