Launch Your Website with GitHub Pages in 2026

1. Course Introduction: Welcome to the launch your website with GitHub Pages Course. I'm Anna Pretoris, an IT freelancer and former computer science teacher. And in this course, I'll guide you through one of the simplest and most effective ways to publish your very first website online. Now, if you already have a website or project ready to deploy, you're in the perfect place. All you need is a computer with an Internet connection, nothing more. Now, GitHub Pages is free, fast, and ideal for beginners who want to publish a personal website, portfolio, or project with confidence. Now, in this course, you'll learn how Github works, how GitHub Pages hosts websites, and how to publish your site at your usname dotgigub dot. Now, I'm going to walk you through everything step by step, explaining each concept in a clear, simple way so that you always feel confident about what you're doing. You're going to learn how to upload your files, how to manage your project, make updates, and keep your site live and organized. Now, each lesson includes hands on practice to reinforce your understanding as we go. And by the end of the course, you'll know not only how to publish your site, but how to maintain it and make improvements whenever you like. Now, once you reach the projects and resources section, you'll put everything together by creating your own final project, a live website that is personalized, functional and ready to share with the world. This course includes practical lab exercises and eight focus lessons designed to walk you through the process at a comfortable and steady pace. I'm here to make web development and deployment simple and enjoyable, no matter your experience level. So, trust me, you're in good hands and see you on the course. 2. Create a free GitHub account: Hi, everyone. Welcome to the next lecture, which is going to be focused on creating a free GitHub account. So just to give you some information on GitHub, GitHub is essentially a website that hosts Git repositories online. It's basically like cloud storage and social networking for code. So what you can do with GitHub is you can store your projects safely. You can also share them with others and you can also collaborate with teams around the world. All right. So let's go ahead and get started. You want to first of all, head on over to github.com. Then you can say sign up. And then you can sign up for GitHub. You can either continue with Google. If you have your Google account, or you can go ahead and manually enter in an email password, a the name, and your region, and you can also decide if you want to have email preferences set to receive occasional product updates and announcements, and you can create your account, right? So what I'm going to do here is I'm just going to fill out these fields here and do it the manual way, and then I'm going to create an account. So let's go on ahead and set this up. All right. So I've entered in some base information here, just the manual way. And now what I'm going to do is say create account. It's going to take a moment to verify. Okay. And of course, usually what would happen is you would also need to complete a puzzle and to go from that point as well. So let's just wait for the process to be completed here, and then we can continue as it goes on. All right. So now, since our browser has been verified, we can verify our account either via a visual puzzle or an audio puzzle. So what I'm going to do is verify my account now, and then I'll see you at the next stage. All right, so after verifying your account, you then need to verify your email address. So I'm going to go to a sample email address that I have here, and I'm just going to reload. Here we'll have a launch code that we can utilize. I was going to end it in. All right. So we can now see that our account was created successfully and now we can sign in to continue. Now all you want to do is enter in your username or email address and then followed by a password here that you have set previously when setting up your Get up account. All right. As soon as you've entered in your credentials, you can then just say sign in. And there we go. Now we're on our GitHub dashboard where we can go ahead and create our repository and get started. That's it for this video. That is how you can go ahead and create a free GitHub account. Now, of course, I did go into extended detail just to ensure that you can set up GitHub as easily as possible with all of the necessary steps. Now, of course, if you decided to continue with Google instead of putting in all the manual steps that I did, that's something you can also do. But I just wanted to be as s I can, but that is how you can go ahead and set up your free GitHub account. 3. Create a GitHub repository: Hi, everyone, and welcome to the next lecture, which is going to be focused on creating a Github repository. They're probably wondering what is the GitHub repository? Simply a GitHub repository is like a folder on Github where your project lives, and this will contain your source code and all of your code files. The simplest way to think of it is as the project box where everything related to your project is stored and organized. Now, typically speaking, people refer to GitHub repositories as repos. If you ever hear the term repos being thrown around, sync GitHub repository in that context. Okay, so let's go ahead and create our repository. You can say create repository here. Then you'll see on the left hand side, let me zoom it a bit here. The left hand side, you'll see the user name that you associated with your GitHub account, and then you need to give a repository name here. You can go ahead and click here and I'm going to call this sample Okay. And that will be my repository name, sample we can call it sample repo as an example. Then you can give a description here. So I'm going to keep it very simple. I'm just going to say port folio application. Very simple. And then you can choose visibility here. So when you go ahead and commit your source code to this repository here called sample repo here, you can either set the status to public, which means anyone can, of course, access your repo and view it. That will be public facing, or you can set it to private. So on public, anyone on the Internet can see your repository. And on private, you choose who can see and commit to this repository. Choice is yours. Now, in public cases, it's appropriate if you have a bunch of portfolio websites that you want to showcase to possible employees and such, or if you're just doing a little bit of your own personal testing, and you're not handling anything you could say sensitive, more like I would say, that would be in the public scenario, in my opinion. Anything that's, of course, let's say, part of your own organization or anything, of course, private, as we can see here should be private. So it's just depending on what you would like to go around. If you don't want anyone seeing it and you don't have any intention of showing your project, then of course, you need to set it to private. If you have intention of showcasing it, then you can keep it to public. So we're going to keep it simple and just say public for now. Then you can add in a read me file. Now, I always like to add this in, and a read me file is just very useful if someone wants to just get a brief overview over your repository or your project, should I say, just to see some information on your project and what you're utilizing and what it's all about. Just a simple rundown. Basically like a text document. You can also add in a G Ignore file here, which is very useful if, for example, you're working with environment variables and you want to go ahead and ignore that DENV file, which is the environment variables file. Then you can also add in a licensing if you want to license your code in some way. There are some options for you here that you can also utilize. But we're just going to keep it quite straightforward here, make sure you've added in your repository name, a description, the visibility. I'll set its public and you've added in the Read Me option. Then you can just say create repository. There we go. We can now see it's public facing and we can see now that we're all good to go. We can see the Read me information here saying sample repo and the description that we added in. That's all that you need to know, you can go ahead and create a GitHub repository. 4. Configure GitHub Desktop and synchronise our source code: Hi, everyone, and welcome to the next lecture, which is going to be focused on configuring GitHub Desktop and also later on to synchronise our source code. Let's get started. The first thing you want to do is perform a Google search for GitHub Desktop, to which you can click on the relevant link, which will be Download GitHub Desktop. Now, just to give you some clarity here, you can either download for Windows or you can scroll down and download for MacOS. The options are there for you. Just want to give you a little bit of clarity on what GitHub Desktop is. It is essentially a free app that as you can see, can be utilized by both Windows and MacOS machines, and it gives you a very simple visual interface to use GitHub without typing in commands in the terminal if you were to just use Git natively. Let's go on ahead and download it. I'm on Windows. I'm going to download it for Windows. Going to take a few moments give it some time. And once it's downloaded, we can go ahead and click on it. Then what's going to happen is the GitHub Desktop application is going to install on its own. So it's very intuitive like that. We don't need to press it or do anything. So as you can see here, GitHub Desktop is being installed and it's going to launch once it is done. All we need to do is wait. Usually what you can see if you're on Windows is the progress down here. As you can see, it's being completed with the small progress bar. So we just need to wait for that. Okay. All right, here we go. So welcome to GitHub Desktop. So what we can do now is we can go on ahead and decide how we want to proceed. Right. So what you want to do is sign in to github.com. Okay. And we want to verify our session. So as we are already logged in, as you can see, we can go ahead and say continue. And we want to now authorize GitHub Desktop with our how can I say with our user? So to our username, you can see our username to our account. And here we can control access to the repositories. So on the default, it's public and private and you can read more information here about it. And we're just going to authorize GitHub Desktop. And then we can just say open it's going to redirect back here and here we have it. Now you can see here we want to configure Git. Now, just some clarity on Git. Git is essentially a version control system and that's going to help you to track changes in your source code, saving different versions of a project and such. We want to use my GitHub account name and email address to configure Git we're going to see will be automatically set here, and then you can just say finish. And there we go. So now we've got that all set up, and we can also see our repository here, which of course is the repository that we created earlier called sample repo. So we can close this now. All right, so there we have it. We can also see it's now on our desktop, GitHub Desktop as it should be, and be good to continue with the next process. So well done, you've successfully gone ahead and configure it, GitHub Desktop on your system. The next thing we want to do is we want to, of course, synchronise our source code. Right. Now the next thing that we want to do is we want to clone our repository. Cloning a repo or repository means downloading a full copy of a GitHub repository, including any files or anything that currently exists within it onto our computer so we can work on it locally. As we can see, all that we have here is a simple read me file. That's all that we have. So what we want to do is select our repository as we can see here. Then we can say clone then you want to set the path where you want it to be clone two. As we can see, this is Auto selected on the URL. If it's not selected, you can select that. And we can see this is going to be the repository URL or GitHub user name and repository accordingly, and this is going to be the path where it's going to be clone two. You can say choose, and I'm going to choose the desktop here and say select folder, so that's going to be on my desktop. And then I'm going to say clone. So now it's cloning Sampoepo there we go. We can see we are now currently within Sam Por repo. We can see we are intending to push to our main branch. We can see here any files that we've changed, any local changes, and here we can commit our changes and add in a description to them. If I were to minimize this now, I can now see on my desktop, I have Sam Prepo and if I open that up, we can see that we have, of course, the ReadMe file, and of course, it won't show the dot Git file for you, but because on my PC, I set it to show all hidden files, it's going to show it by default. That's just something to keep in mind. But we have the Read refol and of course, that's the default file that we can see here has been cloned from Gitub itself. Now the next thing you want to do is synchronise our source code. So as we can see here, I have a fold of call my project. And I've opened this up in Visual Studio code, and I have three files index dot HML, script dot js and style dot CSS. So that's just going to give you some clarity in terms of the scope of the application we're working with. So it's a very simple front end application with a HTML, CSS, and JavaScript file all interlinked together. So do keep that in mind here if you're going a little bit higher with the application that you are planning to deploy. So just keep that in mind. Right. So the next thing I want to do is move all of those files into the repository here. So what I'm going to do is open up sample repo. And then I'm also going to open up my project. And what I want to do is move these to the side. All I'm going to do is I'm going to move these files here that I have. I'm going to highlight them and just move them into my repository that I clone, known as sample repo. You can close this and close this. Now if we go to GitHub Desktop, we can now see that there are changes. So the detection here is that three files have been changed. In other words, three files have been moved into the sample repo folder, so index at HML, script dot js and star dot css. As you can see, we can see all of the adjustments here. So the plus icon here indicates, of course, things that have been added, and of course, you'll see the minus if things have been removed. Okay, right. So that is how we can go on ahead and synchronise our source code effectively. So now it's now part of our repository, and we're all good to go. Now, the next thing that you want to go ahead and do is we want to ensure that the changes here are reflected in our repository here on Github itself. So we want to, first of all, fill out the following field here, and we want to essentially commit these files to our main branch here so that they will be visible. So I'm just going to add in a name here. So usually this is going to be the name of what you're doing. So here, I'm just going to say here dip initial. I'll call this initial deployment. Now, you can decide what you want to set this as. Usually, if you change something, maybe an index or HML file, let's say you change the heading or you change the hero section, you'll just add that as the main title for what you are changing, and then you'll add in a description with it with more details. Here this is going to be the initial deployment. This is the application here. Description here is, I'm going to say sample application with a HML, CSS and JS file added. Okay. And then we can commit these three files to our main branch, so we can say commit. And then once you're happy with everything, you can go ahead and push this now to your GitHub repository. There's going to push to the origin, which is on our main branch. Okay, there we go. And as you can see, there have been no recent changes, so we're good to go. Let's go back to our repository. Let's refresh the page. And as you can see now, our repository now has the index dot HML file, script dot gsle and our style dot css file, and we can see that we made that commit. And as you can see, the name here was initial deployment. So that was the name of our, of course, commit heading, and then we can see the description here down below and what we added and also if there was anything removed. And our user here, according to our username, committed this file and we can see the date of that. Most recent commit and we can also see the information here as well. Initial deployment. That's how we can configure GitHub Desktop and also to synchronise our source code accordingly. That is that. 5. Launch your first website: And welcome to the next lecture, which is going to be focused on launching our first website. So let's get started. So assuming now that you have gone ahead and synchronise your source code, let's go ahead and utilize GitHub Pages. So what you want to do is make sure that you are on the selected repository. Then we can go to settings. Then on the left hand side here, you'll see a few options. You want to scroll down until you see pages, and you want to select that option. Now, to give you some insight here. GitHub Pages is basically a free web hosting service that is offered by GitHub, and essentially it lets you turn your project like a website into a live public webpage straight from your GitHub repository. So what we can do is here under Build end Deployment, we can ensure that it's set to deploy from a branch, which is a default option. Then what you want to do is you want to enable it. So as we can see, it says that GitHub Pages is currently disabled. We want to select a source below to enable GitHub Pages for this repository. So you want to click on the drop down and send it to the main branch. It's going to be in the root, and then you want to say save. Then you can say save. We can see GitHub Pages source saved. Then we can go back to code. And then as you can see here, we have this yellow icon here pending. So let's select that. And we can see here that it says Pages, build and deployment, so we can select details. And here we can see the build has started for our application to be deployed. So it's going to build, set everything up for us, and compile our source code for deployment. It's going to undertake a few key stages. As you can see here, a checkout stage, a building stage, and of course, an artifact stage as well. That you can see it's quite fast. So there's the build stage. Then it's going to undertake the report Build status section, after which it's going to deploy our application. Okay, so we can see it's now under the report build status, so we can set up the job, reported the build status, completed the job. Now, of course, we're doing a deep dive here into GitHub Pages. Just to give you a bit of an insight here is all that's occurring in this phase here, it's building our source code, compiling it, prepping it, and then it's going to deploy it. As you can see, every job here was a success. Now we can go back to settings. Then here on the left hand side, you can go to pages. And here you can see that our website is now live at the following your realm, and we can visit our site or you can right click Open the Link in the New Tab. We can see when it was last deployed and by which user, and you can also unpublish your site as well. So we have that all set up. So I have my sample website. I now want to click and open that in a new tab. And here I have my website all set up and ready to go. Here, we have it. It's a very simple application, as we can see here and also has a bit of a light in a dark mode here as well, that's quite nice, but there you have it and you can access your website at the following URRalm, which of course is given to you. And there you have it. That is how you can go on a hedge and launch your very first website. So there you have it. Of course, here is URL for it. Of course, you can, of course, share this with anyone, share anywhere, and that's it. That is how simple it is to go on a hedge and set up your website and launch it for free, of course, that's it. 6. Handling updates to your website: Hi, everyone, and welcome to the next lecture, which is going to be focused on handling updates to your website. So let's say, for example, you want to change something in your application. So here it says Hol Mino we develop propresion about clean code and design. Let's say I want to change something, something I don't like. So I'm going to go to Visual Studio code, and what I'm going to do is just change the folder that I'm in. So the repo here is called sample repo. So I'm just going to say file, open folder, and I'm going to open up some for repo. This can be in any coding editors that you have, and let's go to Index on HML, and let's see what I want to change. I want to change this here. I wanted to put in my full name. As you can see, currently, it just say hello I'm Anu then here a web developer passionate about clean code and design. Of course, I can change this. I can say a web developer, passionate about clean code and design. Here I'm going to say Cloud in SZst. And I'll say here and a cloud enthusiast. Okay, very simple. I'm going to save that. And it's, of course, synchronise with source control with of course, GitHub Desktop. And now with those changes, I can go to GitHub Desktop, and we can see that we made a modification. So this yellow icon here means modified, and you can see what I removed was the dg, and the green here is what I added. So here I'm just going to say updated the how can I say the index HML file, for example, and description here, I'm going to say add it in surname and extra info on what I am. So a Cloud enthusiast. Then I can say commit one file to main, and then I can push this to my main branch. Okay, it's been pushed. Now if I go back to my repository here, I can just refresh my repo. And we can see that commit was done here, updated the index to HML fail done now, and we can see that it's already pending. It's building our source code, compiling, make sure it works, and then it's going to deploy it. So it's going to take a few moments here. Of course, you can click on it and you can see all the details as you wish. And all we want to do is we just want to wait, of course, URL is going to stay the same. So we can just wait for this to be completed, and then we can continue. All right, so welcome back, as we can see, it's now green. Now, of course, what I recommend you do is just to refresh here, and then you're going to see the green icon here. Okay, so that means it was a success. So now we can go to our website and you just want to reload your web page, and there we go. We can see it at in Pretorius, so my full name and a Cloud enthusiast, so we can see that update was taken into account. All right. So there you have it. Now, another way in which you can handle updates is if there were a particular file here that you want to change. So let's say the index to HML file, you can select it here in your repository. And you can go ahead and edit this file directly. So that's another way you can do it. Although I wouldn't recommend that way, it's better to rather go ahead in a code editor and just make your adjustments or in the file that you're within, just to make those changes and such. So that's just something else that you can also do if you just want to make a change, but it's best to rather go through the route of updating it wherever you have your application open within, and then just pushing it with GitHub Desktop to synchronise accordingly with your Github repository. Guys. So that's it for this particular lecture? That's so you can handle updates to your website. 7. Creating your own project: Hi, everyone, and welcome to the next lesson, which is going to be focused on creating your own project. Right, create your own project. Now that you have all of these new skills that you've acquired, it is now time for you to put all of that to use and create your own project. What you can do now is kind head over to the project and resources section of this course for further information on how you can go ahead and ensure that you follow the project and then also how you can go ahead and share it as well so that I can take a look and leave my feedback. Right, guys. That's it for this lesson. 8. Thank you!: Hi, everyone. And just a final note by me, and that is just thank you for deciding to take this course. I really hope that it helped you gain some insightful knowledge. So thank you again very much, and it is deeply appreciated that you decided to enroll with me on this journey. Another thing that I wanted to mention is please consider leaving a review for this class. It would be deeply appreciated. You don't have to if you don't want to, but it's always useful in my case to try to understand the feedback that is being given to me and how to better improve my classes. Thank you again and good luck on your journey.