"Hello, friend. Hello, friend? That's lame."

— Elliot Alderson, Mr. Robot

Welcome to my shiny new blog!

How I Create This Blog?

This blog is built using my own static blog engine, called blogger, written from scratch in Ruby.

In development, it is like this:

$ blogger init blog

This creates a new directory named blog with this structure:

blog/
  _layouts/
    stylesheets/
      blog.css
      sanitize.css
      syntax.css
    index.haml
  _assets/
    logo.png
  _contents/
    articles/
      hello.md

Then,

$ blogger serve .

The engine will listen on http://localhost:8080 with LiveReload enabled. Edited Markdown contents in _contents get automatically re-rendered with layouts and reloaded in the browser.

Deployment

$ blogger build --scheme https --host sarans.co --port 443 .

This creates a static site in _public directory, ready to be deployed anywhere.

Blog Engine Implementation

Layouts (Haml) and contents (Markdown) rendering uses tilt and redcarpet gem respectively. Watching for changes (in serve command) for re-rendering is implemented by using the listen gem for listening to file system notifications.

The CSS is hand-written without a framework in _layouts/stylesheets/blog.css using pure CSS code because I'm too lazy to make live SASS compiling and reloading work. The theme is based on my own unpublished Sublime theme, which in turn was based on ayu.

Code highlighter uses rouge, which is compatible with Pygments.

Browser live reloading uses LiveReload-JS in client-side. Server-side is written based on EventMachine WebSocket following LiveReload protocol version 7, which I borrowed the code from Jekyll's LiveReloadReactor.

The CLI is built using Thor.

Front Matter parsing is hand-written using standard Ruby's String#split and yaml module.

The whole engine is <300 LOC in Ruby.

What's Next?

There are so many more things to do with Blog (SEO, custom pages, analytics, and comments to name a few). I will only add things as I needed.

Until next time!