One of the reasons I wanted to set this new blog up was to migrate off Hashnode. They recently changed their terms of service. When I first switched to them they promised I'd always be able to download my content. But now they changed that. I posted on it on Bluesky. "Own your data" they said. Now I want to do that for real by having all the content locally on my computer and synced to GitHub as a first step. I'll probably move it (or mirror it) to Tangled at some point as well.
Since they removed the ability to export your content I had to manually go to
each blog post and copy the markdown and paste it into a new local file. I
placed those files inside /data/posts in this blog repo.
With a bunch of markdown files in /data/posts I needed a way to list them all
together with a link to each one. Mastro has a guide for this at
https://mastrojs.github.io/guide/static-blog-from-markdown-files/
When I pulled the markdown for all my posts on Hashnode (one by one) that
markdown didn't include the cover image. So I had to go and manually download
all those images. But I didn't want the compressed version Hashnode served. I
wanted the original ones I had uploaded. I couldn't find a way to do that from
Hashnode, so I just did an image search on Google to find them and re-downloaded
them from wherever I originally got them instead. Mostly that meant going to
Unsplash and downloading the original images from there. Then I had to figure
out how to include those images in my blog posts. What I'm doing right now isn't
the optimal solution, but it works. I put the original image in
routes/assets/<image>.jpg and then just put a link to it in the frontmatter of
each post as cover:. Some images are multiple megabytes in size. That's way
too big. I should optimize them before they're served. I'll implement that
later. When I know where the image is I can just generate an <img> element
with /assets/<image>.jpg as the src. I also added coverAlt to the
frontmatter to provide an alt text for the cover image. All images used in the
blog posts themselves were hosted by Hashnode's CDN. I had no way to download
them other than by right-clicking the image and saving the compressed version
shown to me in the browser.
Pages Photo by <a href="https://unsplash.com/@impatrickt?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Patrick Tomasso</a> on <a href="https://unsplash.com/photos/open-book-lot-Oaqk7qqNh_c?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Buckets Photo by <a href="https://unsplash.com/@jdjohnston?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Jessica Johnston</a> on <a href="https://unsplash.com/photos/assorted-color-pots-on-r-nnH2l-k77nc?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Google Maps Photo by <a href="https://unsplash.com/@thomaskinto?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Thomas Kinto</a> on <a href="https://unsplash.com/photos/road-map-6MsMKWzJWKc?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Net pattern Photo by <a href="https://unsplash.com/@armand_khoury?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Armand Khoury</a> on <a href="https://unsplash.com/photos/a-black-and-white-photo-of-a-pattern-4cBVro7SHLs?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
GitHub Photo by <a href="https://unsplash.com/@richygreat?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Richy Great</a> on <a href="https://unsplash.com/photos/white-and-silver-electronic-device-MAYEkmn7G6E?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Padlock Photo by <a href="https://unsplash.com/@paulius005?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Paulius Dragunas</a> on <a href="https://unsplash.com/photos/teal-padlock-on-link-fence-uw_NWjC1mBE?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Containers Photo by <a href="https://unsplash.com/@some_random_guy?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Alex Duffy</a> on <a href="https://unsplash.com/photos/docked-shipping-ship-on-body-of-water-a-E__y8y5Wo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Movers Photo by <a href="https://unsplash.com/@robinson?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Robinson Greig</a> on <a href="https://unsplash.com/photos/2-boys-in-red-shirt-sitting-on-yellow-metal-bar-HrnAxAUwle8?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Prisma Photo by <a href="https://unsplash.com/@groove328?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Andrey Novik</a> on <a href="https://unsplash.com/photos/triangular-brown-and-white-wooden-frame-on-brown-sand-during-sunset-Q3eKwcPrML8?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Highrise Photo by <a href="https://unsplash.com/@rgaleriacom?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Ricardo Gomez Angel</a> on <a href="https://unsplash.com/photos/gray-high-rise-building-F6sxdKbq8TA?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Cards Photo by <a href="https://unsplash.com/@amandagraphc?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Amanda Jones</a> on <a href="https://unsplash.com/photos/a-pile-of-playing-cards-sitting-on-top-of-each-other-P787-xixGio?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Server rack Photo by <a href="https://unsplash.com/@matthieu_cabri?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Matthieu Beaumont</a> on <a href="https://unsplash.com/photos/a-very-large-array-of-electronic-equipment-in-a-room-iYnpYeyu57k?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Server technician Photo by <a href="https://unsplash.com/@superadmins?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sammyayot254</a> on <a href="https://unsplash.com/photos/man-in-blue-sweater-using-silver-macbook-vIQDv6tUHYk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Server rack with wires Photo by <a href="https://unsplash.com/@tvick?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Taylor Vick</a> on <a href="https://unsplash.com/photos/cable-network-M5tzZtFCOfs?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Pistachio Photo by <a href="https://unsplash.com/@sfhashemi?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Syed F Hashemi</a> on <a href="https://unsplash.com/photos/green-and-brown-leaves-on-white-surface-x1CTeuCNhSI?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>