Updated on May 16th, 2021
I'm here with more news.
I thought that last time would be the last time I would ever change the stuff with which my blog was made - I'm writing this post considering non-tech people in my mind - but I've done it again. At this point I'm not sure if this is a good thing or a bad thing.
For those who don't know, I had finally made a blog from scratch with Vue with whatever I wanted and I even ahem started consistently blogging. I was so happy that I didn't have to migrate blogs from one place to another and I was starting to settle down when I started to realise the limitations of creating a blog with Vue and only Vue.
Again, for those who don't know, Vue is a cool front end framework and all that, go read its Wikipedia article. I used Vue because I like Vue very much. I never had any other reasons for using Vue to create my blog.
Using Vue had a few problems. Vue does not allow direct access to meta tags for each page. I think the main reason would be that Vue does client-side routing using the browser History API. One thing I wished to accomplish when creating my own blog was to have dynamic meta information based on the blog post. For example, if I visit a blog post about donuts, the title and description and the meta image should change accordingly. Sounds easy, right? But not for me. I tried using the
vue-meta npm package, but to no use, and I think I know why. To get a post's title and description, I had to fetch it from Notion and then render it accordingly, which would take a few seconds. When
vue-meta sets the meta information and tries to get the title from the API response, the response hasn't been received yet, resulting in errors.
I'm no longer explaining things for non-tech people, I give up.
Speaking of API responses, the Notion API part of things also had small issues. Every time you visit the home page or a blog post, an API request is made. While I don't have to worry about API rate-limits, I feel like it's a bad idea. Something about making an API request every time the page loads kinda made feel bad (for Vercel 🙄😂). I'm pretty sure it's done all the time but I was really sure that there would be more better ways to do this. Like caching the data somewhere, but I didn't feel like doing that.
The main MAIN reason why I didn't use Vue was because of the size of the page. You see, there's a thing called https://512kb.club, where you can add your website to it if your website is under 512kb in size. And that was something I was aiming for while creating my blog. I managed to get it under 512kb, but by a small difference (~450kb). Adding utterances and a new favicon, upped it to 500kb. I could have just let it go over 512kb, like who cares but if your website is above 512kb but I was driven to making it stay less than 512kb. I wanted to find out what was so humungous.
So I ran a build report. Vue's CLI has a feature where it generates a report of all the stuff running on your Vue app with their sizes, and I'm proud to say that the actual content of the website was less than 250kb. Turns out Vue has a few JS files that run on websites made with Vue for its proper functioning, mainly
vue.runtime.esm.js. These files were massive (compared to the others) and there was no way I could remove it, as if would basically stop the blog from functioning.
I find it ironic that I'm saying these files are huge, yet they are less than 512kb in terms of storage.
And so I decided to switch to Eleventy. I've used Eleventy before; it's really good and flexible, as it allows you to switch between different templating engines, including raw HTML and Markdown.
There were a few inspirations for moving to Eleventy, especially blogs. jenn recently moved livelaugh.blog to Eleventy from Tumblr and my good friend aboutDavid just moved his entire website along with his blog to Eleventy.
The blog you're reading right now is made with Eleventy. It fetches data from Notion's API (via github.com/benborgers/potion) during build time on Netlify. Then it generates pages for each blog post and also updates meta information! I've decided to keep the styles of the Vue blog because I liked how it looked and apparently, some of you also did.
I'm yet to add the Utterances comment widget back and I'm also planning to make the home page a little less blank. I've also added Eleventy plugins for an RSS feed for bots instead of people but I have no idea how to use it.
At first I decided to use Glitch's new feature of generated static projects (see previous post) but had issues with the subdomain, so I ended up using Netlify :)
And now that everything is back to normal, I'll be regularly blogging.