🚀 Add to Chrome – It’s Free - YouTube Summarizer
Category: Web Development
Tags: GitHubHostingStaticTutorialWebsites
Entities: CSSGitHubGitHub ActionsGitHub PagesHTMLJavaScriptJoshThe Common Coder
00:00
are you looking to host your project on GitHub pages but aren't quite sure where to start no worries in this video I'm going to show you everything that you need to know so that you can start working with GitHub pages and hosting your projects today so without further Ado let's go ahead and get started
00:16
what is going on everybody welcome back to the common coder my name is Josh and in this video I'm going to be showing you everything that you need to know to start working with GitHub pages so the first thing that we need to do is talk about what GitHub Pages actually is so GitHub pages is a stat static site hosting service that is available from
00:32
GitHub so static site essentially in this context means that there's no server side rendering so we're not going to be using Frameworks like Ruby on Rails or asp.net core it's just going to be static client sites these can be just HTML files um or it can be even generated by a modern framework as long
00:48
as it's gone through a build step or you set up a build pipeline using GitHub actions going through these bullet points like I said there's no application server so again just static sites here front end clients only so we're mainly working with HTML CSS and JavaScript um you can connect to other
01:03
apis you know if you're using uh JavaScript to reach out to other sources to power your site or do interactions on your site but GitHub Pages cannot host the server directly so that's the biggest difference here like I mentioned we can use front-end Frameworks like angular react view Etc uh but we either
01:19
need to commit the compiled output into GitHub or utilize a build step through GitHub actions so that build step through GitHub actions is out of scope for this video but if you're comfortable working with something like react or angular and you've gone through the build process using the build script uh
01:35
inside of your project you can host that output inside of GitHub pages with no problem now GitHub Pages allows you to have one main site per account so basically for your GitHub account you can have one main site that represents uh you and that's going to be at whatever your GitHub username is.
01:52
github.io and then from there you can have unlimited project sites and so for each repository each repository can essentially be it own hosted site if it is a project that outputs CSS uh HTML and JavaScript in some way and so those will typically have the form of GitHub
02:08
username.in it'ss out of the way let's go ahead and see how we can host our site using GitHub Pages all right so on my screen here I have a demo project that I created that's basically just an HTML
02:25
file a Javascript file and a CSS file so this is basically just a static website the index page here is what's going to be loaded when the user navigates to uh this GitHub Page's URL and so let's go ahead and see how we can get this project uh up onto GitHub pages so
02:41
inside of the repository up here on the top navigation bar we should have a tab over here on the right hand side called settings so if we click this on the left sidebar here if we scroll down about halfway we can see there's a section here that says Pages we can go ahead and click that and this is how we can deploy
02:59
our site to GitHub Pages now behind the scenes it's actually just using GitHub actions to do the deployment um but there is a server that is hosting these files so what we want to do is go ahead and deploy from a branch now in our project we only have a main branch so we're going to go ahead and deploy from Main and then we're going to deploy from
03:14
the root folder we're going to go ahead and leave it on root because we only have our main root folder with an index in there that's what we want to go ahead and serve when the page loads up if we scroll down a little bit more there's a spot for a custom domain so if you own a domain and you want to point that to uh your GitHub project using GitHub pages
03:29
you can totally do that all right so when what we're going to want to do here in order to kick off the build is go ahead and switch this main branch to none and go ahead and click save and then once we've done that we're going to go ahead and switch it back to Main and then click save again and then that should kick off a build so if we go into
03:45
the actions tab up here on the top go ahead and click on actions we can see that there is a Pages buildin deployment kicked off by me the common coder and so as soon as this is done we should be able to see our site in GitHub pages so I'm going to go ahead and leave it here on the actions tab so we can see this
04:01
workflow run and this should refresh automatically but if you don't see this green check mark show up in a little bit of time just go ahead and refresh and see uh if it updates after you click refresh but you can see here that we have a green check mark which means that my build was successful so if I go back into the settings tab click on the pages
04:19
tab in the sidebar we can see that it has added this section up here at the top that it says my site is live atth common cod. github.io slm my project name which is GitHub Pages demo so if I click on visit site here you can see that it loads up my page which is just a
04:36
simple site go ahead and make this a little bit bigger this says hello world this page is hosted using GitHub Pages we can see that here in the URL up here at the top and it's Dynamic too so I'm using JavaScript on this page to dynamically add this little bit of text so if I refresh this we can see this here it's not there and then it appears
04:53
after a certain amount of time and and so this is how you use GitHub pages so when you first navigate to the Pages tab if you've never done a Pages deployment before we need to either switch this from nun to Main and that will basically kick off the build and make sure we
05:09
select our folder um if we're on Main and the folder is already there we need to go ahead and select none basically to take us off the branch and then select our main branch again so that way it picks up the deployment and automatically deploys to get a pages and what's cool now is if I make a change to
05:27
this it will automatically redeploy my site form so for example let's go ahead and go into VSS code and I have this GitHub Pages demo here I'm going to go ahead and click into my index.html and maybe instead of a period I want an exclamation point here because it's
05:43
exciting that we're deploying from GitHub pages so I'm going to go ahead and add that exclamation point using visual studio code Source control panel I'm going to go ahead and commit this change so we'll just say add exclamation point I'm going to go ahead and Stage the file and then click commit and then
05:59
and then push these up to GitHub by clicking this sync changes button all right and so once I push that change if we go into the actions tab you can see that GitHub recognizes that change and then it kicks off another build okay so depending on how you have your
06:16
project set up maybe you're deploying from a branch or maybe you're deploying from Main each time that GitHub recognizes that there's been a change to that Branch it's going to automatically build and redeploy your site to GitHub Pages you can see that that second build was successful so if I jump back over to
06:31
My Demo project that's being hosted on GitHub Pages if I refresh this there is my exclamation point you can see that it's also still Dynamic all right and so that is going to do it for this GitHub Pages demo thank you so much for coding along with me today if you like this video and found this information
06:47
valuable please give me a like down below and if you're new here please consider subscribing we're going to be learning a lot more about git GitHub GitHub Pages web development and pretty much everything in between so if that's what you're into I'd really love to have you along for the journey so until next time be sure to stay curious never stop
07:03
learning and I will see you all in the next video [Music]