DEV Community

Cover image for Creating a blog with NuxtJS and Netlify CMS - 1
Ishaan Sheikh
Ishaan Sheikh

Posted on • Updated on

Creating a blog with NuxtJS and Netlify CMS - 1

In this two-part series, I'm going to cover How I created my blog using NuxtJS and NetlifyCMS.

Getting started

Creating NuxtJS app

To set up a blog with NetlifyCMS all you need is a Netlify and a GitHub (or GitLab or Bitbucket) account.

Create a NuxtJS app using create-nuxt-app

npx create-nuxt-app <app-name>

cd <app-name>

npm run dev
Enter fullscreen mode Exit fullscreen mode

Setting up NetlifyCMS

In static directory add a new directory named admin and add an HTML file named index.html with the following content -

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
    <!-- Include the script that enables Netlify Identity on this page. -->
    <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>
Enter fullscreen mode Exit fullscreen mode

Add another file named config.yml which contains all the configuration about your model and collections.

backend:
  name: git-gateway
  branch: master

media_folder: static/img
public_folder: /img

collections:
  - name: "blog"
    label: "Blog"
    format: "json"
    folder: "assets/content/blog"
    create: true
    slug: "{{slug}}"
    editor:
      preview: true
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - {
          label: "Featured Image",
          name: "thumbnail",
          widget: "image",
          required: true,
        }
      - { label: "Body", name: "body", widget: "markdown" }
Enter fullscreen mode Exit fullscreen mode

Push the code to GitHub. Now create a new website on Netlify using your GitHub so that whenever you push to the repository Netlify will automatically fetch the new content from the repo and build the latest version of your website, this is called Continuous Deployment.

Enable Identity & Git Gateway in Netlify

To access the CMS you need to enable authentication in your netlify website. Go to your netlify dashboard and select the website you have created.

  1. Go to Settings > Identity and Enable Identity service.
    step-1

  2. After enabling, go to Identity>Registration, set this option to open or invite. Usually, invite is the best option if you are the only person writing blogs on the website.
    You can also enable external providers like Google, GitHub, etc for authentication if you don't want to create an account.
    step-2

  3. Go to Identity>Services and click Enable Git gateway
    step-3

Now go to https://<your-website>.netlify.app/admin you'll be prompted to log in. Create your account and set the registration option to invite-only (as in step 2). Log in with your credentials and create a new blog post and publish it.

Now do a git pull to fetch the latest posts from the repository. You can find the blogs in the assets/content/blog directory of your project.

In the next part, we'll see how to integrate the content in NuxtJS to show on the website.

I have also created a repository to get you started with the NuxtJS blog.

GitHub logo frikishaan / nuxt-netlify-cms-starter-template

This is a starter files for creating Nuxt.js based blogs using Netlify CMS.

Top comments (3)

Collapse
 
paul_melero profile image
Paul Melero

Good article series! I also have a tutorial on the subject. Feedback appreciated ;)

graficos.net/blog/2018-08-21-setti...

Collapse
 
frikishaan profile image
Ishaan Sheikh

I could not found your article when I was building my blog, that would be really helpful.πŸ‘πŸ‘
Thanks!

Collapse
 
paul_melero profile image
Paul Melero

Same here, I wish I have had yours! πŸ˜‰ Thank you