Kick off your project with this default boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
Have another more specific idea? You may want to check out our vibrant collection of official and community-created starters.
-
Create a Gatsby site.
Use the Gatsby CLI (install instructions) to create a new site, specifying the default starter.
# create a new Gatsby site using the default starter gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default
-
Start developing.
Navigate into your new siteβs directory and start it up.
cd my-default-starter/ gatsby develop
-
Open the source code and start editing!
Your site is now running at
http://localhost:8000
!Note: You'll also see a second link:
http://localhost:8000/___graphql
. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby Tutorial.Open the
my-default-starter
directory in your code editor of choice and editsrc/pages/index.js
. Save your changes and the browser will update in real time!
Deploy this starter with one click on Netlify:
A quick look at the top-level files and directories you'll see in a typical Gatsby project.
.
βββ node_modules
βββ src
βββ .gitignore
βββ gatsby-browser.js
βββ gatsby-config.js
βββ gatsby-node.js
βββ gatsby-ssr.js
βββ LICENSE
βββ package.json
βββ README.md
-
/node_modules
: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed. -
/src
: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template.src
is a convention for βsource codeβ. -
.gitignore
: This file tells git which files it should not track / not maintain a version history for. -
gatsby-browser.js
: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser. -
gatsby-config.js
: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins youβd like to include, etc. (Check out the config docs for more detail). -
gatsby-node.js
: This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. -
gatsby-ssr.js
: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering. -
LICENSE
: This Gatsby starter is licensed under the 0BSD license. This means that you can see this file as a placeholder and replace it with your own license. -
package.json
: A manifest file for Node.js projects, which includes things like metadata (the projectβs name, author, etc). This manifest is how npm knows which packages to install for your project.
Simple beginner Static App using Gatsby
Gatsby is available via the gatsby-cli JavaScript package. You have two ways you can use it:
Global install, run:
npm install gatsby-cli -g
, this will install the executable gatsby on your machine. You can now use Gatsby like so in your terminal: gatsby <command>
.
Use npx, npx is a tool that makes it possible to run executable files without first installing them on your machine. If you use this way of installing you need to prefix your calls to Gatsby like so npx gatsby <command>
.
gatsby new <project name> <optional GitHub URL>
: Use this command to generate a new project. It takes a name as a mandatory argument and optionally a GitHub URL as the second argument. Using the latter argument will create a Gatsby project based on an existing Gatsby project on GitHub.
cd <project name>
gatsby develop
: Start a development server where your project can be accessed. A development server is an HTTP server able to host your files so you can access them from your browser. You will find your Gatsby app running at http://localhost:8000. It will also start an instance of GraphQL, which is a graphical development tool you can use to explore the data available to your app and build queries. You can use GraphQL by browsing to http://localhost:8000/___graphql.
The output of this command should be:
http://localhost:8000.
View GraphQL, an in-browser IDE, to explore your site's data and schema
http://localhost:8000/___graphql```
If successful.
```gatsby build```: Create a deployable static representation of your app. All the resulting HTML, JavaScript, and CSS will end up in the sub-directory public.