A GitHub Pages tutorial on how to host personal websites

0

GitHub users are often surprised that their project’s wiki is not indexed by Google. But the Git-based cloud service offers an alternative.

If someone needs a website hosting service, they can create their own personal website with GitHub pages, which acts as the indexable counterpart of a project wiki. This GitHub Pages tutorial will show how to create a GitHub repository and turn it into a hosted website that Google can index.

Getting started with a GitHub Pages tutorial

I decided to test the service by hosting my own personal website on the GitHub pages. I ran a popular website dedicated to The simpsons hosted on GeoCities many years ago, but hadn’t been online for over a decade. I decided to bring it back for this tutorial on the GitHub pages and created a GitHub account named “pickering-is-springfield”.

My first step was to create a GitHub repository named after the account holder with “.github.io” added. Since my account is called pickering-is-springfield, the hosting repository for GitHub pages should be called “pickeringisspringfield.github.io”.

The repository name should be the name of the project owner with .github.io appended at the end.

I then had to configure the website, which I did through the Settings tab in the repository. This area allows you to configure the active branch, choose a theme, and even map a domain name registered on your personal GitHub Pages website.

GitHub pages bug

Before continuing this tutorial on GitHub Pages, one thing I noticed is a bug that will cause a newly created GitHub Page repository to fail. GitHub recently changed the default branch created in a new repository from “master” to “main” due to the negative connotations associated with master-slave terminology.

However, GitHub pages still use the old principal name by default, which as of October 2020 is no longer created. Developers can fix the bug by changing the build branch from master to main in the Settings tab.

After the developer has created the repository and configured the GitHub pages, the next step is to load static web resources such as images, CSS, JavaScript libraries, and HTML pages into the project.

Personal websites on GitHub pages

Once the website is created, the easiest way to host it on GitHub Pages is to:

  • clone the repository locally;
  • add all static web resources to the root folder of the cloned directory;
  • add the copied files to the Git index; to commit; and
  • push back to GitHub.
$ git clone https://github.com/pickering-is-springfield/pickering-is-springfield.github.io.git
$ cd pick*
# copy all web resources into the project's root folder
$ git add .
$ git commit –m "GitHub Pages Hosted Site"
$ git push origin

After the push to origin is complete, developers must wait around five minutes for the project to build on the server. Then try to navigate to the site’s landing page. The URL is the GitHub username with “.git.io” appended to it. For this example, my URL is:

https://pickering-is-springfield.github.io/

GitHub Pages can host any static HTML page. Unfortunately, servlets and JSPs will not work because there is no Java application server like Tomcat or Jetty capable of serving Java based content.

However, GitHub Pages does support Jekyll, a simple web template platform that makes blogging and content management easy. Jekyll isn’t fancy, but GitHub Pages isn’t intended to be an enterprise-ready CMS offering.

See all the videos

Share.

About Author

Comments are closed.