How to create a GitHub blog - Jekyll with GitHub Pages

This is my first blog post and it is for someone who is looking to create a blog with minimum efforts or is completely new to GitHub Pages, Jekyll, and of course Web development.

There could be numerous options to improve this write up, I welcome everyone to post their issues and comments.

Pre-Requisites

So lets start with what do you need at the first place.

  • Domain Name
  • GitHub Account
  • DNS CNAME
  • Disqus Account (to enable comments)
  • Linux Server (I have used CentOS 6 but you can use any Linux distro)

    First and foremost, register a domain name with any of the big players like GoDaddy, BigRock, OnlyDomains, Register, etc. These domain providers also manage your DNS records.

    I have registered my domain name with GoDaddy which is reachvikas.com.

    Create an account with GitHub. My account is vikas027 which I will use as example in the rest of this post.

    The next steps is to have a DNS CNAME record. Say, your domain is example.com or www.example.com, and you wish you to have your blog URL as blog.example.com. To achieve this you must create a CNAME record to point blog.example.com to vikas027.github.io. Here, vikas027 is my GitHub username. You can create this record by calling up the company with whom you've registered you domain with. I am managing my DNS records through Route53 of Amazon Web Services (AWS). In my next post, I have listed out the detailed steps to host a website using AWS services - S3 and Route 53.

    Having a Disqus account is optional but is highly recommended if you want someone to post comments to your blog post. In my humble opinion, a blog is not complete without an option to post comments.

    The final step is to have a Linux box (could be a VM) which has access to Internet.

    If you are good with all of the above, you are ready to go.

    Choose the theme or appearance of your blog

    This is quick and dirty way to do it. There are various public repositories which you can use. I googled out and found these repositories really good. Feel free to use any of these, I liked Savjee.be repo and will be using it in this How-To. I have given Xavier Decuyper a star for his work and I thank him for writing such an easy to tweak GitHub blog. If you too like his work, please feel free to appreciate him by giving him another star.

    Create a GitHub repo and add your SSH-Key to GitHub

    Login to your Linux machine and issue the below command to generate SSH Key Pairs.

    $ ssh-keygen -t dsa (Press enter key few times until you get a prompt)
    
    Now, copy the content of your public key and save it in your GitHub account. This is helpful for pushing content to your GitHub repositories.
    $ cat $HOME/.ssh/id_dsa.pub 
    ssh-dss AAAAB3NzaC1kc3MAAACBAI6g1tjo77HNw5c4sI4rSeVcK7tmigqt6+t49ftJvet+UT8pIzcwIc7zFW+cFvQsEU18hipK74m7MZJTrUxP3Nd8hHawpAowegd24aNFQdQEMJcoaI7wprcG5l6iC9MO9fW6WgoSuGvxqJWy/oxqC44up5TeAlylid1W+xCym60RAAAAFQDEaEV1Cs6YHRKedE9A6tBdTy4qAQAAAIAJ46KP4iiL7BYTR34DhxbrG5YQ9Lr4GOSv1brq4OKPMLInw+6KnMfBtgn74MDVL3USIR9+SQZpTeaMjUPqIt3nyigYtViMTJz7RYOCotGcjjql4URThweRxsp9FhR89KwHVKR69DKEcpeTLCGiicCW18vcWiydYTGAyzHWoW6ssQAAAIAtXASwZKRpsYNzuDXOb8VNd8rbbxPHEtvcK3Z6nqv2awWiK2XTFFCJXzbOQOWa27rfrD5ik6GvF7fDsjjVVqybm0Bpm4aBm32e2eaIG0FSLilcUM723e23QnMKGKAOZDZ7tswewefwef23f1K2oAA8CaO6ePG1JSlMfKUjzLxAgsrl1D2ozw==
    

    Follow the screenshots to save the SSH Public Key.

    Alternatively, you can use GitHub Windows or Mac OS client too. I am a command line guy, so I love to do things on CLI.

    Clone the chosen repo and publish it

    Now, we have need to create a repository, clone the contents of Savjee.be repository and publish it. For the purpose of illustration, I am creating a repository blog27 and my blog URL would be http://blog27.reachvikas.com.

    Run the below commands to accomplish the first step of the task. Again, vikas027 is my GitHub Account and blog27 is the name of my repository. Replace these as well as your name and email ID with your values.

    $ curl -u 'vikas027' https://api.github.com/user/repos -d '{"name":"blog27","description":"Test Blog Repo"}'
    $ mkdir blog27
    $ git clone https://github.com/Savjee/savjee.be.git blog27
    $ rm -rf blog27/.git
    $ cd blog27
    $ git init
    $ git config --global user.name "Your Name"
    $ git config --global user.email "YourEmailID@whatever_mail.com"
    $ git config --global --add color.ui true
    $ git remote add origin ssh://git@github.com/vikas027/blog27.git
    $ git add -A
    $ git commit -a -m "Added Files to my origin"
    $ git push -u origin master
    

    Since, we are using GitHub Pages we need to create a branch called gh-pages and make it our default branch. GitHub pages requires the branch to be called as gh-pages. Follow the below screenshots to do the same.

    We do not need the master branch now. Let's create a branch called gh-pages on our local repository (on the Linux box) too and delete master branch both locally and on GitHub too.

    $ git branch gh-pages
    $ git checkout gh-pages
    $ git branch -D master
    $ git push origin --delete master
    

    Enable comments through Disqus

    Disqus is a neat and classy tool to enable comments to your blog posts. It is also useful in moderating comments to your posts. Let's enable it.

    Login to your Disqus account and browse here. Provide details of your blog as shown below and click on "Finish registration".

    Now, copy the contents from the below box.

    On your Linux box, replace the below content in file blog27/_layouts/post.html

    with the contents of Disqus copied earlier

    It is now required to push this file from our Linux box to GitHub repo.

    $ git add _layouts/post.html
    $ git commit -m "Enabled Disqus" _layouts/post.html
    $ git push -u origin gh-pages
    

    Final Touch

    You're just 10-15 minutes away from your blog. Run the below commands and wait for 10-15 minutes. Again, please do not forget to replace my blog URL with yours.

    $ echo "blog27.reachvikas.com" > CNAME
    $ git add CNAME
    $ git commit -m "first commit" CNAME
    $ git push -u origin gh-pages
    

    After, few minutes you will be open the below web page.

    To remove, add or edit posts you will have to edit .md files in _posts directory.

    Thanks for reading.

  • comments powered by Disqus