About this blog

Here we go!

Some background

I can’t easily recall the time that I decided to create my own personal blog. It was around 2011 and back then any relevant article that I could find was proposing using PHP, some SQL database for backend and HTML/CSS with JavaScript for the frontend. Things were not making much sense for me since I was studying physics and I didn’t have any computer science courses or any general knowledge on computers. I was demotivated after a few days.

My desire was never forgotten. I wanted to have my own blog and not use one of the existing solutions like BlogSpot or WordPress.com which were famous back in the days. I had a very strong feeling that I should be in control of my content and not rely on a third-party platform or service. And to be honest I still have that feeling.

Fast forward to fall of 2019¹ when I was finally out of university with clear mind and quite a lot of free time I started experimenting with Hugo static site generator. I had some previous experience with it when I had to setup a personal site/portfolio for a family member. Back then I used an existing template which I tweaked a little bit but this time I wanted to design and build the theme improving at the same time my HTML/CSS skills.

So after a few months of not continuous work² and fighting with pandemic blues I ended up with what you see now on your screen. From early in that process I realized that I had to decide on the “mvp” or else the features that I wanted to have in the alpha version of the blog. In order to do so I had to answer a few questions to myself.

What type of content did I want to share?

Text is trivial since Hugo is using Markdown which I found very easy and cool! Since I work as a programmer I definitely want to share some things regarding programming so I need code blocks! And Markdown got me also covered in this one.

#include <stdio.h>

int main(int argc, char* argv[]) {
    printf("Hi! my name is %s\n", argc > 0 ? argv[0] : "no-name");  
    return 0;
}

My background is physics so I guess that occasionally I will write some equations and what’s the best way to write equations on a computer than LaTeX? Even though Markdown does not support equations there is this amazing project called KaTeX which when combined with .mmark flavoured Markdown renders all the LaTeX equations in the browser!

$$ \alpha ^2 + \beta ^2 = \gamma ^2 $$

Another thing which cannot be excluded is the optical representation of information. An image! Hugo has a really nice system in order to support images

And lastly, boring but sometimes really useful tables are supported by Markdown.

How did I want my blog to look like?

I really like simple blogs. The ones without very colorful design, big headers or huge font size. These kind of blogs that you remember for their high quality content and not their eye-candy appearance. But that doesn’t mean that I am against putting effort to a blog’s design, quite the contrary. I always value a well thought and meaningful design that serves its purpose by making the content more accessible.

Listing the requirements is always helpful.

Support desktop and mobile design

This is all about CSS and since I wanted to improve my skills I created a style document from scratch. I know that there are many CSS boilerplates out there which can make life much easier but I would choose them if I was focusing more on the result and not in the learning experience.

Style code blocks, tables and equations

I wanted to have the content of the page in certain width. For that I had to make sure that I don’t have lines overflow e.g. from a code block or from a very long table. This is mainly solved with overflow-x: auto; and some additional styling for the scrollbar.

"Line breaks are rather ugly when code snippets and equations overflow so I use a scrollbar instead."

Easy navigation

I’m still baffled with navigation. What should be the first page of the base url? Should I have the posts list in the homepage? Probably in the future I will have other sections like projects, guides or even essays. Wouldn’t be easier to have a homepage with newest content from all the categories? I spend some considerable amount of time trying to answer those questions which was eventually… (drumroll) a big mistake³. Trying to solve a problem that you don’t have yet is definitely not a good strategy for making progress.

So for now I decided to go simple. One about section with a single page and a posts section with its contents listed in the homepage of the blog. Based on what the future will bring I will adjust my approach accordingly.

Fonts and font size

For now I am going with sans-serif fonts for the main text with Helvetica and Arial being prioritized if they are present in the system. I like better how the whole body of the text looks and I’ve also read that they might be slightly better for computer screens than serif fonts.

For code I cannot go with something else than sans-serif monospaced fonts. I choose Monaco, Consolas and DejaVu Sans Mono. The font size is a bit smaller than the rest of the body.

The body font has the usual 16 pixels size. I am well aware that in screens with very high resolution the text appear super small but I personally like pages with high information density. If you feel that the font size doesn’t suit you you can always increase/decrease it with Ctrl + +/- or command + +/- on mac keyboards!

Aesthetics

I want a simple blog but as always god is in the detail. Adding some kind of color makes the blog somewhat more pleasant and memorable than having plain text imho. Eventually I choose a light blue for text references and horizontal lines. I don’t know if I am gonna keep it or switch to a more vibrant color but for now I am happy with it!

For the links I prefer the underline style with pitch black font color. Colorful styled hyperlinks usually distract me and especially when there are many in a text.

In conclusion, this is just the alpha version. The point was not to just build a blog but a space where I can express myself. If I use it regularly (I hope so) new needs will come up so I will adapt and reconsider my decisions.

Future

I have in mind to add more sections so rethinking the homepage is unavoidable. I want also to have anchors for the sections of a post and maybe a contents bar for easier navigation. Add a lightbox which makes viewing the pictures much easier. RSS is something that I definitely want to look into but I’ve never used before to be honest. Since the page is hosted on Gitlab and I don’t have access to server logs it would be interesting to have some simple analytics solution (probably not from Google because I feel it’s an overkill). Finally I have to make up my mind about the licencing of the content.

Hopefully I will come up soon with more posts regarding the above and other various topics. Stay tuned!

Thanks for reading!

stefanos