How to Create a Free Website Using GitHub Pages
hey everyone this is tony teaches tech i’m tony and i’m going to show you how to create a free website with github pages now this is a 100 completely free website free hosting a free sub domain name and what i’m going to do in this tutorial is walk you through the process of doing that you have a couple different options for how you want to design your website it’s a simple website it’s not anything that is complex where you’re doing database interactions or anything it’s more of a static website good for just having like maybe an about page for yourself or links to your social or a business website where you just want a landing.
I’m at Github Com I’m Going to Log
page for people to come to so that’s something we’ll learn how to do let’s go ahead and get on into the tutorial here and what i’m going to do i’m at github.com i’m going to log into my account and sign in here and once you’re in your github account once you created that if you already have one what you want to do is to create a new repository and this repository is going to be the home for your website so the thing that we have to know here is if you want a subdomain a github subdomain you have to follow the format exactly as i’m going to show you here okay so my username for.
github is tony flow and if i want my github subdirectory to be tonyflow.github.io i need to type that in specifically so tonyflow.github.io now if i type something else in place of tony flow like um lemon or something like that it’s not going to give me that url it has to be your domain name dot github io to take advantage of that subdomain okay you can give it a description if you want to this is going to be a public uh repository obviously because we want people to access it on the internet and the only thing i’m going to do here is to add a readme file so let’s go ahead and create this repository and.
obviously by default it is empty but what i want to show you is if we go to settings and scroll down here to github pages you’ll see that your site is ready to be published at tonyflow.github.io so let’s see what that looks like it’s empty right now there’s no content whatsoever but let me show you how we can use something called markdown a very basic it’s actually what if you’re familiar with github it’s what the readmes use to create their readme files with some amount of formatting it’s different from html but we’ll show you how to do html later and i’m also going to show you a third option which is using a custom i.
On Our Website I’m Going to Get Rid
guess a theme that already exists like a template so let’s start with markdown the very simple solution and then we’ll get a little bit more complex so what we’re going to do is to edit this readme because that’s kind of what we’re seeing on our website i’m going to get rid of everything in here and i have some markdown that i um wrote before here and it’s just it’s basically just showing you how markdown works so for a h1 heading element you do a hashtag followed by that for a h6 heading element you do six of them um you have bold text italics text block quotes all this stuff so this is kind of what.
it looks like if you want if you want to if you want to know how to do this on your own you could just type search github markdown um so i’m going to actually commit these changes and now if we look at our website at tonyflow.github.io and it does the thing i’ll say here is it does take a couple minutes to propagate if this isn’t a caching issue so let me see if um if these changes will show up in a guest window they do not so let me pause the i’ll come back with you in a couple seconds when this actually those changes actually are applied to our website okay and those changes have.
just been applied to our live website so tonyflow.github.io you can see like i was talking about the header one element the header two element all the way down to header six and then we have our bold text our italics text block quotes all that stuff so this is an example of basically what you can do with simple markdown and we can do images too so that’s one option another option is the template that i was talking about so let’s go back here and let’s try to apply a template to our website so uh the templates um there’s something called jekyll that that’s where they come from and i’m gonna let me first show you the.
To the Github Pages Section You’ll See That
templates and then i’ll show you how you can get additional ones later on so if we go to settings again for our repository and then go down to the github pages section you’ll see that we can choose a theme here and like i was saying it’s a jekyll theme so let’s click on choose a theme and you have um i don’t know maybe 10 different themes that you can choose from here for default and what i’m going to pick i don’t it really doesn’t matter let’s pick architect that looks kind of cool if you if you don’t like these themes like i said i’ll show you later on in the tutorial how you can get.
additional themes or where you can get them additional themes but let’s pick this one for now select that theme and there’s nothing else we have to do because if we come back down here to github pages section you’ll see that we’re now using the architect theme and if we refresh our page here again a caching issue let me pause a couple seconds and then when this actually propagates i’ll get back with you okay about a minute later those changes have propagated and we can see now that theme has been applied so we got a nice header up here with a different type of font and you can see that throughout the entire page here we.
still have the same markup the markdown i should say that we have been using tables images all that stuff so that is your second option to apply one of those jekyll themes and like i was saying the third option is to upload an entire website a static website to your github repository and um let me show you how to do that so if we go back here to the root of our github repository let’s first get rid of what we have in here which is just the readme and these this yaml file that they created for us so let’s get rid of this we’ll delete that uh yep commit that and then we’ll delete this.
To Our Github Repository So We Click On
yml file commit all right so now we have an empty repository we can add and on my desktop i should tell you we have i have a static website with some html css javascript files and some images as well so what we can do is actually upload this entire directory to our github repository so we click on add files and upload files and we can either drag and drop it or choose it i’m just going to drag and drop this entire directory and github is smart enough actually i want to not drive do the directory i’ll do the contents of the directory into here and github is smart enough to recursively upload those to the.
repository so we’re done with this and while that’s uploading we’ll uh scroll down to the bottom and it looks like it actually finished by now we have all those images javascript files css files all that stuff for our static website we can commit those changes and it says it’ll take a few minutes for this this process to complete so it processes the files and again it looks like it finished pretty quickly so at this point now if again we familiar with the caching the time it takes to propagate let’s see if we have any luck with that not yet again let me pause the here when this um when this change propagates i will resume.
Not Um Github Pages Is Not Recognizing The
the with you okay guys so it’s been about like 10 minutes or so as you can see here um from the last time that we committed this file these files and there it’s not um github pages is not recognizing the index.html file which is as you can see here it’s a required file for this website to work but what i did do is i went to slash index.html and it is serving my website as expected so i think based on my research i think it’s just a matter of time before whatever happens in the backend of github that it’s recognizing that index file and it is able to serve your website from your name.github.io but.
unfortunately that hasn’t happened yet but um from experience i know this will happen it just might take a little bit of time so anyway we have our github website here and it is a static website as you can see all those files that we uploaded are being served directly from github pages hosting and um this everything up until this point we are working with tonyflow.github.io the subdomain but if we wanted to add additional websites we can do that with a subdirectory so let me show you how we can do that so let’s get out of here and what we’re going to do is actually create a second since it’s going to be a separate site.
Do Tonyflow Github Org Well If You Wanted
a second repository for this demonstration so let’s add this a click actually let’s make this full screen and then we’ll make a new repository and remember how i was saying in the beginning if you wanted to have the subdomain working you would have to do tonyflow.github.org well if you wanted to do a subdirectory you can just type something like um demo okay very simple and then we’ll do the same thing as before uh we’ll add the readme and create the repository and what we want to first we can go into settings and then go down to the github pages section and you’ll see that as uh it looks a little bit different than it did.
before um and right now it’s saying that there is no website uh running but if we wanted to do that we can select the main branch here and that’s gonna serve out of that directory and like we did before um well we can pick a theme but let me first point out that we’re using tonyflow.github.io demo right so let’s open that up and again we’re getting that 404 because it takes whatever amount of time to propagate but in the meantime let’s choose a theme this time we’ll choose um the hack theme that looks a little bit different so let’s select that theme and again this is this is just going to be the same process.
At Tonyflow Github Ioslashdemo So Again You Can
as before it’s just a difference between a subdomain the default sub domain and then a subdirectory under that so let’s see if that has finished loading not yet unfortunately i’ll give it a few minutes hopefully that works let’s pause one last time here and then i’ll catch up with you when it finishes and literally right after i pause the i refresh the page and it has loaded up here at tonyflow.github.ioslashdemo so again you can use markdown here you can do your custom html css javascript website in either case for a subdirectory or a subdomain so oh guys and one last thing i forgot to mention that if you do want to theme a jekyll theme.
that’s not listed as you saw before you can go to jekyllrb.com resources and then there’s all these uh repositories for themes that you can apply so let’s just look at this one jam stack themes.dev so you have all these other themes that you can get here the other options are jekyllthemes.org and even more options here lots and lots of options and then the last one jekyll themes dot io so um and these look some of them are paid you have to pay for some of them are free so i just want to make sure i mentioned that we’ll continue on guys if you have any questions about this let me know in the comments below.
That’s Not Github Io That You
i’ll do my best to help you out i have another about how to add a custom domain name and one that’s not github.io that you can check out here for more like this from me in the future and if you do i’ll see you in the next one [Music] you.
