56 lines
1.9 KiB
Markdown
56 lines
1.9 KiB
Markdown
|
---
|
|||
|
|
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 site’s 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/)
|