frillish

Astro Blog Upgrade

• thoughts

Here is my nerd post on findings and enjoyments of upgrading to Astro!

First off, unfortunately, yes, I believe there’s an issue with caching that causes my blog to not display the newest layout and appear to “revert” to the old blog design w/ old posts.

I’m trying to work on fixing it, but it seems to maybe be an issue between the client-side browser, Netlify, and having previously used Gatsby with no consistent solution yet. Hopefully, I can find a way to fix this soon!

For now, there’s a workaround if you’re stuck on the old site:

clean out the old blog (desktop only)

1. Click on the domain settings in your browser’s navigation bar. It should be left of the URL.
2. Click on “Cookies and site data”.

3. Click on “Manage on-device site data”

4. Click on the trash bin next to the data line item.
5. Click on “Done” and return to the blog screen. You may need to refresh, but it should show my the blog consistently now!

No more Gatsby

Or what A calls: “Gats-bye!”

A while back, I had a fun meetup with A over coffee & cookies where we talked about blogs, and I recommended self-hosting versus the old (reliable, but old) Wordpress. After A went back and did some research, he found that Gatsby, the backend that I used for my blog, is not so trendy anymore* and one of the better static site hosts is Astro! I took a bit of a look into it (all of 15 minutes, really) and was immediately convinced I needed to upgrade!

*Not only is Gatsby “not trendy”; it’s completely unsupported after being acquired by Netlify. I found this “Gatsby headaches” description fairly apt:

It was like Gatsby got tougher to use with time because of lots of unaddressed issues: outdated dependencies, cold starts, slow builds, and stale plugins, to name a few. Starting a Gatsby project became tedious for me, and perfect Lighthouse scores couldn’t make up for that.

My initial experience with Gatsby was that it was super fun & snappy to whip up a site while not feeling like you live in 2006 still, so it was a bit sad to hear that, but I’m glad (as with tech always goes) there’s plenty of alternatives. Because of dependencies issues, I was only able to update my blog on my desktop PC (not my laptop) for over a year until I finally got brave enough to tackle it over several days, but it really was a Gatsby Headache

I was intrigued by Astro because it seemed even simpler and more customisable… so I had to try it

In short, “converting” my blog over was very straightforward - I don’t use many unusual or complex features, and it’s pretty close to a baseline blog implementation. Still, as with tech tutorials, the moment you take one step off the exact guideline everything tends to break Thankfully, everything ended up working well, I think! (Aside from the cache issue… grr)

Development hiccups:

• Blogroll: It’s trendy for static site blogs to not display the full text of posts (like “traditional” blogs) and instead display a list of titles to click into. The official guide didn’t easily provide steps to add it, but I found this Astro documentation on Rendering body content helpful.

• Post date is 1 day behind: tiny issue that affects accuracy of post dates. Simple solution to this is to add 12 hours to your post date time. See: Handling Astro Date Formatting

• Paging under tags: this sounds like basic blog functionality, but since you have to implement features like pagination in a SSG blog yourself, this was weirdly harder than I thought. The official blog tutorial has a guide on this, but only using the non-dynamically generated collection code, so mixing dynamically-generated tag code and pagination got confusing. I ended up using these sources to help with writing this feature: Nesting Pagination (Astro Docs) & BUG: Conflict between pagination and dynamic routes… (this helped with folder structure)

• Images in Astro: Trying to get Emojis to work “with” Astro was a bit of a pain, so I ended up making a dumbed-down component to do it instead. Maybe I’m misunderstanding the purpose of non-public vs static public files, but it feels a little backwards.

  • Astro (using Vite) requires you to put any assets under the /src/ folder if you want them to be generated with the site’s dist build, but they also require you to import each image manually in your .astro file (imagine adding the related imports to every emoji you add to your site). If you want to link the file easily without importing, you’d put them in the /public/ folder, but you can no longer dynamically call them from your .astro files.

  • This works for most cases, except I have another use case other than calling them via Emoji component in my blog posts: dynamically generating a list of emoji + their original filenames in a separate page so I can use the page as a reference for emoji I can use.

  • Since Astro’s dynamic glob function won’t work with /public/ files on a deployed build, I can’t automatically get all emoji and their original filenames to list out, OR I could call them with a workaround but end up with hashed names that don’t work in my case.

  • I ended up deciding to have this reference page only working in local and look like a mess in the deployed version. After all, only I use it. However, it’s really not completed to me and I’d like to revisit it eventually.

• User Error for captions: This is my fault based on how I implemented this, but I can no longer attach captions when I post multiple images in a row. I might revisit this eventually, but for now, I’m alright with dropping captions on those and just describing them manually with surrounding text.

Fun Astro discoveries:

• Building the site is SUPER fast. I don’t have anything complex to build on this blog nor do I have need for super fast build speeds, but it went from taking ~2min with Gatsby to 40s with Astro.

• Components can appear inline with your markdown files. Not sure if this is just “user error”, but in Gatsby, I couldn’t write an Emoji component to quickly and consistently call emoji files in my paragraph text as the emojis would appear on their own line (as if wrapped in a <div>.) In Astro, I easily made it appear inline instead. Small change, but very happy with not needing to call emojis as images using markdown

• Blog posts are much cleaner to write. Take a look at the comparison below! Astro allowed me to customize the frontmatter for posts and import components as part of the “template” of a blog post, so I could adjust .mdx files to my use and have a much cleaner written file. See below: Gatsby vs Astro!

I’m just happy I was able to have a little more fun with my blog To be honest, I know I could just use something like Blogspot, Wordpress, or many other options, but I’m very picky and want things to be customised exactly how I like it.

Even if it means more work, not being able to post from my phone, encountering development issues, or other drawbacks, I’m pretty happy with using a static site generator backend for blogging

One last fun thing: did you see the kitty send-off near the paging? I’m hoping to add some more cute fun things eventually

New blog design

• daily
• creative

Hello, it’s new design day Another fun thing is that I’ve also updated the backend, from using Gatsby to Astro! I’m hoping this fixes a few of the old issues I had on my blog, such as pages being cached inconsistently If you see anything funky going on with the site for now though, it’s probably from this upgrade!

With other technical improvements, I refactored a bunch of my old components and feel much better about how much more efficient they (hopefully) are now! Looking at your old code is certainly a fright… There’s still a few issues here and there, but I think most of the site should be working.

Working with Astro has been really fascinating - it’s similar, but also very different from Gatsby. I’ll make another post eventually about a bit more backend notes because I find that web stuff like this sometimes doesn’t have easy-to-find solutions once you take a step outside of the guide

The old design here was not really inspired by anything but wanting a clean and uncluttered layout. As you know, I love to clutter up my posts by yappin so I wanted the layout to be simpler to compensate

The new layout is a little ‘old web’ styled since I love the simplicity of the web during those days I did make a few more artistic choices such as stylizing headers in a way where they are not as readable, which is not usually a choice I make, but I’ll try it out as something different.

Hehe