Check out a free preview of the full Introduction to Gatsby course:
The "Building the Site" Lesson is part of the full, Introduction to Gatsby course featured in this preview video. Here's what you'd learn in this lesson:

Jason explains how to build the site using npm, highlights the JavaScript files webpack creates, and analyzes the way the built site loads its resources through the developer console.

Get Unlimited Access Now

Transcript from the "Building the Site" Lesson

[00:00:00]
>> Jason Lengstorf: We've built the site so we can just build it again. I guess I can use NPM run build. And NPM run build is going to put everything that we're doing into this public folder. So let me cash close this, we've got a public, and this builds on our actual site.

[00:00:20] So we've got the about, another post contact, hello world, all the things that we expect to be there, along with the static folder, and then a bunch of JavaScript chunks, and all that good stuff. This is what webpack is generating for us. And this is why it's nice to use Gatsby because this type of configuration is not trivial.

[00:00:46] And trying to set this up in webpack, it takes a lot. So being able to just know that this is being done for us is very nice. So once we've got this, we can do Gatsby serve. And now we can see the built site. We can see this is actually the server side rendered generated site.

[00:01:08] And a couple things that are nice to look at here are on the network tab. Let's go to fast 3G, I can do my load and you can kinda see this load's pretty darn quick, that's a good thing. We're also seeing that we're barely loading, we're not loading much here.

[00:01:31] So as we move around you can also see, did everybody see that? This is kinda hard to notice, but check this out. So watch this timeline up in the top. Okay, so we've loaded, here are the assets that we got, here are the things that we got. Now watch what happens when I hover over about up in the top right of this timeline.

[00:01:50] You see that? We just pre fetched the about page so that it feels instant when you load to it. And that way your users, when they're on this site, they don't have to wait for things to load, things are just available to them. It's a really really nice workflow and it makes using a Gatsby site feel instant.

[00:02:12] It's a really nice experience. So this is the kind of stuff that we're trying to do to make everybody's life just a little bit easier. So if I go back out you can also see that the images and stuff start preloading, too. Watch the bottom of the panel down here.

[00:02:30] As I start to hover over things, you can see the blogs start to prefetch in the background so that when I click on it it's already available. This is that kind of stuff that we're talking about with the purple pattern and the various performance optimizations that are just baked into the core of what Gatsby does.

[00:02:47] This is so that you, as a developer, never once have to think about how the heck prefetching works. But in case you're curious, what this ends up doing is up at the top. We'll start adding these link rel prefetches which pull resources in to be used later. So that's kind of the fast version.

[00:03:09] Go ahead.
>> Speaker 2: Does it only prefetch on hover then? Is that sort of what triggers it or?
>> Jason Lengstorf: No. It'll prefetch on a handful of things. So I had the slow 3G installed. So on a faster connection, it detects network latency using browser feature detection. On a fast connection, it'll also use the intersection observer.

[00:03:31] So as I scroll down the page when it saw this, it would say hey what's that, let me let me prefetch that. So it kind of determines how much bandwidth you have. And then we'll attempt to prefetch things as they become available. Another thing that I didn't really show here is the the lazy loading of these.

[00:03:53] So let me make this much slower.
>> Jason Lengstorf: And so on a slow 3G, now remember this took like 40 seconds when we were in development mode. It's taking, let's see, we got something on the screen in six seconds. And this is on slow 3G. This is what most of the world is gonna see.

[00:04:16] This is another reason why I like, one of the reasons that I came to Gatsby is because I actually see Gatsby having the potential to be kind of a global equalizer. Because the sites that you build in Gatsby, they work with JavaScript disabled, they work offline with the plugin, and they will, they only take a few kilobytes to download.

[00:04:36] So for somebody who is in a developing country, if they have to walk to their friend's house who has a Wi Fi hotspot and download their sites before they go home, a Gatsby site is only gonna cost them a little bit if they're paying by the megabite. And it means that that site's gonna to continue to work when they leave so that they can actually use the internet even if they don't have access to a reliable internet connection or they pay by the megabite.

[00:04:58] So that means that something that we want to use like modern technology, React, Graft UL, all this fun stuff that we want to play with, is also something that is completely functional and honestly ideal for people who don't have strong Internet connections or who don't have access to a reliable WiFi connection or who are living on pay per megabyte data, in really slow 2G, 3G zones.

[00:05:24] So it's another one of those things of making the right thing the easy thing. By default, when you build a Gatsby site, you're gonna build something that's good for somebody no matter where they are in the world trying to load it. And I really, really liked that about Gatsby as a technology.

[00:05:40] So anyways my little feel good diatribe aside, we're now ready to publish this and put it up on the Internet now.