Transcription
Hey, how's it going? Alex here from Ideaspot. Today you'll learn how to host a website on GitHub for free. I'm using GitHub Pages to host this HTML template site. I'll show you exactly how I did it, even using my own custom domain. This is possible on GitHub for free. So, if all this sounds interesting, then keep watching.
For this tutorial, you'll need a GitHub account. You can get one from github.com. Head over there and sign up if you haven't already.
After signing up and logging in, we are in our dashboard. We can create a repository, or you can do this through your menu here, and your repositories are there. Let's create a new one. Now we just give this a name. I'm going to call it "website-demo." Here we want to choose "public," and then "create."
Now we can upload our files. One way of doing that is just uploading it directly through the browser here, so we can just drag them onto our repository. So, for this demo, I've already got a simple HTML template website on my computer already. I'm going to highlight those in the folder that I've got them and just drag them in here, and they are to upload. So we just wait for this to upload.
If you're curious about the template I'm using here, it's called Spectral. I got that for free at HTML5up.net. Now there's lots of places to get free template websites; uh, this is one of them. Another good one is templatesjungle.com, and there's another repo on GitHub called "techex GitHub IO 100 template bundle." I'll put links in the description for all of these. So, so there's lots of ways you can build a free website like this.
So my files are finished uploading here. Now you can do up to 100 files using the browser; otherwise, use the GitHub Desktop. It's probably the easiest way of doing it for more than 100 files. You can get that desktop at github.com.
Next step, after uploading, we want to scroll down here and commit the changes. Go ahead and click that one. This does take a few minutes. After that is all done, we're going to head to settings, and under Pages here, and here under Source, let's use GitHub Actions. We're creating a static HTML website, so this is the workflow we're going to use. Click "configure." There we can leave this as default. Everything we are publishing is under the main branch, so we can just leave that as it is and commit the changes there. Go ahead, click "commit," and here we can check the progress of our action. If we check our actions tab here, we can see this is deploying the static content. So we just have to wait a few seconds for this one to finish. In this case, it just took a few seconds—21 seconds—and we're all done. And if we head back to settings and under Pages again, we can see our address; our website is live here. So there we go. So this looks all good; our website is up and running here at the GitHub address.
Now, if we want to use a custom domain, I'll show you how to do that. Under settings and Pages, you'll find "custom domain" here. So I'll be using my domain, ideaspot.site, for this demonstration. Here you can learn about configuring the custom domains through the link there. So if we open that up and go to managing a custom domain, the most important part are the IP addresses that we need to forward our domain to. So we'll need to go to our domains DNS manager and point these four IP addresses using A records. I'll show you how to do that right now. So I'll grab the first one there, copy it, and I bought my domain from Namecheap. It's a nice cheap way of getting your domain registered. So here is ideaspot.site, and your DNS manager, in the case of Namecheap, is under Advanced DNS. Here we're going to add those A records. So, put in that IP address here; we're going to use "@" there for the root and click the tick there. So I'll just repeat this process for the other three IP addresses here. So I'll go ahead and skip ahead and do that.
So that's all done. I've got the four GitHub addresses on here. The other thing that's worth doing is adding a CNAME or WWW as well. We're going to point that to the domain name there, ideaspot.site, in my case. Let's add that one as well. There we go. Whenever you change DNS records, it can take some time for them to start working. You can check the progress over at dnshcheck.org. Just put in your domain name there, check the A record, and then hit search and just see if it's actually hitting these new IP addresses. In this case, I've been waiting a bit over half an hour, so it's already working, but if it's not working perfectly yet, just wait about, about 30 minutes usually, and that should be fine. So our domain should be ready. So back under settings and Pages, we can put ideaspot.site in here and save that in, and this should work. Okay, so after a few moments, you should get that DNS check successful, and this should be all good. Now also just make sure that "enforce HTTPS" is ticked there as well, as well to get that extra layer of security on your website. But from here, it should actually update, and you've got your custom domain now. Here your site is live at your custom domain. If we click that, we can see our site is working here on our custom domain. So we've got free hosting with our own custom domain.
So that is how to host a website on GitHub for free with a custom domain. So this is all possible for free. This was with an HTML template. Let me know if you'd like a bit more detail on how to customize your HTML template, cuz that's fairly easy. I could do that as a tutorial also. Let me know if you'd like to show uh how to do this with WordPress. You can use Simply Static, convert a WordPress site to static, and then host it on GitHub. You will need to use that desktop application to upload the files because there's much more than 100 files when you're using WordPress. Also, um, for those of you who missed the last tutorial, Cloudflare Pages is another very simple option for hosting static pages. Um, I've done a previous tutorial; I'll link that on the end screen here. But thanks for watching. I'll see you next time.