Add guide for Gatsby.js Starters (#30913)

* Add guide for Gatsby.js Starters

* Fix incorrect directory name
pull/30249/head^2
Dorell James Galang 2019-07-02 23:58:47 +08:00 committed by Paul Gamble
parent 40504e30b2
commit 27f4c1bdd0
1 changed files with 55 additions and 0 deletions

View File

@ -0,0 +1,55 @@
---
title: Gatsby.js Starters
---
## Gatsby.js Starters
Running `gatsby new` installs the default Gatsby starter. There are many other official and community starters you can use to kickstart building your Gatsby site.
### Default Starter
Kick off your project with this default boilerplate. This barebones starter ships with the main Gatsby configuration files you might need.
#### Quick start
1. **Install the Gatsby CLI.**
The Gatsby CLI helps you create new sites using Gatsby starters (like this one!)
```sh
# install the Gatsby CLI globally
npm install -g gatsby-cli
```
2. **Create a Gatsby site.**
Use the Gatsby CLI to create a new site, specifying the default starter.
```sh
# create a new Gatsby site using the default starter
gatsby new website
```
3. **Start developing.**
Navigate into your new sites directory and start it up.
```sh
cd website/
gatsby develop
```
4. **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](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql).*
Open the `website` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!
### Other Starters
Other starters offer more options and features but with depending on your working knowledge, working on these starters might not be pretty straightforward for beginners. [Check other official and community starters here](https://www.gatsbyjs.org/starters/).
### More Information:
For tutorials and more information check out the Gatsby.js official site: [Gatsby.js official site](https://www.gatsbyjs.org/tutorial/)