Post Archives Front-end

This page is generated by Auto Pages.

  • Bootstrap cards for showing colors

    A few days ago, I built a website for showing traditional Chinese colors with bootstrap cards. Several issues I encountered during this process, just write them down for records.

  • Build a personal Markdown notebook with Firebase Storage

    Just make the Markdown notebook on the cloud. Build for personal use.

  • Self-host comments in Jekyll, powered by Firebase real-time database

    It's convenient to set up a comment system in Jekyll site with external social comment systems like Disqus or Duoshuo (多说). However, as you all know, Disqus was blocked in China and Duoshuo is going to shutdown. It's the time to rethink about the comment system (although I didn't get too many comments →_→), simple and controllable. And it becomes true with Firebase database.

  • Syntax highlight with Rouge in Jekyll

    By default, Jekyll 3 and above comes with Rouge, a pure Ruby syntax highlighter which supports 98 languages. Since Rouge themes are compatible with Pygments’s stylesheets, it’s nice for us to choose the favourable styles.

  • Figure caption for images on Jekyll sites - single line with Markdown

    Markdown makes writing blog posts simple and fast, but sometimes that simplicity comes with limitations. Recently on updating this blog theme, I wanted to include images in the post with captions, and there wasn’t a straightforward way using Markdown. While adding an img tag is very easy with Markdown, I would have to do some fiddling to inset the caption.

  • Using Liquid in Jekyll - live with demos

    Liquid is a simple templating language Jekyll uses to process pages on your site. With Liquid you can output an modify variables, have logic statements inside your pages and loop over content.

  • Related posts in Jekyll

    Jekyll features a simple “Related posts” variable per post page with site.related_posts, which contains the 10 most recent posts in default. However, it only works perfectly when lsi (latent semantic indexing) option was enabled. The Liquid tags might be helpful here.