How to host a website on GitHub

How to host a website on GitHub

Host your websites on GitHub using GitHub pages, for free!

·

2 min read

If you've built a website, you'll want to showcase it to the world. In order to do so, you'll have to host it. GitHub Pages is one of the most popular free website hosting services. In this guide, you will host your own website using GitHub Pages.

  • First things first, create an account on GitHub.
  • Whether you've created a new account or already been using one, you'll see a plus icon on the top-right corner on your page. Clicking on it will display a menu. Now, click on "New Repository"

new-repo.jpg

  • Give your new repository (also called as a "repo"), a name.

image.png

Here, I've given my new repo, the name "my-first-website"

  • Leave all other fields as they were. All of these can be changed later. Now, hit the "Create Repository" button at the bottom of the page to create your new repo.
  • You should now see a screen showing you a list of things that you can do to fully set-up your repo, like this:

repo-opening.jpg

  • Here, you can create or upload files for the repository. If you have already created files for your website, you can upload them to your repository. Click on "uploading an existing file":

upload-btn.jpg

Note! Make sure that your main page is named index.html, and can be located directly (i.e., it is not inside any folder). Otherwise, GitHub pages won't be able to identify your main web page, and you'll see a blank screen instead of your website.

  • Now, upload your files, write a commit message and hit "commit changes".

commit.jpg

The commit message is mandatory if you're making any changes to the repo. It is often very useful to write clear commit messages to later understand what changes you made.

  • Now that you've created your new repo and uploaded all required files, it is time to host it! Head to the Settings menu of your repository and click on "Pages".

pages.jpg

  • To host your website, change the Branch from None to main and hit "Save". It will take some time for your website to go live.

branch-save.jpg

  • Refresh the page after a minute or two, you'll see a link that has been generated for your website, like this:

link.jpg

You can use the link to view your website anytime, anywhere!

Thank you for reading!

Feel free to connect with me on Twitter or LinkedIn
Happy Coding!

Did you find this article valuable?

Support Charan by becoming a sponsor. Any amount is appreciated!