Creating a Static Blog with Nuxt

There comes a time when we finally get around to setting up that new blog/site that we have always wanted to create. For whatever reason we may have wanted to create one, to market oneself, to have an online journal, to publicly display and talk about our portfolio, to consolidate the engagement we get online, etc., the hardest part can be figuring out how we want to host or deploy it. So in this post I am going to talk about my thought process and how I went about it

Choosing Nuxt

Over the past 5 years, I have worked extenively in Vue and Nuxt and I love both frameworks. Vue, in my opinion, lowers the barrier of entry to modern web design as we know it compared to other popular web development frameworks like React and Angular. Nuxt is built on Vue to host a Server-Side Rendered version of your Vue web app, but we're here to talk about static sites. Over the years, Nuxt's static site generation has gotten better and better. This site was entirely built with Nuxt and some of Nuxt's official modules or "add-ons".

Installing Nuxt

To install the latest and most powerful version of Nuxt (v3) start by following Nuxt's installation guide here or just follow along below:

npx nuxi init nuxt-app
cd nuxt-app
npm install
npm run dev

Choosing Content

Tada 🎉, we have a working Nuxt web app! But out of the box, Nuxt does not give us good tools to write blog content. If we take a look at modern blog examples, each paragraph, heading, list, code block, etc. is wrapped with some html and styling. Just imagine having to wrap every single piece of your content with html code every single time! Seems tedious, right? We want some kind of add-on that allows us to write in plain-text or more specifically markdown that will get converted to HTML on build. We're in luck! There is an official Nuxt package that we can use called @nuxt/content.

Installing Content

You can install @nuxt/content by following the installation guide for Nuxt v3 here or you can follow along below:

npm install --save-dev @nuxt/content
cd nuxt-app
npm install
npm run dev

Then, add @nuxt/content to the modules section of nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt'export default defineNuxtConfig({      modules: [            '@nuxt/content'      ],      content: {            // https://content.nuxtjs.org/api/configuration      }})

Create a catch-all document in your pages/ directory called [...slug].vue and add the following code:

<template>    <main>            <ContentDoc />      </main></template>

Place your markdown files inside the content/ directory in the root directory of your project.

# Hello Content

If your app is still running in development, you should be able to now route to the title of the markdown file in your local dev server. For more information about how routing works with @nuxt/content check the content directory docs.

Final Build

In order to generate your full static site you will need to run nuxi run generate. You may notice that some of your content files are not included in your final build.

This is because, by default, @nuxt/content does not build any files within content that are not referenced anywhere else in your project meaning you must use a NuxtLink or a direct link to it somewhere in your project. To get around this you can add each file that you want to include in your nuxt.config.ts file. This is not ideal and in a later post we will automate this and add new features.

Deployment

There are a couple of ways that you can deploy your app to the web. The easiest of these is to follow Nuxt's guide on pushing apps. In a later blog post, we will go over nginx configurations that will allow us to serve our content much faster than these methods can.