Building JAMstack blog with Nuxt.js

Mar 16, 2021 Nuxt.jsJAMstack

Recently, I migrated my personal blog to the JAMstack site powered by Nuxt.js and my custom headless CMS. In this post, I will show you how to build a blazing fast JAMstack blog with Nuxt.js.

TL;DR

What is JAMstack?

image

JAM stands for JavaScript, APIs, and Markup. It's a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup (HTML).

With JAMstack, the entire front end is prebuilt into static pages during a build process. Those static HTML files and assets are served from a CDN without the need of app servers and databases. While HTML files are served directly from a CDN, dynamic functionalities are handled by JavaScript and APIs.

Why JAMstack?

There are several advantages of building websites with JAMstack.

Better performance 🚀

In terms of page speed, nothigng beats serving static files via a CDN.

Cheaper and scalable 💸

Hosting of static files on a CDN are cheap or even free for personal use. Also, you don't need to worry about scaling app server or database.

More secure 🛡

By serving prebuilt pages without backend server and database, you don't need to worry about server or database vulnerabilities.

Tools for JAMstack

Static Site Generator

Headless CMS

CDN

JAMstack with Nuxt.js

architecture

  • Nuxt.js
  • Tailwind CSS
  • Custom Headless CMS
  • Netlify

nuxt generate

Deploy to Netlify

Webhook

Caveats

avatar

About Me

I am a software engineer from Japan and currently based in Singapore. Over the past 5 years, I've been creating e-commerce and FinTech web applications using Laravel, Angular, and Vue.js. Making clean, maintainable, and scalable software with agile methodology is one of my biggest passions. Im my spare time, I play the bass and enjoy DIY.