How To Build A Blog With Gatsby and Netlify
Tags: javascript, react, gatsby, node
Published: 2019-11-17 17:14:40

This is a preview of my original post cross-posted from my [website's blog](https://www.codespot.org/how-to-build-a-blog-with-gatsby-and-netlify/)

## What is Gatsby js
To build a blog today has become even more easy with the new [**JAM Stack**](https://jamstack.org/) (JavaScript, API, and Markup). JAM Stack stands for
**A modern architecture - Create fast and secure sites and dynamic apps with JavaScript, APIs, and prerendered Markup, served without web servers.**

**Gatsby is a static site generator that is built on ReactJS.** In its simplest definition, a static website is a group of HTML pages, which does not pull any data from a database when a viewer visits it. A static site looks the same for every visitor. Static sites are faster to load too, as the server sends the same response to every visitor. However, you can not customize content for visitors. Since Gatsby builds on top of React, you get all the benefits of React such as its performance, components, JSX, React library ecosystem and a large community. [_Gatsby Documentation_](https://www.gatsbyjs.org/) is also very well written so you should not have any problems.

For many static websites, you will need to use external data sources during the build process. Gatsby provides support for many forms of data, including CMSs like WordPress, APIs, and Markdown. To access this data, Gatsby uses GraphQL.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/sgnsb05l2vhpswkvs7we.png)
*Gatsby js Schema*

If you know GraphQL, accessing data from Markdown using Gatsby feels easy. If GraphQL is new to you, it does add yet another thing to learn, however, the [_documentation_](https://www.gatsbyjs.org/docs/querying-with-graphql) on using GraphQL with Gatsby has a lot of information.

>Note: GraphQL is a query language.

## Building a Blog With Gatsby js
To create a blog with gatsby js, we need to do a couple of steps. Let's see in the example below.

### Install the Gatsby CLI
```shell
npm install -g gatsby-cli
```

### Create a new site
```shell
gatsby new gatsby-site
```

### Change directories into site folder
```shell
cd gatsby-site
```

### Start the development server
```shell
gatsby develop
```

After the four steps, your gatsby site will be ready, you can access the gatsby development environment at ``localhost:8000`` by default. You can edit JavaScript pages in the ``src/pages`` and the changes will be reloaded automatically in the browser.

### Create a production build
```shell
gatsby build
```

With the build command, Gatsby will perform production build for your site, which in other words means generating static HTML pages.

### Serve the production build locally
```shell
gatsby serve
```

Lastly, with the shell command, Gatsby will start local HTML server for testing your build site

### Gatsby project structure
With the Gatsby site installed you will get the default project structure, which is very simple with a couple of important config files to remember.

```javascript
|-- /.cache
|-- /plugins
|-- /public
|-- /src
    |-- /pages
    |-- /templates
    |-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js
```
*Gatsby js project structure*

There are four important files for gatsby site:
- **gatsby-config.js** - configure options for Gatsby with metadata like title, description, etc.
- **gatsby-node.js** - Gatsby Node.js API for customizing the default settings about the build process.
- **gatsby-browser.js** - Gatsby browser API for customizing the default settings for the browser.
- **gatsby-ssr.js** - Gatsby server-side rendering API for customizing the settings affecting server-side rendering.

You can read the rest of the post on my [**website's blog**](https://www.codespot.org/how-to-build-a-blog-with-gatsby-and-netlify/)