Use npm init gatsby to create an initial Gatsby site

Laurie Barth
InstructorLaurie Barth

Share this video with your friends

Send Tweet
Published a year ago
Updated 9 months ago

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.

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.