Migrating my blog from Hexo to Next.js
Marco Franssen
5 min read•911 words
Loading...
Blog.
Loading...
Marco Franssen
If you've been reading my blog for a while, you might have noticed that I've stuck with the same theme and blogging engine for years. About five years ago, I migrated from WordPress to Hexo. At the time, WordPress was costing me serious money to get a site that performed well by modern standards. So I moved to a statically generated blog, where I could write posts offline in Markdown. Now I'm making another move: from Hexo to Next.js.
Hexo has served me very well over the last few years. It's a static blog engine that generates pages from Markdown files, so all I needed was simple, cheap hosting to serve them. When I migrated from WordPress to Hexo, I also found a port of the original Hueman theme. I've contributed to it over the last five years, adding features like PWA support.
As most of you know, I'm also a huge fan of Go, so I'd been thinking about moving my blog to Hugo. What held me back was the work involved in migrating the theme. Then, last November, I took another look at Next.js, which had improved and matured a lot with release 10.0. It offered some really cool features, including server-side rendering, static page generation, and serverless functions for running an API. Those features convinced me to give Next.js a try. Add the out-of-the-box, zero-configuration hosting on Vercel and the large React community, and it felt like a move that could serve me for years while improving performance and the experience for my readers.
In December, I made the bold decision to get started and dedicate a few evenings to the migration. As with most things, I started enthusiastically. Within a couple of hours, I'd taken a Next.js example and loaded a few of last year's posts into the template.
Happy with the results, I made a list of features from my old blog that I wanted to migrate. That's when I realized I'd finished 80% of the work in 20% of the time. Some things took longer than I'd anticipated. For example, combining server-side rendering and static generation for XML files wasn't as straightforward in Next.js as it was for React pages. That took more research, and I eventually decided to leave SGR out and add it later.
I also didn't want to migrate every post by hand, so I started writing a migration script to replace Hexo-specific snippets with React components. Examples include code blocks loaded from files and citations. For this, I used libraries from https://remark.js.org. They're super powerful, and I've already achieved some amazing things with them, though there's still a little work to do to handle incompatible Markdown in some posts.
Now, a few weeks later, after a lot of fun on weekends and evenings, I can share a preview of my new blog.
https://nextjs.marcofranssen.nl
It would be great to get some feedback on my progress, while I continue to finish the migration.
Please leave me a comment on this article or share your opinion with me on Twitter.
I'm planning to write more posts about specific migration steps. For now, here's a list of what I've done.
next/image React component for optimized image loadingnext/linkOnce I have a good enough version ready, I'll migrate my blog. Depending on how much time I have, that should be in the next few weeks.
In the meantime, please let me know what you think of my new blog. Do you experience any bugs? Do you see any user experience improvements I could add? Are there features from my old blog you really miss?
Which of these migration topics should I cover in my next post? Let me know in the comments or send me your suggestions on Twitter.
Marco Franssen
Compare SSH key algorithms, generate RSA and Ed25519 keys with passphrases, and configure your SSH client while migrating away from older keys.
Marco Franssen
Build enum-like types in Go with iota, generate String methods with stringer, and marshal and unmarshal named values as JSON strings.
Marco Franssen
Remove unwanted files from Git history with git-filter-repo, find previously deleted files, and push rewritten history using this practical walkthrough.
Marco Franssen
Configure a React app in the Nginx 1.19 Docker image with environment variables and templates, including API proxy settings for different deployments.