Blog Init

1. I was rewriting my resume and realised I have a bunch of stuff I can't just simply link to, I want somewhere I can put screenshots and explanations of my side projects.
2. I had an idea that I wanted to use Obsidian as an editor (mainly because I like how it deals with pasting images)

These two criteria and not enough experience with the world of static rendering lead to one of the most cursed (and likely short-lived) pieces of software I've ever written. Enjoy.

Criteria:

---

• I'm on time crunch (wanted it done by EOD) so I can actually start writing articles
• Deployable through a GitHub action to amplify
• No compute
• Easy to edit (see Obsidian)
• Easy to test locally
• Simple bundle, just an entry point HTML file, a typescript file, and a folder full of HTML/MD files

How?

---

Initially I had it in my mind that I wanted to have some nice clean next.js project using app router and statically compiled MDX... Problem is, I didn't really have the time to work out how to get all this to meet my criteria especially no compute+simple bundle (see time crunch)

I really wanted to use React but I folded and went for petite-vue instead. I just figured anything more would pretty much be overkill.

My approach:

1. Collect all MD files in the Obsidian vault
2. Pull out the custom metadata tags I add to the top
3. Parse MD string -> HTML string using a library
   1. Replace all Obsidian IMG ![[]] tags with HTML <img> tags
   2. Replace all Obsidian link [[]] tags with this: <a href="/?page=$1">$1</a>
   3. Add target="_blank" to all external anchors
4. Bundle in an object
5. Render using petite-Vue

What my MD files look like for reference:

md
d: How (and why) I made this blog
t: 21/08/2025
#vue
#ts 
#web

<content_here>

d: is the description
t: is the timestamp
#<> lines are tags
The title is the file name minus the .md

Navigation

Ok, then I made a nice little single page app like this:

html
<div v-if="!activePage">
	<list>
</div>
<div v-else>
	<activePage>
<div>

Ah... if you refresh the page you go back to the list and if you press the back arrow from anywhere you get thrown back to your search engine...

Petite Vue doesn't have a router, and I'm too far in to re-write this one in something more built for purpose.

Solution:

• Slap the current page in the URL parameters and append it to the history
• If there is no page URL parameter we parse all the MD files and have them there to view
• If there is a valid page URL parameter we just parse the page we want and set it active in mounted() then continue on our way

What next?

---

Ok realistically I'm going to need to do build time rendering of my MD files and sort out an actual page router, at this point I might as well re-write in Next.js.

1. The dodgy URI parameter navigation scheme has a massive downside: search engines aren't able to index my site's pages individually.
2. I'll have to look into it because I'm no SEO expert, but I'm assuming the first contentful paint being an empty HTML page which is later filled with runtime parsed MD is not good for page rankings
3. I'll probably just retrofit actual Vue with the router for now and rewrite it in react some time down the track properly when I have time
4. I'll write an MD compilation step that works with NPM run dev