Why I created a static Next.js blog
I've been thinking about getting into writing in some form for some time now, and combining that with learning a new JavaScript framework seemed like a good idea. Read this post to find out how I created this very simple blog so I could easily get started with some public writing.
After several failed attempts of starting to write my own blog through the years, I've learnt a lot. I've started several projects where I built an entire platform consisting of a CMS with user management, authentication, rich text editing, and a frontend to display the actual contents built with different frameworks and platforms such as ASP.NET Core (MVC, Blazor, Razor Pages), React (Plain, Next.js), Vue.js, Angular, etc. And I certainly took away a lot of learnings from it, in a technical sense, but the biggest lesson for me was this: lower the thresholds.
I realized I certainly didn't want to manage a bunch of Linux servers, PostgreSQL databases and updating docker images just for the sake of writing. Sure, I could have outsourced that to a platform such as WordPress or Medium, but as Scott Hanselman says, it makes sense to own your code, contents, domain etc.
Next.js, I felt, after having done some research, would enable me to quite easily get up and running by simply writing Markdown and generating static HTML that could be served from any platform cheaply. The most expensive part would be to secure my domain, but since no one's fighting for that, I got that rather cheap as well.
Hosting
The good thing about static websites is that there's really no need to think about managing servers. Serving static content can be done cheaply, if not for free on many providers. But choosing a provider can still be worth thinking twice about. As a long-time Microsoft Azure user, I was quite inclined to host my solution there, which I also did1 (might remove it eventually). Instead, I wanted to try out something new and after having done some research I chose Cloudflare, which I'm very happy with at the moment. Setting the project up with build-triggers on Github commits was very simple. Images are currently hosted on Cloudinary using their free tier. Cloudinary has a very convenient API for requesting images with applied transformations, which helps reduce the loading time for the website by requesting down-sized images.
All in all, the website is hosted for free and the content is owned by me. I also have to option to move the site to a new provider rather easily.
Writing Markdown
The blog posts are written in markdown and rendered using next-mdx-remote and with remark-gfm as a plugin. Should also allow me to write markdown that should render fairly similar to Github itself, thus enabling me to use Github as a reasonable editor for my posts in case I'm away from my primary developer machine.
Footnotes
-
Visit test.hampuspaulsson.com for this. I wanted to replicate a similar setup that Cloudflare provides (in the simplest case) in Azure, where the site is built upon committing to the main branch and static content is uploaded to static storage which is exposed to the internet. This was very much possible using Gitub Actions and uploading it to Azure Blob storage. It even has a CDN! I might move everything to Azure if image resizing is possible on Azure storage. ↩