How to Host a Website on GitHub: Learn it Step by Step [2024]

It is a cloud-based platform that allows developers to host and manage their source code repositories, keep track of changes to their code with the help of GitHub time tracking, and collaborate with developers in the space. Aside from that, GitHub is also a great place for conveniently hosting static websites. This is all possible thanks to the GitHub Pages feature, which is GitHub’s very own free hosting service.

Using GitHub Pages, you can create a website by simply publishing static HTML, JavaScript, and CSS files from GitHub’s repository. Among the many benefits of the GitHub web hosting service, a few of the main ones are how simple and easy it is to use. With all that in mind, let’s take a more detailed look at how to host a website on GitHub yourself.

---

Essential Steps for Hosting a Website on GitHub

Before you can host a website on GitHub, there are certain requirements that you need to meet. They are quite straightforward, but without them, you won’t have a smooth time hosting your site on GitHub.

💻 Create your GitHub account

The first thing you need to do is create your very own GitHub account. To do that, head to the GitHub website, enter your email address and all the other necessary information, and you’re done. The registration process shouldn’t take you more than a few minutes, and once it’s done, you can get started.

📩 Download the Git software

While you can do everything through GitHub’s official website, the whole process will be much easier if you have the Git and GitHub software installed on your computer.

💡 Have basic knowledge of HTML, JavaScript, and CSS

The last major requirement for GitHub hosting is basic HTML, JavaScript, and CSS knowledge. When developing or hosting a website, you need to learn code, even if it’s so that you understand the backbone of the website and how it’s actually running. And those are really all the requirements you need to start GitHub hosting. If you check all three boxes, it’s time to move on to the next step, which is creating your new repository.

---

Creating a Repository

Your GitHub repository (also known as “repo”) acts as the storage space on the GitHub platform where all of your project’s source code, files, and documentation will be hosted. Here is the step-by-step process for creating a new repository on GitHub:

• Open GitHub on your desktop
• On the upper-hand corner of any page and select the “new” icon
• On the drop-down menu, select the “new repository” option
• From there, you’ll be led to a new page where you can name the repository
• After naming the repository, click on the “create repository” option to start creating the new repository

After you’ve finished creating the repository, you’ll be brought to a new page. This new page will be the “homepage” of your repository, and it will look something like this:

Again, your GitHub repository is the main place where you can store your website’s files and folders. So, when you create a new repository, everything will be empty, and you can’t do much with it. But before you can start uploading website files, it’s best to create folders where you can store your website files and clone your repository into a local project folder. That way, you have a backup as well as folders for storing your files.

To create a new empty folder in your repository, you must open the command line and type in the following command:

“$ mkdir my-website”

This line of code should create a new folder in your repository. Then, you can open the command line again and enter this code to clone the folder:

“$ git clone https://github.com/[username]/[username].github.io”

Note that in this line of code, you must change the [username] portion with your username on GitHub to work. When you enter the code, GitHub will send a prompt saying that you’re cloning an empty repository. Don’t worry about this; the empty repository is because you haven’t added any files to the platform.

Once you’ve created the folder, you can start uploading your website files. And don’t worry, we’ll cover that in full detail in the next section.

---

Uploading Website Files

The next step in the process of uploading your website files to your newly created repository on GitHub. If you’re familiar with basic coding, it should be easy to upload your website files. However, since we’re here to guide you through the process of GitHub web hosting, let’s see an example.

For this example, we’ll use HTML code in a Unix system to focus on an index.html file. It’s crucial to have an index file when using GitHub and to do so, you have to open the command line and enter the following:

Make sure to change the “My Website” portion to the actual name of your website. That way, you create a personalized file that’s specifically for your page. Additionally, feel free to add any other information you would need on your main page, typically found in an index.html file.

On top of that, if your file is lower than 25MB, you can drag and drop the files you want to add to the repository. This is a very simple process that takes no time at all. This is why it’s one of the most popular ways to start adding files to a GitHub repository folder.

If you want to upload files larger than 25MB, it’s possible. However, the maximum limit on GitHub is a 100MB file. And for files larger than 25MB, you need to use the command line to upload them.

Here are the steps you need to take to upload a larger file on GitHub using the command line.

• Start by going to your computer and moving the file you want to upload into the GitHub local directory
• Open working console
• Make sure your current working directory is your local repository
• Use the “$ git add“ command to stage the file for commit in your local repository
• Enter “$ git commit -m “Add existing file” to commit the file that was staged in your repository
• Enter “$ git push origin YOUR_BRANCH” to push the changes and upload the file

If you’ve made a mistake in the staging process, you can un-stage the file through the “$ git push origin YOUR_BRANCH” command. And if you want to remove the commit and modify the file first, enter “’git reset –soft HEAD~1’ and commit and add the file again.” Then, modify the file and add it again following the steps above.

When hosting a website on GitHub, you’ll likely have to upload many different files for your website. This is completely fine, considering that’s how GitHub works. However, you will have to learn quite a few different techniques for uploading different files.

Luckily, there are various guides available for uploading specific file types into your GitHub repository. And once you get the hang of it, rest assured that you’ll begin uploading all the files you need to your GitHub repository in no time at all.

---

Configuring GitHub Pages

The next aspect of the GitHub site hosting process is configuring your web pages. When you open your GitHub repository, you’ll have to select a publishing source for your website. It’s important to have this publishing source ready before you do anything else. Once you’ve decided and finalized a publishing source for your pages, you can use the following steps to configure your GitHub pages.

📁 Create your site’s entry file

Before anything can be published on GitHub, you must have an entry file. If you followed our guide step by step, you should already have one as an index.html counts as an entry file. If you don’t have one or don’t want to use index.html as your entry file, you can also use index.md or README.md file. But for a simpler process, stick to using the index.html as your entry file.

🔧 Configure your publishing source

There are multiple approaches to configuring your publishing source on the GitHub free hosting platform. However, the simplest way is to publish your website from a branch. To do this, follow these couple of steps:

• Go to the website repository
• Click the settings icon, then proceed to Code and Automation > Pages
• Under the Build and Deployment option, proceed to Source > Deploy from a branch
• Use the drop-down menu to select a publishing source for your page
• Save your publishing source

Once you do this, your publishing source on GitHub will be set, and the majority of your website will be configured. Once you’ve enabled your GitHub pages and have selected a source for your website, it’s time to start customizing it.

You can also watch this video to learn more on the topic.

---

Customizing Your GitHub Website: Tips and Tools

The goal of all websites is to attract visitors and help the owner achieve certain results (generate leads, make more sales, or other). And even if you’re hosting a static website on GitHub, it’s important to have an interesting and functional website that users genuinely enjoy using. That way, your website will help you achieve your goals much faster.

With that in mind, as every website has a unique set of goals and audiences, customizing it to make it suitable for the end user and for the goal it needs to achieve is crucial. And just like with all the other processes involved in hosting your very own GitHub website, customizing your website is also relatively easy to do.

If you’re looking to publish a unique website using GitHub, you can customize your website using Jekyll themes. Jekyll is a curated directory of various website themes and GitHub templates you can use with GitHub for an easier time developing your website. To start, you need to choose a Jekyll theme.

✨ Choosing and applying a Jekyll theme

On the website, you’ll find a variety of free and premium themes available for use. Though you can select and use any of the themes available, we recommend going for one that suits your site’s purpose, brand, and audience. Jekyll has themes for blogs, businesses, and more, making it much easier to find the exact theme for your needs.

There are quite a few things you need to consider, so don’t rush this step. Take your time when choosing a theme so that when you’ve explored all the options, you’ll know that you’ve made the right choice. Once you select a theme from Jekyll, it’s very easy to add the theme to your GitHub website.

Before doing this, you must go through the steps we mentioned earlier. But if you’ve followed our guide every step of the way, here’s how you can apply a Jekyll theme to your GitHub website:

• Open your website repository on GitHub
• Go to your website’s publishing source and look for “_config.yml.”
• Click the edit icon on the top-right corner to launch the file editor
• Go to the Jekyll theme’s repository, look for the README file, and note the name of your Jekyll theme
• Type in ”remote_theme: THEME-NAME”  but replace “THEME-NAME” with the name of the theme you found on the README file
• Add a commit message at the bottom of the page that details the changes made to the file
• Select your commit email address in the drop-down menu (only verified email addresses will appear on this menu)
• After the commit messages field, select the brand where you want to apply the change through the drop-down menu
• Click on the Propose File Change option

GitHub is a collaboration tool. So, major changes, such as the website’s theme must be approved by all the collaborators you work with on the platform. But once the changes have been approved, you’ll see them applied to your webpage in no time.

That said, even if the theme has been applied to your website and you believe you found the perfect theme for your needs, you still might want to customize the theme to make sure it resonated with your brand perfectly. You don’t want your website to look like all other sites that use the same theme, so a little customization goes a long way.

This is why one of our basic requirements for hosting a GitHub website is having basic CSS, HTML, or JavaScript knowledge.

This is because if you want to customize how your website looks, including the theme and other parameters, you must use these coding languages.

😎 Customizing your website’s appearance

To customize your website theme using HTML, follow the steps below:

• Go to the repository of your theme’s source
• Go to the _layouts folder and find the default.html file
• Copy the file and proceed to your publishing source on the site’s repository
• Create a new file named _layouts/default.html and paste all the content you copied from the default file
• Customize and tweak the code to better fit your website’s needs

If you wish to use CSS to customize your website theme, follow the following five steps:

• Go to your site’s GitHub repository and open the publishing source
• Create a new file and name it /assets/css/style.scss.
• On top of the file, you can add all the content you want that suits your website
• Add custom imports after the @import line on the file
• Save all your changes to your website’s theme and enjoy the new look!

Website customization can take a long time, which is why it’s crucial that you understand the exact tweaks your website needs. Additionally, you won’t be able to apply any of these changes without basic coding knowledge, so it would be very beneficial if you have all of this information and knowledge before you start hosting your website on GitHub.

---

Publishing the Website

Publishing your website on GitHub is very simple. To do so, you must:

• Log in to GitHub and on your home dashboard select “New site from Git”
• Go to your site’s repository and set your publishing site
• Once you’ve set and saved your publishing source, your website will be online

That said, websites are constantly evolving and changing. And if you want to ensure that you’re always relevant and a step ahead of the competition, you’re going to have to push changes to your website.

If you would like to push changes to your website, these are the steps to accomplishing it:

• Select the push origin option which pushes the changes to your repository
• From there, GitHub may prompt you to get new commits from the remote, to do this, simply click on the Fetch option at the prompt

After that, your changes will be pushed. GitHub is easily one of the simplest and easiest ways to host a website on the internet. This is why pushing changes is very straightforward on the platform.

If you would like to view your GitHub website on the internet, proceed to the GitHub pages option. From there, you’ll see all your web pages and their visibility status. On this drop-down menu, you should also be able to see a View Website option. When you click on this option, it should lead you to your published webpage for viewing.

---

How to Host a Website on GitHub: Conclusion

There are quite a few steps to hosting and publishing a website on GitHub. And while it might seem intimidating at first, it’s actually very simple once you break everything down into separate steps. To break the entire process down, here’s what you need to do to host a website on GitHub:

First, you need to create a GitHub account and download the Git software. Then, you need to create your repository and upload your website files. Once that is done, you need to configure your GitHub pages, choose a Jekyll theme, and customize your website to your liking. The last step you need to take is to push your website to the internet and make it live for everyone to access.

In the past, publishing and hosting a website took a lot of time and resources. But with GitHub, teams can work much faster and more efficiently in creating and publishing a website to the internet.

That said, it can still be hard to navigate through all of GitHub’s features, especially if it’s your first time. So, before you start GitHub hosting yourself, make sure to go through all the details of this guide. And once you do that, rest assured that GitHub hosting will be much easier for you and your team. With all that in mind, here are a few useful links for further reading:

GitHub Pages: https://docs.github.com/en/pages
GitHub Repository: https://docs.github.com/en/repositories
GitHub Documentation: https://docs.github.com/en

For improving web development skills, here are some recommended reading resources:

Mozilla Developer Network: https://developer.mozilla.org/
W3Schools: https://www.w3schools.com/
CSS Tricks: https://css-tricks.com/
Smashing Magazine: https://www.smashingmagazine.com/

If you plan on hosting a website on GitHub and you need to seamlessly keep track of time (whether for your personal records or for invoicing a client), be sure to use Everhour. It’s the leading time tracker on the market right now and learning how to track time with Everhour on GitHub is extremely easy. Utilizing features like a well-structured GitHub PR template or GitHub dark mode is also a great bonus.

If you are managing a team of 5 or more and looking to boost efficiency, Everhour is the perfect tool to keep your team on track. With seamless time tracking, you can easily estimate task durations, set clear budgets, and generate detailed reports inside Asana, Trello, Jira, or any other pm tool.