Introduction to Gatsby Deploying Gatsby with Netlify

Transcript from the "Deploying Gatsby with Netlify" Lesson

[00:00:00]
>> Jason Lengstorf: So the last thing we're gonna do here then, is get this thing up on the Internet. So this part is thankfully very fun cuz I know it's the end of the day, and I don't know about you but my brain's about to melt out the side of my ears.

[00:00:14] So what we're gonna do is we're actually just gonna go to Netlify, we're gonna create a free account and we're gonna deploy this thing. So I'm going to stop the server and let me let's see, I'm going to,
>> Jason Lengstorf: Well, I wanna get this up on GitHub. I have tools that make this easy, but let me just do this the long way to make this really so that I'm not doing things that no one knows how to use.

[00:00:43] So I'm gonna create a new one. Let's call this Frontend Masters Gatsby intro and I'm going to create this repository.
>> Jason Lengstorf: I'm gonna take this and I'm going to say get remote add deploy, and we'll put this in here. And I'm going to get add everything that we did today.

[00:01:09] I'm going to get push deploy, wait, I need to actually commit this don't I. Sure do. So get commit,
>> Jason Lengstorf: I built the thing. Don't write commit messages like me, write good commit messages.
>> Jason Lengstorf: Okay, so I'm gonna push up to this new repo that I just created that is called Frontend Masters Gatsby intro.

[00:01:41] And now that that's pushed, I can see all of my content up here. And so I'm going to then go to Netlify, I'm gonna log in, and this puts me in here. So I've already created an account, so I'm not able to show you the account creation process.

[00:01:58] But if I go actually if I go into a incognito window, if I go into an incognito window and I hit Sign up, you just sign up with your GitHub or other like source control system. And upon doing that, I really like Netlify, it's a really good system.

[00:02:20] They've done an absolutely stellar job of building just easy, friendly tools. So let me create a new site from Git. I'm going to choose GitHub as my option.
>> Jason Lengstorf: They're gonna have me authorize, and then they're gonna show me all of my things that I just did. So if I do a search,

[00:02:43]
>> Jason Lengstorf: Okay, here's the repo that I just created. We can double check that to make sure, yep there it is. So I'm gonna grab this one and it detected already that it's a Gatsby site. So that's it, let's hit the deploy button. And now we can watch our site deploy.

[00:03:06]
>> Jason Lengstorf: And it's just going to kind of stand up a Netlify container, it's going to install all our dependencies, it'll run the Gatsby build, and then it'll take us live, the first one usually takes three ish minutes.
>> Jason Lengstorf: This is where I really need elevator music.
>> multiple: [LAUGH]

[00:03:28]
>> Student: The question is, I'm sorry, how long will they actually provide these free sites? Because I've been using Netlify for quite some time now, but I'm getting to a point where I just wonder, when do I have to start paying for all of this?
>> Jason Lengstorf: You know, that's a great question.

[00:03:42] And I, have not heard anything from the Netlify team about ever trying to monetize this tier. I think what they monetize is, when you go beyond certain points, needing collaboration things like that. So I don't expect them to ever surprise us with a, hey you have all the sites and now they cost money.

[00:04:05] I expect that if they do decide to start charging money we'll get a lot of notice. Because they've always shown responsible business practices so I don't expect to be surprised. But yeah, so we're getting closer we're writing out our redirect data that's usually one of the last things that happens before it tells us it's done.

[00:04:27] And there we go, site is live. Now, I can hit this Preview button, boom. We've got ourselves a live website. And so, this is really, really exciting because what is means is now I have a persistent URL. And this is really nice because I'm looking at whatever I wanna call this and I can rename it if I want and it will just be as long as it's available the thing that I want .Netlify.com.

[00:04:56] Another really cool thing about this is that you're also able to do branch based deploys, so like if I wanna check all my pull requests on a deploy branch before we do anything. So it's gonna automatically build a deploy preview for all pull requests, so just to show you how neat that is let me check out a new branch.

[00:05:21] And we'll call this deploy test. And I'm going to come in here and let's just change the color of something. Let's make I don't know let's make this hero box will change all of these to be where was this red color?
>> Jason Lengstorf: Let's make these like, we'll see it's gonna be bad, I don't even wanna look at it before we hit the button.

[00:05:47]
>> Jason Lengstorf: Is that wrong? That's right.
>> Jason Lengstorf: Okay, this is gonna be super gross. So, I'm going to commit this.
>> Jason Lengstorf: And then we can push it.
>> Jason Lengstorf: And before I do anything, I'm just gonna come back here and click to the Overview, and as soon as this finishes,

[00:06:19]
>> Jason Lengstorf: I have to open the pull request it's why that didn't happen. So I have my compare and pull request, let me open my pull request.
>> Jason Lengstorf: Okay, that's in, and now if I go and look at my deploys, I can see it's already building a preview of this thing.

[00:06:42] And it's also already installed on my Github repo so, I can see what's happening. It's showing me this deployment as it's working. So this is really really powerful stuff. And you'll notice it's much faster on the second build around. I mean we're looking at, we're coming up on I think, about 30 seconds of build so far.

[00:07:04] So after they get started it's a little bit faster each time. So in my Settings, in the General settings, I can change the site name. And we can call this,
>> Jason Lengstorf: Frontend Masters Gatsby.
>> Jason Lengstorf: So that's saved, and now if I click Over, we can see at Frontend Masters Gatsby, I have a running site, it's there.

[00:07:36] If I were it to be interested in a custom domain you can also just come in here and add a custom domain. We've got documentation on how to do that. They've got all sort of fun things like they will automatically set up your SSL certificate. They have support for Cloud functions which is really cool, that's like if you wanna, if you've heard of Serverless, this is a really kind of nice way of doing Serverless.

[00:08:04] You can do identity, like you can do log in management you can have people submit forms through your site. Netlify has a lot of cool stuff going on with it. So, but really what they do really, really well and what I really love about them is that they just make this process so, so easy.

[00:08:21] So here we go we've got this, I can look at my deploy preview and it's not great,
>> Jason Lengstorf: Well, at least it's blue and not red. I thought it was making it red because I can't read hex, but [LAUGH] but. I mean okay, so this is good but this is not what we want, so I'm gonna go ahead and this is terrible, we're not gonna do this.

[00:08:49]
>> Jason Lengstorf: So I'm gonna close that and we don't want it, and we'll just delete that branch and pretend it never happened.