Setting up Jekyll

Pretty much everyone who has looked into setting up their own custom blog has came across Jekyll. If you have somehow managed it avoid it though and are interested, please do check it out! For the most basic tutorial on installation, please refer to their docs. This blog post will be more about customizing it.

Custom theme

I started by copying over the default Jekyll theme into my project directory, and then removing most of the things. I did this to get the basic idea of how a Jekyll theme is structured. Then after I was done with the cleaning up, I started writing.

Iterate

I did the basic HTML markup first. I then added some very basic SCSS. As soon as you have at least something, fire up bundle exec jekyll serve, and start looking at even the smallest changes. Try to look at every change, and think about if it was into the right direction or not, and then base the next changes on that.

My first versions were super messy and the navbar completely relied on JavaScript. That wouldn’t do, as I wanted this site to demonstrate my CSS skills. But those iterations were still crucial to the development of this page, because without them, I might’ve not have realized to think about my goals.

After a while I had the basic layout idea in mind: a nice sidebar that works without JavaScript (you should try it!), with some nice additions if JavaScript is enabled.

NoJS navigation menu

CSS has some neat rules to replace some things that’d be usually done with JavaScript. By using .chebox-el:checked + * selector, you can basically select the element that’s next to it. So you just hide the checkbox, add a label for it that toggles it, plop down your navigation element next to the checkbox and bam, you have a CSS toggleable nav. And the best thing is, that you can change the label to a button from JavaScript, that then toggles the checkbox. Or listen to changes to the checkbox. That way you can even hook it into JavaScript, without it being dependent on JS.

Say no to frameworks

Sure, you could use bootstrap or something similar and have this site done in an hour or less. But could doesn’t mean that you should do it necessarily. Frameworks are heavyweight, and not at all what a site like this needs. Like, does this website really need JQuery? Does it need CSS for forms? CSS for rows and columns?

If you want to provide a nice user experience, and are building from the ground up, you have an incredible opportunity. Do not waste it by adding a ton of bloat and making the load times way too slow for what they should be.

I’m not saying that frameworks should never be used. I’m just saying that they shouldn’t be used for a simple static blog.

The content

Now, every blog has to have some content. I had already decided that my blog would have more techy stuff on here, because that’s what I’m most interested in.

All that was left to do was to actually write stuff… Or make videos… Or any content! That’s easier said than done though. That takes effort, and is arguably as hard as actually technically implementing the blog. Hopefully this blog will have more content than just this post by the time that you’re reading this.