DEV Community

AW A RE
AW A RE

Posted on

Building Blog with NextJS and Netlify CMS.

This tutorial have two steps.
_At first we will build markdown blog with nextjs without any netlify cms involved.
_Then at the second step, we will configure our code so we can use netlify cms to manage our blog site.

1.

For the first step we will have help from Ben Awad's youtube tutorial on building next.js blog. It is 27 minutes. But 23 minutes and 43 seconds is enough for our project.

First step is completed which means you have working markdown blog. Let connect it to netlify CMS

2. For the second step:

Change the package.json file

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "export": "npm run build && next export"
  }
}
Enter fullscreen mode Exit fullscreen mode

Create two new folders at public/admin:
index.html
config.yml

Go to public/admin/index.html and paste the following:

<!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.9.7/dist/netlify-cms.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Go to public/admin/config.yml at paste the following:

backend:
  name: git-gateway
  branch: master
media_folder: public/img #images that are uploaded via Netlify Cms interface will be stored in this folder
public_folder: img #I dont know
collections:
  - name: "blog" # Used in routes, e.g., /admin/collections/blog
    label: "BlogPost" # Used in the UI
    folder: "posts" # The path to the folder where the markdown files are stored
    create: true # Allow users to create new markdown files.
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
    fields: # The fields for front matter. You will need to modify fields according to your project.
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Description", name: "description", widget: "string"}
      - {label: "Download", name: "download", widget: "string"}
      - {label: "Featured Image", name: "thumbnail", widget: "image"}
      - {label: "Author", name: "author", widget: "string", default: "Admin"}
      - {label: "Body", name: "body", widget: "markdown"}
Enter fullscreen mode Exit fullscreen mode

Your head section need to have netlify cms script:
Create a Layout component. Add following script to Head of Layout component like below. Then wrap pages with Layout component.

<Head>
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</Head>
Enter fullscreen mode Exit fullscreen mode

Go to pages>index.js:

  useEffect(()=>{
    if (window.netlifyIdentity) {
      window.netlifyIdentity.on("init", user => {
        if (!user) {
          window.netlifyIdentity.on("login", () => {
            document.location.href = "/admin/";
          });
        }
      });
    }
  },[])
Enter fullscreen mode Exit fullscreen mode

Create github repository for your project.

Deploy github repo on netlify:
Build command: npm run export
Publish directory: out

on Netlify:
1. Go to Settings > Identity, and select Enable Identity service.
2. Under Registration preferences, select Open or Invite only.
3. If you'd like to allow one-click login with services like Google and GitHub, check the boxes next to the services you'd like to use, under External providers.
4. Scroll down to Services > Git Gateway, and click Enable Git Gateway.

Open your new page via the new Netlify URL, and navigate to /admin

Congrats.

Top comments (0)