Events |-7 min read

Introducing abimaelbarea.com/blog

Decision and struggles while creating my first blog from scratch.Introducing abimaelbarea.com/blog

I wrote my first blog post a few years ago; Deloitte published it. I was working there at that time, and I appreciate that opportunity and especially their help during the process:

Clean Architecture Deloitte Spain

It took me a while to write the second one, but I finally did it and published it on Medium:

How To Use video In Angular? Medium

Then, I continued writing on Medium for some publications; I even explored DEV Community:

How to Make a Component Compatible with Angular Forms? DEV Community

But some questions came to mind: What if I own my content in a personal blog? What if I build it from scratch?

Why should I create my blog?

I thought about it for quite a while. These were the potential benefits of having my blog:

Relevant Information
But the most important point was that It could be an exciting experience, and I wanted to go through this process

How did I decide to build it?

Let’s talk about engineering. In the table below, you can see a summary of the tech stack that I used:

Frontend FrameworkNextjs (React)12.1.6
Programming LanguageTypescript4.5.5
CSSPostCSS with CSS Modules8.4.5 / 3.0.0
Content Management SystemNextMDXRemote4.0.3
Progressive Web AppNextPWA5.5.2
Search Engine Optimization & Open GraphNextSeo5.4.0
AnalyticsGoogle Analytics and Vercel Analytics-

Why Nextjs and React?

I had doubts before starting, so I explored the possibility of doing it in Vue using Nuxt or React with Nextjs. Both combinations fitted my needs, and to be honest, I wanted to explore Vue and Nuxt.

I finally decided on React because I already knew the framework, allowing me to focus on learning and improving in different areas

I chose Nextjs because:

Why Typescript?

Using Typescript was a straightforward decision. Having an extra layer of security and validation types on building time was a must. I wanted clarity on the codebase and the potential of types.

Why PostCSS and CSS Modules?

This is an exciting question. My choices were CSS-in-JS using libraries like Emotion or StyledComponents vs. CSS Modules. This one took me a while because both alternatives seemed nice. Still, I chose CSS Modules for two reasons:

Once I decided, I realized that CSS Modules were the default configuration of Nextjs. They included it through a module of PostCSS, which was even better news, because I had the potential to PostCSS out-of-the-box.

Something to avoid
On October 2022, the second most active maintainer of Emotion published this article: Why We're Breaking Up with CSS-in-JS

Why MDX?

When you’re building a website, you need a place to store the content, and of course, the first thing that came to my mind was a Content Management Systems (CMS). I didn't want to spend time building my database and an API to access the content, so a Headless CMS seemed the better choice. And that’s what I did. I spent time learning about Strapi and Contentful and was excited about it.

A warning or caution
One day, I remembered a Syntax episode  where they talked about something called MDX, and I stopped my CMS research  and learned about MDX. During that investigation, I jumped on a fantastic article by Kent C Doddswhere he said he was using MDX  for building a modern website

I was pretty excited, as a developer I know how to read and write a markdown file, and that was a plain, basic static file. But with MDX, I could add custom references to my components and then implement an easy mapper to make the connection with my code. That was sick! I didn’t need a database, a server, a cms, or anything. I could write my content using markdown, and Nextjs will create a Static website. What? Was that even possible?

Relevant Information
Indeed it was, and as I always say, it’s crucial to choose the right technology to solve your problems. In my case, moving to an MDX-based solution would significantly reduce the project's complexity

Other Considerations

At some point, I decided that I wanted my blog to be a Progressive Web APP (PWA), it kind of makes sense because I was looking for a way of having access from my phone launcher in a click. And it was an exciting experience because I had no clue how to make a Nextjs website as PWA.

Search Engine Optimization (SEO) was a huge challenge. I wasn’t expecting it but I was fortunate to find NextSeo. The library completely changed my life because I had a template of what parameters to provide, which was vital for researching and learning more about the topic.

Regarding Analytics, I initially went with Google Analytics, but in a last-minute decision, I decided to add Vercel Analytics too while writing this post. I am making this move to learn about both platforms and decide which one fits better my needs and expectations.


I have a strong background in UX. I worked in a Software Engineering and Usability laboratory for many years. So, my relationship with design is pretty close. I learned Photoshop, Sketch, and Figma.

For developing this blog, I decided to use Figma and export the content using SVG format to optimize the sizing of the files. But I struggled to create an outstanding image from scratch, and it took me ages to make one for this post.

A warning or caution
This topic haunted me for a while... By the end of the summer, with the rise of the AI Art Generators, something clicked for me, and I decided to try Midjourney

After more than 6 hours in front of the Midjourney Discord without blinking, I learned what I should write to get the images I expected, and I recreated all of them.

Before Midjourney

Before Midjourney

After Midjourney

After Midjourney

Now, I’m using webp for the site images and jpg for the Open Graph versions.


Creating something from scratch is challenging. Suddenly I wasn’t just a Full Stack Developer. I needed to become a Software Architect, Designer, Product Owner, Project Manager, Content Creator, and SEO Specialist. For a while, it was overwhelming, but soon it became like a game and a challenge, and I loved the process.

Relevant Information
When creating something, you have an idea of your end goal. Still, the path to reach that goal needs to be built; to do that, it’s crucial to be flexible and resilient

The open-source challenge

When I started, I was super afraid of showing my code. At the same time, I wanted to be transparent and honest with my potential audience. And it could be beneficial to reference me and others who wish to explore how I did it. So, after thinking about it, I decided I MUST make the code public.

This decision was hard because I would be fully exposed. In the beginning, I tried to follow all the fantastic scrum/kanban techniques. So, I set up my Trello board with tickets, created small PRs, and wrote clear commits. I started having problems pretty soon: the acceptances criteria weren’t clear enough, requirements were continually changing, and the design was different every 2 seconds.

Following this process was complicated, and I decided to adapt. I still had my goals and was using semantic commits, but I was more in an exploratory mode. So, I apologize in advance if the commit history isn’t perfect enough. I thought it was lovely to keep it to remind myself that I’m not perfect and must work on creating a better version of myself every day!

What’s next?

This is just the beginning of an exciting journey. As I said at the beginning of this blog post, this website is my playground. I have many ideas to improve it, like

So, if you liked this post and want to learn more about how I build my blog and my thoughts behind every decision, please stay tuned.