Use npm init gatsby to create an initial Gatsby site

Add a Shared Layout Component to a Gatsby Site

Create an Accessible SEO Component using React Helmet

Use Gatsby Plugins to Source and Transform MDX Files

Use Gatsby's File System Route API to Generate Pages for Each MDX File

Use MDXRenderer to Render MDX Content in a Gatsby Site

Add a List of Posts using a GraphQL Page Query

Add Theme UI to a Gatsby Site using gatsby-plugin-theme-ui and theme-ui

Add Support for Syntax Highlighting in a Gatsby Site with @theme-ui/prism

Render Performant Images with the Gatsby StaticImage Component 

Process Images and Render them using GatsbyImage

Add Image Support to SEO Component

Build a Developer Blog with Gatsby

Use `npm init gatsby` with the `y` flag to create an initial Gatsby site. The site includes a `package.json` with Gatsby, React, and `react-dom` installed, an empty `gatsby-config.js` file, and two files in `src/pages` - `index.js` and `404.js`.

The repo also comes with a minimal gitignore file and README.

https://app.egghead.io/api/v1/lessons/gatsby-use-npm-init-gatsby-to-create-an-initial-gatsby-site/subtitles

Instructor: [0:03] Run npm init gatsby. Use the -y flag and pass the directory name you'd like to use for your project. This will create an initial Gatsby site in that directory. Navigate to it and open up your text editor. Run npm run develop in order to see the site available on localhost.

[0:32] The initial site includes the package.json with React, ReactDOM and Gatsby packages installed, an empty gatsby-config file and two pages, an index page and a 404 page that will be rendered every time a user attempts to navigate to a URL that does not exist in your site.

[1:01] We'll start by changing the index.js file. It comes with a number of expected documentation sites that might be useful for you when learning how to use Gatsby. We'll remove all of this as well as all of the JSX that renders it. Instead, we'll make a simple div that says, "Hello World." Save and watch the new page render.

[1:33] We'll do the same thing for the 404 page, for practice. Remove everything that's already there and update it with a simple div that says, "The big empty. This page does not exist." If we navigate to a page that doesn't exist, we should see our 404 page with the text that we've just added. We'll try no page as an example.

Use npm init gatsby to create an initial Gatsby site

Share this video with your friends

Course

Build a Developer Blog with Gatsby