pbe - adding features to blog

2023-11-30 . 1074 words . 6 min

The term "PBE" is a play on the an acronym IDE i.e. Integrated Development Environment and abbreviation for "personalized blogging environment". The core idea of the post to check on all personalizations I wanted to do on this blogging setup and also stay as reference to how certain elements on the website might behave.

why the hell did it take you 10 months to do this?

It did not. After I wrote the first post, I started burning my energy on my day job which was interesting and hectic to say the least. There were lot of things for me to learn and a lot of time was spent fixing stuff for work. Meanwhile, my development workflow has changed a lot

• moved to todo.txt for tracking tasks (from paper notes)
• started a custom daily log setup with bash magic
• stopped using pinboard and hacked some bash to create a terminal bookmark-er
• bash-ed time-logging chores required at work to reduce cognitive load

At this point though, all these have become a mush and need maintenance, so I'm trying to revive the blog and in a devlog approach fix these mushy items into clean interfaces which allow me to go faster on my day to day.

i wonder if the site wasn't as raw?

When I started this website, I used Zola Overview ¹ to get started with the base content and styling which is the rudimentary setup that one should ideally start their personalization journey from. I've always admired minimalistic portfolio/websites² of Danluu, Tom MacWright and Xe Iaso. (I want to confess that I avoid tinkering CSS as much as possible). I leaned towards styling from "even better motherf***ing site" ³ with a few tweaks; added below and it looks good.

body {
    background: #f2f2f2;
    color: #444444;
    line-height: 1.6;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    margin: 5% auto;
    max-width: 73%;
}
a {
    border-bottom: 1px solid #444444;
    color: #444444;
    text-decoration: none;
}

i wonder if site would refresh when I push push

I use Cloudflare DNS to manage the domain hrmnjt.dev and there were 2 easy options for me to run a continuous deployment flow - Github Actions + Github Pages or Cloudflare Pages. I chose latter to try this out. Steps that one has to follow are from Cloudflare Pages Docs. It executes the build process on every commit and creates a staging and production link ⁴.

i wonder if there was a better way to find content

Zola has sane and easy defaults for index, section and page templates and at this point of time I don't think I need anything more than this for content on this website. This means navigation can be super simple and easy.

Right now, we have three places to navigate to

• / which uses index template and routes to root of website
• /blog which uses section template and routes to all post list
• /blog/post1 which uses page template and routes to individual post. This is also what I suppose will be centerpiece.

is there a feed, sitemap? what happens on a random url? will this appear on google search?

Zola already solves for most of above as out-of-box options. Feed, sitemap and robot.txt are default generated if configured based on documentation⁵. Adding these options and few lines of code in templates made it easy to finish this item from checklist.

Site is functional, blogs are readable and this is a good target for me to get going with some actual blog ideas which are pending.

now, a visual facelift

Before yesterday, I've had a hate-hate relationship with CSS. I never gave it a serious chance to CSS and it in return, never worked well with me. We have started understanding each other since yesterday. I started exploring with the aim to improve visual design for the website and make it look clean and crisp.

I started with an easy one - favicon. Favicons are not a big deal unless you have 200 tabs open on a browser window. It creates a minimalistic branding which goes a long way especially when "thinking fast". I highly recommend favicon.io generator⁶ which takes in simple inputs to create assets and provides documentation about enabling the favicons.

As I was going through <meta> tags for website, I quickly added theme color⁷ which makes android (and in some case desktop) view cohesive. Again, like the favicon, theme colors are underrated for the value they provide to subconscious design.

As for other things related to <meta> tags, OpenGraph Protocol makes the blog sharing look good on most platforms. With og:title, og:description, og:url and og:image most of the social platforms create a card layout to show shared content in a better way. Going ahead I can add an og:image per post for customization. For next fun "side project", I plan on using an LLM to generate an image for each post.

Next set of improvements are towards making the CSS for all significant HTML tags that get generated based on my markdown usage. This involves headings, links, images, blockquotes, tables and codeblocks. While I was at it, I made some minor changes to website layout which improves container width, mobile view for website, top navigation, footer and section pages.

I'm very happy with way the website looks right now and I want to focus on getting to adding good content in near future.

footnotes

Before theme color

After theme color addition on <head>