You’d think that over a decade of experience in building blogs on some of the most popular CMS platforms would have dissuaded me from coding a blog from scratch. Well it almost did!
But as I hope to one day call myself a developer, I must go through the seemingly inevitable phases all aspiring developers go through:
- demonstrate basic SDK knowledge and language mastery by coding a personal blog
- document personal programming journey and highlight projects worked on
- achieve the once impossible task of landing an entry level programming job
- become too busy with work and life and watch the git commits on the blog repo dwindle
But let’s not get too ahead of ourselves :)
In this initial post I will cover the steps I took to launch the website you’re reading this article on.
Why bother with blogging?
Is personal blogging even a thing anymore? It certainly doesn’t seem to be as mainstream as it once was. Between Dev.to, Medium, Substack, other publishing platforms and all the social media sites, blogging seems a bit outdated.
Well call me old-fashioned then!
Let’s start with the obvious: I want to document my programming journey. I want to look back and say, "Hey, remember when I didn’t know how to configure Next.js routing properly? Look at me now!" But more than that, this blog is a platform to showcase my projects, share my thought processes, and—hopefully—stand out when it comes time to find an entry-level developer gig.
In an industry as competitive as software development, you need to find ways to differentiate yourself. Anyone can submit a resume with a list of skills, but not everyone takes the time to document their learning journey, build real projects, and articulate their problem-solving process. That’s where this blog comes in. It’s not just a portfolio; it’s a window into how I think, solve problems, and approach challenges.
With that said, let’s go over why I chose not to build this site from scratch-scratch.
Why clone a repo?
I could’ve built the blog from scratch. But while reinventing the wheel can be a great learning experience, it’s not always the best use of time—especially when there are so many other things I need to learn and do. Did I mention I have 2 kids!?
By cloning a well-constructed, minimalistic repo, I was able to hit the ground running faster than my cat Bella when the auto-feeder goes off. The repo I chose was from Lee Rob of Vercel.
His approach to building performant, sleek websites using Next.js is exceptional. I was at first drawn to the minimalism of the repo—but it wasn’t solely aesthetic, it was functional as well.
No bloated codebases, no unnecessary dependencies—just a clean, simple setup that would allow me to focus on content and customization. And since I was ok with using Postgres and have experience with MDX files, it really turned out to be a no brainer, plus I learned so much by going through the code and making my own tweaks and customizations where needed.
Note: I have built blogs from scratch using HTML, CSS & JavaScript functionality. I have also built and launched simple blogs using React. All that to say, I have experience in doing it from scratch, but my goal was to focus my dev time on my other software projects.
The tech stack I’m going with & why it matters
Let’s talk shop and see what’s under the hood.
- Next.js: This was a no-brainer. Next.js is not just popular; it’s powerful. Server-side rendering, static site generation, API routes—all bundled in a framework that plays nice with React. Plus, I aspire to go beyond the basics and my research showed that Next.js is perfect for that. It’s versatile enough to handle everything from simple blogs to complex web apps, and that’s exactly what I’m aiming for.
- Tailwind CSS: Even though I have strong opinions on design, I’m not a designer. But I do want my blog to look good. Tailwind allows me to keep things consistent and responsive without getting lost in a sea of CSS files. Plus, it plays well with the rest of the stack.
- MDX: Writing blog posts in MDX is like having my cake and eating it too. I can write Markdown (which is super easy) but still drop in React components when I need them. This makes the content more interactive and flexible.
- PostgreSQL with Prisma: I’m not just writing a blog; I’m building a platform that can grow. Using PostgreSQL for the database and Prisma as the ORM allows me to scale the backend and keep things robust.
- TypeScript: My understanding is that TypeScript is here to stay and that type safety isn’t just a buzzword. It’s a way to avoid dumb mistakes and make sure my code is solid from the get-go. So I stuck to TypeScript to hopefully learn and understand it better along the way.
The tech stack I chose matters because it reflects the kind of developer I want to be. My goal is to use the best-in-class frameworks but also keep my code and directories as simple as can be. Though I fail short of it over and over again, I hope to one day understand the front and backend well enough to architect software with low complexity but high functionality.
Setting up the blog
Next, let’s talk setup. Cloning the repo was just the first step. There’s a lot that goes into making a repo your own, and I didn’t just want to be a code copycat. The first thing I did was tweak the configuration to suit my needs.
1. Environment setup
I set up my environment variables, especially for things like database connections and API keys. This is crucial because you don’t want to hard-code sensitive information into your project. That’s a rookie mistake I made a number of times and wanted to avoid on this project. Here are the most important variables in my ENV file:
// For NextAuth.js and GitHub OAuth
OAUTH_CLIENT_KEY=""
OAUTH_CLIENT_SECRET=""
NEXT_AUTH_SECRET=""
NEXTAUTH_URL=""
// For retrieving Tweets that get inserted into content
TWITTER_API_KEY=""
// For post views and guestbook feature that I currently don't use
DATABASE_URL""
Getting these right took some trial and error and hunting things down, but it’s all part of the learning process. Specifically, going into Postgres using pgAdmin and ensuring a new database for this project was properly created.
2. Customizing the blog
The great thing about starting with a minimalistic repo is that you can layer on your own style and features. I swapped out some of the default components for ones that I built or modified, ensuring that the blog had my personal touch. Also swapped out the images and SVGs. I’m still working on more of this as I go, so I may come back and update this section with more specific examples of changes I chose to make.
3. Adding content with MDX
I ‘m writing this post in MDX, which is a bit of a refresher but totally worth it. MDX allows me to mix in components like code snippets as you saw above, or interactive elements right within the blog post. This is going to be super useful as I document more complex projects where I want to demonstrate functionality directly within the post.
For example, I might embed a live code editor where readers can play around with snippets I’m discussing. Or, I could use custom MDX components to visualize data or results. The possibilities are endless, and that’s what makes MDX so powerful.
Like I mentioned at the start, I could have went with WordPress, but what fun would that be!?
4. Deployment
Finally, deployment. Where the rubber meets the road. I deployed the blog on Vercel, which is a perfect fit given that Next.js is their baby. The process was seamless, and Vercel’s built-in optimizations for Next.js mean that my blog is fast and responsive. I really enjoy the auto-deploy that Vercel does by connecting to my Git repo, and if anything goes wrong I can read through the logs.
Lessons learned thus far
This whole experience has taught me a few key lessons:
- Start with a solid foundation: Cloning a repo isn’t cheating; it’s smart. It lets me focus on building instead of reinventing the wheel.
- Know your tools: Choosing the right tech stack isn’t just about what’s popular; it’s about what works best for your specific needs. For me, Next.js, Tailwind, and MDX are the perfect combo for building a blog that’s both functional and scalable.
- Documentation is key: Keeping track of your decisions, challenges, and solutions is invaluable—not just for you, but for anyone who might look at your work in the future.
- Stay curious: There were so many moments where I could’ve just stuck with the basics, but pushing myself to learn new things (like learning more TypeScript) made the whole process more rewarding.
What’s next?
What’s ‘next’….get it? I am too funny.
The blog is up and running, but this is just the beginning. I’ll be documenting my journey as I try to build out the basic foundation for my SaaS project, explore new technologies, and tackle coding challenges.
If nothing else, this blog will be a cool way to look back and see how far I’ve come. Stay tuned for posts on things like the bane of my existence for about one full week a.k.a. “setting up authentication and handling databases.”
This is just the start, and I’m excited to see where this journey takes me!