I wanted to start off the new year with some improvements to the theme on my blog. Ironically, I haven’t spent a lot of time blogging over the last year but I have spent a lot of time tweaking the theme to my site. So… I figured I should just blog some of the changes I’ve been making to my blog.
A Focus On Performance
The latest version of this blog got me:
- A perfect Google Lighthouse score
- Joined the green team in the 512kb club
Here’s the changes that I made:
- Went with a super minimal CSS template based off of https://thejollyteapot.com/
- Stripped out all my fancy pants menus and social sharing
- Replaced Google Analytics with Plausible.io
- Replaced highlight.js with Jekyll rouge
Minimal CSS
The CSS used on thejollyteapot.com is incredible:
* {
color-scheme:light dark
}
div,nav,article {
margin:4rem auto;
max-width:6in;
font:110%/1.5 system-ui
}
a {
color:unset;
text-decoration:none;
border-bottom:solid #d92
}
That’s it!
His blog looked fantastic to me and was aware of the people’s preferred color scheme (dark mode/light mode).
I tweaked it further to add some of my own styles for handling images/figures/videos etc. and changed a few minor things. It’s quite a bit longer than his now but still much smaller than the giant SaSS mess I had before.
Stripped out fancy pants menus and social sharing stuff
There was a lot of jquery menus and social sharing snippets built into the old theme. I decided to just remove most of them. I might add a link to my Github and LinkedIn profile later but really… I think I’ll just keep it a text link no need to get super fancy.
Replaced Google Analytics with Plausible.io
I’m loving Plausible.io so far. It’s does a whole lot less than Google Analytics… but… it does exactly what I need it to and the include snippet is only 1KB!
Replaced highlight.js with rouge
This is really just using a built-in capability of Jekyll. Using it allows the code highlight processing to happen
pre-processed instead of client-side. It means my syntax highlighting should work on browsers with Javascript disabled
and it also let me drop another script from my <head>.
Other Tweaks
- Reformatted some code in earlier blog posts
- Added a simple copy button to code snippets
- Shrunk up my logo as an SVG (I can get it smaller if I go WEBP w/ a fallback to JPEG)
To Do
- Add Vale to my local instance to improve my writing and reduce typos