 When I first started making websites, actually getting it on the internet was just such a pain. I mean, first of all, you actually had to pay to have it up there, which especially when you're a student and it's personal projects that you're just doing for fun, that sort of sucked. Of course, unless you're using like GeoCities or something, but it's a whole other topic for another day. But also you had to use like an FTP client. And then the first few times you're in there, it was always a bit of a nightmare. And even just like keeping up to date with stuff, even if you had like version control going and stuff, you're updating there, but then you're getting your files and having to update them through the FTP client. It was just a mess. It sucked. Luckily these days, there's just so many really awesome options out there that just work with your version control. It's so amazing. It's so awesome. And that's what we're gonna be looking at in this video. Hi there, my friend and friends. And welcome back to the channel. I'm so glad that you've come to join me once again. And if you're new to my channel, my name is Kevin. And here at my channel, we learn how to make the web and how to make it look good with weekly tips, tricks and tutorials. Normally I'm focusing on the wonderful world that is CSS, but today we're breaking away from that a little bit to take a look at how we can get our projects online for the world to see. And in this case, we're gonna be looking at how we can do it for free. To do that, I'm gonna be looking at a workflow we can have with GitHub and Netlify. Now these days there are also other options out there, but this is what I use for my own personal site as well as a lot of my projects. So I wanna share with you how it works, why I love it so much and just how easy it is to do. Now before we get into it, I just do wanna mention a couple of important notes. The first thing is with Netlify or a lot of these other free options that are out there, it is for static sites only, but that doesn't mean that it's just a regular HTML CSS JavaScript file. That's what we'll look at in this example. But my own personal site as well as other ones that I built are running with CMSs. They're built with static site generators which can end up with a really powerful site that can do a lot of things that you'd think you'd need something more robust for. Works wonderfully. It's all static at the end of the day, which means it's very fast for the user, which is very good for everybody. The other thing is I'd mentioned it before, but for this video, I'm gonna be using Netlify and GitHub. There are other options out there. And as we're gonna see in this video, you don't only have to be using GitHub to use it with Netlify. The other really important thing here, because I know I'm gonna get asked about it, the hosting side of things is free, but you still need to pay for your domain name. Now you can get a .netlify.app one for free. You can even customize that as we're gonna see. But if you want a www.yourname.com, then you will have to purchase that. You can purchase it either directly through Netlify or through a third party, which is what I've done and just set it up through them. It's really easy to do. All right, with all of those caveats out of the way, let's jump in. All right, so the very first thing you're going to have to do for the workflow that I'm gonna use in this video is to have your project up on GitHub. Now, if you don't wanna take that step and you wanna just have like a local file on your computer that you're throwing in there, I have covered that in a previous video. There's a card popping up for it now and I've linked to it in the description as well. It's just easy peasy to do it that way, but the advantage with this is you can take advantage of, you're probably using GitHub for version control on your project anyway and it doesn't have to be GitHub. It can be a site like Bitbucket or there's other ones too. I can't think of them all off the top of my head right now because I use GitHub for it. So you can see I have this project here in GitHub and the next thing I'm gonna do is jump on over to Netlify. So I already have an account on Netlify, so I can log in if you don't have one. You can sign up, obviously. Their site's really changed since the last time I was there and you can log in with GitHub. You don't have to make an account directly with them, which is what I have done. So that also makes it easier because you'll be integrated with GitHub right away. And you can see I'm hosting my own personal site and my core sites and a whole bunch of other stuff through this. So it's useful for a whole bunch of things. I actually have a custom CMS running on my own personal site but it's all done for the static site generator 11e. So it just works super well. There is pricing plans within Netlify. I've never had to use one. I've never even come close to hitting any of the things where I'd have to pay for something. So you can host your stuff for free for sure. I'm gonna go here to new site from Git and I'm gonna click on that and here you can see GitHub, GitLab and Bitbucket. So you can choose any of those and it's continuous deployment which is just absolutely amazing. So let's go and open our select GitHub because that's where I'm gonna be working from and for me it was already authorized. You might not be so you might just have to take the extra step there to authorize yourself. And then you can see a list of the different sites here that it can see. Now I took the choice when I authorized it to get into my GitHub to only be able to see select repositories. You can also just tell it that it's allowed to see all of them. I don't know why I made that choice but it seemed like a good choice at the time. But as you can see, it can see private and public ones. So that's obviously really nice. So you don't have to have like public repos for this to work or anything like that. And because I can't see and even see can't see your repo here can figure your Netlify app on GitHub. So I'm gonna click on that. And then once you put your password in you can go through and you'll get in and what this is gonna do you just scroll down a bit and then you can select your repositories that it's allowed to see. So you can see I can choose all repositories or I can go through here and in this case, I want force, carb calculator. I'll click on that, I'll hit save and it brings me back to my page here. And then I can click on the one that I want which is right here. Once I get there, you can see the owner. So that's my team. You can choose your branch to deploy. So you don't have to deploy off of the main branch. You can deploy other branches. In this case, I have just a really basic site. So I don't have to worry about any of this. But if you have a different directory that is your base directory or a build command that you wanna run on a published directory you'll wanna set that all up here. And there are more options in show advanced. We're just doing a really simple site in this stage. So I'm just gonna click deploy. And just like that, it's amazing. It's going to work. So site deploy is in progress and it's done. My goodness, that was fast. I can click on that URL that gave me and I can see that my site and my thing that I created is here and it's working and it's live on the internet. And that's really exciting right there. You can see how easy that was. You can see that I get the option now to set up a custom domain and I can also secure the site with HTTPS. So right now on this domain that it's on it's already HTTPS. But you can see it's sad, Hamilton a whole bunch of numbers. One thing you can actually do if you go to your domain settings right here under options, you can edit the site name. So you can change this so I could make this force carb carb calculeator if you want to have it with a netlify.app address. And as long as it hasn't been taking it would work. So now I've changed that. So at least it looks a little bit better than what it did before. Or if you have it in your own custom domain there's two options there. So let's go back to the site overview and you can go set up with custom domain. And in this case, I have www.force carb calculeator I can't spell .com and I'm gonna hit verify. And it's already registered. If you registered this through a different register click add domain. I have already done this through another registrar. If it's a name that hasn't been picked and you haven't purchased it yet you can also purchase it directly through netlify. This is a cost. This is not free domain names except for a few specific, I don't remember where they are. Is it like .tk or something like that can be free. The next thing is you're gonna wanna, if once you've said that this is the domain that you have you'll wanna check your DNS configuration. If you click this it's gonna give you the DNS information you need from netlify. Or it might even have like a configure thing that you'll have to click on first and then you'll just run through a couple of steps and it's gonna give you the DNS numbers you need. I'm not gonna run through that part of it because it depends on the third party that you're using where you bought the domain from. So everyone's gonna be a little bit different. They're all generally very easy to set up. And if you get lost a little bit your provider should give you like they all have documentation on how to do it. It's really not hard to do. They just give you four things you copy and paste into whatever company you're using in your dashboard and it should work pretty fast. It does take a little while to propagate so it might not immediately work but it should go really quickly. And that's gonna be done. Now also you don't need to buy an SSL certificate because if you go down further you can see here that you can get your own certificate from here. This will only work once the DNS configuration has propagated so you'll wanna check back a day later or something like that, refresh the page and then you can verify your DNS configuration and they're gonna set it up on an SSL automatically for free. So as you can see that didn't take a lot of setup. It was pretty quick. Our site is online and functioning and where the real beauty of that is is now over here, if ever you have some changes so this is the GitHub app, you can also do it if you're doing it another way but I just wanna open VS Code here really quickly. What I wanna do is set it up so we have, I'm just gonna make a really small change here so you can see force carb calculator, our first carbonation calculator is the name of it. Let's just change it to force carb calculator instead and we can push those to GitHub so you can see the change is coming through right there. I'm gonna say updated my H1 and I'm gonna commit that to my main and I'm gonna push it so it's pushed over to GitHub. We'll get rid of that. And I'm not gonna click on this one just because I haven't finished setting that side of things up but if I did, it would work but what I will do is come on over to this one because I know that's where it's working and you can see that it's force carb calculator now. It's already made that change and you can actually see that if you go back to here and I go to site overview you can see that this was the original one and then this is the one that got published and if you want to, you can go through and you can actually publish one of your previous deploys as well. So it might be like holy crap, the site just went down I made a change that broke everything. I'm gonna roll back to one of my previous deploys in one click, fix whatever the problem was and then we'll go from there. So that's not an issue. Now, as I said before, this is coming off of the production so off my main branch here. So this is like the production code that everybody can see. You can also see there's an auto preview your PR or branch. So this is really, really cool. If there's a pull request or branch you can deploy previews. So just for fun, let's go through and we'll open up this. We'll make a small little change here. Let's create a new branch. So we're gonna make a new branch here and we're just gonna call it demo branch and we're just gonna call it new title. We're gonna hit create branch. And so now I'm working on that branch. We'll hit publish. Let's open this back up in visual studio code and now I wanna change this carbonation, carbonation, carbonation, carbon, carbonation. I don't even know if I spelled that right. There we go, whatever we'll find out in a second but we wanna switch over to that. So I hit save, I'm going to and maybe people are yelling at me for not using the command line for this but updated title. That's so, if I have a GUI I'm gonna use a GUI to do something. And so now you will notice that it's still grayed out but we've made that branch. So what you need to do now is if you go over to the deploys tab right here and you go to deploy settings and maybe there's other ways to get here but we want to be here where if we go down a little bit you'll see branches and right now branch deploys by default they're set to deploy only the production branch. So we can go to edit settings and then we can say that we wanna do deploy all branches pushed to the repo or you can let me add individual ones if you wanna only focus on certain ones but maybe you have like a staging one. So you wanna use, you wanna have your main branch and your staging ones are the only ones that are actually being built. So you could set something like that up. So I've saved that, deploy all branches just for simplicity sake because we made something so simple. So go back to my site overview and let's see. Now it's still not showing up here. So I'm gonna try one more thing. I made a small little update there updated title again just to see if by pushing it now that we've enabled those I'm hoping that it pushes that and that things get cleared up and it finds it. So let's go to the site overview again and let's see. And if that doesn't work then who knows what's actually going on but I've definitely used this in the past. There we go. We can see I have my new I just needed to push that branch again and now it found that branch. So I can go, it has the main which is my production branch and we have the new title right here. So if I click on new title I can see that branch deploy and it was already built and I can preview that deploy. And as you can see it's at like a completely random string here for the name of it. So it's not like someone's gonna accidentally fall across one of these. Someone needs the exact URL to be able to find one of these. So it could be a nice way to build things out. It's still gonna be working. You can see the title has been updated and then I can choose if I wanna pull that into my main or not. So I think that's really, really cool as well. And now if actually you'd wanna see a little bit more I've also done another video where I looked at building out a blog site using 11T which is the static site generator and getting it all set up on Netlify and integrating their CMS with it. If you'd like to watch that video and see how it's all done that video is right here for your viewing pleasure. And with that a really big thank you to Zach Randy and Stuart who are my supporters of awesome over on Patreon as well as all my other patrons for the monthly support. And of course, until next time don't forget to make your corner the internet just a little bit more awesome.