Saving my sanity with subdomains

Matt Sayar
An accurate metaphor for what my site's architecture is starting to look like

I've made a few different toys with LLMs like

And every single time, it's been a pain in the ass to embed them in these posts on my site. Since I use Publii to put this site together, everything is static and it comes packaged with its own styling/CSS. To make sure things embed properly, I have to:

  1. Actually build the thing
  2. Drop all the source code into an LLM with instructions to "make this easily embeddable in my blog post using a Shadow DOM"
  3. Wait for the LLM to do it
  4. Copy/paste into a draft post and test it
  5. It doesn't work
  6. GOTO 2
  7. Eventually it works after a handful of iterations

The output looks pretty gnarly and the whole process takes longer than I'd like. I've done it enough times now that I decided, "There has to be a better way!"

Why don't you just use iframes?

Yeah, that's it, that's the better way. I don't know why I didn't think of that earlier. I think I was so focused on keeping everything on my site simple and static that I just overlooked it.

I saw Simon Willison uses a "tools.simonwillison.net" subdomain which is just his Github repo hosted on GitHub Pages. I've compared CloudFlare and GitHub Pages before and they're both great, so I decided to just copy Simon.

Setting up code.mattsayar.com

Setting it up is pretty straightforward.

In GitHub

  1. Make a GitHub repo
  2. Settings > Pages > Branch: main
  3. Custom domain: code.mattsayar.com

In CloudFlare

  1. Your domain > DNS > [ + Add record ]
    1. Type: CNAME
    2. Name: code
    3. Content: mattsayar.github.io
  2. Wait for DNS propagation
  3. Get impatient
  4. Try playing around with mattsayar.github.io instead but the browser already cached code.mattsayar.com
  5. Clear cache and try testing again
  6. But DNS has propagated by now
  7. Change everything back to code.mattsayar.com

And I'm done! 

There's a weird behavior in Publii where you need to exactly specify the size of iframes (for responsiveness) or they won't show up at all. Thankfully I found a fix pretty quickly. Just one of those quirks you gotta remember, I guess.

Before

Here's an example of how I converted just one widget, the Number Bonds from this post, from an html file to an embeddable bit of code. It took 25,603 tokens, or ~40 pages of single-spaced text to finally get an output I could use. It probably took ~15m using the process I described above. 

After

Now I just have to paste in something like this

<iframe width="500" height="450" 
  src="https://code.mattsayar.com/matts-step-sequencer.html" 
</iframe>

And you get this:

Ahh that's way better. Make some sick beats for me!

Why even use code.mattsayar.com? Why not just use mattsayar.github.io?

For starters, it looks nicer. And that's basically it, honestly. Another nice thing is if I ever decide to migrate the backend from GitHub Pages to something else, I won't have to change any of the links on my site, I'll just update the DNS. That kind of portability is nice. Also I'm not going to port the old stuff because I don't want to. I put the old stuff in the repo though.

There's some benefits around SEO (which I don't really care about and Google refuses to index my site anyway) and cookies (which I don't use) and CORS (which isn't really applicable) etc. but mainly I just wanted it to be cleaner. For you. I hope you appreciate it. 

Do you want to see a cat?

I was messing around with Cloudflare Workers and they have a free AI image generator. Using the steps above, I plopped it at cyber-cat.mattsayar.com and iframed it below. It will take a few seconds to load (10-20s sometimes), or if it never loads I might be out of free credits. Enjoy. Or maybe not? Ideally you're still playing music from the step sequencer above because you're about to see a DJ cat. Hopefully it took you long enough to read this that it should pop up right.... now.

Or maybe right now!

You should also read: