Coding, Smart Home, other tech stuff

How this blog works under the hood - Part 1

From planning to deployment

Nuxt 3

I always wanted to start my own blog as a way to organize my thoughts and opinions on tech stuff and the experiments they led to.

After fiddling around for some time, I came to the conclusion that I want my setup to look as follows:

  • Should be deployable on Microsoft Azure (because I already have a subscription there)
  • Should be able to deploy from git-commits
  • Should offer the ability to write content using Markdown
  • There should not be a need for a database
  • Should be able to generate static sites at build-time
  • Should use a brand new technology

I decided to evaluate the last point first, because it would have a huge impact on most of the others. Having experience in using Angular, my first thought was to use it together with Angular Universal to enable server-side rendering and even pre-rendering to static pages.

As a dad of a little boy, I didn't have the time to start my new blog project immediately. So, a few days went by and I started to think, that I want to try something new. I did a lot of projects in PHP using Laravel. Laravel always had strong support for using React or Vuejs as a frontend. I cannot explain why, but I somehow dislike React and using JSX, mixing JavaScript and HTML. It kind of looks strange to me and this is the simple reason why I decided to give Vuejs a try. It gets described as The Progressive JavaScript Framework on their website.

You might think now: Vuejs is a framework used to write SPAs (Single Page Apps) that usually rely entirely on client-side rendering. And you are right!

Time to introduce you to NuxtJS (or short: Nuxt). As with Vuejs 3, Nuxt 3 is a complete rewrite of the framework using TypeScript. Nuxt 3 is currently in RC-stage, but expected to have a final release later this year. So why did I choose Nuxt as my companion?

  • Build with TypeScript and allows using TypeScript
  • Enables serverside-rendering (SSR) and static site generation (SSG)
  • Great support in my favourite IDE for web development, Visual Studio Code (Volar extension)
  • Use of single file components (SFC)
  • Has lots of extremly useful and convenient plugins

Come back for my next post, where I am going to show you, how I am using the Nuxt Content plugin, to generate pages and content by simply writing Markdown files!

Like what you are reading?

© 2024