New website, Easy flow

It's been a while I haven't posted an article and I also wanted to update my personal blog.

My previous one was using Ghost CMS and a custom theme I found on github. It was good, but I felt it was not good enough for what I had in mind. A place to share thoughts and also share photos from my travels and adventures.

Why CMS fell short

I liked Ghost, the editor was really nice to handle draft and preview. But it is just too much for such a small website. The deployment is a bit of pain, you need MariaDB to persists all your blog posts which means a server. There are a lot of cheap webhosting solution but it is just a lot for just a simple website to show posts and images.

Performance & simplicity

When it comes to performance or even bandwidth static website are the best. In todays world everything is dynamic, there are new JS frameworks everyday but for a personal website, nothing beats a static website. It's easy to host, no database, no server, easy peasy.

There are plenty of options for SSG (Static Site Generation), Nextjs is the most widely known.

The good things about having the whole website as static, is that it can leverage client and CDN caching like crazy. Just put your index.html and your assets in a S3 bucket, serve it with a CDN (e.g. Clouflare or AWS Cloudfront) and your good to go, no infracost.

This reduce both complexity, cost & bandwidth. Users will be pleased with a snappy experience and it will reduce the carbon footprint of my website: two birds, one stone.

Photo gallery

Being a amateur of photography, I needed a way to share my travels and adventures so I built a Picture Wall that is both simple and cool to see.

Gallery

Blog frameworks are kinda limited in that aspects, there are some options but they are limited to this fonctionality only. I needed a minimalistic website where I can share my projects, my thoughts and my photos, nothing more, nothing less.

The setup:

Wall of cards: Simple css to display image cards that works both on desktop and mobile.
Simplicity: I'm using a simple json file with id for S3 keys, tags for filtering and alt. The file is commited in my repository and can be generated with a small bash script. Easy !
Optimization: I'm using Cloudflare transform url API ensuring performance at small cost. It crops, downsizes, and blurs images via URL query parameters.
UX: Gallery is using low res pictures for speed, high quality pictures are downloaded in the background when clicking on them. A blurred version is used as placeholder for best UX.
Shuffling: Gallery order is randomized to have new pictures displayed everyday, no cron or pipelines to maintain.

Here just a simple pseudo random generator in JS using the date as seed number for the shuffling part.

function mulberry32(a: number) {
  return function() {
    let t = (a += 0x6D2B79F5)
    t = Math.imul(t ^ (t >>> 15), t | 1)
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
  }
}

function shuffle<T>(array: T[], seed: number): T[] {
  const arr = [...array]
  const rng = mulberry32(seed)
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(rng() * (i + 1))
    ;[arr[i], arr[j]] = [arr[j], arr[i]]
  }
  return arr
}

Here is the result:

gallery demo

Meet easy deployment

Deployment for such a simple website should be easy, I don't want to maintain a server for such a simple website and so should you. Just build your index.html, CSS, JS and push it to S3, Vercel, Github or whatever. No infra cost, everything lives on the client side.

*New website, Easy flow