Hello World!

Finally I decide to open a blog here. I will write mostly about research stuff - some recent work will come out shortly - but in this post I just want to talk about the blog itself.

It is a long journey to start with Jekyll from scratch1 - I have always wanted more customization options, but I really know little about web developing.

It all started when I was writing a website for grad school applications. I started off by using the Bootstrap Material Design template, which I used during a course project. It was a great template, but I just did not like Google’s Roboto font in paragraphs. So after I got to Stanford, I changed to the Paper template @ Bootswatch. Material Design rocks!

But the font problem persists. Then I took inspiration from Typora, a fantastic Markdown editor. I love how beautiful the rendering in a WYSIWYG style, and I thought it would be pleasing to see this style in the blog posts, so I can basically type in Typora and publish directly without worring about the style in the browser. This can be done easily since Typora (and most other Markdown editors) use CSS templates for rendering; so I took it. I really have no idea how adding a file replaces the Roboto font, but it worked, so I never bothered to know why 2.

However, the process was not entirely smooth, and I list some of the problems that I encountered and their solutions:

  1. Math does not render properly in the browser but it works perfectly in Typora. Solution: All math in Kramdown are enclosed in double dollar signs. Luckily, Typora supports this, so the problem is solved.
  2. Disqus just does not work. Solution: I found the documentation in the official website very confusing. This blog post is a much better guide.
  3. I need citations. Solution: Use Jekyll Scholar.
  4. Images do not appear where I want it to. Solution: Use Kramdown IAL, such as {:.center}, and some CSS hacks will get you there. Or use plain Photoshop.
  5. Github does not support Jekyll plugins. Solution: either use your own host, or publish through the /docs folder.


Here is a comparison between browser and Typora:

Browser:3

Typora:

So basically, WYSIWYG!


The code for this blog is fully available on Github. Feel free to use the code - I will be grateful if you include a link to tsong.me in the footer of your blog.

Certain style details of the blog are inspired by Otoro and Dustin Tran’s Blog.


Footnotes

  1. Medium does not support math, and Ghost is expensive (and I didn’t really need it by the time I encountered it). 

  2. I am a machine learning Ph.D, not a front-end developer. 

  3. Math is not pretty. Use Common HTML in MathJax to fix this.