Creating a New Gatsby Project with Gatsby Default Starter Page
Published: 2021-01-18 18:08:41

# Intro
I recently started working a little bit with the Gatsby framework for my React projects and have loved it. It is minimal, easy to use, and can be very flexible through its library of different plugins. We are going to make a very basic home page for our Gatsby site using the default Gatsby Starter project and add a little styling with javascript. 

# Getting Started
First things first, we need to get the Gatsby project up and running. If this is your first time using Gatsby then you will need to install Gatsby-cli by running 
```javascript
npm install -g gatsby-cli
``` 
You must have Node v10+ installed already on your machine for this to work. We are going to be using a bare-bones Gatsby starter for our project. In the terminal, type 
```javascript
gatsby new my-gatsby-project https://github.com/gatsbyjs/gatsby-starter-default
```
This will begin building the Gatsby default starter project for us to work with. Once it is finished building, cd into the project directory and open up the project in your text editor of choice. 
We can clean up the project to remove some of default code that we won't be needing. We can delete the gatsby-browser.js, gatsby-node.js, and gatsby-ssr.js files from the root directory since we won't be using them. You can also open up the `src/index.js` and delete everything that is between the layout components so that your new index.js will look like this. 
```javascript
import React from "react"
import Layout from "../components/layout"


const IndexPage = () => (
  <Layout>
    
  </Layout>
)

export default IndexPage
```
The default starter is nice because it comes pre-loaded with a header and layout component that we can use to build out a pretty easy landing page. Navigate to the `gatsby-config.js` file and take a look. This is a basic configuration for your page. Under plugins, the first line should read 
```javascript
gatsby-plugin-react-helmet
```
This plugin allows you to provide meta data for your site such as `title`, `description` and more. Under `siteMetaData` at the top, go ahead and change the `title` and `description` values to what you want your site title/description to be.

```javascript
title: `Gatsby.js is the Coolest`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`
```
If you want to know more about the other plugins you can checkout the [Gatsby Plugin Docs](https://www.gatsbyjs.com/plugins/) for more info. 

Go ahead and start up the development server by typing
in the terminal 
```javascript
gatsby develop
```
Gatsby is now hosting the development version of the project on `localhost:8000` so open up your browser and put that in the url window. You should see the default page pop up with your new title in the purple header. This purple header comes as the default with this starter template. If you want to change some of the styling on it you can alter the `header.js` component to your liking. 

![Gatsby Site](https://i.ibb.co/Q6xnWrp/Screen-Shot-2021-01-18-at-10-43-32-AM-2.png)

Think of the `index.js` page as your home page. This is where anyone navigating to your site will land. 

Now let's add some text to our page style it up a bit. Gatsby is a React framework so JSX will work just fine. Inside the `<Layout>` component in the index.js go ahead and add the following code. 
```javascript
const IndexPage = () => (
  <Layout>
    <h1>Welcome to my Gastby Project Home Page</h1>
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, 
    when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
    It has survived not only five centuries, but also the leap into electronic typesetting, 
    remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset 
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software 
    like Aldus PageMaker including versions of Lorem Ipsum.
    </p>    
  </Layout>
)
```

Now we have a heading and some text that we can play around with. Styling can be done using traditional css if you like or you can use css in javascript through the `style` attribute directly on the JSX tags. 

```javascript
const IndexPage = () => (
  <Layout>
    <h1 style={{fontSize: 72, color: "blue", textDecoration: "underline"}}>Welcome to my Gastby Project Home Page</h1>
    <p style={{fontStyle: "italic"}}>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, 
    when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
    It has survived not only five centuries, but also the leap into electronic typesetting, 
    remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset 
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software 
    like Aldus PageMaker including versions of Lorem Ipsum.
    </p>    
  </Layout>
)
```

Applying the styling gives us this new look ![Styled Gatsby Page](https://i.ibb.co/4jjVgVf/Screen-Shot-2021-01-18-at-10-58-38-AM-2.png)

Play around with adding different JSX elements and styling them to create an awesome home page. This is only the beginning of what you can do with Gatsby. Coming soon I will dive into creating multiple pages within your app and how to handle routing between them. Stay Tuned.