For a long time, I used Jekyll, despite being a good project I needed a way more straightforward to write my articles, as a software developer time is a precious resource that we need to use with wisdom. Then, I decided to try the traditional WordPress and for a large time I used the CMS to write my articles, but the thinks evolute, my last try was using Ghost, which attends my necessaries perfect, what I like in Ghost CMS is the Ghost API and all possibilities to integrate with the most famous frameworks and projects of the community.

For my new website 2022, my decision was to try new technologies again, since a started to work with code I understood, that a personal website is a place where you have total control to try (and make mistakes) without judging yourself. This time, the universe of React was the stack to build the new place. Between my motivations, I can list some reasons:The possibility to use Next.js (a really and suggestive good framework React)

• Next.js brought (and resolve) many problems mainly with performance and SEO, which is pretty good.
• Using React, I have the possibility to try Stiches, one open-source project to make CSS in JS too flexibly and powerful.
• For icons, my decision was Remixicon, I good set of icons easy to plug-in-play.
• Framer for React, a library to make animations exciting and with good documentation.
• The last one was the possibility to fetch my old articles from Ghost, leaving Ghost only as my CMS integrating with Next.js (the union is perfect)
• Versel to CI/CD, in a nutshell, is the easiest CI that I used in my life.

The development of the concept

Of course, I needed one conceptual idea, so I went on Figma to try something, my idea was initially an MVP, just for not wasting long months working, my inspiration was the personal website of Zeno Rocha.

Figma concept

Remix Icons

According to the website: Remix Icon is a set of open-source neutral-style system symbols elaborately crafted for designers and developers. All of the icons are free for both personal and commercial use.

https://remixicon.com/

Development steps

As I said, my inspiration was the repository of the Zeno Rocha website, of course, I follow some ideas that work well with his but I tried not to copy and paste all, but to write the code and adapting for my necessities. My decisions include the structure:

components: reusable react components

layouts: folder responsible to define different layouts in Next.js

lib: Used to connect with external services (Ghost)

The remaining folders are of Next.js, so I will not describe them here, in the final of this article, I will drop the repository for you forked.

Framer Animations

To make some micro-interactions and transitions I decided following Zeno suggestion to use Framer, to my surprise, is an amazing library with excellent documentation, and worth testing in your project React.

https://www.framer.com/docs/introduction/

CI/CD platform

Versel is by far the best and easy CI/CD that I used, in my experience with Jenkins and Buddy.io (another good CI/CD, but with a bunch of features unnecessary in this case), Versel become the process to launch my idea pretty smoothly.

https://vercel.com/

Next steps

How I did the MVP within a couple of days, some small things not important in the first moment are on my list to improve:

• Add Google Analytics
• Add format for Markdown code
• Add Next.js SEO
• Move with 403 the old URL wrote on http://dev.diogomachado.com/ to https://diogomachado.com/articles/

Want to fork my project?

https://github.com/diogomachado/diogomachado.com