I created my own blog platform using GitHub Issues as CMS, Next.js and OpenAI in 2 days
What happened?
Those who know me (or have been following me for a while) know that I love writing. I find it a liberating experience, and it has enormously helped me sort and then consolidate thoughts in my head for years. I am okay with it if no one reads my content; for me, this is more of a learning in-public exercise, and somehow I consider my blog posts as personal rants sometimes! Yes, I write a lot, to the extent that I have compiled years' worth of personal notes while I worked on an incredibly challenging cloud product and published them as a book (go check out Building Software Platforms!)
For a while now, I have been considering running my own blog as an investment in my personal branding. Note that I said "running," not "hosting." As you know, I am a firm believer in SaaS, frontend cloud platforms, serverless, and everything that distills the spirit of treating software as a liability. In part because I am a terribly bad programmer 😇.
I find modern blogging platforms very compelling, but as I said, I wanted to double down on my personal branding without entering into too much development and maintenance costs. It's a sound tradeoff for someone like me, isn't it? I considered some options in the past using GitHub Gists but it was this post from Swyx that really triggered my curiosity. Yes, using GitHub issues as a CMS and building a small frontend on top sounds like an endeavor I can afford!
How did I do it?
First of all, being a terribly bad programmer as I am, I wanted to minimize damage and use a stack that maximizes the developer experience. For me, a good developer experience creates spaces for you to focus on fixing the business problem at hand. It's not about magic tools that do hundred of things. That's why the following stack fits the bill for me:
- GitHub Issues as CMS 📚. GitHub's Issue management system gives me all I need to create and manage content behind the scenes. I am very familiar with it, and it's easy to use, widely adopted, and has an out-of-the-box API with a good free tier. It's just perfect!
- Next.js with the Blog template ✍🏻. My new blog site is leaning heavily on this template, and I only added a few new types, components, and UI functionality to fetch data from GitHub through its API, such as issues (as posts), comments, and reactions. Of course, it's a statically generated site, but I have used Incremental Site Regeneration, so new issues created in GitHub Issues show up as blog posts after a very short while. It's just perfect and lightning fast. And ISR even works with dynamic paths!
- Typescript 💻. I feel very comfortable programming with types. I think it forces you into a kind of healthy DDD thinking and way of programming.
- Vercel as frontend platform 🚀. Nothing to add, you know I am in love with Vercel
- OpenAI 🤖
Wait, OpenAI? For what? Well, building the whole new site took me about two (2) days. Seriously. It may not sound like a lot to you, but it's a remarkable achievement for someone like me who does not code daily. I have used it extensively to customize the app created from the Next.js template, and ChatGPT helped me immensely to write Tailwind, Typescript, and other Next.js code when I hit a wall. This was one of the main reasons I wanted to build my own site: I felt capable of doing something like this in a reasonable amount of time with this tool. Based on my comments about the developer experience above, I can say that ChatGPT provided me with an Augmented Developer Experience.
But there is more. Do you see the post excerpts on the landing page? I have used OpenAI API with the text-davinci-003 model to generate these summaries of my blog posts and add them as excerpts. I am just testing this feature, and I believe this is going to work for a while until OpenAI starts to charge me. At that moment, I will probably replace this functionality with a dumb excerpt generator.
What's next?
I am super happy with the result and super proud of my work (or should I say AI's work?). I think this is a good MVP, but I can think of a few features down the road:
- Better responsiveness for certain pages
- Hashtags and search
- Dark mode
- ....
And probably nothing else? This is a blog site, so I don't want features creeping over here. I want it to be fast, and I want it to be simple. And so far, this is what I have done.
I think I'm going to give it a try for a long while!