did you know that you can actually host a website on github directly this is something i recently
learned about and it's something i want to show you how to do in today's video it's a feature
called github pages and essentially it allows you to use your repository code to host a website
so whether you have something for documentation or you want to host your own
personal project that you're building on github github pages allows you to do that
so in today's video i want to explain a little bit further about what this is
i'll show you step by step how to spin up your first site using github pages and then at the
end we'll look at a pretty cool way to use github actions to automate this whole thing
so the first example we'll look at is how to create just a very
basic website and we're just going to add one file an html file and see how we can host it
so as it says here step one is to create a new repository so if i go over
to my github page new repository so the only criteria in this scenario here is we need to
name it with our username.github.io where the username is my username or the organization
that we're using on github in my case i'll paste this in here but instead of username it's hello
kds it's the owner it's also my username so we'll keep it public and create repository that's it for
right now now the next step is to depending on what you're doing is we're going to clone this
locally so copied this here so it's already filled out for me and in my local terminal in my case i'm
using vs code the command is git clone and i'll paste that url in here and it's empty obviously
we just created it so here it is and all we'll do and as they recommend here is just creating
an a simple file that says hello world it's just an index file so i'll just add it here index.html
but in this case you know you could make this as complicated as you want with html and css probably
add some javascript as well it's the only caveat here is you can't have a database connection
that's it's a sport it's for a static website so in our case we're just going to say hello world
just to get this going and we're going to then add commit and push the changes so first let me
change directories into this now we'll do git add all of them git commit initial commit
that's typo mr added an extra space here let's get rid of that and now get push and i'll just
do origin head and it's a little different from this but that's just how i do it and now it should
be pushed directly to our repository i know we went through that pretty quick and here we can
see it went right to main index.html and we have our site here and we can see actually right away
this dot is indicating that there is an action running and if we go to actions we can see it's
going through something here so automatically it recognizes that you are pushing to a branch with
this specific naming convention and it automatically starts building
your site for you i didn't even have to set anything up and it starts going for right away
for you so while this is happening i'm going to go to settings and i want to show you where
this all is set up so within settings on your repository you can go to pages and in here it says
okay your site is ready to be published here's the url and we matched the default url so it kind of
all starts working behind the scenes and you can pick which branch your pages site is being hosted
from so right now it's as we push just to main so it's recognizing main and it's just the root
folder but as we'll see later in this video it's actually a good practice to have a specific branch
just for your github pages and that's where you can select the branch and it'll pull those files
you can keep it separate from your code if maybe it's let's say for a documentation of a site
or something like that and here's where you can do some built-in themes but we'll touch on that
in the next section here so let's go back to actions we can see this completed it just took
two minutes and it deployed this site and what i'm going to do is open a new private window just to
make sure nothing is still there paste this url in here and there it is we can see hello world
it's just that basic site that was built and this is public for anybody to look at so at this point
we've created a simple website through our github repository and it's public for anybody to use
at this point you could build this out and be as creative as you want with your html and your css
and all that stuff but another great feature of github and github pages is the fact that it comes
built in with the with that template of jekyll and so let's see how we can do this and and just to
show you this fully what i'm going to do is delete this repository and we're just going to start over
so let's go ahead and delete this and let's just let's just do it again
so i'm going to recreate the same name public and the reason i'm doing this is just to
start from a blank slate to show you how the templates work because it
when you do it initially it does give you a default file which is helpful to just see what
uh what this all looks like so here we are we're back to the basic empty repository but
rather than doing this through the terminal what i'm going to do is go right to settings pages
and right now you know it's it's empty we haven't done anything with pages it doesn't recognize
any files here but what we can do is go to choose a theme and again this is j uh a tool
called jekyll it's uh templating kind of thing for website so you can make it a little bit nicer and
there's different themes we can use let's let's just select this one so if we do select theme
and this is the file i was talking about it's going to put it right in our main directory here
and it just gives you something kind of cool to look at so let's go ahead and select commit
changes so now our code not only has this in this markdown file but also it comes with a config file
that is indicating what the theme we selected is in our case it's minimal and if you wanted to pick
something else or switch it this is where it would switch and you do all that stuff with it and all
that so let's go to actions here and we can see again right away it just runs that built-in action
it recognizes what we're doing it'll take about a minute or two to deploy and we would expect
to see this deployed with you know that markdown file now and with some links built in so let's do
new private window get ourselves ready all right so now this deployed again so let's copy this link
and go back again and now we can see it looks like this so it's a little bit nicer again because
it's using that markdown file but but what we can do here is it you know you can just see
kind of some ideas of of what you can do here and it also gives you a link to jekyll so again this
is what's built in with github pages this is an option for you and you can do all sorts of stuff
make it more dynamic without a database but you can build something like a blog or something
you know a little bit more than just maybe a few pages but there's a lot of use cases here
for your own custom site or one built through jekyll which i think is a pretty cool feature
again it's built in with github so you can host your your portfolio make a blog whatever you want
now the last thing i want to go through here is specific to documentation and this is something
that at least in the data world is becoming more and more popular and a tool that we like to use
that i cover a lot on this channel is dbt data build tool and one of the features
in that is a documentation it hosts a website and a lot of times it can be kind of tricky to
figure out where you want to host that so what i'll show you here is how you can use
pages to host your dbt documentation but again you could do this for pretty much anything
that you wanted so here's an example of dbt project that we've worked on in the past and
i have it copied locally here as well so if we open up here in visual studio code here's the
dbt training and if you're not familiar with dbt essentially it's a data transformation tool we can
run a couple commands to put together some html and website files within this target directory so
we want to deploy this target directory as github pages but because this is going to be constantly
changing we also want to be able to automate this so we're going to do two things at once here we're
going to update our github workflows so we can automatically deploy our github pages based on
those files but also have it create a separate branch and pull from this target directory all
together so let's see how we can do this so the first thing i'll do is check out a new branch
if we double check we are now on this branch so what we'll do again we're going to
update our already existing workflow file here that we have but do it in a way that allows us
to automatically deploy a new version of our documentation and the way we're going to do this
is if we look at the marketplace for actions one of the options we have is one for deploy to github
pages there's a few of them that you can use but this is just an example that i found that works
and and that i like so as it says here it can be used to push your production rated code to any
br into any branch you'd like including this gh pages which is a default one just getting
right to it what we want to do is include some of this logic within our workflow file and all
this will start to make sense once you see it in action so one thing i'm going to add here is this
permissions content right so i'll add this under here check out v3 we have v2 so we can update this
we'll set up python install dbt these are things that are required for dbt for this particular
tool to work but if you have something else obviously this could be different and instead of
doing a full run of this tool what we're going to do is we'll say compile docs and the commands we
want are dbt docs generate don't worry too much if you're not familiar with this ultimately this is
the command within this tool to compile our code and create this website these website files
so now what we want to do is include this part right here so that we can use this act to deploy
this as a website and it'll reference this in our case instead of the folder build we don't have a
build folder like we said we want to use this target folder so we'll do target so essentially
what's going to happen here is this will compile and create some website files within this target
directory and then this is going to look within that target directory and move it to a new branch
called gh pages and use that to deploy our code just to make sure we can see this run on our test
branch once we push this i've added this right here on push to this branch which is the one we've
just made so it should run as soon as we check this in and push it okay so let's save so to push
this forward we'll do a git add all git commit add a commit message we'll say update workflow
and then git push origin head to get it up to our branch now because we added this condition
here to push we should expect to see this action already runs so let's go ahead and i'll go back to
our repo here and let's let's refresh and we can see this is already logged if we go to branches we
could see this dot here that is an indication that there is some sort of action running so
that was triggered let's go check this out click through to actions and see what's happening here
so we'll let this go through it's going to run a couple dbt commands and then ultimately when it
gets to deploy deploy is what we called the step for deploying our pages so we should see this
then do something for that and here we go we can see github pages deploy action so it went through
and if we take a look at what happened here ultimately it's creating a new branch it created
one just for this workflow and assigned it to github pages so it's committing to a new branch
called github pages and that's where it's going to deploy these files to a new branch so we would
expect to see a new branch somewhere called github pages and here it is updated one minute ago and if
we look at this this was created from our workflow and here are all the files that were compiled
from dbt and then you know push from this action so we have our index and all sorts
of other stuff in here and ultimately what we want to do now is point our pages to
this branch to this file so let's go to settings we'll do just like we did before pages and it
says it's ready to be published here but we don't you know we don't have anything there yet
and if we go to source we can select gh pages and just have it as this so let's select save
and as soon as we do this we would expect that previous action to be triggered and here it is
it's building the pages and it's going to deploy it for us and there it just deployed it and we're
going to open a new private window just to make sure we don't have any issues here and let's take
a look and here is again at our link and this is what the dbt docs site looks like but it's hosted
on github and essentially the way this is going to work is because we have this set to this page here
and we have this workflow here to always be looking for this target essentially every time
we run this it's going to compile the latest version move it to that branch through this
action and then because it will recognize there's an update to the branch github will
refresh our pages which will give us this here and keep this constantly updated for us so this
is a really cool use case of github pages and something that i think can save you a lot of time
and it's also nice because you don't have to set up any servers you don't have to manage
any of that and if you want to add a custom domain let's say you don't want it to just be
you know this default you can add a custom domain and have it based on whatever it is you're
building from your github pages as well hopefully now you have a good understanding of github pages
and can start using it on your own thanks as always for watching and i'll see you next week