Burak Dede's Blog

My Jekyll Blog Setup

It has been a long time since I set down and write a blog post about something. For the last 10 year, I constantly changed the platform for my blog from WordPress to Posterous(defunkt) to Jekyll to Medium and Ghost. The thing I wish I had done differently is backing things up properly when I change platform and give more care to my content. Anyway, I am back with Jekyll and I am considering staying a long time with it. I am already a paying customer for GitHub and I wanted to own my content so Jekyll seems like a good way to back things up and own your content.

Finding Theme

Default theme comes with Jekyll is not that good for my own taste and I wanted to find something minimal and nice on the eyes. While surfing some GitHub Jekyll repositories I came across this repo. I like wider layouts so I tweaked Sass a little and change a couple of things related to layout and it looks good enough for me right now.

Jekyll

I have used Jekyll in the past but without knowing some syntax and details of it. I think it is one of the reasons why people abandon some tech or tool, not knowing details and philosophy behind it. I sat down an afternoon and read official documentation of the Jekyll and created a couple of templates, played with the liquid template engine. I still have missing parts but I think I can easily say that now I know what I am doing with it.

Seo

This is something I usually give zero care but it is important if you don’t have an audience or reach like Medium or other hosted platforms. People usually reach your site trough social media links, newsletters or search engines. For this, I used Jekyll SEO plugin which is really easy to setup just add jekyll-seo-tag to your _config.yaml and you are good to go. Add related content to your YAML front matter and it will automatically create meta tags for you. Of course, every page to take SEO tags change your default template in _layout folder and add seo tag before the head tag.

For more information check offical doc from GitHub.

Sitemap

This is related to seo and it is important. I have used Jekyll Sitemap plugin without much customization. Add it to your _config.yaml and your _site folder will include sitemap.xml for the next build of your page.

For more information check offical doc from github.

UPDATE - I came across Google Search Console tool which helps you track any kind of event whether it is sitemap, robots.txt or any crawled content. It looks like it sends reports related to current status of the page weekly/monthly. But beware it take a little while to get data on search console. You can check google help page for more information.


<html lang="en">
{% include head.html %}
{% seo %}
<body>

Newsletter

UPDATE - I am not using newsletter feature anymore.

Even though most people rely on social media for reaching an audience I found the newsletters still a thing so I searched for a free solution since it is a nice to have. I found TinyLetter which I think backed up my MailChimp and with free account allows your to have 5000 subscriber which is more than enough for me.


---
layout:none
---
<!-- newsletter layout -->
<h1>Latest Posts on {{site.name}}</h1>
<!-- add site logo here -->
{% for post in site.posts limit:6 %}
    <h2>{{post.title}}</h2>
    <p>{{post.summary}} <a href="{{post.bitlylink}}">Read more &raquo;</a></p>
{% endfor %}
<!-- add ads here?? -->

Created new layout for mail by taking last 6 posts with minimal makeup. Added summary of every page to YAML front matter and created bitly links which also added to YAML front matter to measure clicks and other stuff. Measure everything!!!

Still not that automated but will work on it. By the way, you can test it by reaching to the end of the page and subscribing with your mail.

Caching, SSL, CDN

I decide to use CloudFlare after checking site speed with Google SiteSpeed tool. I had red flags on caching (GitHub provide 10min cache) so using CDN seems logical. I set up CloudFlare account and updated my DNS with CloudFlare’s to redirect traffic to them. (it is in the pending phase right now) Plus they provide SSL, AMP and other extra stuff for your site with just a free account. This is still in progress and we will see how it goes. There is nice tutorial how to work CloudFlare with Github Pages.

UPDATE - my site currently works over SSL and force all the traffic through https so CloudFlare works like a charm.

For image and assets on my site, I am using ImageOptim app to compress and get every bit of optimization for the page. Every time I place new asset for the site it is optimized already.

Writing

I already know enough markdown to be dangerous so I am writing my posts with markdown. First, it starts with a draft on Grammarly to check every bit of grammar in real-time. It is an awesome extension and really easy to use and it is free with acceptable limitations.

After being done with the draft I update the post with markdown give links to their right places and build site locally jekyll serve to see if anything wrong with it. After everything went fine I push the new post to Github for production site to be built. Done!!!