Overview:

The Nuxt starterkit is a demo website that heavily borrows from two different repositories to provide improvements in functionality. It uses StoryBlok, a headless CMS, for content management and static site generation. The code has been modified to use Tailwind and PostCSS instead of SASS and Bootstrap. The starterkit provides a guide for setting up the demo site on Storyblok, building and editing the site locally, and deploying it to Netlify.

Features:

• Static site generation with payload
• Use of a Vuex store for state management
• Integration with StoryBlok CMS
• Migration from SASS and Bootstrap to Tailwind and PostCSS
• Command-line interface using Yarn
• Support for both Single Page Application (SPA) and static generated HTML

Installation:

1. Set up a demo site on Storyblok:

   • Go to storyblok.com and choose “Create new space”
   • Select “Play with a demo” and wait for the demo to be created
   • Get the preview key by going to “Settings” > “API Keys” > “Preview Key”
   • Add the preview url by going to “Settings” > “General” > “Preview Urls” and adding “http://localhost:3000”

2. Download or clone the code to your own computer:

   • Set the Storyblok token in the nuxt.config.js file by changing the STORYBLOK_TOKEN value or using an environment variable.

3. Building for development:

   • Run yarn dev to start the site locally in Single Page Application (SPA) mode with auto updates on code changes.
   • Run yarn static to serve statically generated HTML and emulate production.

4. Editing content:

   • Start the site locally at http://localhost:3000 and go to storyblok.com.
   • Go to the demo space you have created and navigate to “Content” > “Home”.
   • Change the Preview url to the localhost option using the navigation dropdown.
   • Verify that it is working and make any necessary changes.

5. Deploying to Netlify:

   • Set up a webhook to keep the generated files up to date with the latest content.
   • Create a site on Netlify and connect it to your repository.
   • Set the build commands by adding the following:
     • Build Command: yarn generate
     • Folder: dist
   • Add the Storyblok Preview Key as an environment variable under “Advanced” > “STORYBLOK_TOKEN”.
   • Deploy the site and verify the deployment.

6. Possible deployment strategies:

   • Single site: Use the preview key and run yarn generate for both editing and delivery. Note that this exposes the preview key, which may or may not be a concern.
   • Separate edit and delivery sites:
     • Delivery site: Use the published key and run yarn generate.
     • Editing site: Run yarn build --spa and yarn export to not use static generation, and use the preview key.

Summary:

The Nuxt starterkit is a demo website that provides improvements over the base versions of the repositories it borrows from. It utilizes StoryBlok as a headless CMS and static site generator and includes features such as static site generation with payload, a Vuex store for state management, and integration with StoryBlok CMS. The code has been modified to use Tailwind and PostCSS instead of SASS and Bootstrap. The installation guide provides steps for setting up the demo site on Storyblok, building and editing the site locally, and deploying it to Netlify. Overall, the Nuxt starterkit offers a convenient and efficient way to create and manage websites.