Skip to content

Commit 3fe6287

Browse files
tlentshannonbux
authored andcommitted
Improvements to tutorial part zero (#9522)
* Improved headers and clarity in tutorial part zero * Further simplify headings * Improve Git section * Improve the summary * Add optional link explaining git * Remove other reference to learn about git * Fix titles and links to match new headings * Clarify that git only needs to be installed to use Gatsby * Mention that the git handbook also explains Github * Revert "Fix titles and links to match new headings" This reverts commit 511bc37. * Revert the headings back to having verbs * Reword references to Gatsby CLI to make it clear it is not the only Gatsby CLI * Change 'Create a Gatsby site' heading back * Fix title to match heading * Clarify git sentence * Add missing space
1 parent faf6894 commit 3fe6287

File tree

2 files changed

+32
-28
lines changed

2 files changed

+32
-28
lines changed

docs/tutorial/part-zero/index.md

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Set Up Your Development Environment
33
typora-copy-images-to: ./
44
---
55

6-
Before you start to code, you’ll need to familiarize with some core web technologies, and make sure that you have installed all required software tools.
6+
Before you start building your first Gatsby site, you’ll need to familiarize yourself with some core web technologies and make sure that you have installed all required software tools.
77

88
## Overview of core technologies
99

@@ -17,7 +17,7 @@ It’s not necessary to be an expert with these already — if you’re not, don
1717

1818
> 💡 (Optional!) For a comprehensive introduction to what a website is--including an intro to HTML and CSS--check out “[**Building your first web page**](https://learn.shayhowe.com/html-css/building-your-first-web-page/)”. It’s a great place to start learning about the web. For a more hands-on introduction to [**HTML**](https://www.codecademy.com/learn/learn-html), [**CSS**](https://www.codecademy.com/learn/learn-css), and [**JavaScript**](https://www.codecademy.com/learn/introduction-to-javascript), check out the tutorials from Codecademy. [**React**](https://reactjs.org/tutorial/tutorial.html) and [**GraphQL**](http://graphql.org/graphql-js/) also have their own introductory tutorials.
1919
20-
## Familiarize with command line
20+
## Familiarize yourself with the command line
2121

2222
The command line is a text-based interface used to run commands on your computer. You’ll also often see it referred to as the terminal. In this tutorial we’ll use both interchangeably. It’s a lot like using the Finder on a Mac or Explorer on Windows. Finder and Explorer are examples of graphical user interfaces (GUI). The command line is a powerful, text-based way to interact with your computer.
2323

@@ -27,13 +27,13 @@ Take a moment to locate and open up the command line interface (CLI) for your co
2727
2828
## Install Node.js
2929

30-
Node.js is an environment that can run JavaScript code. Gatsby is built with Node.js. To get up and running with Gatsby, you’ll need to have a recent version installed on your computer.
30+
Node.js is an environment that can run JavaScript code outside of a web browser. Gatsby is built with Node.js. To get up and running with Gatsby, you’ll need to have a recent version installed on your computer.
3131

3232
### ⌚ Download Node.js
3333

3434
Visit the [**Node.js site**](https://nodejs.org/) and follow the instructions to download and install the recommended version for your operating system. Once you have followed the installation steps, make sure everything was installed properly:
3535

36-
### Check your Node.js installation
36+
### Check your Node.js installation
3737

3838
1. Open up your terminal.
3939
2. Run `node --version`. (If you’re new to the command line, “run `command`” means “type `node --version` in the command prompt, and hit the Enter key”. From here on, this is what we mean by “run `command`”).
@@ -43,7 +43,7 @@ The output of each of those commands should be a version number. Your versions m
4343

4444
![Check node and npm versions in terminal](01-node-npm-versions.png)
4545

46-
## Familiarize with npm
46+
## Familiarize yourself with npm
4747

4848
npm is a JavaScript package manager. A package is a module of code that you can choose to include in your projects. If you just downloaded and installed Node.js, npm was installed with it!
4949

@@ -57,15 +57,19 @@ npm has three distinct components: the npm website, the npm registry, and the np
5757
5858
## Install Git
5959

60-
Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. When you install a Gatsby "starter" site, Gatsby uses Git behind the scenes to download and install the required files for your starter.
60+
Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. When you install a Gatsby "starter" site, Gatsby uses Git behind the scenes to download and install the required files for your starter. You will need to have Git installed to set up your first Gatsby site.
6161

62-
If your system does not have Git installed, install it from the [**Git downloads page**](https://git-scm.com/downloads).
62+
The steps to download and install Git depend on your operating system. Follow the guide for your system:
6363

64-
## Install the Gatsby CLI
64+
- [Install Git on macOS](https://www.atlassian.com/git/tutorials/install-git#mac-os-x)
65+
- [Install Git on Windows](https://www.atlassian.com/git/tutorials/install-git#windows)
66+
- [Install Git on Linux](https://www.atlassian.com/git/tutorials/install-git#linux)
6567

66-
The Gatsby CLI tool lets you quickly create new Gatsby-powered sites and run commands for developing Gatsby sites. It is a published npm package. You can install the Gatsby CLI from the npm registry, using the npm CLI.
68+
> 💡 You will not need to know Git to complete this tutorial, but it is a very useful tool. If you are interested in learning more about version control, Git, and Github, check out Github's [Git Handbook](https://guides.github.com/introduction/git-handbook/).
6769
68-
### ✋ Install the Gatsby CLI tool
70+
## Install Gatsby CLI
71+
72+
The Gatsby CLI tool lets you quickly create new Gatsby-powered sites and run commands for developing Gatsby sites. It is a published npm package. You can install Gatsby CLI from the npm registry, using the npm CLI.
6973

7074
1. Navigate to the terminal.
7175
2. Run `npm install --global gatsby-cli`.
@@ -78,11 +82,11 @@ A couple of different things are happening here.
7882
npm install --global gatsby-cli
7983
```
8084

81-
- We’re using the npm CLI to install the Gatsby CLI. `npm install` is the command used to install packages.
82-
- When installing npm packages, you can install them globally or in a specific project. (We’ll learn about the latter, later). The `--global` flag signals that we want the first option, to install globally. This means our package will be available to us on our computer, outside of the context of a specific project.
85+
- You're using the npm CLI to install Gatsby CLI. `npm install` is the command used to install packages.
86+
- When installing npm packages, you can install them globally or in a specific project. (You’ll learn about the latter, later). The `--global` flag signals that we want the first option to install globally. This means your package will be available to you on your computer, outside of the context of a specific project.
8387
- `gatsby-cli` is the exact name our desired package is registered with on the [**npm registry**](https://www.npmjs.com/package/gatsby-cli).
8488

85-
### Check your Gatsby CLI installation
89+
### Check your Gatsby CLI installation
8690

8791
1. Open up your terminal.
8892
2. Run `gatsby --version`.
@@ -92,11 +96,9 @@ npm install --global gatsby-cli
9296

9397
If successfully installed, running `gatsby --version` should return a version number and running `gatsby --help` will show different commands available to you using the `gatsby-cli` tool.
9498

95-
## Create a site
96-
97-
Now you can use the gatsby-cli tool to create your first Gatsby site. Using the tool, you can use “starters” (partially built sites with some default configuration) to help you get moving faster on creating a certain type of site. The “Hello World” starter you’ll be using here is a starter with the bare essentials needed for a [Gatsby](/) site.
99+
## Create a Gatsby site
98100

99-
### ✋ Create a Gatsby site
101+
Now you are ready to use Gatsby CLI tool to create your first Gatsby site. Using the tool, you can download “starters” (partially built sites with some default configuration) to help you get moving faster on creating a certain type of site. The “Hello World” starter you’ll be using here is a starter with the bare essentials needed for a Gatsby site.
100102

101103
1. Open up your terminal.
102104
2. Run `gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world`. (_Note: Depending on your download speed, the amount of time this takes will vary. For brevity's sake, the gif below was paused during part of the install_).
@@ -117,7 +119,7 @@ gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
117119
- Starting with `gatsby` says, ‘hey, we want to use the gatsby-cli tool!’.
118120
- `new` is a gatsby command to create a new Gatsby project.
119121
- Here, `hello-world` is an arbitrary title — you could pick anything. The CLI tool will place the code for your new site in a new folder called “hello-world”.
120-
- Lastly, the GitHub URL specified points to a code repository that holds the starter code you want to use. If you aren't familiar yet with Git and GitHub, you can [learn more here](https://try.github.io/).
122+
- Lastly, the GitHub URL specified points to a code repository that holds the starter code you want to use.
121123

122124
```bash
123125
cd hello-world
@@ -131,7 +133,7 @@ gatsby develop
131133

132134
- This command starts a development server. You will be able to see and interact with your new site in a development environment — local (on your computer, not published to the internet).
133135

134-
### View your site locally
136+
### View your site locally
135137

136138
Open up a new tab in your browser and navigate to [**http://localhost:8000**](http://localhost:8000/).
137139

@@ -147,11 +149,11 @@ You’ll be able to visit the site locally at [**_http://localhost:8000_**](http
147149

148150
A code editor is a program designed specifically for editing computer code. There are many great ones out there. If you haven't worked with a code editor before, we recommend the editor used throughout this tutorial -- [**VS Code**](https://code.visualstudio.com/).
149151

150-
### Download VS Code
152+
### Download VS Code
151153

152-
Visit the [VS Code site](https://code.visualstudio.com/#alt-downloads) and download the version appropriate for your platform.
154+
Gatsby documentation sometimes includes screenshots of code editors; these screenshots show the VS Code editor, so if you don't have a preferred code editor yet, using VS Code will make sure that your screen looks just like the screenshots in the tutorial and docs. If you choose to use VS Code, visit the [VS Code site](https://code.visualstudio.com/#alt-downloads) and download the version appropriate for your platform.
153155

154-
### Install Prettier plugin
156+
### Install the Prettier plugin
155157

156158
We also recommend using [Prettier](https://github.com/prettier/prettier) -- Prettier is a tool that helps format your code, keeping it consistent and helping to avoid errors.
157159

@@ -167,9 +169,11 @@ You can use Prettier directly in your editor using the [Prettier VS Code plugin]
167169

168170
To summarize, in this section you:
169171

170-
- Installed and learned about Node.js and the npm CLI tool
171-
- Installed and learned about the Gatsby CLI tool
172+
- Learned about web technologies used with Gatsby (HTML, CSS, JavaScript, React, and GraphQL)
173+
- Learned about the command line and how to use it
174+
- Installed and learned about Node.js and the npm CLI tool, the version control system Git, and the Gatsby CLI tool
172175
- Generated a new Gatsby site using the Gatsby CLI tool
176+
- Ran the Gatsby development server and visited your site locally
173177
- Downloaded a code editor
174178
- Installed a code formatter called Prettier
175179

www/src/data/sidebars/tutorial-links.yaml

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@
88
items:
99
- title: Overview of core technologies
1010
link: /tutorial/part-zero/#overview-of-core-technologies
11-
- title: Familiarize with command line
12-
link: /tutorial/part-zero/#familiarize-with-command-line
11+
- title: Familiarize with the command line
12+
link: /tutorial/part-zero/#familiarize-with-the-command-line
1313
- title: Install Node.js
1414
link: /tutorial/part-zero/#install-nodejs
1515
- title: Familiarize with npm
1616
link: /tutorial/part-zero/#familiarize-with-npm
1717
- title: Install Git
1818
link: /tutorial/part-zero/#install-git
19-
- title: Install the Gatsby CLI
20-
link: /tutorial/part-zero/#install-the-gatsby-cli
19+
- title: Install Gatsby CLI
20+
link: /tutorial/part-zero/#install-gatsby-cli
2121
- title: Create a Gatsby site
2222
link: /tutorial/part-zero/#create-a-site
2323
- title: Set up a code editor

0 commit comments

Comments
 (0)