Update : 2018-05-06

Yihui Xie has announced a new package blogdown in September 2017. This package include all the features in knitr-jekyll but instead of using Jekyll this time he switched to Hugo. There is a terrific instruction from him, blogdown: Creating Websites with R Markdown. So, if you want to integrate your website with R Markdown, I will definitely recommend you to check that out. I also convert my whole website from Jekyll with knitr-jekyll to Hugo with blogdown.


The Github repository for this website : choux130/myblog.
The Github repository for the website template : bencentra/centrarium

This post is about the process I have benn through for setting up this website, the resources I have read and the things I have tried to do and it just worked out. If you are also new to website setup but has passions for having one, please check out this post and hope you find it helpful to you. Feel free to leave any comments. Let’s discuss and learn together!

I am a stats person and my programming experience are all about statistical modeling, data manipulating and numerical computing. At first, I did not have any idea about setting up a website. After doing some research online, I found that Wordpress has huge online resources and community. So, my first step was playing around with Wordpress online. It is easy to use and has very beautiful interface but for the free trial, you will have limited functions, spaces and domain name related to wordpress.com. Without having a lot budget for setting up a website, I tried to do Wordpress offline. It is free to download to your computer and you can add many wonderful extensions for free. But you will need to host your website on companies like Bluehost, HostGator,…etc. Generally, the fee will be around 50 ~ 100/year which is still too high to me. Hence, I kept finding until I met Jekyll which can be hosted on Github Pages for free. So, all I need to do is registering a domain name with Google Domains for only \$ 12/year. Now, I am satisfied for all the things I have now.


Details

  • Why Jekyll not Wordpress?
    There are 3 main reasons why I chose Jekyll not Wordpress.

    Firstly, Wordpress does not work well with R Markdown.
    I am a big fan to R and I write every analysis report (ex: my master thesis - PDF, R Sweave code) and slides (ex: my master thesis - ioslides, R Markdown code) using RStudio products. So, I wish that all my web posts and pages can be generated from R Markdwon which is crucial to me. Although I found that I can use the package RWordPress to generate posts on Wordpress, it just did not work really well on transforming formats and syntax. The posts on Wordpress can be really different from the HTML files you compile in R Markdown. On the contrary, by using knitr-jekyll in my Jekyll website, the formats and contents of posts are almost exactly the same as what I compile in R Markdown and it always work smoothly when transforming files. So, writing posts in Jekyll is definitely more fun than in Wordpress.
    Secondly, the website structure behind Wordpress is far more complicated than Jekyll.
    The website structure behind Wordpress includes MySQL, PHP and Apache which are gigantic and may be too technical for me for now. And, because of its complicated structure, whenever errors happen, all I get is just a white page without any error codes on the user screen. It is just so hard for me to debug. On the other hand, a Jekyll website is a directory folder consists of many .html, .scss, .json, .xml files which I can easily open the files, inspect each code line and modify them if you want. And, every error will be shown in the terminal window in details, so I can just Google for solutions. Hence, from my expereince, Jekyll is much more controllable than Wordpress for its simplicity.
    Finally, many prominent data scientist also choose Jekyll for their personal website or for project website.
    For example, Yihui Xie (the author of knitr-jekyll), Brenda Rocks, Simply Statistics, The caret Package, R for Data Science…etc.

  • Part I : Get started! Combine Jekyll, Github and Github Pages

  • Part II: Change appearances, Add features and R Markdown
    Afer finishing all the deployment, I started to cutomize my website by modifying some .html and .scss files in the template. The text editor I used for all the modifications is Atom. The following are the features I added in my website and some relevant resources.

    • Appearance:

      1. Make my own logo and replace the logo form template. logomakr
      2. Change the color of font, background and hover. W3School
        Modify codes in _variables.scss and _typography.
    • Features:

      1. Use R Makdown to publish posts: knitr-jekyll.
        Download all the related files from the Github repo and put them in the website directory folder.
      2. Add math syntax by using LaTeX notations in R Markdown: Mathjax.
        Mathjax is a javascript library, you can import it from online source or from the local directory after downloading it to the website directory folder. What I did here is import it from online source, which means that the features will not be able to show up when internet is not connected.
        Copy the following codes in header.html file.

         <!-- MathJax -->
         <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
         <script type="text/x-mathjax-config">
            MathJax.Hub.Config({
            tex2jax: {inlineMath: [['$','$'], ['\[','\]']]}
            });</script>
        


      3. Add a page with search bar.
        How to Make lunr.js and Jekyll Work Together (with Gotchas)

      4. Add comment feature by using Disqus.
        How to add Disqus comments to Jekyll Blog - Tutorial 9

      5. Highlight syntax and codes: Highlight.js
        Luckily I have this feature in my template, so I do not need to add this again. But if your website template do not have this feature and you want to add it, here is how you may want to do. Copy the following codes into your header.html and change the default.min.css to the style name you want. Here are all the styles. Or, you can download all the Highlight.js library to your website directory folder and import the library by following How to use highlight.js.

        <link rel="stylesheet"  href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>