Hello Next.js, goodbye Hexo

For the folks reading my blog for a long time, you might have noticed I'm using my current theme and blogging engine for a long time. About 5 years ago I migrated from Wordpress to Hexo. Wordpress at that point in time was costing me serious money to get a decent performing webpage according to modern standards. So back then I decided to move into a statically generated blog, where I could write my blogs offline using markdown.

Hexo has served me very well the last couple of years. It is a static blog engine that allows you to generate your pages from markdown files. So all I required was a simple and cheap web-hosting that could serve these static files. When I migrated from Wordpress to Hexo I also found a port of the original Hueman on which I have been contributing in last five years to bring in features like PWA.

As most of you know I'm a huge fan of Go as well, so for a while I was thinking about migrating my blog to Gohugo to generate a new version of my Blog. What held me back was the amount of work it would take me to migrate the theme. Then somewhere last November I had another look on Next.js that improved and matured a lot since release 10.0. Including really cool features like Server Side Rendering, Static Generated Pages and ability to add serverless functions to run an API. All of this made me decide to give Next.js a try. Combined that with the out of the box zero configuration hosting on Vercel, and the big community around React I thought this would be a future proof move that can survive for a couple of years giving my readers improved performance and experience.

In December I took the bald decision to finally start the work and dedicate some evenings to make it happen. As it goes with most things I started very enthusiastic with migrating my blog. Within a couple of hours I took one of the examples on Next.js and loaded a couple of last years blogs into this template.

Happy with the results I started to create a list with features on my old blog I wanted to migrate and realized that I only finished 80% of the work in 20% of the time. Some things took me more time then initially anticipated. Next.js for example doesn't support Server-side Rendering combined with Static Page Generation of XML files just as easy as you have with all the React pages. So there it took me more research on implementing this, eventually I decided to leave SGR out and add that at a later stage.

Also I didn't want to migrate every blog post by hand, so I started to work on a migration script that replaces Hexo specific snippets with React components. Examples of these are code blocks loaded from a file, or citations. For this I utilized some libraries from https://remark.js.org. Super powerful and amazing things I already achieved with this, but still some small work to do by handling some stuff with incompatible markdown in some of my blogs.

Now couple of weeks later, with a lot of fun in weekends and evening hours 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 some more blogs on some specifics of the migration steps I took. But for now I provide you with a list of the work I did.

Work already done

• Add SEO capabilities
  • Sitemaps
  • OpenGraph
  • JSON+LD
• Use next/image React component for optimized image loading
• Added the about page
• Added a blog page
  • Added pages to show posts in categories and tags
  • Implemented search feature
• Integrated Google Analytics and Google Adsense
• Migrated my Resume build using this JSON standard https://jsonresume.org
• Migrated my Git Recipes
• Utilize tailwindcss to style my components and replace example CSS
• Improved the layout and styling a bit more to my liking
• Probably a lot of tiny stuff I now am forgetting about…

Work still to be done

• Integrate Disqus to provide a comment feature
• Finish migration script for existing blog posts
  • markdown cleanups
  • replace Hexo snippets with new React Components.
  • replace HTML styles with React styles
  • replace internal links with next/link
• Implement Atom feed
• Add social icons in the layout with links to my social profiles
• Implement a list of permanent redirects for pages that will change URL or are removed
• include file titles at top of codeblocks
• Add custom 404 page
• Migrate favicons
• Finish PWA and serviceworker implementation for offline capabilities and performance improvements
• Further improve and tweak the layout of the pages

Once I have a good enough version ready I will migrate my blog. Depending on my time that will be in the next couple of 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 above topics regarding the migration should I cover in a next blog post? Please let me know in the comments or send me your suggestions on Twitter.