Moving personal blog from Eleventy to Nuxt Content

Why move?#

What else to do on vacation besides relaxing? Of course — the long-planned move of a personal blog to Nuxt Content.

Some time ago I decided to move from Eleventy and looked at Next.js, Nuxt and Astro. In the end, I chose Nuxt because I just wanted to be closer to the current Vue.js working stack. And there is also Nuxt module Nuxt Content, which allows you to organize file-based CMS and work with a directory of markdown files.

Nuxt itself fascinated me by its relative simplicity and the ability to easily configure SEO optimization for search engines. Working with Drupal I had to spend a lot of time on the boring customization of meta tags and microdata, so in the new engine I wanted to reduce the time of SEO configuration to a minimum and concentrate on the process of working on the blog itself.

What was wrong with Eleventy?#

In Eleventy version 0.X I had to use a lot of tricks to make internationalization (i18n) work properly. I can also mention the awkward handling of templates and CSS files for separate components.

I haven't looked into how things are in Eleventy 1.X version. I remember that the main plugin, which was used for i18n, was long abandoned and not supported. I didn't want to go through those tricks again, so I decided to change the stack.

Main Nuxt Content Challenges#

i18n#

It was not easy to set up the i18n correctly. It is not obvious from the documentation that language settings have to be added in 3 places simultaneously: @nuxtjs/i18n is configured separately, there is a separate configuration file for Vue I18n. And you should also not forget to add language switching in Nuxt Content. Moreover, settings such as language list and default language should be written 3 times. In fact, these settings overlap. Why not unify it is beyond comprehension.

RSS feed#

I couldn't find a working module that does all the magic, so I had to write the data fetching for RSS manually. Soon I plan to publish the solution in a separate article. In this article I described how to attach an RSS feed to a site powered by Nuxt Content.

Sitemap#

With the sitemap.xml implementation I tried several third party modules and only one of them worked. I had to tweak the settings a bit, but in the end it all sorted out.

Duplicate pages with a trailing slash#

In Nuxt 3 there is no easy way to redirect from links with a trailing slash as in Nuxt 2, and the redirect with Netlify did not give a 301 code for the page. I had to write a separate middleware for this. Here's a link to the post with the solution.

What I liked about Nuxt#

Handling i18n#

After some customization, everything starts to work very well. Other modules for SEO — Sitemap, Schema.org, pick up the language settings and do all the magic under the hood. In Eleventy you had to do it manually.

Working with Content#

This is no different from working with content in Eleventy. Except for the special MDC syntax, which allows you to inject Vue components directly into markdown files. In the settings, you can enable Document-Driven mode, which means that you don't need to write data requests. Nuxt Content does it on its own, you just need to specify which folder to get the data from. In my case, this mode didn't work. As far as I understand, it works only for very simple sites, without i18n support.

Handling images#

The Nuxt Image module comes in handy for this. It is a great solution for optimizing and scaling images. It automatically compresses, crops images and puts them into separate cache folders on the server. All the magic is done in build mode.

So far I haven't dug in the direction of converting images to webp, avif. I will definitely do it in the future.

Schema.org#

A module for Schema.org greatly simplifies handling microdata. Templates for most schemas are available, you only need to specify the basic values and the module will do the rest.

Server Side Rendering#

Improves site performance and makes it optimal for SEO optimization.

Color mode#

Using color schemes in Nuxt is easy. The Nuxt Color Mode module is used for this purpose. After a simple customization, everything works like a charm. In Eleventy you had to write the theme switching manually.

CI/CD.#

Great integration with Netlify. Basically you don't need to do anything, just specify a Git repository and it all happens automatically.

What I didn't like about Nuxt#

• There are a lot of modules in the catalog. Some of them work, some of them don't. Part of them have been dead for a long time, although they still work (for now). It is not always stated for which version of Nuxt this module is written, so you have to dig into the source code every time and check it out.
• Non-obvious i18n configuration. Repeating settings in 3 places.
• When switching i18n, there were problems with initialization of third-party scripts and Vue plugins. I have partially solved it.
• There is no easy way to make redirects from links with a trailing slash out of the box, as was in Nuxt 2. The existence of such duplicate pages has a negative impact on SEO.

Summary#

Nuxt Content is a very nice solution for a Git-based blog. New functionality can be easily extended by third-party modules or added manually. I didn't notice any differences with Eleventy in terms of blog performance — server side rendering does its job. A big plus of Nuxt is the ability to add dynamic content — ratings or comments.

Unlike Eleventy, Nuxt has a higher entry threshold. If an ordinary front-end developer can create a blog on Eleventy, for Nuxt it is necessary to understand server-side rendering and at least the basics of working with Vue.js.

More information about Nuxt and Nuxt Content can be found on the official sites.

References:

• Eleventy — try to find the documentation button here, I hope you can do it 😃
• Nuxt
• Nuxt Content