I've wanted to build a personal website for some time now, a place to share some thoughts and work. It's a step towards my long-term goal of writing better and sharing my work more.
So here it is. :) During this crazy pandemic period, I thought I'd build a new project and replace my old photography website. It's not complete by a long shot, but I have a terrible habit of never "releasing" anything because I never find it finished. So this is a step forward.
Had a bit of fun with this build. TL;DR: Here's the stack:
- Kirby CMS for the backend
- Sapper for the SSR UI
- Hosted on private docker PaaS built with Dokku, hosted on Digital Ocean.
Backend (CMS)
I had a few choices of stacks that I had considered. I knew from the onset that I wanted to use a CMS for managing content. While I'm quite comfortable working with everything as markdown files (which is how my old site was built), I wanted a better update experience.
I also knew that a lot of my posts would be a mix of `code` and image-heavy so I knew I'd need something that could handle a lot of imagery and be easy and flexible with creating 'galleries'.
So I had a look at a few CMS solutions
Storyblok / Contentful
I've used both Storyblok and Contentful at different hackathons. Personally I found Storyblok to be an amazing product. It has a tonne of customizability and great integrations for editing and building content, as well as getting live previews. Definite a product worth checking out.
I also found that they support custom components which I thought was really neat! I thought this would be one pretty strong contender for what I was looking for. Their pricing is also pretty reasonable.
Though I kept looking as I was interested in a solution that was self-hosted, and I'd want a considerable amount of flexibly for how I entered and stored data and images. I also knew that I'd have a lot of imagery which I would like to have custom ways of handling, compressing etc. So I kept looking into other solutions.
Ghost
The Ghost platform is something I've been really looking forward to try. Such a clean interface, and it's API looked quite nice. Personally when choosing a CMS experience, I was looking for something fast and clean, and this really looked like it'd fit the bill.
My first POC of the CMS proved that it was quite an awesome experience. I'm not surprised it's so popular. The only thing that made me keep looking was that I found it wasn't very flexible with the custom fields it supported, or the ability to add my own fields.
This isn't really a fault of the platform though, it's designed for blogging, and it does that incredibly well! I was looking for building something more custom to support the way I like build image galleries as well as the different types of data structures I'd like this site to grow into.
Which brought me back to...
Kirby CMS
This is a platform that I have used in the past and absolutely enjoyed. This time around I tried out the latest iteration, Kirby 3.
Personally I've been quite a fan of the file-based CMS systems. My photography website was actually built with one. No databases to deal with, just a bunch of flat files. Makes migration a piece of cake. And with the file system, the majority of the CMS's are completely schema-less and allows for a tonne of customisations. I've tried a few in the past, Grav, Statamic, though I've always come back to Kirby for its simplicity.
Also, Kirby is awesome in the ability to build and add custom fields. There are a healthy collection of plugins made by many contributors. And the ecosystem is flexible, and with hooks, building plugins is actually quite easy.
I also got excited when I found 2 more projects within the Kirby eco-system. The first was the Kirby UI Kit, which the new Kirby panel that is completely built with Vue and makes each of its components available in the panel for you to build your own custom fields. The second project that I found impressive was the Kirby Editor project.
I found the editor to be an awesome experience for writing. With the combination of those two projects, I was also able to build my own custom block for the editor to handle building image galleries exactly the way I like.
I'll be releasing this gallery module publicly for anyone to use.
Frontend
Gatsby / Gridsome
These are quite popular right now. I've seen quite a lot of great blogs doing these static builds. And having played around with Gatsby, have to admit, was so impressed! These are really quite flexible and could be used with many different types of backends. I also quite liked the GQL API that it provides to use for the frontend.
The only thing I had in mind was that I had a few ideas to build a more dynamic website with constantly updating data. So I wasn't too invested to go down the static build route immediately.
The other thing I had in mind is personally I didn't really need the React or Vue runtime for this simple static content site I was building. The level of interactivity would be minimal, so I preferred to look for something simpler and smaller.
NextJS / NuxtJS / Sapper
Knowing that I definitely wanted to go down the SSR route, I immediately started looking at the SSR offerings from each of my favourite frameworks, React, Vue and Svelte.
Most of my commercial work is done in React and Vue, and with some of the projects I've done with Svelte. I've been so impressed by how simple it's API is. The other cool 'feature' is that Svelte compiles itself away, and only keeps the JS required to run the website (not a lot). This keeps the bundle payloads tiny while giving me the excellent component-based development workflow I enjoy to build UIs with.
So for this reason, I decided that I'll use Svelte for my personal website. Have to admit, I was so impressed by Sapper. Its API and features are quite similar to that of Next/Nuxt (file-based path routing, easy ability to design the API and server-rendered code), so it was easy to pick up.
Considering a lot of the components I'd be building from scratch, I wasn't too worried about UI library support. And considering I'll be doing all the development myself, I didn't have to worry about having to train others. Ah, the joys of doing personal projects.
Other bits and bobs
TailwindCSS
Ever since being introduced to Tailwind over a year ago, I've been in love. So for that reason it was a no-brainer that I'd build this website with Tailwind. It was even easier to integrate Tailwind into a Sapper project than any other framework I've used!
As mentioned before, I have a bad habit of never "releasing" anything until I find it "finished". Though I also never find anything to be "finished" and it's always a work in progress. So I'll stop here, push it live, and make improvements as I go. There are still many optimisations to do, but I'll get to it. 😁
Thanks for having a look, and I'm always happy to get feedback. You can reach me at @chrisalwinjames.