Nextjs

Goodbye Hashnode, Hello Vercel: Migrating My Blog to Next.js and Vercel

I used Hashnode for many years, but I decided it was time for a change. Hashnode is a great platform for developers, but as my blog and community of 13.8K followers grew, I wanted to own my content, my design, and the technology I use.

In this post, I will show you how I moved everything. I will explain the technical problems I solved (like fixing broken links and image paths) and why my blog is now much faster using Vercel, Next.js, MDX, and Kit.

1. Why I moved: Freedom and Ownership

The main reason was ownership. When you use a platform, you have to follow their rules. By building my own site, I gained:

  • Custom Design (UX/UI): I can add special parts, like my new follower counter, exactly where I want them.
  • Technical Control: I decide how to make images smaller (optimize), how my RSS feed works, and how my code is built.
  • Content in Git: All my articles are now .mdx files in a GitHub folder (repo). This means I have a history of all my changes and can use my favorite code editor to write.

2. The Tools I Used: Vercel, Next.js, and Kit

Choosing the right tools was very important. I didn't just move my blog; I made it better.

  • Vercel: Vercel created Next.js, so it is the best place to host it. It makes my blog load very fast for everyone around the world. I also use Vercel Analytics and Speed Insights. They show me how many people visit my site and how fast it is, without making the site slow.
  • Next.js & MDX: I needed a tool that could handle many articles and still be fast. Next.js does this very well. Using MDX means my articles are like code. I can put interactive parts, like demos or videos, directly inside my tutorials.
  • Kit: A newsletter is very important for a creator. Kit's technology is excellent. Now, I can build a custom signup box and use a "Full Content RSS Feed." This means my weekly newsletter is sent automatically with the full text of my articles.

3. Seeing Everything: Analytics and Speed

A big advantage of Vercel is that it has analytics built-in. Before, I had to use heavy tools that made the site slow. Now, everything is integrated:

  • Vercel Analytics: I can see which articles people like the most in real-time. It respects the privacy of my readers and does not slow down the site.
  • Speed Insights: This tool is amazing. it monitors how fast the site is for real users. If an article becomes slow because of a big image, I see it immediately and can fix it.
  • Easy Setup: I don't need to add complicated code. It is part of the platform, so it doesn't make my website "heavy."

Moving the text is easy; keeping your visitors is hard. I didn't want to break the links that Google already had in its search results.

Fixing "Double Name" Errors

During the move, I found an error where image names were doubled (like /images/posts/name-name/cover.png). I had to use a script to fix all my files so the images would show up correctly.

Handling Redirects

To prevent "Page Not Found" (404) errors, I created a list of redirects. For example, I sent everyone looking for old "tag" pages to my new "series" pages. This way, old links still work.

Cleaning Up MDX

Moving all my posts from a CMS (like Hashnode) to MDX is not just copying and pasting. I had to fix many small errors and replace old codes with new React components. It took some time, but it was necessary to make the site work.

Google Search and YouTube

I wanted my content to be easy to find on Google.

  • YouTube: I made a special tool for YouTube videos. It tells Google exactly what is in the video so it can show up in search results.
  • Unsplash Images: To give credit to photographers, I made a tool that automatically shows the photographer's name for Unsplash images.

5. Automating My Newsletter with Kit

A blog needs a newsletter. Moving to Kit was very easy. I moved all my subscribers without any problems, so my 13.8K readers still get my updates.

I also fixed the "RSS Feed." Most blogs only show a small part of the article in the email. I changed mine so the entire article is sent to my readers' inboxes. This is much better for the user.

Conclusion

Moving everything was a lot of work, but now my blog is faster, more personal, and 100% mine. If you want to move your blog to your own platform, remember: focus on your links first, and the design second.

Are you planning to move your blog? Let me know on Twitter!


Real Software. Real Lessons.

I share the lessons I learned the hard way, so you can either avoid them or be ready when they happen.

User avatar
User avatar
User avatar
User avatar
+13K

Join 13,800+ developers and readers.

No spam ever. Unsubscribe at any time.

Discussion