1 of 63

Getting Started with Gatsby

A React Love Story

Ryan Harris

Software Engineer @ Guru

@ryan_c_harris

2 of 63

Ivana Veliskova

Mansi Pathak

Ryan Yurkanin

“Confessions of an Impostor”

PhillyXP // Last Week

“Component Tree Visualization in React”

Philadelphia JavaScript Developers // Last Week

“Why React Hooks, and how did we even get here?”

RQ React // Later Tonight

@ryan_c_harris

3 of 63

We are currently hiring.

@ryan_c_harris

4 of 63

We are currently hiring.

www.getguru.com/jobs

@ryan_c_harris

5 of 63

“This guy looks familiar...”

~ Maybe You

@ryan_c_harris

6 of 63

It us.

@ryan_c_harris

7 of 63

It us.

https://github.com/ivanaveliskova/grittys-blog

8 of 63

Shut up and get on with the Gatsby stuff already!

~ Definitely You

@ryan_c_harris

9 of 63

You got it!

@ryan_c_harris

10 of 63

What we’re going to talk about today

What Gatsby is (and why use it)

Working with Gatsby

How to deploy your statically generated Gatsby site

@ryan_c_harris

11 of 63

What is Gatsby?

@ryan_c_harris

12 of 63

Definition:

A static site generator takes source files and generates an entirely static website.

@ryan_c_harris

13 of 63

Gatsby & GraphQL

graphql.org

@ryan_c_harris

14 of 63

Why use Gatsby?

@ryan_c_harris

15 of 63

Advantages of using Gatsby

It’s blazing fast!

@ryan_c_harris

16 of 63

Advantages of using Gatsby

It’s blazing fast!
You can use data from a wide variety of sources

@ryan_c_harris

17 of 63

Advantages of using Gatsby

It’s blazing fast!
You can use data from a wide variety of sources

Your file system

@ryan_c_harris

18 of 63

Advantages of using Gatsby

It’s blazing fast!
You can use data from a wide variety of sources

Your file system
APIs

@ryan_c_harris

19 of 63

Advantages of using Gatsby

It’s blazing fast!
You can use data from a wide variety of sources

Your file system
APIs
Databases

@ryan_c_harris

20 of 63

Advantages of using Gatsby

It’s blazing fast!
You can use data from a wide variety of sources

Your file system
APIs
Databases
Content management systems

@ryan_c_harris

21 of 63

Advantages of using Gatsby

It’s blazing fast!
You can use data from a wide variety of sources

Your file system
APIs
Databases
Content management systems

There are lots of deployment options

@ryan_c_harris

22 of 63

Advantages of using Gatsby

It’s blazing fast!
You can use data from a wide variety of sources

Your file system
APIs
Databases
Content management systems

There are lots of deployment options
Large community support

@ryan_c_harris

23 of 63

How does React fit in?

@ryan_c_harris

24 of 63

Everything is a component!

@ryan_c_harris

25 of 63

GIF break!

@ryan_c_harris

26 of 63

GIF break!

To talk about plugins and starters.

@ryan_c_harris

27 of 63

Plugins

Additional Gatsby functionality

@ryan_c_harris

28 of 63

Starters

Gatsby site boilerplates

@ryan_c_harris

29 of 63

package.json

@ryan_c_harris

30 of 63

Who is using Gatsby?

@ryan_c_harris

31 of 63

Examples of Gatsby in production

Overreacted.io

Dan Abramov’s (React team) blog

TKPlaceholder

Ryan Yurkanin (Lead @ Guru) blog

React Docs

Official React documentation from Facebook

My Website!

Shameless self-promo :-)

@ryan_c_harris

32 of 63

Working with Gatsby

@ryan_c_harris

33 of 63

> npm install -g gatsby-cli

@ryan_c_harris

34 of 63

Gatsby commands

> gatsby new [repo name] [starter repo]

Create a new Gatsby project

> gatsby develop

Start up dev server

> gatsby build

Compile source finals, output files for production

> gatsby serve

Serve files build with gatsby build

@ryan_c_harris

35 of 63

> gatsby new my-blog [repo_url]

Create a new site using the official Gatsby blog starter

*In this case, https://github.com/gatsbyjs/gatsby-starter-blog

@ryan_c_harris

36 of 63

PSA: Remember to npm install

@ryan_c_harris

37 of 63

Gatsby file structure

@ryan_c_harris

38 of 63

Gatsby file structure

All your working files

@ryan_c_harris

39 of 63

Gatsby file structure

All your working files

Build files ready to be deployed to production

@ryan_c_harris

40 of 63

Gatsby file structure

All your working files

Build files ready to be deployed to production

Gatsby plugins & npm packages

@ryan_c_harris

41 of 63

Gatsby file structure

All your working files

Build files ready to be deployed to production

Gatsby plugins & npm packages

Site and plugin configuration

@ryan_c_harris

42 of 63

Gatsby file structure

All your working files

Build files ready to be deployed to production

Gatsby plugins & npm packages

Site and plugin configuration

GraphQL and data configuration

@ryan_c_harris

43 of 63

Gatsby file structure

Gatsby cache files

@ryan_c_harris

44 of 63

Gatsby file structure

Gatsby cache files

* You may need to delete this directory

@ryan_c_harris

45 of 63

Gatsby file structure

Gatsby cache files

* You may need to delete this directory

Included in the .gitignore

@ryan_c_harris

46 of 63

> gatsby develop

Fire up your local development server

@ryan_c_harris

47 of 63

http://localhost:8000

@ryan_c_harris

48 of 63

http://localhost:8000/___graphql

@ryan_c_harris

49 of 63

Let’s live code!

Cause that always goes well.

@ryan_c_harris

50 of 63

Deploying Gatsby

@ryan_c_harris

51 of 63

“I love Daisy... but I hate deploying code!”

@ryan_c_harris

52 of 63

> gatsby build

Run this command to build your

production files

@ryan_c_harris

53 of 63