My previous post explained why I am done with React and why I decided to migrate my website to Nue.js. In this post, I will document the steps I took to migrate my website from Next.js to Nue.js.
Migrating the posts
Since the posts are the most important part of my website, I decided to migrate them first.
I created a new Nue.js project with nue create blog, and the whole structure was already there. I just had to make some adjustments:
- I decided to create a folder for each post with an
index.mdfile and the images (if any) inside it. - I moved the posts from the old website to these folders and renamed the files accordingly.
- I added a date field to the metadata header of each Markdown file.
- I had to make some small adjustments to the styles of the posts.
- I optimized the images, which were unoptimized on my old website.
- Fixed some typos in the posts (bad bad bad).
On this occasion, I didn’t change any styling. So my blog looks pretty much like the Nue.js website, which I assume uses the default Nue.js styles.
Other than that, the default configuration of the Nue.js template already covers the basics of having a working blog.
Met the creator
During this time, I joined the Nue.js Slack channel and talked with the creator of Nue.js, Tero Piirainen. He is an amazing and polite guy, with an incredible vision.
I was struggling with a component to format dates in my posts. And we figured out that the docs of Nuedom were wrong. We figured it out together and Tero fixed the docs. Easy like that!
I strongly recommend joining the Slack channel and getting in touch. The community is friendly and helpful.
The first commit
I made the first commit with the basic structure that came with the template and the Markdown files of my posts.
The only configuration file is site.yaml. No Biome, no Next, no Prettier, no Tailwind, no other configs. I also decided to go lean and use some formatting provided by the editor itself (Zed in my case). Another option is to use the EditorConfig extension for VS Code or any other editor and have a configuration file at the root of the project. I opted out of using it.
My first and foremost priority in this migration is to avoid falling for the trap of Node.js and node_modules. I want to keep my dependencies to a minimum and avoid unnecessary bloat.
Done already? OMG!
Well, that was fast.
I literally created a couple of CSS files, added some markup to index.html, customized the styling a bit, added my profile and favicon, and I was done!
I don’t have much else to say, really. I had to make a detox of Tailwind, for sure, and go back to writing pure CSS, which was refreshing. I was rusty. Tailwind makes us lazy.
The same functionality my website had is done with fewer than 10 files, if you don’t consider the posts. Everything is written according to standards, with pure JavaScript, CSS, and HTML knowledge. That’s neat!
What’s more important about this is that there are no node_modules or weird, non-standard dependencies. Only Nue.js and its core, standards-based structure.
Server vs Dynamic pages
This is one of the things that confused me the most.
Nue.js will render HTML documents on the server if it detects no dynamic content in them. Dynamic content is anything that depends on browser behavior to work, such as a button click or a form submission.
You can also tell Nue.js how to treat your HTML:
<!doctype html>is a server file.<!doctype dhtml>is a dynamic component.<!doctype libis a library of components and layout modules.
If you try to use a client-side API such as localStorage in server-rendered HTML, you will see an error in the console. So try to be mindful of where to use certain APIs.
The Nue.js docs on HTML file types go into detail about this subject.
Deployment
The website is migrated, and now it’s time to pick a host for serving it.
I asked Tero himself if he had any recommendation for hosting, and he indicated Cloudflare. Since my domain and DNS are there, I decided to follow his recommendation.
In fact, Cloudflare Pages makes it so ridiculously simple that, to test it, I was just building the Nue.js application locally, making a zip file with the assets, and uploading it. And that’s it. The website was online. This, of course, assumes that the website is static. I haven’t tried deploying it as an application with a server.
After this, I will set up an automatic connection with GitHub to deploy from the main branch.
Conclusion
I’m quite surprised by how easy this was. Nue.js brings us back to standards and does so in such a friendly and familiar way that it is almost shocking.
No node_modules, no non-standard libraries, no formatters and linters, no complexity. It’s just simple, standard, browser support at its best.
I will certainly expand my blog with other functionalities. It will be interesting to implement them with Nue.js. I will also make my best to be an active supporter and contributor of Nue.js, because I truly believe in its mission and its purpose.
Stay hydrated, stay safe.
