Hosting your site for free, with version control and more

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

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