This Website

My day job involves working with AWS, and it got to the point where I didn't want to be working with Wordpress on a traditional LAMP server. I want to use the cool new tools, and I'd rather forget PHP entirely.

I've decided to go for a (at least for now) static website. S3, Cloudfront, and away I go.

Now I could have gone down the path of Jekyll, or used Nextjs's static export, but where's the fun in that?

It's React, kinda

Page generation uses React. I like writing React components, and when they're non-interactive its a breeze. At the end of the day, I take a DOM tree and convert it to plain HTML with

ReactDOMServer.renderToStaticMarkup(dom)

This creates plain old HTML. No javascript (unless I'm pulling in something via a <script> tag). Divs, paragraphs, tables, lists, etc, and the CSS does all the heavy lifting.

What about the Content?

It's all about the content. At this stage there's a folder for each post which contains a markdown file, and any of the images (or scripts for interactive posts)

A typical folder might look like:

• voxels/ folder name doesn't relly matter
  • index.md converts markdown to html, just regular blog content (sorted alphabetically), but with special content
  • cool-script.js scripts are added to the page
  • title.png and so are
  • screenshot1.png
  • screenshot2.png

I used the Marked library to convert my markdown to nice HTML

Building, Generating and Syncing

I use esbuild to compile the React stuff. It only changes when I want to tweak the components, which (ideally) is less than 100% of the time. its crazy fast, under 100ms.

To generate, I execute the generated code node ./compiled/index.js it reads the page files and generates HTML and assets in /static. I can run the npm package http-serve to get a preview of it. This takes maybe 1 second and is probably filesystem bound. There's no caching (yet) so it rebuilds the whole thing and won't scale nicely. I'll deal with that when the generation takes longer than a fix would.

To update my site, I use the AWS CLI aws s3 sync ./static s3://MY_BUCKET_HERE --delete. Easy peasy

What Next?

I've gotta just focus on blog posts. I've made a bunch of junk/games/tools and I just want to explain what/why/how. To make life better I could

• Make a live-preview editor - easy enough, but so is opening a .md file in VSCode
• Use Cognito for auth - its just for me, but maybe I want to blog from the road
• Generate the page in AWS - I spent time trying to jam it into a Lambda, and I'll probably try again. I know AWS has some CI/CD things (and their reps make sure we know about it at any interaction)

There's not a lot of drive behind these things, so they may not get done until the next iteration of madcoretom.com