Deploying to Netlify

[00:00:00]
>> Kevin Powell: All right, so to get our site online, the first thing we're gonna wanna do is we've made a whole bunch of changes, we made that initial commit. We did another follow-up one when we finished our HTML, but we're gonna be hooking up Netlify to GitHub. So, all the code that's going online is coming through GitHub, so the first thing we need to do is push those changes over to GitHub.

[00:00:17]
So it's the same process we did before, we came to the litter Source Control thing here. We can stage those, so you just click the plus for Stage All Changes, and then you can put in a message, so in this case we could say finished page one. Most of the time when you're doing these, you probably wanna do these in a bit smaller sections along the way.

[00:00:38]
For what we're doing right now, I think it's completely fine to have it set up in this way. So finish page one, we can commit that it's gonna ask us to sync, we can hit sync changes, and just like that, everything's up on GitHub. With our site up on GitHub, the next thing we wanna do is connect it to Netlify.

[00:00:54]
So I'm gonna just go to netlify.com, you will need to have an account with them, so you can sign up if If you don't have one, it's free, doesn't take very long. I'm gonna log in cuz I already have an account, and you can see I do us Netlify regularly for a lot of my own projects cuz I think it's a pretty good host.

[00:01:11]
Right here there's a big add new, there is another way you can do this if you wanna sort of not bother with version control, where you'll see a thing that looks like this. We can actually drag and drop a folder into Netlify, and it will just build the project that you drop into there.

[00:01:26]
I wouldn't really recommend getting used to that, cuz it's not the best workflow in the world. You can even update by dropping new folders in there, it's cool how easy it is, but the connection with GitHub is a bit more realistic to what you'll be doing in the real world.

[00:01:40]
And in the workforce, so I'm gonna go to the add new site and I'm gonna choose import an existing project. It's gonna ask you for what GI provider you're using, so I'm gonna choose GitHub. If you did use a different GI provider, you can go with whichever one you want, it will ask you to authorize.

[00:01:57]
You can see I the big flash there cuz I've already made the connection between, I've already authorized Netlify to connect with GitHub. So you will have to give it permission to do so, which means you'll probably have to log in if you're not already logged into GitHub, you just say yes, and now it has access to your repos.

[00:02:14]
You do have a choice of giving it access to all of your repositories, or you can select only specific ones if you you want, I just give it access to everything, cuz it's easier. But if you're just worried about privacy or anything and you just wanna focus on specific ones, there's no problem.

[00:02:28]
It's pretty easy just to select which ones you want to give it access to. And when you get your list here in Netlify, you'll only see the ones that you've given it access to, instead of seeing all of them. In my case, because I did choose all of them, it can be hard to [LAUGH] find the one I want.

[00:02:42]
So I'm gonna come over here and right FEM, I think it was from scratch and it should find it. There we go, two minutes ago, so you can see it was very recently updated, its public. But again, if it was a private repo that you're using, it's also going to be able to find it.

[00:02:59]
There's no problem at all with finding that, and you can click on it. It's gonna ask you for a site name, this is gonna relate to the URL it's gonna use. You could you leave it blank and you'll just get a random one, but we can do FEM from scratch.

[00:03:15]
And I'm gonna do example, give it any name you want, some you guys can fight over whoever gets. The default one, or the fungi finders one add, I'll do check availability, it tells me that the site name is available. Just nice to do that before you get to the end and hit submit and find out you need to change it.

[00:03:32]
But any name you want here, choose whatever you want, there's some build sightings along the way here as well. These you don't have to do anything too fancy, for this project, if you get into other things, JavaScript frameworks and things that require build steps. There will be some parts that you'll have to fill out here, though, Netlify does detect what you're using for those, so it will auto fill a lot of these and usually get it right, but you'll wanna double check everything.

[00:03:58]
In this case, main branch is correct, we don't need anything else. We don't need any environment variables, so I can just click Deploy FEM from scratch, example. And in doing that, it does not take very long, it brings us to this page where it will be a site deploy in progress, and you just wait a little bit.

[00:04:17]
In this case, it should go extremely fast because it's just a static website, that has to throw some static files online, and it will work. If there's a build step, it can take a couple of minutes to go through the build, but sometimes it automatically updates the screen to let you know when it's done.

[00:04:34]
In my experience, sometimes you need to refresh, and I can see it's not yet deployed. Sometimes when this happens, it's waiting because I'm on a free account, so you just wait cuz you're in the queue of sites that have to build. So if you find the wait a little bit long, you can also click on deploying your site and see what the holdup is, where it's busy building and deploying our site, but there's nothing wrong.

[00:04:54]
I just have to wait, you can even play a little game of find the card while you're waiting. We won't do that right now, once it's done you'll get everything coming up to being complete. Hopefully there's no errors, there shouldn't be anything that can happen when it's a static site, like we're doing now with just HTML and CSS along the way.

[00:05:11]
So we shouldn't see any problems, you can say, open, production, deploy, but you might get a weird URL. No, it gave me the right one, sometimes you get the wrong URL, but you can, if you look at the URL here, it's the correct URL. FEM, from scratch, example .netlify.app, and this website is now online and fully functional.

[00:05:29]
Well, one page is fully there, so you can share it with your friends or whatever you want to brag a little bit about being done with it. And, yeah, that's all you really need to do here, Netlify does offer you to set up a custom domain. If you have an existing one, it's super easy to connect to it, so you can do that, and they give you HTTPS for free, so you'll have a secure connection, along the way there as well.