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 1 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/websites2 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" 3 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 4.
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 usesindex
template and routes to root of website/blog
which usessection
template and routes to all post list/blog/post1
which usespage
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 documentation5. 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 generator6 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 color7 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
Zola Overview is a "quick start" for Zola following which one can create a minimal blogging theme which is good enough.
evenbettermotherf***ing.website has a simple CSS suggestion which emphasizes on minimalism.
Zola provides out-of-box setup for feeds, sitemap, robots.txt and 404 page.
favicon.io generator is a free online tool that works.
Theme colors made a slight but noticeable change to website look.
Before theme color
After theme color addition on <head>