I was starting to miss blogging, so here we go again. A few years ago I started a blog, and wrote about my experience while learning how to use React and other web tech. I found that writing while learning really helped me remember and understand. I want to do that again. These days I'm working on fun web projects for a video game company called Solid Clouds. I'm gathering some new tools and learning a lot along the way, so I figured it's a perfect time to start blogging again.

Headless Ghost

Let's talk about the tech behind this very blog. It shares a lot of DNA with my main web project at Starborne. The Starborne site is currently running on WordPress but I'm moving on to new tools, the same stack as this blog. I've been very curious about Next.js for a while. It's a powerful web framework for React, with a big focus on developer experience and performance optimization. Next.js can be used as a "static site generator", in combination with pretty much any CMS. Initially I wanted to use Next.js on it's own, and use plain Markdown files for content, but soon realized that we wanted a proper content editor experience, so we went with Ghost.

Ghost is by far my favorite blog platform. It can be used "headless" meaning completely decoupled from the front end code. The front end just fetches content from the Ghost API. Static pages are generated at build time, so the output is plain and simple static HTML, JavaScript and CSS. This type of combination is commonly called a JamStack, my favorite new buzzword. We're hosting the Starborne Ghost in a Docker Container on Azure, but my personal Ghost setup is running on a 5$ DigitalOcean droplet. We really don't need much power because website visitors aren't directly making requests to the backend, since the pages are fully static. The front-end static files for both blogs are hosted on Vercel.com.

Vercel is pretty neat. It handles the build pipeline and has GitHub integration to trigger deployments for every commit. It also generates unique preview URLs for branches, pull requests, etc.

The front end and the JamStack

Next.js is a react web framework that focuses on performance optimization and great developer experience. We're using TypeScript, and our current approach to styling is styled-components. We're using Material UI as a component library. It's basically Bootstrap on steroids, a set of react components and styles based on Material Design from Google, the design system used for Google's own Android applications. This blog's theme is almost entirely built on Material components, with very little custom CSS. It's a bit more heavily modified on the upcoming Starborne site. Getting all tools and frameworks to work nicely together took a bit of initial trial and error during setup, but once all the tools are well in place and properly configured, the developer experience is sublime. I'll delve deeper into these tools in future blog posts, and possibly share some boilerplate code on GitHub.

I'm really happy with this setup so far. Collaboration is a breeze, workflows and deployments are nice and easy. It's a joy to work with these tools. The JamStack is definitely the way to go and I highly recommend it if you're starting a new web project, or even if you're currently running on WordPress or any other CMS for that matter. WordPress can also be used as a headless CMS. The old days of shuffling PHP templates around servers through FTP are thankfully becoming a thing of the past for me.

That's all for now, stay tuned for more web stuff.

How I built this blog - Headless Ghost and Next.js