⚠️ This lesson is retired and might contain outdated information.

Use npm init gatsby to create an initial Gatsby site

Laurie Barth
InstructorLaurie Barth
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 2 years 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.

egghead
egghead
~ 5 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today