New year, new blog! After delaying the publication of my blog for a long time, I finally finished developing it using <a href="https://nextjs.org/">Next.js</a>, <a href="https://pocketbase.io/">PocketBase</a>, and <a href="https://mantine.dev/">Mantine</a>. Want to know why I chose these tools? Then, keep reading here with me.
I&#39;ve been creating blogs for a long time (since 2007). I started with Blogger, but then I migrated to WordPress. And that&#39;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 (<a href="https://directus.io/">Directus</a>, <a href="https://keystonejs.com/">KeystoneJS</a>,
<a href="https://strapi.io/">Strapi</a> and <a href="https://getcockpit.com/">Cockpit</a>), but what I found most simple to meet my need was <a href="https://pocketbase.io/">PocketBase</a>, mainly because I intended to self-host my solution. The other CMSs are great, but when you&#39;re a team of one, you have to choose the right tools. And what&#39;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, <a href="https://pocketbase.io/docs/">read the documentation</a> and watch this video from <a href="https://www.youtube.com/watch?v=Wqy3PBEglXQ">FireShip</a>, 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 <a href="https://litestream.io/">Litestream</a>. Well, having made the choice for the backend, let&#39;s move on to the frontend.
I tried <a href="https://astro.build/">Astro</a> (which is excellent!) and <a href="https://remix.run/">Remix</a>, 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:
<img src="https://douglasmoura.dev/api/v1/og?ok" alt="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 <a href="https://github.com/css-modules/css-modules">CSS Modules</a>, <a href="https://styled-components.com/">Styled Components</a>, <a href="https://stitches.dev/">Stitches</a>, <a href="https://tailwindcss.com/">Tailwind</a> and <a href="https://chakra-ui.com/">Chakra UI</a>. 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 <a href="https://mantine.dev/">Mantine</a>, 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:
<ul>
<li><a href="https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration">Incremental Static Regeneration</a> of posts;</li>
<li>Form validation with <a href="https://github.com/colinhacks/zod">Zod</a>;</li>
<li>Nested comment system with anti-spam verification provided by <a href="https://akismet.com/">Akismet</a>;</li>
<li>Display of commentator avatars with <a href="http://pt.gravatar.com/">Gravatar</a>;</li>
<li>SVG Favicon with light/dark mode;</li>
<li>I18n (Portuguese and English).</li>
</ul>
With all that ready, I changed the canonical URLs of my articles on <a href="https://dev.to/douglasdemoura">Dev.to</a> to point to the new URLs and finally published my blog.
Of course, if you&#39;re reading this on my blog now, you&#39;ll see that an important feature is still missing: search. I&#39;ll be studying possible solutions for this in the coming days, but I&#39;ll already let you know that you can preview the functionality by pressing the <kbd>/</kbd> key on any page.
Happy 2023, everyone 🎉.

Douglas Moura

Douglas Moura

#designsystem

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