Rebuilding this Site: A work in progress

Lately, I've been paying closer attention to the monthly budget. Nothing crazy, just trying to get a better grasp on our finances. As a part of that I can no longer justify hosting this site on Squarespace. Don’t get me wrong—Squarespace has been an excellent service while I’ve used it, and I’d happily recommend it. My needs have simply changed. So, I’m taking the cheap route.

Additionally, I’ve changed how I write code and manage projects. It’s AI. For every project I spin up now, i’m interacting with AI. It’s mostly a planning companion, and I prefer to either stay in control of the coding or review the code for trivial things. This has a massive side effect, though, I can move a lot faster on projects. Before, maintaining a manually built personal website felt like a distraction more than productive learning experience. But, in the name of saving some money, I want to test how far I can push this.

So, I’m tracking the rebuild process here.

First Steps - 03/17/2026

First thing, I want to take inventory of the features this Squarespace site has. In the past I dove straight into code, and while fun at first, it bit me pretty quickly.

Big features from the Squarespace site

The main goal is to get these features operational in the new site. Not perfect, but presentable. I’m also not looking for a recreation of the existing site. It’s probably overdue for a revamp anyway.

  • A blog
    • Markdown rendering, list articles, enable topics, published/draft status
    • Configurable SEO metadata on each blog post
  • “latest articles” listing on the landing page
  • Pages: landing page, portfolio, blog, about, contact
  • Responsive design
  • Handled image uploads with ease
  • A site that looked “good” at default

Status Update

I got quite a bit done. It works locally, albeit with a bunch of boilerplate info. So, i’ll have to change all of that. While it bothers me to admit…some light vibe coding helped immensely in getting this off the ground.

  • Changed the default branch from master to main
  • Revamped a repo holding an older version of the site (before I used Squarespace)
  • Pulled in a template from Tailwind Plus

So far, the biggest hurdle I think I have in front of me is handling the image uploads. I’m surprised just how much functionality was baked into that Tailwind template.

Thoughts, Next Steps -- 03/18/2026

I want to take a moment to cover some of my choices.

Why Next.js?

I know Next.js, it’s an easy choice. Vite could do everything this site does today, and it’s much lighter weight. However, I would like to sell digital products from the site eventually. Vite would reuqire setting up a backend, etc. and Next has a backend for that already baked in. I would only need to plugin supporting systems like Clerk (user auth) and Convex (database/storage).

Concerns about vibe coding

Normally, I’m weary about reaching for an LLM so quickly in a project without really thinking about it. However, this is a small codebase. For now, it’s in a weird spot where this site is providing some value for me (a presence online), but the code isn’t so important that I need hover over every line. And if the codebase starts to feel foreign and sprawling, I can use an LLM to explore the code, understand how it’s put together, and start reviewing the important parts for improvements.

Image uploads

In the past, I’ve thrown images to AWS S3, setup public permissions per file, grabbed the embed/sharing code, and called it a day. That gets tedious really quickly though. I think this might be a small utility “side project” I spin up to help automate that process.

Analytics

I didn’t use it very often, but Squarespace also had a lightweight site analytics package baked in. I would like to include that capability, but really don’t want to spend money on this. Umami seems https://umami.is

Porting the Blog -- 03/20/2026

A couple rounds back and forth with ChatGPT Codex, and I have a pretty robust blog on the new site. I almost wish there was more to say about it. Metadata support, tagging, published/draft state support, and unit tests.

I also used Codex to move the blog posts to their own de-coupled directory. The template I started with has a tight coupling between the /articles directory and showing exactly the posts that are defined in there. This works just fine for a simple blog, but I wanted to emulate as many of the features of Squarespace as I could. Also, personally, I tend to spin up blog articles with new ideas and need them to sit there while I work on things, until I’m ready to publish something about them.

Creating an Upload Utility -- 03/23/2026

I create a simple web app and CLI tool that helps automate the process to upload images to AWS S3. This was always a hurdle in the past when I attempted to create my own personal blog/website. In the past, it’s just been a tedious process:

  • Get an image
  • Choose a file name and bucket naming convention
  • This is to track the how/why an image is used. Helpful for later reference.
  • Upload to AWS S3
  • Set permissions
  • Grab shareable link, turn it into an tag

So, the whole thing felt ripe for automation. Not to mention, need a different image size? Handle the edits and start all over.

So, I vibe coded the tool. Considering this was secondary to the website, a tool that only I needed to use, and I don’t truly care about the code on this as long as it works…it felt perfectly sized for vibe coding it away.

Porting Blog Posts, Finding an Issue -- 03/25/2026

I have enough of the site functional now that I can start moving over the content from Squarespace. This turned out to be a lot more trouble than I thought.

First, Squarespace also has a built in asset manager for images (note: I’ll have to add that feature to my little upload utility)…however, it doesn’t include an easy way to download images. Sure, I can navigate to each one, click on “Details”, and then right-click “Save as”. But with over 100 images, that’s a non-starter. Too time consuming.

A quick Google search led me to Ground Control from Beyondspace. It’s a plugin for solving my exact problem (neat!), but it uses unpublished APIs so it’s not guaranteed to work (oh…). Getting this to work required a few things:

  • Gain access to the freemium script from Beyondspace
  • Install a Chrome extension: Tampermonkey
  • Configure the user script
  • Fumble around the UI, to find the injected download button
  • This YouTube video was a big help! — https://www.youtube.com/watch?v=JcSRK9oxspo

https://www.beyondspace.studio/blog/how-to-install-ground-control-for-squarespace-personal-plan#

MDX Components -- 03/28/2026

It didn’t take long of moving over old blog posts, that I need to start using my upload utility. So far, it’s worked great. I can select an image, fill out some metadata, click upload…and I immediately have a code snippet to shove in my MDX content.

If you aren’t familiar with MDX, it’s basically Markdown + React. You can write normal Markdown for most of your content, but can inject custom React components for anything special you want along the way. The only catch is each React component needs to be configured ahead of time.

So, my vibe coded upload utility generated this snippet…but my website project didn’t have a “BlogImage”. I had to create one.

<BlogImage
  src="https://meddlin-web.s3.us-east-2.amazonaws.com/blog-images/money-toolkit-update/image-3-6-26-at-1156-am-1.jpeg"
  alt="Screenshot of the sinking funds pages"
  width={1283}
  height={894}
/>

A couple prompts later, and we had one. For now, it’s a simple wrapper around the <Image /> component from next/image.

import Image, { type ImageProps } from 'next/image'

export type BlogImageProps = Omit<ImageProps, 'src' | 'alt' | 'width' | 'height'> & {
  src: ImageProps['src']
  alt: string
  width: number
  height: number
  caption: string
}

export function BlogImage({ caption, ...imageProps }: BlogImageProps) {
  return (
    <figure>
      <Image {...imageProps} />
      <figcaption>
        <p>{caption}</p>
      </figcaption>
    </figure>
  )
}