Create Gatsby Novela site from scratch

new-gatsby-novela-site

# Setting Up a New Gatsby Novela Themed Site

This is a step-by-step unstructional on how to set up The Novela Gatsby theme by Narative for your own blog or website.

## Prerequisites

- GitHub Account/Repo
- Git installed
- Node installed
- An editing environment (VS Code)

Setting up Gatsby development environment: [tutorial](https://www.gatsbyjs.org/tutorial/part-zero)

I'm just running: `npm install -g gatsby-cli`

## Create a Gatsby Site

gatsby new cb-dev  https://github.com/narative/gatsby-starter-novela && code ./cb-dev

 - Select npm for package manager

When complete, vs code will opened up to the correct folder.  

Open the terminal and build/run the site with: 
`gatsby develop`

The site will be running now at: [http://localhost:8000/](http://localhost:8000)
The GraphQL layer is running at: [http://localhost:8000/__grahql](http://localhost:8000/__graphql)

The GraphQL link will be massively helpful when we start customizing the site!

## Ctheme Customization and Component Shadowing

Anything inside the `@noarative/gatsby-theme-novela` npm package is the template and components used to make your novela site, we can copy and mirror hose files inside our `src` directory of our repo.

```
src/
├── @narative/
│   ├── gatsby-theme-novela/
|   |   ├── components/
|   |   |   ├── Bio/
|   |   |   |   ├── Bio.tsx
|   |   |   ├── Logo/
|   |   |   |   ├── Index.js
|   |   |   ├── Navigation/
|   |   |   |   ├── Navigation.Footer.tsx
|   |   |   |   ├── Navigation.Header.tsx
|   |   ├── sections/
|   |   ├── styles/
|   |   ├── templates/
```

Of course I am just showing some of the folders and files that I will be shadowing and customizing, just know that any file can be copied and updated, the one in your src directory will take presedence over the one from the `node_modules` folder..