How to upload a website on GitHub

In this article you’ll learn on how to host static websites, meaning HTML/CSS and JavaScript on GitHub.

If you haven’t already read the previous article about GitHub, here’s the link to the article.

There is a 4 step process to it

There is a 4 step process on how we can host our website on GitHub Pages.

  1. We need to initialize the repository
  2. Add the repository to GitHub
  3. Create a GitHub Pages branch
  4. Wait for GitHub pages to build the site (shouldn’t take more than 5-10minutes – usually, it’s pretty insta)

Hosting the website

Open the terminal and navigate to the project that you want to host on GH Pages.

The process is exactly the same as if you were to push it to master.

We need to create a GH Pages branch, and anything pushed to that branch, will be uploaded to the domain, and  be able to display it online. By default you have one branch in the repository, which is the master page.

In the command line, type in:

git checkout -b gh-pages

When hosting on GitHub, the branch HAS to be named ‘gh-pages’, or the website will not display on gh-pages.

This command created a new branch, and it switches straight away to it, with the command ‘-b’.

If you have committed files on the master branch, your gh-pages is also ready, as it made a copy of your master branch.

The website is still on our computer, so let’s push it to gh-pages, we can do that with the following code:

git push origin gh-pages

Once you pushed the code to gh-pages, it starts to build the website, and it will be soon available to view on the github.io.

 

Project pages sites are served under the subpath that matches a repository’s name, so the URL for the website will follow this convention

username.github.io/repository-name

 

Wait for about 5-10minutes, and the website should be up and running.

 

 

 

Meet the author

Meet the author

Aurelian Spodarec

Front-end WordPress developer that blogs about web development. I like using the right tools for the job. In my spare time, I enjoy cooking healthy food and then eating it. Delicious!

Comments