Beginner's Guide to Static Site Generators Part 3

6. Nuxt

Last updated: October 24, 2020

Reviewed by:

 

This project, which started as an experiment for an e-commerce site, has become a high-level framework for productive Vue applications. This prototype was publicly released a few weeks after the first official release of Next.js. Nuxt was created to solve many of the issues that Next is doing for React when building apps for Vue. Today, based on well-researched best practices, the most important elements and intelligent default values are pre-set to provide the best experience for end users.

 

When it was first released, Nuxt was surprisingly lightweight and could only be installed as a template on top of Vue CLI, a command-line interface that assists with application development. However, it already had the ability to do server-side rendering and generate static websites.

 

6－1 Nuxt 1.0

Released with the help of several additional contributors on January 8th, 2018 and now hosted on Now (Vercel). Their documentation is built with Nuxt.js itself and has already been translated into 6 languages at the time of this release. It includes various new features such as layout switching and middleware enhancements.

 

6-2 More opportunities in 2020

In May, NuxtJS announced that it has completed a $2 million seed round. The developers of the Nuxt.js framework have also stated that Nuxt.js will always be open source and a community-driven project. For the latest updates, please check the blog.

 

6-3 File Configuration

├── assets │   └── README.md ├── components │   ├── Logo.vue │   └── README.md ├── content │   └── hello.md ├── layouts │   ├── README.md │   └── default.vue ├── middleware │   └── README.md ├── pages │   ├── README.md │   └── index.vue ├── plugins │   └── README.md ├── static │   ├── README.md │   └── favicon.ico ├── store │   └── README.md ├── README.md ├── jsconfig.json ├── nuxt.config.js ├── package-lock.json └── package.json

 

This is the approximate default structure determined by how you answer the setup questions when using create-nuxt-app. Each directory contains a README.md file that explains what should be placed inside, as well as links to documentation.

 

There is a directory called "content" within the above structure, but this may seem a bit ambiguous. This was added because we chose to install the Nuxt Content module, which is a git-based headless CMS. We will explain how to retrieve and use content from hello.md later.

 

6-4 Data Acquisition

Here, we will introduce a basic example of retrieving data from Contentful. First, you need to install the Nuxt module. Additionally, the dotenv module is necessary for managing local environment variables for security purposes. Nuxt has added .env to .gitignore by default.

 

npm install contentful-module @nuxtjs/dotenv

 

Next, set the secret key in the .env file located in the project root.

 

CONTENTFUL_SPACE_ID=123 CONTENTFUL_ACCESS_TOKEN=abc

 

And then, inform Nuxt about it and add Contentful settings to nuxt.config.js.

 

require('dotenv').config()  export default {  env: {    CONTENTFUL_SPACE_ID: process.env.CONTENTFUL_SPACE_ID,    CONTENTFUL_ACCESS_TOKEN: process.env.CONTENTFUL_ACCESS_TOKEN  }, contentful: {    default: 'master',    activeEnvironments: ['master'],    environments: {      master: {        space: process.env.CONTENTFUL_SPACE_ID,        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,        environment: 'master'      }    }  },  modules: [    'contentful-module'  ],  build: {    transpile: ['contentful-module']  }

 

Finally, retrieve the data within the page.

 

export default {  async asyncData ({ app }) {    const data = {}    await app.$contentful.client.getEntries({ content_type: 'homepage' })      .then((res) => { data.intro = res.items[0].fields.intro })    return { intro: data.intro }  }

 

asyncData merges its return value as local state of the component, that is, as data. And, by adding it to the ... in the .NET Framework, it can be displayed.

 

<p>{{ intro }}</p>

 

Here, we are retrieving one field as an example, but you can see how difficult it can be to handle Contentful's data structure. It is strongly recommended to use GraphQL, and Nuxt provides a vue-apollo module for this purpose.

 

6-5 Nuxt Content

Nuxt provides its own headless CMS that can handle Markdown, CSV, YAML, JSON, and XML. As you can see, it is incredibly easy to retrieve Markdown from the default hello.md.

 

async asyncData ({ $content }) {    const page = await $content('hello').fetch()    return { page }  }

 

To display the content, use the accompanying components.

 

<nuxt-content :document="page" />

 

6-6 Ecosystem

 

To expand functionality, you can use many Nuxt modules. The library includes over 140 modules, ranging from PWA integration to various headless CMS such as Prismic, Storyblok, and Sanity.

 

How do I get started with 6-7?

The easiest way is to use create-nuxt-app.

 

yarn create nuxt-app <project-name> # or npx create-nuxt-app <project-name>

 

You will be asked a series of questions about various options and technologies that you would like to use in this project. Once completed, all dependencies will be installed and you can immediately launch the project.

 

yarn dev # or npm run dev

 

6-8 Nuxt.js Deployment

Go to the frequently asked questions page and scroll through the left menu to find the section on deployment. Deploying to popular platforms such as Vercel, Netlify, and AWS can be done in just a few simple steps.

 

6-9 Conclusion

Nuxt.js is a full-service framework. It can also be used as a SSG, SPA, or server-side rendering application. It includes the most advanced features among JavaScript-based frameworks. This includes the ability to run middleware before navigating to a new route, as well as server-side middleware that allows you to register additional API routes without the need for an external server. The possibilities are endless and its flexibility is truly amazing.

 

7. Scully

Last Updated: October 28, 2020

Reviewed by:

 

Scully is the answer for Angular in Jamstack. Created by experts at HeroDevs, this product is possibly the only static site generator based on Google's JS framework, bringing the potential of Jamstack to all Angular projects.

 

Scully is a fairly new solution, with the first commit created by Jorge Cano on December 12, 2019. After several months of work, a stable 1.0.0 was released, making it immediately available for use in real projects.

 

7-1 Integration of Angular

Scully is integrated with existing Angular projects, and with just one setup command, you can easily make your website static.

 

One of Scully's interesting features is its implementation of machine learning. It uses Guess.js to crawl all routes of the site and pre-renders each page into plain HTML and CSS.

 

7-2 File Configuration

├── ... Angular application files ├── dist ├── .scully │   └── settings.yml ├── scully │   ├── plugins │   │   └── plugin.ts │   └── ts.config.json └── scully.[your-project-name].config.ts

 

When running Scully in a project, several elements are created, but they are all simple configuration files for changing project settings, adding plugins, or customizing tool behavior.

 

7-3 Ecosystem

 

Despite being relatively new, Scully offers ways to create custom plugins, integrate with APIs, and provide third-party scripts. There is a small library of plugins, with detailed instructions for installation and configuration for each one.

 

How do I get started with 7-4?

If an Angular application has already been created, execute only one command.

 

ng add @scullyio/init.

 

In addition, in workspaces other than Angular, install the Scully package as follows.

 

npm install @scullyio/init

 

Next, create a project.

 

nx g @scullyio/init:install -- --project=<projectName> command.

 

To build the project, execute the following steps.

 

ng build --prod

 

Once the project is built, you can run Scully with npm run scully. That's all.

 

7-5 Conclusion

Currently, Scully is the only static site generator designed specifically for Angular. It is perfect for converting existing projects into static websites or trying out the Jamstack approach in an Angular environment.

 

8. Gridsome

Last updated: October 24, 2020

Reviewed by:

 

Created to fit the Jamstack workflow, heavily influenced by Gatsby (which has a similar architecture), but built with the style of Vue.js. Optimized for speed and ease of use. Gridsome is still a new product, but it is a solid product that can integrate with any data source.

 

On October 10, 2018, the Gridsome team officially announced the first beta release. The purpose was to create a Vue.js alternative to Gatsby. Thanks to the knowledge and progress of the Gatsby team, who have been active for over 3 years, Gatsby has gained a lot of popularity.

 

8-1 File Configuration

├── src │   ├── components │   │   └── README.md │   ├── layouts │   │   ├── Default.vue │   │   └── README.md │   ├── pages │   │   ├── About.vue │   │   ├── Index.vue │   │   └── README.md │   ├── templates │   │   └── README.md │   ├── favicon.png │   └── main.js ├── static │   └── README.md ├── README.md ├── gridsome.config.js ├── gridsome.server.js ├── package.json └── yarn.lock

 

When you open the gridsome.config.js file, you will see some comments and only these settings.

 

module.exports = {   siteName: 'Gridsome',   plugins: [] }

 

Another important file is gridsome.server.js. This file connects to the Gridsome Server and allows access to various APIs, as well as loading data from local files or external APIs, and creating pages programmatically.

 

8-2 Data Acquisition

Let's take a look at how to retrieve data from Contentful for one page. First, you need to install the Contentful plugin.

 

npm install @gridsome/source-contentful

 

Next, set the secret key in the .env file located in the project root.

 

CONTENTFUL_SPACE_ID=123 CONTENTFUL_ACCESS_TOKEN=abc

 

In other words, not only do you need to set up your own Git repository, but you must also add .env* to the .gitignore file. This is absolutely necessary to prevent sharing secret keys. The reason for this is that you can prepare different variables for each environment. The file names are determined as ".env.development" and ".env.production".

 

To use the Contentful plugin, please change the settings in gridsome.config.js. It will be displayed like this.

 

module.exports = {   siteName: 'Gridsome',   plugins: [     {       use: '@gridsome/source-contentful',       options: {         space: process.env.CONTENTFUL_SPACE_ID,         accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,         host: 'cdn.contentful.com',         environment: 'master',         typeName: 'Contentful'       }     }   ] }

 

Just like Gatsby, Gridsome also provides a GraphQL data layer. For those who are not familiar with GraphQL, a convenient playground is available at http://localhost:8080/___explore. When running gridsome development, a query for retrieving data from Contentful will be automatically generated. Here, we will explain how to configure the query in Index.vue.

 

<page-query> query {  products: allContentfulProducts {    edges {      node {        id        title      }    }  } } </page-query>

 

To display our products, we simply use loop-shaped edges.

 

<ul>   <li v-for="edge in $page.products.edges" :key="edge.node.id">     {{ edge.node.title }}   </li> </ul>

 

8-3 Ecosystem

 

Gridsome's plugin collection may not be as extensive as Gatsby's, but it includes many useful features such as connecting to your preferred popular CMS, setting up Google Analytics, and generating a sitemap.

 

How do I get started with 8-4?

Just like Gatsby, the first step is to install the Gridsome CLI globally.

 

npm install --global @gridsome/cli

 

We have collected the official starter 3 people and 20 starters added by the community. We recommend using the default starter and replacing new-project with your preferred project name.

 

gridsome create new-project

 

Please move to the project directory and execute.

 

gridsome develop

 

You should now be able to open the site at http://localhost:8080.

 

Introduction to Gridsome 8-5

The Gridsome team recommends connecting to a deployment service that builds sites from selected Git-based repositories. Some top services include AWS Amplify, Vercel, and Github Pages. However, the top service among them is "Netlify", which is incredibly simple.

 

8-6 Conclusion

Gridsome is a very lightweight and simple option for quickly launching static sites. It can also handle complex reports, allowing you to generate thousands of pages in just a few seconds. I believe Gridsome is worth considering even for large sites. However, it's important to remember that this SSG is still in its early stages. Personally, I think Nuxt.js is a safer choice for Vue-based sites. Please look forward to future developments from the Gridsome team as they work on new versions.