Blog.

Hello Next.js, goodbye Hexo

Marco Franssen

Marco Franssen /

5 min read1002 words

Cover Image for 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.

You have disabled cookies. To leave me a comment please allow cookies at functionality level.

More Stories

Cover Image for Upgrade your SSH security

Upgrade your SSH security

Marco Franssen

Marco Franssen /

As a DevOps engineer you are probably familiar with SSH keys and how to use them already. I wrote some blogs on SSH in the past as well see the references. This time I want to zoom in a bit on the encryption strength of your keys and the encryption types you can use. Why should you care about this? In todays world password are becoming more and more a security risk. In the near future Github for example will not support password authentication anymore for clone, push and pull actions, just lik…

Cover Image for How to do Enums in Go

How to do Enums in Go

Marco Franssen

Marco Franssen /

It has been a while since I wrote a blog on Go. Since I'm getting the question if Go supports enums every now and then, I thought it would be good to write an article on how to do enums in Go. Go natively does NOT have an enum type like you might be used to from c# or Java. However that doesn't mean we can easily define our own type. In this blog we will cover defining our own type, combined with a piece of code generation. If you are new to Go, then consider reading Start on your first Go pro…

Cover Image for Remove files from Git history using git-filter-repo

Remove files from Git history using git-filter-repo

Marco Franssen

Marco Franssen /

Many of you have probably been in a situation where you committed a file in your repository which you shouldn't have done in the first place. For example a file with credentials or a crazy big file that made your repository clones very slow. Now there are a lot of blogs and guides already available on how to get these files completely removed. It involves git filter-branch or bfg sourcery. In this blog I'm going to show you the new recommended way of doing this using git-filter-repo, which sim…

Cover Image for Nginx 1.19 supports environment variables and templates in Docker

Nginx 1.19 supports environment variables and templates in Docker

Marco Franssen

Marco Franssen /

In this blog I want to show you a nice new feature in Nginx 1.19 Docker image. I requested it somewhere 2 years ago when I was trying to figure out how I could configure my static page applications more flexibly with various endpoints to backing microservices. Back then I used to have my static pages fetch a json file that contained the endpoints for the apis. This way I could simply mount this json file into my container with all kind of endpoints for this particular deployment. It was some s…