What is GitHub? It is a cloud-based platform that allows developers to host and manage their source code repositories, keep track of changes to their code, 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.
Requirements to Host 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
![how to host a website on github in 2023 [step-by-step]](https://blog-cdn.everhour.com/blog/wp-content/uploads/2023/03/Join-GitHub-%C2%B7-GitHub.jpg)
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:
![how to host a website on github in 2023 [step-by-step]](https://blog-cdn.everhour.com/blog/wp-content/uploads/2023/03/GitHub-new-repo-confirmation.jpg)
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:
â$ touch index.htmlâ
From there, you can enter the following code into the index.html file.
â<!DOCTYPE HTML>
<html lang=âenâ>
<head>
<meta charset=âUTF-8âł>
<meta name=âviewportâ content=âwidth=device-width, initial-scale=1.0âł>
<meta http-equiv=âX-UA-Compatibleâ content=âie=edgeâ>
<title>My Website [Name of the website]</title>
</head>
<body>
<main>
<h1>Welcome to My Website [Name of the website]</h1>
<p>This is my new website hosted on GitHub Pages!</p>
</main>
</body>
</html>â
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 Website
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.