Deploying a Gatsby Site Using Netlify

[00:00:00]
>> Speaking of building the site, let's get this thing up and built, yeah. So I've already pushed everything up to GitHub. And what I wanna do now is I want to initialize a new site. So I'm going to use netlify today, I worked for netlify. So that that influences my decisions, but even before I worked for nullify it was the place that I would deploy because it's just so much easier than other tools that I've used.

[00:00:31]
So actually, let me pull up, me open a window with my own profile so that I can actually get logged into things here. It's what I use for all of my sites and what we're gonna be using specifically today. Is the netlify COI because it's just very good, like it just makes my life easier.

[00:00:53]
So the same way that I used the the GitHub COI, I'm going to use the netlify COI so to do that you can install it globally with NPM i dash g netlify COI I already have it installed. But if you look at it, what you're gonna see is I'm using the Netlify CLI version 6.1.0, if you already have it installed, make sure you install the latest version so that you are able too get all the benefits of what we're about to do here.

[00:01:24]
So what I'm going to do is I'm going to looking at this and see there's no like Netlify specific files here. So let me run Netlify in it, all right, I guess I'll log in first. So netlify login, and it's gonna show me that I'm already logged in.

[00:01:40]
If I wasn't, it would take me to the Netlify site and just say like, hey, do you want to allow this to work and it would say yes. And you can make sure that you're logged in by running Netlify status. I'm using MTL, which is a shorthand, you can also run like Netlify status like this.

[00:01:59]
Whichever one you prefer. What I wanna do is run Netlify in it and this is going to give me options. I can either connect it to an existing site, or I can create and configure a new one I wanna create, create and configure a new site. So I'm gonna hit Enter, and then it's gonna ask me which team I want.

[00:02:18]
If you only have one team, this will be a much simpler selection. I am on a million teams, I will choose my own site and then I want to, let's do front end. Masters, intro to Gatsby v2, that's probably, that's probably unique name. So I've named the site, that's what the URL will be, and you can see that here, how it's now set, that'll be the URL for the site unless I put a custom domain on it.

[00:02:48]
And because it can tell that this is a Gatsby site It's telling us it's going to use Gatsby build. All right, I'll use that default, it knows that Gatsby has a public folder great use that default. We didn't use any Netlify function so we can just move on past that.

[00:03:02]
But then here's the other cool thing is because this is a Gatsby site. It's gonna use this essential Gatsby plugin. And earlier when I was talking about the keeping the cache and and doing stuff to just make Gatsby run a little bit better. That's what this Gatsby plugin does.

[00:03:19]
So all of that and then I can add this Netlify dot Tama which keeps all those settings Okay. Now there's one thing that is different about this setup than what you will do if you're on the main branch, which most of you, I think will be if you've been building against this rebuild.

[00:03:38]
Then everything's gonna just work. On my end because I just changed the site to use the progress branch, I have to go into here to site settings. And I'm going to change the default branch here to progress cuz I wanted to use that one. So then I'm going to go to my deploy and cancel that one because that's on the wrong branch.

[00:04:03]
And then I'm going to trigger anyone. And so we can see that it is building. This pulls in all the containers and things that we would need to actually run the site. So it's installing node and downloading the NPM modules and all that. This is the first time that we're building the site so there's no cache, which means this one will be a little bit slower.

[00:04:37]
And a couple of things to note because we added that end VMRC it automatically picked up on the node version that we wanted to use. It's also going to install these plugins here, let's see. It goes with the initial NPM install which, again, Gatsby has a lot going on.

[00:05:00]
So the initial install of Gatsby takes a little bit. All right, so now we've got all the dependencies we're actually building. And you can see here that it's got this, this Gatsby plugin installing. And because it's the first build, there's no Gatsby cache. So it's running building fresh.

[00:05:19]
I am not using any of the redirects, but there is an extra plugin. If we wanted to add Gatsby redirects, then the Gatsby site is gonna build the way that we are building. And this is different than no different from any other way that you would build a Gatsby site.

[00:05:37]
Just running the Gatsby build command. And we got an error. Cannot read Gatsby image data of no, Distributed databases on the jam stack. So apparently one of our images is missing. Well that's okay, we can fix that. Let's go right in here and say If, are we in the let's get into episode and we can say episode dot image.

[00:06:23]
And we'll just do optional chaining to get to it. Okay, so something's wrong with the data in my site that's not Gatsby, that's my data entry. So let's add everything get commit and we'll say fix handle missing data. Let's push that up and now that we've configured the site, what's nice is it'll automatically start this rebuild.

[00:07:00]
So here goes.
>> One example I want. For example, I want to, to display a different, cropped image in different resolution preservation. So how can I, how can I benefit from Gatsby and work with different images cropped in different resolution?
>> I mean, the short answer is if you're going to spend more time working around it, then you would just do it on your own.

[00:07:42]
I think if you've got a very like, specific thing you're trying to build, it's easier to just build that. So yeah, I think the ultimately II would say you probably if you want to control the picture, just optimize your own images and drop them in and don't worry about Gatsby at all.

[00:08:03]
Because it's gonna fight you and try to create each image as its own picture, so yeah, it would just be easier not use it.
>> Thank you very much.
>> Yeah, of course, and so now the site is built, the site is live. Anybody can go and visit this now it's on the Internet at the front end masters intro to Gatsby v2.Netlify.app.

[00:08:28]
And all of these things that we wanted to use are there working and running, you can get in there and mess with them right now. So this is a very straightforward way to get things done and it's nice and fast so this first one on fresh build was two minutes and 51 seconds and that built 220 pages or so.

[00:08:56]
Including the because it built the schedule pages as well. And that is pretty neat, so then if we wanna go and make a change. And add new information, right? And then I will commit everything and we'll just say add some new markup oops, get push. And because things are cached, the site's gonna build a lot faster.

[00:09:31]
Now this is a feature of Gatsby three, where they've basically made the cache more intelligent, and they don't rebuild pages that don't need to be rebuilt. So what we'll see is that we've already got node installed, we've already got the node modules. We've got a Gatsby cache here so we can rely on that and move a lot more quickly.

[00:09:54]
So the Gatsby build should take like closer to 15 seconds instead of a minute. So it's one of those things where keeping the cash around and not cleaning things out is gonna make a big difference. Yeah, 19 seconds to build the site that time, so it gets much faster as you keep that cash around.

[00:10:16]
I see a question?
>> Is there a way to deploy on Netlify without it on address?
>> Meaning like, is there a way to deploy to Netlify without creating the .Netlify.app URL. This is done, so that you can review your work, if you wanted to add a custom, what you would do if you didn't want the netlify.app is you would add your own domain.

[00:10:46]
So if you've got a domain name that you wanna use, you would add that on top. And then this will redirect to your custom domain name. If you wanted to deploy to Netlify in a way that nobody can access I think you can set it to be like you need to enter a password to see it that maybe that's a paid feature actually access control.

[00:11:23]
Can I set a password? I think this might be, so I have all the features, so this one might be a thing, but if I set like. By set a password and I'll show you, so that you can get in after I do this. If I set a password and then I go over here and I try to load It's gonna say that it wants a password and I have to put that in, so that's one way to solve that problem.

[00:11:55]
I'm gonna turn that off, so that there's no password required. But yeah, I don't, if that's not what you're asking then I'm not, can you rephrase the question?
>> [INAUDIBLE]
>> Okay? Yeah, it is an example of custom domains like this. This is my personal site, this is deployed in LFI, but I bought the domain jason.af, and so I just use that as the root domain for it.

[00:12:31]
Any other questions?
>> Okay, occurring in the E-commerce website with Gatsby for example, I really do, but I would make login, user can log in, log out, and add products. And buy products like this product, I can do it with Gadsby?
>> Sure, Gatsby does support we'll talk a little bit more about like client only routes and how you would do authentication.

[00:13:03]
We won't actually do authentication, but we'll show you what the process would be. In the intermediate workshop on in a couple of days, but what you can do in the meantime is is it store Gatsby. Yeah, so this this is an E-commerce store built on Gatsby, I went back when I was there, we put this together.

[00:13:33]
And this is pulling data from Shopify. So Shopify data comes in all the images and product prices that are in everything are managed in Shopify, and then you can add those to your cart. And when you go to checkout, we rely on the Shopify checkout because all the different compliance and address management shipping calculation.

[00:13:57]
All that stuff is a huge pain that I don't wanna deal with, so we just outsource that right to Shopify. Stripe has a similar flow, where it will let you manage all those things. But then what we also did with the Gatsby swag is we set it up, that if you are a Gatsby contributor, which we use auth zero for this, you log in with your GitHub account and then once it redirects, here we go.

[00:14:30]
We check for whether or not you are a contributor, and if you are, we check whether or not you've claimed your swag. So there's a swag code here that I've claimed, and these swag codes are tied to your user account. So the fact that I'm showing this doesn't matter because unless you have my Shopify login, my email and address it won't, it won't actually let you order.

[00:14:57]
So this is like a user authenticated E-commerce experience built in Gatsby and this is also open source. So if you wanna see the source code for this, you can find it. On GitHub at the Gatsby js org store that Gatsby js.org is the repo for this.
>> We will do a quantification in the intermediate workshop.

[00:15:27]
>> We're not gonna do like full on authentication. If you wannao see how off works, I would look at this, this repo.
>> Okay?
>> Because honestly, authentication it is big enough to be its own course, if we really dig into all the things you can do with it.