The Start Of It...

building zarl.dev

a year ago
👏 (87)

I’ve finally gone and done it, I’ve created my blog and now I need to populate it with some content. So here goes…

The Start Of It …

It’s taken quite some time to get here, this must be at least the fifteenth time I’ve done this. The amount of /blog, /newblog, /blog1 etc folders on my harddrive is rather hilarious. It doesn’t help when my ‘Not Invented Here’ syndrome kicks in for personal projects, which to be honest isn’t really that conducive for finishing them but it is brilliant for learning; It’s time to be more pragmatic, well not too pragmatic not Wordpress pragmatic. 🤢

What Do I Want

So with everything started what did I want from the blog, well I wanted to not use any of the blogging frameworks like Hugo, Jeykl etc. It’s CRUD and I wanted to work mainly on the frontend, as the goal was to get myself more comfortable with and improve my Modern front end development. And by Modern I mean the Typescript, Component orientated with a common build system (vite, webpack, etc). Long gone are the days of sticking a script tag at the top and a link to a jQuery CDN. So the build process was something I wanted to make sure I was handling specifically dependency manangement, artifacts generation etc. This is so I can package it all in a container and self host it. To focus on the frontend I forwent doing much of the backend and leveraged Pocketbase which is like a self hosted open source Firebase. This was a great decision and made the turn around time much shorter than if I had decided to write a full backend in Go (which I usually do). I also wanted to write in Markdown, the days of writing raw HTML are over.

Building Zarl.dev

I’ve done node.js development before but again that was more using Javascript as a full stack language using Express etc. So the requirements were:

  • No prebaked blog frameworks re: Hugo, Jeykl etc.
  • Focus on frontend development loop
  • Use of Pocketbase for storage and auth
  • Markdown processing

So with this understanding I started to look around for a frontend framework to try.I narrowed it down to:

  • React - The DEFACTO frontend component framework
  • Solid.js - No Virtual DOM and has supposedly good developer experience
  • Sveltekit - More native syntax and seemed opinionated in ways I agreed with

In the end I decided on Sveltekit. This was just the jump into modern Javascript development I wanted as in that with Sveltekit you are not just doing frontend UI (work the Svelte portion of Sveltekit) and communicating to some API backend you have the client and backend/middle server developed side by side. On your server side you can call any API you would like. or need to, this could be web services or another service you have developed. Initially I thought this was a this tight coupling but grew to enjoy it as a way to encapsulate the data flows to the UI, with state and transistions making things look better and improve the UX. There was some development hiccups around using node libraries where the composition ment they were being called client side but got around this. There is some design pardigms with Sveltekit that help to minimise these issues. I also decided to bring in TailwindCSS for ease of styling composition of the components.

Hosting

I build the output from the npm build process into a Docker container with a 2 stage build process push the image to my private container registry. I then use any standard host Amazon EC2, Digital Ocean any one that will give me a cheap instance I can run docker on. I then run Traefik as my ingress to handle the Let’s Encrypyt auto manangement of SSL certificates, this makes things super easy with docker-compose and just the use of labels to expose as needed.

services:
  traefik:
    container_name: traefik
    image: traefik:v2.9
    command:
      - --log.level=DEBUG
      - --entrypoints.web.address=:80
      - --entrypoints.websecure.address=:443
      - --providers.docker
      - --providers.docker.exposedByDefault=false
      - --entrypoints.websecure.http.tls.domains[0].sans=zarl.dev
      - --entrypoints.websecure.http.tls.domains[0].sans=*.zarl.dev
      - --entrypoints.web.http.redirections.entrypoint.to=websecure
      - --entrypoints.web.http.redirections.entrypoint.scheme=https
      - --certificatesresolvers.le.acme.email=**********
      - --certificatesresolvers.le.acme.storage=/data/acme.json
      - --certificatesresolvers.le.acme.tlschallenge=true
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
      - ./data/traefik/:/data
  zarldev:
    container_name: zarldev
    image: ****/zarl.dev
    restart: always
    environment:
      PORT: "4173"
    labels:
      - traefik.enable=true
      - traefik.http.routers.zarldev.rule=Host(`www.zarl.dev`)
      - traefik.http.routers.zarldev.entrypoints=websecure,web
      - traefik.http.routers.zarldev.tls=true
      - traefik.http.routers.zarldev.service=zarldev
      - traefik.http.routers.zarldev.tls.certresolver=le
      - traefik.http.services.zarldev.loadbalancer.server.port=4173
  pocketbase:
    image: ghcr.io/muchobien/pocketbase:latest
    container_name: pocketbase
    volumes:
      - ./data/pb/:/pb_data

Conclusion

So here we are on zarl.dev running Sveltekit, Tailwind for UX/UI and Pocketbase as my Auth and Database layer, I’m happy with how quickly this allowed me to iterate and get my design so now I just need to keep producing content. Think I’m going to follow up with some of the tools and libraries that I ended up using to create the blog.

👏 (87)