How to Create a GatsbyJS Static Site

Fri, Jan 18, 2019
4-minute read

Lately I’ve been experimenting with different static site generators and in this post I’m going to write about creating a Static Site with GatsbyJS.

Gatsby is actually a React webapp starter, which means that you can do a lot more with Gatsby than just generating static webpages. But it is a really interesting tool which you can start experimenting with, and an easy way to do it is to build a static web page, such as a blog like this very one.

Prerequisites

To start developing with GatsbyJS you first need to have installed:

Node.js
npm
npm comes with Node.js so you don’t need to install both
Git
Download the installation according to your OS

Install Gatsby CLI

Once you have the prerequisites installed, follow the next steps to install the Gatsby CLI:

Open a Terminal window.
Run the command:
```
$ npm install --global gatsby-cli
```
Run $ gatsby --version to confirm that the installation is complete.

Create your First Gatsby Site

You are going to use the Gatsby CLI to create your first Gatsby site. Because you want to create a blog, you don’t want to start with an empty React application to build upon.

Go to the Gatsby starters library to find a template that you want to use for your site.
Copy the Github repository link by right-clicking the Github icon below the starter template you choose and clicking Copy Link Address.
Open a Terminal window.
Run
```
$ gatsby new name-of-your-site https://github.com/gatsbyjs/gatsby-starter-link
```
You can name your site whatever you want and the link at the end must be the link you copied earlier.
Move to the directory of your new site:
```
$ cd new name-of-your-site
```
Run
```
Gatsby develop
```

You can see a version of your site (the template you choose) running on your local host on port 8000: http://localhost:8000/.

Personalize Your Site

To personalize your site you can modify the files in your template. To help you do this, read the GatsbyJS documentation on

Deploying your Site

Once you have your site personalized you can deploy it to a static site hosting service. One of the most easy to use tools to do this is Netlify.

Creating a Repository for your Site

To make use of Netlify to host your site and make it a continous deployment approach, you are going to create a Github repository with your code and then connect it to Netlify to automate the deploys.

Go to Github and login or create a new account if you don’t have one.
Create a new repository. Don’t initialize your repository with a README.
Open a Terminal window and navigate to your project directory.
To initialize a Git repository in your project directory, run:
```
$ git init
```
To add all the files to the Git repository, run:
```
$ git add .
```
To commit your files to the repository, run:
```
$ git commit -m "first commit"
```
Go to the Github repository and copy the HTTPS address that is at the top of the Quick setup page.

Run:

git remote add origin https://github.com/<Your HTTPS repository URL>

Connecting to Netlify

Now you are going to connect your repository with Netlify.

Log in to Netlify or create a new account.
You can log in using your Github account.
Click the New site from Git button.
Click the Github button.
Authorize the application to access Github when prompted.
Select the corresponding repository from the list.
If you don’t see your repository listed, click the Configure the Netlify app on GitHub link to provide Netlify with access to specific repositories.
The default Deploy Settings should be the following:
- Build command: gatsby build.
- Publish directory: public.
Click the Deploy site button.

The deploying process starts. When finished, Netlify gives you the address where your site is deployed. Every time you commit your changes and push them to your remote Github repository, Netlify redeploys your site.

documentation technical writing static site generators github gatsbyjs