Github is a fantastic space for someone like me to try to learn something new.

This time I have built a blog powered by jekyll and Github. This posting is targetting a novice who especially used a theme, and who is trying to add a disqus in the blog. Hope it helps them not to experience the trials and errors I had.

I found jekyll homepage and Sechter’s blog good. I guess you would barely need to look into my posting after going thorough these two websites. Nevertheless, Disqus website has been updated after Sechter’s posting and I added up some useful captures from Disqus.

requirements

  • Linux or macOS. (Simply because I am a macOS user. You can find the manual for Windows users at jekyll homepage.)

  • Ruby version 2.1 > (Just get the recentest one if you don’t have it. Mac internally serves ruby 2.0.0, and still need an updated version.)

  • RubyGems

$ gem install jekyll

check version

$ jekyll -v
  • GCC/Make

Before downloading(cloning) a theme

If you have already initiated your blog from Github, the new downloaded theme can collide with index.md or some html files. Move or delete the files. Watch out not to delete your posting or gemfiles as well.

After downloading a theme

I have downloaded a theme from HPSTR’s Github. You’ll download your own favorite. And then, customizing it with your own informations. You’ll modify .yml files like _config.yml. Those files are not written by a special programming grammar, so just open the file and put your name, a nickname, a blog title and so on. If you want to customize a background pictures. Just find the pictures from images folder and resize your own pictures and rename it.

Add a Disqus

Maybe the downloaded theme has the setting for Disqus, too. Above all, you also need to register for Disqus, and then the Disqus website leads you to follow the essential steps. That is easy. Just copy some embeding codes and paste on the proper html files. However, you need to do some extra.

If you choose a blog setting in Diqus hompage, you can see the offered(and fixed) shortname as seen in the next figure.

disqus screenshot

Copy and replace it with ‘Shortname’ in the copied embedded codes.

git history screenshot 1

In my blog, I replace the shortname with physhiks-data-science. See the history of my Git commits. The red line is removed and the green line is added.

I modified the _config.yml and disqus_comments.html from the _include folder. Note that the name or folders of files can be different.

Besides, should change your YAML front matter block between — and — , placed at the first of the documents (mostly, md file or html file).


---


comments: true
---

git history screenshot 2

In the YAML block, add “comments : true” like the above picture.

Image

Introduction to how to add images in the post.

![disqus screenshot](/images/postimages/disqus_setting.jpg)

Actually same as markdown format to add a picture. You should present where the picture is. Github is very convenient to push your files to the server and manage them.