The Yearly Rebrand.

Introduction

Well, hello. It’s been a while - almost a month since I last posted, and more than a month since my last actual post.

Some interesting things happened between then and now, the most noticeable of which is my shiny new website design. To be completely honest, I’m not sure how I feel about it. It’s slightly better than the old site, but it’s still not very poppy, is it?

For some reason, I find that I happen to go through a redesign every year or so (though I’ve only been ‘online’ for a couple of years). This time, it was prompted by boredom during quarantine and me having way too much time to overthink my website. (Also, everyone deciding to meme me for ‘Yours, Kewbish’ and the cringe I have here kind of helped. Hey, if people are going to be reading my site, even just to tease me, this blog might as well be consistent with my main site and snazzy nonetheless! I’m looking at you, the entirety of the set of my classmates and half my Google Code-in colleagues.)

I went through the redesign in three stages: porting my main site to Hugo, replacing hard-coded content with Hugo’s data-driven content, and restyling my blog, which was already on Hugo.

Phase 1 - Porting to Hugo

I’m pretty sure you’re already aware what Hugo is. If not, have a look at how I started my blog.. I prefer Hugo to Jekyll or Gatsby. Sue me.

My website was pretty simple in the first place:
index.html, which was just a centered div with a bunch of buttons and links
me.html, which was me attempting to stuff as many resume buzzwords as I could into a page
folio.html, which was me trying to pretend that I had lots of proper projects

Recreating this sitemap was super easy in Hugo: mostly done in the theme and a couple HTML pages in the content folder. I was surprised to see that I could add HTML pages to the content folder - I’d always thought that I could only use Markdown files. (Then again, I’ve only been using Hugo for what, three months? imposter syndrome sets in)

Now, the sitemap puts the me.html and folio.html into folders, and the URLs are a little prettier. For example, https://kewbish.github.io/me/ instead of https://kewbish.github.io/me.html.

It was a little confusing to restructure the git repository to a two-repository publish structure. I’m still rather new to the fancy git reset and whathaveyou - I just use what I have to. This part was a great learning experience - I had a long, long research session to figure out the best way to structure the repo.

In hindsight, I could have put the published Hugo directory into the master branch, and had a separate branch for the Hugo site source, but I still don’t really trust myself to remember not to pull something, and then have to spend another day figuring out how I redo git commit local. (After which I would then pull from GitHub and have to redo all my changes haha-)

As well, I had initially decided to move the blog posts to the main repository, but I decided to keep it in its own repo. For one, it’s a little easier to maintain personally. If I mess up one part of the site, hey - at least the other part is still alive. As well, I had a grand total of five stars on my blog repo - why waste them? It’s also frustrating to have to archive repos and have that ugly yellow banner and all that.
TL;DR blog is still at kewbish/blog.

Phase 2 - Hugo-ifying my content

Once I had the majority of the content copy-pasted over, and the copy re-written, I decided to make the best of Hugo’s great data-drive capabilities.

If you don’t know what these are, it’s essentially the capability to put data into .json, .yaml, or .toml files, and pull that content directly into your pages at build. I find it a lot easier to work with. I don’t have to remember to change the actual text of the .html file; instead, I can just add a new object in a JSON array.

It’s also more scalable, in my opinion. I’m starting to amass a lot of projects, and while they’re all kinda bad and smol and probably useless haha, it’s easier to edit the site when I’ve already accounted for it in my styles, and can just update the data folder.

And I might as well make use of the features! I’ve started to love the Hugo templating syntax (yes, I know it’s technically the Go templating syntax, but the two don’t line up in my head for some reason). Instead of manually adding things, I can just beep-boop add a field! I really like this workflow, especially, as I said, with maintaining content, and having the whole site become more of a living document. (Wow, more buzzwords! I’m so cool and relatable!)

Phase 3 - Restyling my blog

My blog (yes, this one you’re reading, yes, I call this a blog, yes, it’s not just me blathering on okay it probably is) was already created with Hugo, and the only reason I redesigned it was because it didn’t really fit with my main site.

For example, the main site initially used a bunch of Montserrat and open borders, along with my old logo (do I even have a logo now?), whereas this blog was designed in a more console-like style, which I feel matches my personality and personal brand more (?). Now, they use roughly the same stylesheet, and the same brand colours, variables, and layout structures.

I started out with the main site’s stylesheet, and then erased a bunch of the styles I didn’t use. Coming up with a new structure layout wasn’t too difficult. The way I designed the main site was based around reusable components (like the different types of grids and heading elements), so I could reuse them on this blog. Efficient design! (Also, I just didn’t want to redesign a bunch of other things and then have the two sites look completely different. ¹)

Conclusion

So here it is. The new Kewbish™️ look. (Yes, I know I’m going to be memed for this already.) What do you think? Oh wait, there are no comments here. (By intention - I don’t need 50 people explaining why I’m bad. I already know.)

Hugo gives me the capability to remove most of the boilerplate that I previously relied on, and gives me the tools I need to quickly add new content with little to no maintenance work. I really like the new workflow. (I’m pretty sure I already said that. Hmm.)

I’m still not sure how I feel about it. It’s probably worse off than the old site, but hey - I put my time to a decent use.

Currently

I’ve been working on my Grant for the Web Hackathon entry. (The GFTW Hackathon is run by Dev.to - read about it here.) It’s supposed to be a library to integrate a Web Monetization revenue sharing component into your site. It’s pretty easy to use, so please do check it out! It was a learning experience and a half in learning the more exotic areas of Web Components and Javascript. (Also, my first actual project and first NPM publish. No scronch please.)

After I finish that, I plan on working with more Flask and MongoDB stuff. Because apparently backend stuff is cool! I might also work on a Discord bot, perhaps. Or an API. Not sure.

Also - I’m officially committed to completing CS50 over the summer. (Yes, it’s a 12wk course that a bunch of classmates and I are going to speedrun in 8. Yes, it’s Harvard. Yes, we’re sane.) Can’t wait to go through that - their web programming section looks mighty fascinating. I’ll probably write about that quite frequently. (Oh no, I’m becoming a writing vlogger ohno-) Can’t wait to see what shenanigans I get up to in the summer.

(Smol note: blog posts might be smoller from here on out. I’m not sure how long they’ll be, but I don’t really feel like writing a 1100word masterpiece every week. We’ll see.)

Footnotes

Oh wait - there’s a footnotes section now! Just trying a new Hugo feature out.
Please append the phrase ‘unrelated, but’ to the beginning of each footnote.