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"
}
}
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>
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"}
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>
Go to pages>index.js:
useEffect(()=>{
if (window.netlifyIdentity) {
window.netlifyIdentity.on("init", user => {
if (!user) {
window.netlifyIdentity.on("login", () => {
document.location.href = "/admin/";
});
}
});
}
},[])
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)