Host your site for free, with version control, staging, and more

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 sucks unless you're using like geocd's 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 on the through the ftp client it's 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 going to 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 going to be looking at how we can do it for free to do that i'm going to 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 want to 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 want to 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've built are running with cms's 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 mentioned it before but for this video i'm going to be using netlify and github there are other options out there and as we're going to 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 going to 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 going to see but if you want a www 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 going to use in this video is to have your project up on github now if you don't want to take that step and you want to 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 this 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 going to 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 um 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 course 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 it's all done for the static site generator 11 so it just works super well and you know 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 have to pay for something so you can host your stuff for free for sure i'm going to go here to new site from git and i'm going to click on that and here you can see github git lab 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 going to 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 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 configure your netlify app on github so i'm going to click on that and then once you put your password in you can go through and you'll get in and what this is going to 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 uh 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 uh that is your base directory or a build command that you want to run on a publish directory you'll want to 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 going to 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 they 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 um one thing you can actually do if you go to your domain settings uh right here under options you can edit the site name so you can change this so i could make this force carb carb calculator if you want to have it with a dot netlife.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 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.forcecarb calculate calc cal q later i can't spell dot com and i'm gonna hit verify and it's already registered uh 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 um i don't remember what they are like.tk or something like that can be free um the next thing is you're going to want to if once you've said that this is the domain that you have you'll want to check your dns configuration if you click this it's going to 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 going to give you the dns numbers you need i'm not going to 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 going to 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 going to be done now also you don't need to buy an ssl certificate because if you go down further you can see here that um the you can get your own certificate from here this will only work once the dns configuration has propagated so you want to check back a day later or something like that refresh the page and then you can verify your dns configuration and they're going to 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 via um the github app you can also do it if you're doing it another way but i just want to open vs code here really quickly uh and what i want to 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 um 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 going to commit that to my main and i'm going to push it so it's pushed over to github we'll get rid of that and i'm not going to 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 uh create a new branch so we're going to make a new branch here and we're just going to call it demo rant and we're just going to call it new title we're going to 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 want to change this carbonation carbonation carbonation carbon carbon carbonation i don't even know if i spelt that right there we go whatever we'll find out in a second but we want to 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 you know i like if i have a gui i'm going to use a gui to do something and so now uh 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 want to do deploy all branches pushed to the repo or you can let me add individual ones if you want to only focus on certain ones but maybe you have like a staging one so you want to use only you want to have your main branch and your staging ones are the only ones that are actually being built uh so you could set something up like that up so i've saved that deploy all branches just for simplicity's sake because we made such something so simple so go back to my say site overview and let's see now it's still not showing up here so i'm going to try one more thing i made a small little update there updated title again um 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 so that's all it took 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 the name of it so it's not like someone's going to 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 going to be working you can see the title has been updated and then i can choose if i want to pull that into my main or not so i think that's really really cool as well and now if actually you'd want to 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 zack randy and stuart who are my supporters of awesome over on patreon as well as all my other patrons for their monthly support and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 24,836

Rating: 4.9666667 out of 5

Keywords: HTML, CSS, Kevin Powell, netlify, github, netlify with github, hosting, host, host your site, host for free, web host for free

Id: i9qCmQ2EeUA

Length: 13min 20sec (800 seconds)

Published: Thu Sep 30 2021