NuxtWebsite

NuxtWebsite is a boilerplate for building websites with a blog feature, pairing Nuxt.js with the Storyblok CMS and Netlify deployment.

What is NuxtWebsite?

NuxtWebsite is a work-in-progress (WIP) Nuxt.js setup that creates websites with a blog, using Storyblok as the headless CMS and Netlify for deployment. It takes content managed in Storyblok — specifically posts and authors — and generates static HTML pages via Nuxt's generate command. The project includes a live preview at http://quizzical-wing-54a27d.netlify.com/ and its build commands are documented in the README.

Key Features

• Nuxt.js project setup — Comes with standard npm scripts: npm install for dependencies, npm run dev for hot reload at localhost:3000, npm run build and npm start for production, and npm run generate for static output.
• Storyblok CMS integration — Basic Storyblok setup with editable post and author details, live preview, and side-by-side editing enabled for content editors.
• Blog and author pages — Includes a startpage, post detail, post overview, author detail, and author overview; posts link to a single author using Storyblok's "Link" field, and author pages automatically list their posts via filter_query.
• Autogenerated overviews — Post and author overview pages are generated automatically from Storyblok content using resolve_links to resolve author links.
• Image optimization — Images are automatically optimized through Storyblok's Image Service, including images embedded in Markdown content.
• Static site generation — Implements nuxt generate to produce static routes, making the site ready for Netlify deployment.
• Basic layout components — A basic header and footer are included, with a footer link to GitHub and responsive styling.

Who is it for?

• Developers starting a Nuxt.js blog — Use this boilerplate as a scaffold to avoid wiring Storyblok and Netlify from scratch.
• Teams using Storyblok as a CMS — The setup provides editable content structures and live preview, suitable for content editors.
• Static site deployers on Netlify — The project is configured for Netlify deployment, with a live demo already published.

What can you do with NuxtWebsite?

• Publish a blog with structured authors — Create posts and author pages in Storyblok, with each post linked to exactly one author, and have overview pages generated automatically.
• Edit content with live preview — Use Storyblok's side-by-side editing to preview changes in real time before publishing.
• Deploy a static site — Run npm run generate and deploy the output to Netlify or any static hosting service.

How does NuxtWebsite work?

The workflow starts in Storyblok, where posts and authors are managed. Nuxt fetches that content and generates static routes using nuxt generate. For local development, npm run dev serves the site with hot reload; for production, npm run build followed by npm start launches a server. The project also uses Storyblok's image service to optimize images on the fly.

Pros and cons

Pros

• Simple, documented setup that combines Nuxt.js, Storyblok, and Netlify with explicit npm scripts.
• Publicly available on GitHub, so the code can be cloned or referenced.
• Includes a range of blog features such as author pages, post overviews, and live preview.

Cons

• Marked as WIP: several items remain on the todo list, including a maintainable header, variable-based styles, switch from draft to published content on generate, seed components, and a seed script.

FAQ

Is NuxtWebsite free?

The project is publicly hosted on GitHub, so the code is available for you to clone or reference. The README does not specify a license, so check the repository for licensing details before reuse.

What CMS does NuxtWebsite use?

NuxtWebsite uses Storyblok as its headless CMS. The setup includes editable post and author details, live preview, side-by-side editing, and use of Storyblok features like resolve_links and filter_query.

Can I deploy NuxtWebsite to Netlify?

Yes, Netlify deployment is included, and a live preview is available at http://quizzical-wing-54a27d.netlify.com/. Use npm run generate to produce the static files for deployment.

What features are still missing in the WIP version?

According to the README's checklist, unfinished tasks include a maintainable header, exporting basic styles into variables, switching from draft to published content when generating, seed components, a seed script, and a getting started guide.

How do I start developing locally?

Run npm install to install dependencies, then npm run dev to serve with hot reload at localhost:3000. For a production build, use npm run build and npm start. To generate a static project, use npm run generate.