Often I want to quickly write a small blogpost about something, usually involving bits of code. But with Blogger, where I previously hosted my blog, adding code with proper styling was always so cumbersome. For a long time I wanted something different, something simpler. No more dependencies on hosted services or other peoples database models, since it’s always a hassle to move from service to another.

This new blog is created using Jekyll, automatically deployed using BitBucket Pipelines and hosted (free!!) on Google Firebase. The design might not be that great (yet), but hé, I’m a developer ;-)

Jekyll

Jekyll is simple tool for writing documents in Markdown and generate static HTML pages based on Liquid templates. The templating is very simple and using a Jekyll theme, it is very easy to quickly setup a site.

A Jekyll site is pretty simple, but can easily be extend using existing plugins, write your own plugin or some advanced templating.

BitBucket Pipelines

Most my git repositories are on BitBucket. With the ‘pipelines’ feature it is relatively easy to setup a workflow where all commits on the master branch are automatically deployed.

Static site hosting

Since Jekyll is just a static HTML site, it should be possible to host it somewhere for free. But, apparently, there are not that many locations anymore where you can freely host a site.

Heroku is not a real choice since it stops the instance when there is no traffic or it’s resources are needed by paying customers.

I finally ended up at Google Firebase. Although it is mend to be used for dynamic sites, it can also just be used for hosting static content. Deployment is easy via a firebase cli tool.

CSS Grid

I discovered CSS Grids (see post ‘CSS Grid is Awesome!’) and I like it a lot so I decided to create my own templates since I wanted my site to be Javascript-less and responsive using CSS Grid.

SASS

While creating the new blog I also learned about SASS. Why does CSS not just have all these features?

Blog features

Features I’m using for this site:

• CSS Grid
• Pagination (v2 plugin!) - see post ‘Paginating on a Jekyll site’
• A dynamic menu
• Archive page
• Tag cloud

In future posts I’ll elaborate more about how I implemented this site and features.