My Profile Photo

Iris on Tech


I'm Iris, a non-binary (they/them,she/her) electrical engineer with a passion for reverse engineering, cryptography, programming and just generally figuring out how things work. I frequently fully or partially take deep-dives into a topic of interest that isn't explained well or in detail online, and I hope to be able to document that knowledge here finally.


Blog update!

(yes real posts are coming soon I promise)

Well this blog has been kind of dead, no better time to make some major changes before I finally get a few posts out. In short, I updated the theme to one that looks a lot nicer. But that’s really a poor summary of all the work I did (it took a few hours this past evening to get everything nice enough to be ready to try and push it up globally). So let’s go over exactly what I worked on.

But first I’ll give some background on why we’re using Jekyll at all…

Background

(If you just care about the updates, tap here to skip the main content)

Back in January I found a neat blog with some interesting articles related to programming. One of the posts, which I will link to when I find it again, encouraged readers to start a blog themselves. In particular, the post was offering a shot at a bit of cash just for starting a brand new blog and writing a decent article on it, with more cash potentially up for grabs if you wrote more posts in the next few months.

This sounded pretty good, I was already inclined to start writing up some of the deep dives I get into on programming topics for other people to potentially find helpful, and now there was the potential for a cash incentive. I even had an idea for a post (which I still haven’t written) that I would start with.

My previous efforts with blogging was a brief attempt (that I almost forgot about until today) at seriously using Tumblr for blogging, which I used briefly to write some rather aggressive commentary articles that I would probably regret if I actually reread them now. Prior to that I had a brief interaction with WordPress; In fact I had a lot of interactions with WordPress because over the course of owning my website (modwiz.com), frequently WordPress was my platform for hosting the static pages.

Wordpress was nice because I got a nice CMS editor and reasonably competent looking themes compared to what I would do from scratch. That was enough for most cases. I think mostly I used the hosting from WordPress themselves until I wanted it on my domain (which I think costs money that I didn’t have at the time), then I think I found different sketchy free hosting for PHP and MySQL that I setup WordPress myself on. That worked okay for awhile: all I used it for was info/whitelist requests for a public Minecraft server I used to run.

At some point I took down the server and killed the site, the domain was just used for it’s own sake as the domain backing for my public facing email. The next thing I did was the first time I ever used Github pages. I don’t think it was so complex then, at least I don’t remember it being so complex, but it also was far less powerful. I ended up throwing something together based on building a site on Wix then saving the files to Github and making a small edit to remove Wix’s watermarks, something that still works to this day if you want to try it.

I eventually took down that site as it wasn’t relevent once I entered college. The next time I put up content is pretty aptly described by my first post here, Brand new blog. Github pages is basically the simplest way to get content->styled pages from a reliable provider without paying extra for hosting some text in a way browsers will display.

Alright that’s the rambley background, now for the stuff people actually care about…

Theme

original-blog As you can see the first iteration (the live page until this went up) wasn’t amazing

The original site

Above is what I first put online after my fight with Jekyll to get anything to work at all. I used a Github theme called minima that was supported out of the box with their provided/recommend Gemfile. All of their themes kind of suck imo, likely a consequence of not aging particularly well. Lots of big empty backgrounds, quirky fonts and little use of images or patterns to break up the page comfortably.

I had enough trouble getting Jekyll to work at all to generate the first version, I wasn’t going to mess around with themes at the time. Besides, writing the content was probably more important… right?

Well not so much. The worst thing about that theme is that out of the box, it doesn’t enable excerpts, so your entire home page is just this kind of shitty list of post titles and some metadata, a header, and a footer. By far the nicest parts are the header and footer. I think a background image of some sort could go a long way in making the page feel more full and lifelike, but that’s how it is and I’m not going to dabble in CSS for days making a theme of my own out of a bootstrap template.

That being said, at this point I felt a better theme was in order, so I started looking.

Finding a new theme

Looking for themes for WordPress is generally mostly a mix of pretty decent ones that are a bit samey at worst. Looking through free Jekyll themes was mostly a matter of finding ones that weren’t just more “basic plaintext on a empty blank background with no divisions in the page” kind of themes. I found one I liked (the one I ended up working with), an adaptation of a Ghost theme called Uno.

Because this post got kind of long, I’m going to summerize what happened next, I tried to swap out the themes on my live site, it just broke, I looked for a few more themes, found a payed one called Arnica that looked neat but $29 is a bit much to pay for a theme as a student with no income during the school year. Looked on Github in case that would help, found a decent one called H2O but it seemed to have a bug with the scrollbars for it’s syntax highlighted blocks and I didn’t want to have to fix that.

Besides, even the simpler themes I tried didn’t work at all. So why wasn’t this working?

Switching to a custom theme

So when I setup Jekyll I tried to follow Github’s documentation which gave a Gemfile to use and some steps that didn’t really make any sense. Notably, when I had used Github pages in the past they just generated a site template for you if you chose a static site generator type. They also supported a few different generators if I’m remembering accurately.

In trying to swap themes I tried to follow their guide on that too, however the option isn’t really adequitely documented, it tells you to use the remote_theme config variable and point it to a Github repository of your theme. So I tried pointing it at these different themes (which were all full Jekyll sites with the custom theming in the same repo), but none of these really worked. With one exception that did render my about page and show that one link on the header, they all generated structured but contentless pages.

Github's documentation on themes this is the info on their page I was following

Whatever that does, it’s a nightmare I wasn’t dealing with, so I ended up just taking the theme I originally liked, downloading Ruby for Windows locally, just installing the latest (4.0) version of Jekyll in order to run the commands, and just using the site template in the theme’s repository. I removed all the original author personalization stuff and replaced it with my own, and remarkably, the very first attempt to locally serve the site worked perfectly. It rendered correctly without any errors, despite the adhoc attempt at installing Jekyll locally this time.

Tweaks

That’s not to say that everything was perfect. The site had a profile picture that I had to swap out with one that made more sense, which made me realize I didn’t have a highres cropped version of the image I now use globally as a profile picture saved anywhere. So I had to download the source image again and do another crop down to a highres version.

The site has the like 20 files you need to specify all the different favicon and related icons for a page, but no easy/clear way to generate all the specific sizes, I ended up using a website and swapping the bit of HTML that included those images with the smaller simpler HTML given to me by the site. https://realfavicongenerator.net/ if you care.

Those were the initial tweaks to just get it to match up with my own identity and at least be as good as the other blog. Just writing this I realized that I will have to copy over and add an additional page for the longer detailed about me that the other site had but this one doesn’t.

That brings us into the long process of fixing lots of little issues with the theme (that I plan to publish in my own fork of the repo). The first issue was getting excerpts working correctly and correcting the RSS feed page to use excerpts instead of the entire content of a post as post descriptions for readers (I still need to add some liquid code to make it switch back if excerpts aren’t actually on provided that breaks them).

Another issue is that the other theme for some reason defined the header levels so that they worked backwards, which meant I had to edit my previous post to properly comply with markdown (luckily there was just the one). Additionally the default sizes on the new theme made H1 tags way too huge and they just looked wrong, plus page titles were always the same size as top-level page headers, which also looked bizarre. I fixed both by editing the SCSS theming and adjusting the config so that the markdown generator started at H2 instead of H1.

Next the long title with a parenthetical portion that was meant as a subtitle didn’t look right in this new theme, so I extended the Jekyll theme to support an additional article property called subtitle, which let me properly seperate those elements of page titles. It took a little bit of work to track down how to make the CSS edit to keep them aligned properly, but the result is quite nice.

subtitle ssupport

The last two major changes to the CSS were making the metadata not have insanely small fonts (which were oddly defined in pixels instead of em like the entire rest of the styles font sizes, or the more common pt), giving the posts a bit of a wider max-width to make longer subtitles not wrap, removing some weird specific font changes on dates that made the meta information for posts not consistent in font size, and giving images a border to help separate highres images that might blend in and look like part of the page.

Conclusion

The result turned out really nice and I think this is a much better homepage for myself and a much more professional look to my blog specifically as well. I’m writing this post locally, so I still haven’t pushed up these changes to Github which will be the real test, but worst case I can just skip out on Github generating the site and publish off a locally generated branch.

I’ve got more posts coming really soon, I’m most excited about a post on a reverse engineering project about FRC CAN bus encryption/authentication that I just need to get the last bit of code explained before I can write the proper post, along with potentially other posts that I’ve now forgotten. So stay posted for the real content!

If you’re stuck inside with your devices, you might as well take a few apart right?