How I Built My Blog | Cederic Privat

The idea of creating a blog has been in my head for a while. I've always loved the idea of having my own corner on the internet where I could experiment with new tools, publish my work and share my findings along the way.

After coming up with lots of little project ideas but never really getting around to completing them, or even starting them for that matter, I finally wanted to get something out there.

The goal of this website is to just push me into finishing at least one of these ideas and maybe jump-starting a journey of many more to come. I'm not a big fan of setting deadlines for my goals because they just seem to stress me out, but I want to finish at least one project every 3 months.

You can check up on my progress on the projects page.

Back to this blog, though. Since I also created this site to make it easy for potential employers to find my work, I wanted to share how I built it, so you can get inspiration on how you can build your own blog, too.

Tech Stack

When it comes to choosing the stack, I'd always advise you to just go with what you already know and feel comfortable with. It lets you focus on coding and not waste time learning new things. As a good advisor, I did exactly the opposite. But I did this for a specific reason - I wanted to learn new technologies. This might seem like a bad idea, and I could've probably finished the project faster with a familiar stack, but this actually gave me a motivational boost and helped me to finish this site in the first place. Apart from that, I choose my tech stack based on three things:

Experience - I wanted to use tools that I personally enjoyed using because, at the end of the day, side projects should be fun.
Flexibility - Technologies that work in a variety of settings, make it easier to change things in the future.
Relevance - In this fast-moving tech world, I at least wanted to use current technologies.

Next.js

Next.js is an opinionated React framework for building modern web applications. I personally chose Next for the following reasons:

Routing just works. Next uses a file-system based router which sets up routes automatically. You just need to put all your page files in the pages folder.
Next has a build-in image component, that handles image optimization for you.
Data fetching is very flexible. You can choose between different data fetching methods on a per-page-based system.
The developer experience is just awesome. Next requires little to zero config and has powerful features like fast refresh.

I personally enjoy opinionated tools that also give me the flexibility to expand in the future. The worst thing a tool can do to a beginner is to give you too many choices. That's why I always struggled to just use React because there are so many ways you can configure it. As a beginner, I just want to know the best way or at least the most common way to do certain tasks. I don't want to waste time trying out different libraries while I'm still learning the main concepts. That's why I really enjoy using Next. It uses great defaults but allows you to use custom configurations if needed.

Tailwind CSS

Talking about great defaults - Tailwind CSS. Tailwind is a utility-first CSS framework that allows you to style components using predefined classes. It has an underlying design system that uses sensible defaults which make it really easy to create beautiful layouts. But it also gives you the flexibility to use custom CSS and your own design tokens, like brand colors or font styles.

I really enjoy using Tailwind for a few reasons:

I don't have to come up with CSS class names for all my components.
Predictable CSS bundle size - reusing utility classes over and over again keeps the bundle size small.
Making design changes doesn't involve switching between markup and styles anymore. It can all be done within your HTML.
Tailwind has a very structured documentation with polished explanations and examples.

There are a lot of threads online with people arguing about why Tailwind is awesome or just the worst thing ever. When I first heard of Tailwind, I was skeptical, too. Why not just use inline styles? What about separation of concerns? Etc.

I could try to answer all those questions, but this would just exceed the topic of this post. If you're interested in using Tailwind, I would recommend reading CSS Utility Classes and "Separation of Concerns" by Adam Wathan, the creator of Tailwind CSS. He explains why using utility classes is actually a great idea.

MDX

MDX is an extension of Markdown that allows you to use custom React components inside your Markdown files. This makes MDX a great solution for my blog posts since I plan to include interactive demos. MDX offers a good enough authoring experience for my needs. It allows me to stay in my development environment and not switch between content and code.

I'm currently still evaluating the best way to store, load, and extract metadata from those MDX files. For now, I'm using Contentlayer, which automatically generates the required documents and lets me use metadata inside the MDX files.

Vercel

Vercel is a deployment platform for frontend applications. They're also the creators of Next.js, which makes the integration into my codebase even more seamless.

Every time I push a new change to my remote repository, it is automatically deployed using Vercel's GitHub integration. This allows me to focus on coding and let Vercel take care of continuous deployment and all the complexity that comes with hosting. And the best part - it's free for non-commercial and hobby sites!

Plausible Analytics

Plausible Analytics is a lightweight and open-source tool for web analytics. It does not use cookies and is fully compliant with the most important data regulation acts. This makes it a great alternative to tools like Google Analytics and allows me to ditch the annoying cookie banner (I hate these things!).

I wanted a solution to track page views and general interaction with this blog while at the same time respecting users' privacy. Plausible seems like a good solution, also considering that it is open-source and can be self-hosted. I might consider this in the future, to save some money but also to finally start using my Raspberry Pi, which is currently just collecting dust.

The Future

I want this blog to become a place that grows with me and can hopefully help others on their journey. I'll improve this site over time and try to make it feel a bit more like 'mine'. I have a ton of ideas, so stay tuned.

If you have any questions, feedback, or suggestions for this site, feel free to reach out to me on Twitter, LinkedIn, GitHub or just via Email. Follow me on Twitter to not miss any future updates or new posts! I'd love to hear from you!

This site was highly inspired by the personal blogs of Lee Robinson, Delba Oliveira, and Josh W. Comeau. So last but not least - thank you for your awesome work.