hrmnjt.dev::sttp://secure_thought_transfer_protocol

Creating cleaner Hugo theme

2019-07-27

⚠️ Time Capsule Alert! ⚠️

This post is a digital fossil excavated from my ancient blog archives. Like finding your embarrassing high school photos, this content represents Past Me™ (who knew significantly less than Current Me).

Side effects may include: broken links, missing images, and opinions I’ve since upgraded. My brain has received several critical software updates since writing this.

For the latest version of my thoughts (now with 73% fewer bugs!), please check out my more recent posts.

Solving my troubles by creating a theme focused on content, cleanliness, speed, responsiveness and privacy.

Vulnerabilities, security alerts and Dependabot

Github is an awesome place for people to collaborate for anything code. Last month, around the time for Github Satellite 2019, Github acquired Dependabot With this change, security fixes became way easier and I was delighted.

All Github repositories now feature a Security tab and Github using Dependabot to create alerts for security vulnerabilities that exist in code. Dependabot makes it better by analysing the vulnerabilities and create automated PR for you to solve the issues. With this careless coders like me, can fix the issues w.r.t. security and learn more as well. Read more

One prominent change that I observed was that of all the code that I push to Github, most vulnerabilities are alerted for my blog, especially the theme. I love the theme but not the yarn packages that were involved to make it.

Requirements from the new theme

My older theme Terminal is an awesome theme created by panr. I had been using this theme for the longest time and of all features it packed, liked the typography and color scheme.

I started with finding alternative themes, because I didn’t want to complicate my life by creating a new theme. Secretly, I dread writing frontend code - HTML, CSS and JS. Listing down inspirations, below are the few that stuck in my head:

My requirements were very simple:

Creating a new theme

Even when the requirements were simple, there are not enough existing themes which provide all the features combined. The other problem I see with external themes are that they need to be maintained based on the upstream for new features.

I finally took a call to setup my own new theme which intent to cover most of the features that I want. It took me total of 3 hours to create this theme and I have kept the HTML and CSS as minimal as possible. It draws heavy inspiration from its predecessor and Dan Luu’s blog.

Now was the time to add more details like

Adding SEO to blog

An important part of the blogging is to be discovered on internet. SEO (search engine optimization) enables that for all the sites. People make their living out of improving SEO and there are lot of crazy hacks that come up all the time.

Google’s Lighthouse audit suggests a simple set of steps that can improve SEO by a huge margin and is generally the most important audit pointers. There is a great documentation about improving SEO and implementing best practices around this.

Getting 100% score feels too good. Next step was to improve the look and feel.

Improving look and feel - CSS learning hour

Go’s html/template and text/template" library does a great bunch of heavy lifting when it comes to HTML generation for the content. Major effort for the theme developers is to go crazy with all the tricks that they know to make things fancier. It might be another reason why there are so many themes which have a lot of great visual and experience treats.

For me the challenge was different, I wanted minimal features for the site with as little changes as possible. In the process to do so, I learnt about CSS box model, hierarchy and inheritance of CSS implementation and separation of concerns in CSS code.

I started with renaming the theme to pure

Changelog (in past two weeks):

As of now, the CSS code is very simple you can check out the theme here.

This is a minimalistic blog which at this moment does not support comments. In case you have any feedback or comments, reach out to me on Twitter or Mail.