Create a blog with NuxtJS and Netlify CMS - Part 1

Updated by Tom Wells on

In part 1 of this series, we'll cover setting up Nuxt and Netlify CMS to create and maintain your blog posts. If you're already set up and want to read the more technical stuff, head over to part 2. Also, before you go any further, this post was heavily inspired by Marina Aísa, who created the foundations for this series with her implementation of this setup. However, this series aims to take you through every step in setting up a blog that maintains itself using the Netlify platform for hosting.

To skip this entire tutorial, feel free to clone the repository from Github.

Why I built my blog this way

Many blogging platforms, such as WordPress and Ghost, are large and cumbersome applications requiring a server for hosting the website and database. While this is fine for most people, there is more work involved in keeping your blog secure and optimised, so I was looking for a simple solution that meant I didn't need to use any hosting for my blog while using Vue for the frontend.

Another reason for building a blog using this setup is for performance and optimisation purposes. The nuxt generate command creates a static web application that can be beneficial for speed and SEO. However, you also benefit webpack bundling, cache optimisations, async data and more due to the SPA roots of the Nuxt framework.

Getting set up

Before continuing, ensure you have a Github and Netlify account with a project set up in each for your blog. I won't go into detail how to link your Github and Netlify accounts as it's very straight-forward with plenty of other guides online.

First of all, using your terminal install 'create-nuxt-app' with npm install -g create-nuxt-app. Using create-nuxt-app makes installing Nuxt a lot easier with a host of options to give you the perfect development environment for your Nuxt-based projects.

Once installed, run create-nuxt-app with create-nuxt-app <project-name>. From here, you'll be offered several options from the name of your project to whether you want to install the axios module, CSS preprocessors and more. Choose the configuration that suits you and your usual development workflow. You can always change the configuration afterwards!

Once you've created your nuxt project, you need to create some directories: content/blog and static/admin. The former is the location of your blog posts (in markdown format), and the latter is the location of your Netlify CMS install.

Setting up Netlify CMS

In your static/admin directory create an index.html file with the contents:

/static/admin/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>

    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  </head>
  <body>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
  </body>
</html>

The above example is a simple HTML page with the netlify identity widget (to enable logging into your CMS) and the script to enable the CMS itself.

After this, create a config.yml file which contains all the configuration for your Netlify CMS installation and your blog posts:

/static/admin/config.yml
backend:
  name: git-gateway
  branch: master
publish_mode: editorial_workflow
media_folder: 'static/images/uploads'
public_folder: '/images/uploads'
collections:
  - name: 'blog'
    label: 'Blog'
    folder: 'content/blog'
    create: true
    slug: '{{slug}}'
    sort: 'date:desc'
    fields:
      - { label: 'Type', name: 'type', widget: 'string', required: false }
      - {
          label: 'Language',
          name: 'language',
          widget: 'string',
          required: false,
        }
      - { label: 'Title', name: 'title', widget: 'string', required: true }
      - {
          label: Summary 164-220,
          name: summary,
          widget: text,
          required: true,
          pattern: ['.{164,220}', 'Must be within 164 and 220 characters'],
        }
      - { label: 'Publish Date', name: 'date', widget: 'date', required: true }
      - {
          label: 'Updated Date',
          name: 'update',
          widget: 'date',
          required: false,
        }
      - { label: 'Author', name: 'author', widget: 'string', required: true }
      - {
          label: 'Author Link',
          name: 'authorlink',
          widget: 'string',
          required: false,
        }
      - {
          label: 'Featured Image',
          name: 'thumbnail',
          widget: 'image',
          required: true,
        }
      - { label: 'Body', name: 'body', widget: 'markdown', required: true }

For more information on what this file does, check out the docs.

At this point, you should be able to use the CMS by starting your application (yarn dev) and go to http://localhost:3000/admin. You'll already be able to make a post!

Next steps

You should now have a working Nuxt project with Netlify CMS installed. Before moving onto part 2, make sure you have Netlify Identity set up to protect your CMS install and that it's working. You may also want to check your application builds correctly on the Netlify platform by publishing to your git repository.

In part 2, we'll cover the nuxt build process to generate the homepage and load the markdown content into your blog pages!

netlifynuxt