I'm in my vibe coding era

Ever since I tried Lovable and built this one-page portfolio site, I've wanted to move the blog to a more modern stack.

A bit of history, if I may indulge. In 2002, when I had the idea for a public online journal, I started with pure HTML and CSS—handwritten—then pushed to storage via FTP. Then I moved to b2/cafelog, the first real content management system I used. (It's amazing their original website is still up.) It was also a predecessor of WordPress, powered by which this website spent most of its existence. However, I've had some bad experiences with being hacked and the whole solution started to feel like an overkill. Fortunately there were GitHub Pages, using jekyll, which seemed to match my requirements perfectly, so I made the move. But with the introduction of Coding Agents and no-code / low-code solutions I started to feel the itch to move on.

Reasoning and Requirements

There are about a million solutions for designing, hosting and deploying websites with WYSIWYG editors and built-in hosting like Webflow or Wix. What's Up Stockholm?, offering weekly programmme recommendations, is on Substack. The list continues.

My use case, on the other hand, is having more than 2000 posts from the past 23 years that I'd want to import and retain; even though most of them are very personal and not of much value. After the move to Jekyll, they are in Markdown, which I wanted to keep.

Another aspect is the following. Using Coding Agents opens up new possibilites to move quickly and learn in the process. Lovable's current tech stack includes Node.js, React and Vite with Tailwind as the CSS framework—none of which I had much experience with.

During development, the AI usually explains its reasoning, and I made sure to inspect the changelog and understand it. It's also much quicker to ask for a script to do something, for example, than figuring out for myself from scratch, or scour the internet for inspiration.

I have no illusions that this does not equate to proper software development, whatever that may be, but it is one thing for sure: immense fun! 🎉

Setting up a clone

I started out by asking Lovable to check sesam.hu out and make an exact copy of the design using the Lovable tech stack. The result was acceptable, although there were some aspects where the agent decided to retain the design language it normally uses. After a few tweaks I got a page that closely resembled the existing blog. For example I had to change the font family and sizes, remove separators, add the link decorations and transitions, alter the spacing of ceratin elements, add the SVG icon for Bluesky and so on.

⚙️ Backend

At this point posts came from a static data file but I wanted a real backend¹. Supabase is integrated into Lovable and now there's even a solution called Lovable Cloud where users don't even have to bother with Supabase separately, Lovable's agent handles it all.

I asked for a table for posts, then for support for tags, and requested that the post content be treated as Markdown. The first refactor followed, because the original implementation had the index page (listing the latest posts) and individual post pages duplicate a lot of code, so I had the displaying of posts extracted to a separate component and had both pages use that instead.

🗄️ Migration

Time for attempting to move some posts. For this, I asked Cursor to create a script—for arbitrary reasons—and copied over some posts' .md files to insert into the database, but I ran into access control issues. The agent recommended to use Supabase's service_role API key. Here's when the most fun conversation I had with Lovable during the day happened.

'I need a service_role key to the database.'
'You can find it on the Settings → API page', (even helpfully providing a link).
'Girl, there's no such thing there, however I look!'
'You're right, it's hidden on the UI for security reasons.', 🤦🏻‍♂️

Turned out the solution was an edge function² and with that the .env file was enough for authenticating so the first couple of posts went in the database. Thus began the fight with correctly importing and then formatting the Markdown. The thing that caused the most headache was that Jekyll uses Kramdown whereas React's markdown renderer follows the CommonMark specification. So I ended the day with fixing various differences between rendering, spending most of the time with keeping empty lines from disappearing.

There was, in fact, another comical situation, this time with Cursor's agent, when I asked her³ to add the underline decoration to links using the already established hover color and it proceeded to add it on hover instead of permanently. She was right of course, I did not specify the task precisely enough and the word hover was in the text after all. I suppose the phrase 'explain it to me like I'm a two-year-old' could be modernised to 'explain this to me like I'm a Coding Agent'. 😜

Conclusion

Without a formal education in computer science, I've always been driven by my unending curiosity and love of all things technology. These tools are extremely helpful in realizing what I envisioned and helping me familiarize myself with new technologies on an introductiory level. I have no illusions about the level of my knowledge but it is so refreshing not to encounter gatekeeping, which all to often happens in this space in my experience.

Footnotes

1. Interestingly, the first post was pulled from the actual site, but not the currently live version, rather an earlier draft. I recall asking Lovable before to use the blog as a source and it must have cached this previous version of the post. 🤯 ↩

2. Had no idea what an edge function was… ↩

3. Following a tradition of ships and other machinery, I refer to coding agents as she/her. I don't believe they mind. ↩