Creating a gatsby project is easy since you can use their wonderful CLI.
Gatsby CLI
In order to install the CLI you will need nodejs and npm/yarn on your computer. If you are a npm person you will need to type the following in your terminal
npm install -g gatsby-cli
And if you like yarn instead type this:
yarn add global gatsby-cli
Once the installation has finished you can check if the gatsby cli is working ok with the following command
gatsby --version
Gatsby CLI version: 2.7.7
Creating a new Gatsby Project
Now you can create a new gatsby project using the new command, this command takes 2 parameters, the first one is the name of your project and the second one is the template that will used as a base for the initial files.
gatsby new learning-gatsby https://github.com/gatsbyjs/gatsby-starter-hello-world
with the above command you are telling gatsby: "Hey, please create a new project that I would love to call "learning-gatsby" and please use the hello-world template". According the documentation it is a good template if you are just starting with gatsbyjs.
This step can take a longer time since it will clone the project and install automatically all the project's dependencies.
Once the whole process is done you can enter to the project folder and start the development server to see how the website looks.
Starting the Development Server
The hello-world template already comes with a script to start the development server, the name of the script is develop.
That means you can start a gatsby development server typing in the terminal
npm run develop
and if you are using yarn
yarn develop
This is going to do a lot of work but once you see in your terminal a message like this
You can now view gatsby-starter-hello-world in the browser.
http://localhost:8000/
you can open your browser and go to http://localhost:8000/ and you will see the hello world.
Also you can see the graphiql UI in http://localhost:8000/___graphql.
Oh yeah one of the reasons gatsby is so cool is graphql, but that's information for the next post.
Top comments (0)