Douglas Moura

Douglas Moura

Software Engineer

Douglas Moura

Douglas Moura

I write about TypeScript, React and Node.js.

New year, new blog (or how I created this blog for 2023)

Published at:Published at:Updated at:

New year, new blog (or how I created this blog for 2023)

New year, new blog! After delaying the publication of my blog for a long time, I finally finished developing it using Next.js, PocketBase, and Mantine. Want to know why I chose these tools? Then, keep reading here with me.

I've been creating blogs for a long time (since 2007). I started with Blogger, but then I migrated to WordPress. And that's when I started to be interested in Linux and programming. I spent a lot of time creating themes, customizing plugins, reading documentation, and translating themes and plugins for WordPress. And, although WordPress is an excellent CMS for those who just want to publish a website as quickly as possible, this time I wanted something more personalized, containing all the features I would like to have and nothing more. From there, I started researching.

I tried several CMSs (Directus, KeystoneJS, Strapi and Cockpit), but what I found most simple to meet my need was PocketBase, mainly because I intended to self-host my solution. The other CMSs are great, but when you're a team of one, you have to choose the right tools. And what's easier for one person to manage than an SQLite database? PocketBase already exposes database updates in real time with SSE, provides authentication and file management (with integration with S3), SDK for JavaScript and Flutter, and can even be used as a framework. All this within a small binary written in Go (if you want to know more about PocketBase, read the documentation and watch this video from FireShip, where he shows how to create a real-time chat system with PocketBase). And finally, in order to have real-time backups of my SQLite database and send them to S3, I use Litestream. Well, having made the choice for the backend, let's move on to the frontend.

I tried Astro (which is excellent!) and Remix, but I ended up choosing Next.js, mainly because of the Vercel image generation library, which I use to generate images of the post, like this one:

The job that's never started as takes longest to finish

And here we come to the choice of what I would use to create the styles of the blog. In recent years, I styled React applications with CSS Modules, Styled Components, Stitches, Tailwind and Chakra UI. I even stated to create a Design System with Stitches and Tailwind, but create an entire Design System all by myself would take a long time, so, I decided to take the shorter route.

I have tried a few libraries until I found Mantine, which is an excellent library packaged with everything I wanted to use. From there, the work consisted of implementing the blog with the basic initial features:

  • Incremental Static Regeneration of posts;
  • Form validation with Zod;
  • Nested comment system with anti-spam verification provided by Akismet;
  • Display of commentator avatars with Gravatar;
  • SVG Favicon with light/dark mode;
  • I18n (Portuguese and English).

With all that ready, I changed the canonical URLs of my articles on Dev.to to point to the new URLs and finally published my blog.

Of course, if you're reading this on my blog now, you'll see that an important feature is still missing: search. I'll be studying possible solutions for this in the coming days, but I'll already let you know that you can preview the functionality by pressing the / key on any page.

Happy 2023, everyone 🎉.

Leave a Reply

Loading comments...