About this Site

Underlying Technologies

Fun fact about me - I love ECMAScript and I also love the React library.

So, in building this site I had two primary design contraints:

  1. The site must be truly and fully static (i.e. HTML and CSS only)
  2. The site must be built with React

Design contraint 1 aims for maximal UX (speed, accessibility, ease-of-use, etc.), while design contraint 2 aims for the best DX.

So many "Set up a personal blog with React" sites online only go so far as to ship the React and React DOM libraries to the client along with the blog assets. While this might be fine for business application or more complex web apps/web sites - this is not okay for a static blog.

Thus, by utilizing the renderToStaticMarkup method and a bit of boostrapping to import components and map their names to an HTML file name - we can "render" pages server side just once. From there, we can upload the HTML (and other assets) to GitHub pages for minimal cost hosting.

In an original incarnation of the project - I originally used Webpack with a custom set of plugins and loaders to transpile and render the code in the build pipeline, however it felt too complex and after being away from the code for a bit I didn't really feel like it was the best solution. So, I went back to the drawing board and setup a simpler Webpack transpilation pipeline the would create a NodeJS render script.

However, while I felt better about the render script (vs. render pipeline) - integrating Node with newer and DX-friendly tools (e.g. JSX, TypeScript) is kind of a pain. I then decided to port what I had in Node to Deno since TypeScript (and thus JSX) support is built-in first class.

The fruits of that labor are what you see now! I hope you enjoy 😁

Source Code

GitHub (main source)

Notes on the Design