New New New Blog

/

In my last blog post I said that I was completely content with the new blog and the design I made for it. Recently I got into pixel art and graphics so I decided it was time to put my newfound skills to the test! Needless to say, I definitely am happy with how this one turned out and will likely stick with it for much longer… (probably)


Compared to my old site, this one is way simpler in terms of its core design. In fact, the design was stolen from inspired by Garry Newman’s 2020 blog design. It’s dead simple and effective; you have every post grouped by year in the sidebar and the content filling the rest of the space. The header with social links is also a nice touch. Another thing I like about his blog is that it will automatically redirect you to the latest post, which I also borrowed because I suck at making root pages.

The technology

Not only is this a completely new design and layout, but it’s also a new static site generator. My previous site was built on Pelican, a Python static site generator. But while I did end up making a site with it, I didn’t enjoy the process of doing so:

  • I don’t like Jinja
  • The content generator wasn’t as flexible as I needed it to be
    • Such as not replacing tokens in a page’s metadata
  • The built-in filters for importing images in content was confusing
  • Some of the plugins just straight up don’t work
  • The built-in server sucked so much that I just used a PHP server for development
  • I don’t like Python

This new blog is using Jekyll, which is made in Ruby, a language I had avoided because of its simple-looking syntax which is, by no means, meant to downplay its capabilities considering there are many very large and popular sites that are written in Ruby [on Rails]. I’ve heard a lot about Jekyll dating back a couple of years ago but never looked into it (or static sites in general) as I was too enraptured with dynamic sites. So when I was thinking about redoing my blog, I gave it a peek.

To my surprise it ended up providing a lot of what I wanted from a static site generator. It even comes with a plugin for managing static assets. The built-in server doesn’t hang when refreshing (see my Pelican cons above), content will be regenerated and assets will be re-processed if there are changes, and the system as a whole is just simple compared to Pelican. My only complaint is that your codebase can get messy since there isn’t a dedicated directory for content so your root directory will just be a mess of markdown, HTML, and whatever other development files you have laying around. And, as always, I have my custom static asset build system integrated into the site with some modifications made for Jekyll’s asset plugin.

Speaking of assets, this site will definitely not perform well on older browsers. The JS is now ES6+ and images are now WebP. If you are any sensible person then you are likely already using a browser that can display this site correctly. Sorry IE 11 and mobile Safari but I just can’t be arsed.

Design

Probably the most noticeable change between this site and the old one is its pixel graphics. As aforementioned I recently got into pixel art so it was only natural that I put it to good use.

While I own Photoshop, I don’t find it particularly great for pixel art. I then remembered about a year ago I learned about a program called Aseprite. Perfect! I thought. I saw that it was open source and the EULA allows you to compile the code to the full program and use it for free, even for commercial use. However, looking through the installation instructions immediately had me overwhelmed. So I put it off and added it to my Steam wishlist in hopes that some kind stranger would pay me a visit.

Fast-forward to a couple of weeks ago and I decided to tackle compiling the program. After hours of tirelessly installing various dependencies that I will literally never use and troubleshooting until I wanted to just give up… success! Granted, it was an unreleased dev version that is potentially unstable, but I’ll take it!

Aseprite!

I’m not anywhere close to being able to draw characters with pixel art but I would say I’m pretty well off in terms of website graphics. The social buttons you see at the top are all made from a single sprite sheet. I didn’t choose to make them using a sprite sheet because it was appropriate for an 8-bit site design, but because of its many benefits.

Social buttons sprite sheet

Did you know that hovering over my avatar in the header will play a neat little animation? That is also made using a sprite sheet and CSS step animations.

Shiny sprite sheet

I was pretty undecided on what to do for the body background image so I just went with a sky and a ground with grass at the very bottom. The thick black border of the main container and it seemingly floating above the ground kind of gives it a dialog box feel. I like it!

I decided to bite the bullet and put effort into making this site mobile-friendly! Really it was thanks to the simple design of the layout. Check it out!

Probably the most controversial (if you can call it that) design decision was to use an 8-bit font for everything, not just displays. On one hand, I really love it and I think it brings the whole design together. On the other hand, fonts are made in a way that allows them to be readable in all sorts of situations. With that in mind I did try to find a font that I found to be the most readable along with adjusting font size, line heights, and letter spacing. I will probably end up adding a user preference option to use the user’s system sans serif font.

Update

You can now disable non-display custom fonts in preferences.

I’m definitely happy with this design, so I think I will be sticking with it for a while. Doesn’t that sound familiar?