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:
- Write or update a markdown post
- Run the blog JSON updater
- Generate the static site
- 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.