The GitHub Pages is very well suited to maintain a personal webpage and/or to publish your code as tech blogs quickly and efficiently.

  • Free - Hosting is free, all that’s needed is to sign up for a GitHub account.
  • Fast - It supports Jekyll, a static site generator. Jekyll makes site load fast - faster than any WordPress site and handles traffic very well. FYI, Obama campaign used Jekyll and so does Netflix.
  • Simple - No coding required for a basic website, no server maintainence, no setting up domain, and no maintaining database unlike WordPress.
  • Secure - No vulnerability to hacking unless github account password is hacked.

Git, GitHub and GitHub Pages are related with each other but not the same :

  • Git is a version control system that lets you access previous versions of your work you asked git to keep track of.
  • GitHub is a social site that lets people share their work and/or collaborate on projects using git.
  • GitHub Pages lets anyone with an account on GitHub publish their work - code or otherwise.

It is not a prerequisite to learn git or to be active in GitHub to go ahead and make your website. This blog is written keeping in mind someone who is unfamiliar with all of the above.

Steps for setting up a basic webpage:

  1. Set up a GitHub account if you dont already have one
  2. Create a repository named your_username.github.io
  3. Publish GitHub Page with URL http://your_username.github.io
  4. Add content

Step 1: Sign up for GitHub or log in

Your username will become part of the url of your website, so it’s best to choose one that is concise, memorable and uniquely identifiable to your name. GitHub lets you change username anytime but its not advisable later on.

Step 2: Create a repository named your_username.github.io

Once you sign up or log in, select “Start a project”:

If you just signed up, GitHub might ask you to first verify your email address before you create the repository.

The repository name must be in the right format your_username.github.io for publishing with the GitHub Pages. Select the option “Initialize this repository with a README”:

This is how your repository will look like:

If you forgot to select the option above and a README file is not created, you can create it now with “Create new file” option.

Step 3: Go to settings, select theme and publish.

First, go to the settings in the top bar of your repository and click on the settings. It will open a page like this:

Then, scroll down and click on the “Choose a theme” button:

There are many options, out of which I chose Tactile theme:

Your webpage has been created and you can now check it out at your_username.github.io!

Step 4: The content is added in the ReadMe file.

The content of the homepage of your site comes from the ReadMe.md file. The file extension .md implies Jekyll would treat the content in the ReadMe file as a markup language. Markup language is an alternative to HTML and it is plain writing with no tags and much simpler syntax for formatting summarized here.

Once you add and modified the content, the changes are commited in the same way as you would save a file:

The content from the ReadMe markdown file will be rendered to the website via the chosen theme. Sometimes it takes some time and a few more commits for the changes to appear in the website.

The last step of editing the ReadMe.md file can be repeated as many times as the content of the website is built.

Once a basic webpage is set up, there are many interesting ways to polish it based on your needs:

  • Forking from one of the openly available Jekyll themes on Github and working on it to build a customized website (It will be very helpful and perhaps necessary to install and use Jekyll locally on your computer for this and also make use of git).
  • Making blog posts.
  • Including a comment section, like this blog has disqus below.
  • Setting up a custom domain via CNAME file.
  • Including MathJax to typeset mathematical expressions.
  • Adding buttons for linking with social media.
  • Using google analytics to track traffic on website.

Any questions, comments and/or suggestions for future blogs are welcome! If you find this blog useful, the icons below lets you share it in social media.

Comments