Generating a standalone website
We now have a functional portfolio. This type of website has very static content: it doesn’t change depending on the visitor and will probably not receive daily updates in terms of code! This means that we can optimize the output of what we will deploy to the public.
The portfolio we’ve created is a perfect use case for static site generation. Normally, Nuxt would run as an active process on a server, where it can respond directly to requests and fetch data in real time. A good example is the Quiz server we built in Chapter 8. But since we don’t need real-time data when publishing, we can leverage another capability of Nuxt. When generating a static site, Nuxt runs as an application initially and indexes all of the internal links. For every internal link, it will retrieve the data from the server once and then write the output to a static collection of files.
Let’s see this in action! The command is already part of our package.json scripts, but we need to slightly modify it so that we can pass the API key we need to access the data:
… "scripts": {
"build": "nuxt build",
"dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 nuxt dev --dotenv .env --https --ssl-cert localhost.pem --ssl-key localhost-key.pem",
"generate": "nuxt generate --dotenv .env",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
…
We can just run the following command in the terminal:
npm run generate
You will see that the required files for a static site are being generated. On completion, the Nuxt generation process will return a command you can use to test the website as a static site:
npx serve .output/public
Running this command will start a simple HTTP web server. There is no Nuxt process running! This is just the browser running HTML, CSS, and JavaScript files. All of the contents from the CMS are now bundled as part of the website. Well, except for the images – they are served from the Storyblok CDN, which is optimized for doing just that.
We’ll see how we can make our static site public in the next section!
