Danywalls

Starting with Gatsby Day 1

February 21, 2019

[Pick of RetyiRetyi](https://pixabay.com/en/users/retyiretyi-501347/) Pick of RetyiRetyi

Gatsby as a React GraphQL and static site generator with easy development and amazing fast finish product that allows delivering faster websites.

It comes with React, React Router, Webpack, Graphql and also it takes care of service workers, server-side rendering, code splitting, image loading and more.

I’m motivated to start learning Gatsby and to use it to create portals. To get up and running with Gatsby, you’ll need to have a recent version of NodeJS installed on your computer.

Install Gatsby

We install gatsby from our terminal and run the next command.

sudo npm install -g gatsby-cli

Gastby is ready in our computed and we had 4 frequently commands.

gatsby new danylab: it allows create a new project.

gatsby build: configure and set your app for production.

gatsby develop: this start our project and going to open up a development server, you can navigate to localhost:8000

By default, Gatsby creates a web with a header, pages, links that allow navigation through these pages, also it creates a GraphQL interface and can be accessible in localhost:8000__/graphql.

Navigate into the project.

If you have worked before with create_react_app the structure looks very similar, it contains important but I will skip .cache, .gitignore and node_modules.

/public is generated when you run gatsby build and it stores your static assets.

/src is very meaningful contains our code, page, components, and images

src/pages : Every page is a component react component it can be stored in subdirectories like pages/users/.

components: it contains normal react components nothing special but maybe you can see in the layout component because it is used on every page.

gatsby-config.js it handles plugins and data that can be used on the whole page.

Sass and Gatsby?

Gatsby has a lot plugins and his configuration is easy, you can see more gatsby plugins in https://www.gatsbyjs.org/plugins/

From the terminal stop your gatsby server and install the sass plugin.

npm install — save node-sass gatsby-plugin-sass

In our project edit, the gatsby-config.js add our plugin.

// in gatsby-config.js
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-sass`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`
}
},

Using Sass in our components.

Create your files _vars.scss it will contain our variables for our project and default-style.scss to create your style. We can edit layout.js and import default-style.scss

The last step is run command to update files and start development server.

gatsby build && gatsby serve

Create pages

One page in Gatsby is function base component into the pages folder as the follow.

import React from “react”;
import Layout from “../components/layout”;

export default function about() {
return (

About page

); }

If you want nested pages like localhost/users/about, create another directory inside pages like users/ and move About.js component to the new place.

Components

Like the Pages, components in gatsby is a function base component stored in components as the follow.

import React from “react”;
import “./signup.css”;
export default function signup() {
return (

Signup

); }

Linking Pages

For Link pages in Gatsby is easy, just import the Link component from Gatsby and specify the prop “to” with the path.

import React from “react”;
import Layout from “../components/layout”;
import { Link } from “gatsby”;

export default function about() {
return (

About page

Home ); }

There you have it! This is my first day learning Gatsby and follow his documentation. I hope you enjoyed and hope to be a little bit useful.


Dany Paredes

Hi, I'm Dany Paredes, few years ago I was working with .NET, but in my last years I have been focusing in Javascript using Vue , Angular or React. You can read more in Twitter or Github.