If you are a beginner in web development you may want to share your project with friends or colleagues or just want to put your website online for the world to see. If you’re a professional web developer you may want to host a static website of a project or maybe for testing purposes. In this post, I am going to get you through on how to host a static HTML website on GitHub.
GitHub is a popular platform used by many developers to share code or collaborate on a project by creating directories called Repositories. While the platform is basically for that, you can actually use it to host static HTML websites using a feature called GitHub Pages.
What is GitHub Pages?
GitHub Pages is a static site hosting service.
GitHub Pages is designed to host your personal, organization, or project pages directly from a GitHub repository.
You can easily host an HTML website using either the command line/terminal or using GitHub Desktop with a GUI interface directly from your GitHub repository. Just edit, push, and your changes are live.
GitHub pages cannot be used to host dynamic websites which require some sort of a database. It can only host static websites, if you want to host dynamic websites you may need to look for a reliable hosting company out there with many features. Do not use GitHub pages to host websites with sensitive information.
Now before we waste much time let’s get started.
How to Host a Static HTML website on GitHub
If you have never used GitHub before you may need to get some stuff ready, but if you have been using it then you are good to go.
Prerequisites:
- Create a GitHub account at github.com
- Install Git on your computer. Git is a free and open source distributed version control system. You can download it from this link git-scm.com
After creating a GitHub account and installing Git on your computer; log in to your GitHub account and create a repository by clicking on the New Repository button.
At this point the way you should name your new repository matters. Name your repository exactly the same like your GitHub username and then add .github.io domain name for it to be recognized as GitHub pages site. Notice the example below, my username is faalen and my repository name is faalen.github.io. This is going to be the address (URL) of your website.
After that click on the creates repository button.
Next, you will need to go to the directory/folder containing the website you want to upload on GitHub.
You’ll need to open this path in your command line, for Windows users you can simply click on the folder path at top of the folder window and type cmd and then hit Enter.
This should automatically launch the command line and add the folder path.
Now that we have the command line ready, let’s write some Git commands. First, you’ll need to initialize and configure the git repository. Initializing the git repository is something we need to do only once per project (and you won’t have to re-enter the username and email ever again). Git will use this to track changes to all the files and folders in this directory. Replace the “GitHub username” and “you@example.com” with your own.
Press enter after each command.
> git init
Initialized empty Git repository in C:Users/Digital Vigilante/Desktop/branding/.git/
> git config --global user.name "GitHub username"
> git config --global user.email you@example.com
At this point, if you look at your website folder you should now see a folder named .git alongside other files and folders in your project. If you’re not seeing this folder on Windows that is because your computer is set to “Don’t show hidden files, folders and drives“.
It’s a good idea to use the commandgit status. The commandgit status returns information about any untracked/modified/the branch status, and much more. The output should be similar to the following:
Now let’s run these two commands one after the other by pressing enter after typing each command.
git add --all .
[...]
git commit -m "First commit"
[...]
Pushing your Website to GitHub
Now we need to upload/push the project to GitHub. To do that, we need to hook up the Git repository on your computer to the one up on GitHub. Run the following commands:
git remote add origin https://github.com/faalen/faalen.git.io.git
git push -u origin master
The “https://github.com/faalen/faalen.git.io.git” part of the command should be your repository URL. You can copy and paste this from your GitHub account.
At this point, you may be asked to enter your GitHub username and password if this is the first time you’re using that GitHub account with your command line. If everything goes well, you’ll see a progress of your files being pushed. Depending on how large your project is, it may take a few minutes to upload all the images and other stuff in your project.
After the upload completes, go to your repository to check whether the files are uploaded. Your repository should now show all the files and folders of your project.
Next, go to the Settings tab of your repository and scroll down up to the GitHub Pages section. You should now see Your site is published at https://faalen.github.io/
Hurray! Now your website is now live on the web.
Now anytime you make changes on the local project, you’ll just need to add, commit and push the changes to GitHub.
I hope this post was useful, comment below if you have any questions related to this post. You can subscribe to this blog to receive notifications of new post right on your email inbox. Thanks! And see you on the next post.
Ousman Faal [Digital Vigilante] is a Tech Entrepreneur & Digital Skills Trainer who teaches both in the classroom and online. He has experience in various technologies and likes sharing it with others. Ousman has published 149 articles on this blog. He is the CEO of Faalen Technologies and Skills.gm.
