How I Built My Personal Website

Hey there! I wanted to share how I built my personal website, rubensmn.dev, and share the tools and choices I made along the way. If you’re a developer or just curious about web development, stick around and maybe you’ll find something interesting!

General Setup

I’ve always wanted to build my own personal website, so I decided to give it a go. I’ve been building with React and Next.js for a while now, so it was a no-brainer to use them for this project. I did not want to build everything from scratch, so I used a blog starter template from Vercel’s collection of templates. This template was a great starting point. It came with SEO optimizations and a blog setup out of the box.

Styling wise I went with Tailwind CSS. Instead of spending hours thinking of names for my classes, I can just write the utility class names in the components and Tailwind takes care of the rest.

No Backend Needed

One of the things I love about this setup is that there’s no backend. All my blog posts are saved as MDX files in the project directory. MDX is fantastic because it lets me write in Markdown, but I can also embed React components if I want to spice things up. This makes adding or editing content super straightforward.

A Showcase Page for My Mini Tools

I love to build little tools that I can use for all kinds of things. So I added a tools page where I list all the small tools I’ve made over time. Right now, there’s just one tool, but I’m planning to migrate some of my other standalone tools into this section. It’s a fun way to share things I’ve worked on, and I hope to expand it in the future.

Some Challenges

When it comes to building in general, there are always some challenges. One challenge I faced was with the blog post content during deployment. The content directory was empty initially, so Git didn’t keep it. This caused a build issue since the directory wasn’t found during the build step. It was frustrating, but I learned about the magic of .gitkeep files. Adding a .gitkeep to the empty directory solved the problem, ensuring that Git tracked the folder even when it contained no files.

So What’s Next?

For now, my plan is to casually write more posts as I discover cool things I want to share. I’ll continue building out the tools page, and I’m sure I’ll keep tweaking the design and functionality as I go. That’s the beauty of having your own website. You can always update and upgrade when you need to.

Final Thoughts

Building rubensmn.dev was a fun experience, and I’m happy with how it turned out. It’s a space where I can showcase my projects, write about my experiences, and share the little tools I create. If you’re considering building your own website, I highly recommend giving Next.js and Tailwind CSS a try.

Thanks for reading, and I hope you found this breakdown helpful! Feel free to reach out if you have any questions or just want to chat about web development. Happy coding!