Upgrading the blog

Akos Nagy
Sep 24, 2018

It's been a while since I last posted on the blog. The summer was long and I spent more time in natural light :)
But now I'm back with a renewed resolve. And I wasn't just lying around all summer — I did some upgrades to the blog itself.

HTTPS using Let's Encrypt

Https is a nice feature and I strongly believe that every production website should get a certificate. It shows that the user really gets what they want and actually interacts with the real page and their data is kept secure. But this blog is not really a production website :) and since I make no money of it (still no ads, see?), I didn't want to buy a certificate.
But since Google decided that Chrome should mark HTTP as "not secure" I decided it was time to upgrade, so I started looking around.
Finally, I found Let's encrypt. It's a free and open Certificate Authority. Free! That's was my magic word. Unfortunately, the certificates they give out are only valid for 90 days. Fortunately, they support getting and renewing certificates through the ACME protocol. And even more fortunately, there is a site extension for Azure Web Apps that connects to Let's Encrypt and automatically renews the certificates. Awesome. I installed the site extension for my blog web app (and to my other web apps as well), followed the instructions on how to configure the thing, googled around to find out the things that are now different in Azure compared to what you can find in the setup instructions :) and now everything works fine. As you can see, now my blog runs on HTTPS — and only HTTPS. I also enabled HSTS, so now there is no going back.

Adding search using ghostHunter

As the number of posts on the blog increased, a common complaint was that there was no search feature. Fortunately, there is component ready-to-be-used in your ghost theme called ghostHunter. It was quite easy to include in my theme and set it up (actually, it wasn't, because I'm a decent back-end developer and know nothing of css, but I got some help for the nice little searchbox). And now, you can search :)

Scrollbar using using OverlayScrollbars

Another problem that was bugging a lot of people (well, not that many, but this bugged me as well, so I needed to take care of it), was the ugly scrollbar on the flyout sidebar.
Unfortunately native css doesn't have anything for customizing the scrollbar. You have to include all kinds of vendor-specific tags for the different browsers. I know this is how web development works, but I wasn't willing to accept the fact that I was the only one with the common sense to realize how wrong this was. So after some googling I found OverlayScrollbars, a cross-browser Javascript library that enables customizing your scrollbar without the use of any vendor-specific attributes. And now there's a nice, stylish scrollbar on the sidebar :)

Interlinking posts stronger

Whenever I ran website analyzing tools, the interlinkedness (if that's a word) of posts always came out fine. But I thought that I could increase the coherence of the posts and help readers even more by adding links to related posts (related meaning having a same tag) and adding links to next and previous posts. Not that big of a feature, but I hope it helps.

Archive and tags pages

Ghost supports static pages on your site, which is not that big of a deal. But you can also add a custom template for every static page if you want. This is a nice feature if you want to add something other than actual content to your site — like my new Archive or Tags pages. The archive pages lists all posts in chronological order. The tags page lists all the tags with their cover image and description, and also allows you to subscribe for the RSS of each tag.

Watching tags

Previously all the tags appeared on the sidebar. I realized that this is not ideal; after all, not everyone wants to see all the tags. So I implemented the feature of "watched tags". Ghost does not have any user handling for readers, so I had to do this without any server side support, only using client side features. If you go to the Tags page, you have a button for every tag to mark it as "Watched". This adds an entry to your browsers localstorage, and on the sidebar, only tags that are marked as watched appear from now on.

Enabling Disqus reactions

I wasn't sure about this, but I guess it's easier to click a button if you like the article (or if you hate it), than to leave a comment. So I enabled Diqus reactions for the comment section. Feel free to use them!

fitvids

The original Ghost theme, Casper uses fitvids to display embedded videos in a nice, adaptive way. My Ghost theme did not support this, but I found this useful with only a couple of lines of code, so I added this as well.

Some other things coming your way

I'm still working on a couple of nice features, so stay tuned :) I'm not spoiling anything, but I'm planning on adding custom features to Ghost via handlebars helpers.

I hope you'll find these little updates to the blog useful and they make the content more enjoyable. If you have some other ideas, feel free to share it in the comments!

Akos Nagy
Posted in Blogging