10 Steps To Integrate Netlify CMS In Your Website

Integrate Netlify CMS In Your Website

Introduction

Netlify CMS is an open-source content management system for your Git workflow that enables you to provide editors with a friendly UI and intuitive workflows. Add Netlify CMS to your site by creating and configuring files, then connecting the CMS to your site through user authentication. And finally, you’ll learn how to access the CMS admin so that you can write your blog post.

Basic Introduction of Netlify CMS & GraphQL

What is Netlify CMS?

Netlify CMS is an open-source content management system for enabling your Git workflow. It provides user-friendly UI and intuitive workflows. Using this Netlify cms concept create faster, more flexible web projects with any static site generator. Content is stored in your Git repository alongside your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git.

What is GraphQL?

GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn’t tied to any specific database or storage engine and is instead backed by your existing code and data.

What is Markdown File?

An MD file is a text file created using one of several possible dialects of the Markdown language. It is saved in plain text format but includes inline symbols that define how to format the text (e.g. bold, indentations, headers, table formatting). MD files are designed for authoring plain text documents that can be easily converted to HTML.

Prerequisites

  • Basic knowledge about the Vue JS and GraphQL APIs.
  • Must have a Netlify account and should be familiar with Netlify Portal

Let’s start !!!

Step 1: Create a Netlify account

Select your preferred authentication signup method or use your email.

Signup Netlify Account
Signup Netlify Account

Step 2: Create the site from git

After successfully creating the account, you’ll be able to access the Netlify dashboard. To Create a New Netlify Hosted site from your Github repository Follow the below-mentioned steps.

Click on “New site from Git” — Select GitHub as your provider — Choose the Repo that you would like to Host.

New site from Git
New site from Git

Step 3: Configure your settings

Here you can configure your options. Make sure your site build command is “npm run build” and the public directory will be “dist”.Then click on “Deploy site”

Configure your settings

Step 4: Build & deploy your site

Now your site is ready to build and host with the free hosting

Build & deploy your site

Step 5: Adding Netlify CMS to an existing site

Netlify CMS itself consists of a Single Page Application built with React that lives in an admin folder on your site. admin ├ index.html └ config.yml

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>

If the location of the file is admin/index.html, then the entry point for the Netlify CMS admin interface will be accessible by navigating to “yoursite.com/admin/.

admin/config.yml
backend:
name: git-gateway
branch: master # Branch to update (optional; defaults to master)

media_folder: "static/uploads"
public_folder: "/uploads"

collections:
name: "blog" # Used in routes, e.g., /admin/collections/blog
label: "Blog" # Used in the UI
folder: "blog" # The path to the folder where the documents are stored
create: true # Allow users to create new documents in this collection
slug: "{{day}}-{{month}}-{{year}}" # Filename template, e.g., YYYY-MM-DD-title.md
fields: # The fields for each document, usually in front matter
- {label: "Title", name: "title", widget: "string", required: true}
- {label: "Blog Creater Name", name: "blogerName", widget: "string", required: true}

The backend section covers the basics like which branch to update and sets up the Git Gateway connection that we talked about earlier. The publish_mode property sets up our workflow to use the editorial mode. In short, this means that we have the ability to save page drafts as pull requests in Git before we decide to publish them.

Step 6: Upload folder

Create an “upload” folder at the “static/uploads” location in your base directory to store media files. After creating the folder set the folder path in config.yml for “media_folder” and “public_folder” entries.

config.yml
config.yml

Step 7: Enable identity

After configuring the project, visit the Netlify console to enable the Identity. Go to the Identity tab and click on “Enable Identity” which will successfully enable your identity for Authentication Purpose.

Netlify console to enable the Identity

Step 8: Enable git gateway

Go to the “Gateway” tab in the settings section. In the “Gateway” tab click on Enable gateway. This process is important to Enable access of the Admin login and registration page to stored content inside the git project.

Enable git gateway

Step 9: The user authentication

To set user authentication using Netlify cms using email verification. first, goto to the Identity instance then registration preferences then click on Invite only and add user email id then send an email for access to the admin side

User authentication using Netlify cms

Step 10: Ready to use

URL : <your_website name>/admin

Conclusion

Netlify CMS is a Modern Technology to generate static web pages. It is easy to install on your website, the process includes creating two files and configuring them as per our project’s need, and linking them to our content delivery network. It is Fully extensible to Create custom-styled, UI widgets, and editor plugins. Considering these functionalities and an easy installation process we can say that it works as easily as “Plug and Play”.

Thanks!!

Originally published at Reveation Labs Blog Page

--

--

--

Custom Software Development Solutions For Startups and Enterprise Businesses.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Lightning Flow Builder

. * . * . Start to learn self in Ruby . * . * .

Daily links of Fernand0 — Enlaces diarios de Fernand0 — Issue #417

Write your own decorators in Python in 5 minutes

Generating Random Numbers and Arrays in Matlab and Numpy

Host Gatsby.js site on amazon s3 with AWS CodePipeline

dClimate Tech Announcements

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Reveation Labs

Reveation Labs

Custom Software Development Solutions For Startups and Enterprise Businesses.

More from Medium

SerpApi’s Apple App Store Search Scraper API

Designing Xpense : Financial Manager as an App

SEO Tools for SEO Auditing and Performance Tracking

Screaming Frog — SEO Auditing Tool

Pennylane & Meta API Partnership