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.
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.
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.
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.
Go to Settings and select branches under default branch change to gh-pages from master branch and hit update.
It will ask are you sure you want to change default branches select I understand and update the default branch.
- cd Desktop -> changes the directory to desktop
- 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.
- 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.
- git add . => It means you want to add all files not a specific file, you might make changes in more than one file
- git commit -m ‘added changes’ => It means you want to finalize these changes and add message to the file.
- 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
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.