How To Setup Free Personal Static Websites With gh-pages

By | June 3, 2016

We all know how awesome Github is. Github allows us to create free static websites using gh-pages. Now you might be wondering what are gh-pages? Well gh-pages are static HTML webpages that are hosted on Github and they can be created for free. You can create Personal websites, one page static business websites which can showcase your Portfolio.

If you don’t know Github and wondering if it is really possible for me to setup website? then you are wrong. It is very easy unless you know simple git commands which I promise to cover in this post that will make your life easier.

gh-pages

So lets start with the tutorial.

How to Setup Free Personal Websites With gh-pages

In order to start with creating website you need

  • Github account. Sign Up to Github.
  • Git Bash or Git GUI. We will use Git Bash which will act as an interface between local files and remote files. It will allow to connect to remote repository and allow us to upload our files from local machine.
  • Basic understanding of Git Commands.
  • Domain name (Optional). If you don’t want a custom domain name your by default website url would be yourwebsite.github.io.

Create a repository from Github, and give it a name that you would like. Suppose it is a blog then you can name it myblog. Description is optional. You can give one line description of your choice, select public. If you select public anyone can see your repository, files, they can even clone same website, however if you want to keep your repository private then there is a charge of $7 per month which allows to create unlimited repositories and no one can see any changes in your repository.

add repository

Initialize this repository with a README is again optional. Allright now can go back to the repository click on it you will see in SSH URL on your repo. Copy it we will need it later 😉

Go to Settings => Under gh-pages select Launch Automatic Page generator.

launch page generator

It will then ask you to name Project name, tag line and you can edit the body. You can then try out different layouts to see how it fits to your blog or website. Select one and click on publish.

blog title

layout for gh-pages

On top you will find your project page has been created followed by URL. You can edit it by going to your repository. Click on Branches and  open gh-pages and then you will find the javascript, css, images folder and index.html file. You can make changes in the index.html and preview them by visiting the URL. This is the simplest way you can make changes through Github website, however if you want to upload changes from your local machine you need to follow git commands.

Go to Settings and select branches under default branch change to gh-pages from master branch and hit update.

change origin

It will ask are you sure you want to change default branches select I understand and update the default branch.

change branchNow open Git Bash and type the following commands

  1. cd Desktop -> changes the directory to desktop
  2. clone https://github.com/SangramBarge/testblog.git  -> the url of our repository it will clone all the files and folders on our desktop with folder testblog.
  3. cd testblog -> to enter testblog . Assuming you have done all the edits in your files the next step is to add them to github so that it will be live.
  4. git add . => It means you want to add all files not a specific file, you might make changes in more than one file
  5. git commit -m ‘added changes’ => It means you want to finalize these changes and add message to the file.
  6. git push origin gh-pages => This is the last step which means you want to push your repository to the origin gh-pages we changed to gh-pages from master origin.

After this you will see all the changes will be live within fraction of seconds. If you have a custom domain then in the DNS management open your manage DNS settings and under A records add A record in the destination IP address point it to github’s IP address

192.30.252.153
192.30.252.154.

And go back to github add new file in your repository with name CNAME and add www.yourdomain.com. Thats it your site will be live with your custom domain!

This was a beginner friendly tutorial to create personal site using gh-pages. If you want to use more amazing layouts you can use Jekyll which is a open source simple static blog aware site generator made in Ruby.

In the upcoming posts you will find how to configure Jekyll and use it with gh-pages. If you find any difficulties drop comments, we would be more than happy to guide to.