Back to the blog

Shipping Static Sites with Nuxt

How I generate and deploy a Nuxt site to GitHub Pages with predictable routes and content.


Shipping Static Sites with Nuxt

Nuxt’s static generation fits portfolio and blog sites well: fast pages, simple hosting, and no server to babysit. Here is the workflow I use for this site.

Generate, don’t guess

Treat nuxt generate as the source of truth for what will go live. Local npm run generate should match CI closely—same Node version, same env vars, same content files.

For this project, blog routes are derived from a JSON index so prerender knows every post path ahead of time. That avoids “works in dev, 404 in production” surprises.

Content as files

Markdown in content/blog/ keeps posts reviewable in git. A small script turns those files into JSON the pages can fetch at build and runtime. The pipeline is:

  1. Write or update a markdown post
  2. Run the blog JSON updater
  3. Generate the static site
  4. Deploy the output folder

Keeping content and the generated index in sync is more reliable than relying on runtime markdown parsing on a static host.

Trailing slashes and base paths

GitHub Pages and static hosts are picky about URLs. Decide early:

  • Trailing slash policy (/blog/ vs /blog)
  • Whether the site lives at the domain root or a project subpath

Then configure Nuxt once and stick to it. Mixed link styles are a common source of broken navigation after deploy.

Wrap-up

Static Nuxt ships best when generation is boring and predictable: content in git, routes enumerated, build identical in CI and locally. The less special-casing you need at deploy time, the fewer late-night 404s you get.