Get to Know Gatsby Building Blocks

Posted byDそんほんすon 2021/05/22カテゴリ:技術

In the previous section, you prepared your local development environment by installing the necessary software and creating your first Gatsby site using the “hello world” starter. Now, take a deeper dive into the code generated by that starter.


Using Gatsby starters

In tutorial part zero, you created a new site based on the “hello world” starter using the following command:

Copy
copy code to clipboard
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

When creating a new Gatsby site, you can use the following command structure to create a new site based on any existing Gatsby starter:

Copy
copy code to clipboard
gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]

If you omit a URL from the end, Gatsby will automatically generate a site for you based on the default starter. For this section of the tutorial, stick with the “Hello World” site you already created in tutorial part zero. You can learn more about modifying starters in the docs.


✋ Open up the code

In your code editor, open up the code generated for your “Hello World” site and take a look at the different directories and files contained in the ‘hello-world’ directory. It should look something like this:

Note: Again, the editor shown here is Visual Studio Code. If you’re using a different editor, it will look a little different.