Stop re-coding, start blogging

Jul 2019
By: Theo van der Sluijs

reading time: 5 min.

Category: Tech
Tags: Jekyll
So, I’ve been a blogger since the last century and I blog on many platforms. And now I start with Jekyll!

So there are a few things I have as a hobby, I like Freeletics, I like coding and I like blogging. Because I like coding and writing articles I tend to slide into a vicious circle where both are used but not in the way I want.

I like blogging about my coding, but because I code more to improve my blogging (like improving themes, speeding up sites, getting higher ranking) I actually don’t write articles about my coding because I’m to busy coding for my blogging. Are you still there?

So little time, so much to do!

Jekyll, start blogging

Jekyll is a simple, extendable, static site generator. You give it text written in your favorite markup language and it churns through layouts to create a static website.

I wanted to stop using WordPress as it just took me to long to update and tweak to get a really fast site.

Now, I’ve got a Github Pro account and on Github Pro you can have unlimited Github Pages with their own domain. And Github Pages uses Jekyll out of the box.

Jekyll is fast out of the box. It generates a static blazing fast site. And you can still update it easily with new articles by writing in Markdown files.

After migrating my WordPress articles, for all my sites, to markdown I wanted the site to have a nice clean theme. So I started to write a new theme for my sites in HTML5 and CSS3 (in SASS).

Jekyll blog, and blogging

The Theme took me a while because I wanted to use certain fonts and to use Google fonts for this. The fonts had to look like the medium font and it took some time to find the right one. Next to that I wanted a 3 layered Hero Image at the top of each webpage with text. When I was finished it looked like this:

Fast jekyll site start blog

When I was finished with the Jekyll Theme, I wanted it to be Mobile proof, so I started writing an AMP version. After writing code to re-write all my blog posts to be amp ready, it had a 100% Google AMP test rate.

Fast site for Blog with Jekyll

But at that time the Google PageSpeed was low, so I started to work on Google PageSpeed to get a higher score.

Blog with Jekyll

When I had a, for me, high enough score I started thinking about how to upload images for usage on my site. I wrote a python script to compress images on the fly and uploaded them to a CDN. That didn’t really work so good, but well I’ll script some better image processor later.

Then I started writing a python script to auto-create the yaml part for every new post. At that point I wasn’t happy with the categories and tags I had on my posts. So I wrote a script for redefining categories and tags on all my blog posts.

When the script was done, I came to a conclusion that my category and tag pages where not ready at all to put online so I started to rewrite those to display better overviews. With those overviews I thought it would be nice to see how many posts there are per category and tag. So I build that.

While I was working on that I was thinking to also fix the form on my main and contact page. I searched for a static form solution and after some reading I found and rebuild the forms into my sites.

Then it occurred to me that I really would like to have the comments back on my sites. Disqus is nice, but not really AMP ready and with out display-advertisement I had to pay for it. So searched for a better solution and I found this acticle on written by Michael Rose about Staticman. I read a few articles, a bit to long I guess and I really really started to like the Theme that Michael Rose used for his site. Maybe I should rebuild my theme to this guy’s theme. I donated some money to Michael to give myself the feeling I was not stealing this theme and wanted to start building the New Theme.

Okay…. focus Theo FOCUS!!!

Comments! I want comments on my static site not a new Theme. I refocused and seemed to be able to get me my comments. Staticman is an API that you can use to send your filled in comment form to. The API then creates a Yaml file from that comment and sends it to your GitHub account. The code within Jekyll can then use these Yaml files to show these comments on your page. Github will rebuild the site every comment. So when a comment gets posted it will show automatically on your site. This way, I’m not just the owner of the sites comments but I also have full control over how to show them.

That got me thinking…. what if I get a lot of comments…Github rebuilds and rebuilds every time a comment comes in. But Github only allows so-much rebuilds per minute…. and wait a minute…. how long does a rebuild actually takes?

So I ran the script:bundle exec jekyll build — profile

While running the jekyll build script, I started to feel like its really really slow…

Done in 30.017 seconds.

30+ seconds!!!

What… wait… okay… understandable. I might have created too many includes that had to run each time. So, I read a lot about caching and there is actually a plugin that can be used on Github to cache includes.

So I started changing my includes code to:{% include_cached shirt.html size=medium color=red %

Running build — profile again and….. 40 seconds… WAIT What…. ????

It did not speed up… it slowed down! Maybe so much includes is just not a great way to build Jekyll sites. Let’s move some includes back into the layouts, and things started to get messy…. This shit is unreadable…… Maybe I should rebuild all to a new Theme. And write python scripts that auto-builds HTML that first was done within the includes.

And then a little voice started screaming in my head:

Pull your head out of your Arse! Stop waisting time! Start writing articles!

And there you have it. I’m back on Medium. After 6 months I finally had the time, really had the time, to sit down and took some time to write this blog post.

And it feels Good!!!!

Has it all been for nothing? Nope, I’ve written big amounts of code. Liquid code for Jekyll, Python automation scripts and I will all post them here on Medium.


Submit a Comment

Your email address will not be published. Required fields are marked *