CMS - Integrate Netlify CMS

[slathrop]

Write docs, demo code/project, and any VuePress tweaks necessary for smooth integration with Netlify CMS

Motivation

• Netlify CMS, despite being implemented in React, is a nice, extensible, free and open source front end to allow non-technical contributors/editors to add/edit/delete (with preview) markdown and data simply by visiting an /admin URL on your site
• Creating a simple, smooth VuePress onboarding experience (docs, demos/starters, minor tweaks for integration points if necessary) that includes a Netlify CMS "journey" (marketing-speak for a path desired by a subset of users) will certainly improve adoption of VuePress and build the Vue community

Suggested Implementation Tasks

• Do initial POC integration into a VuePress site based on Netlify CMS docs
• Design best/recommended integration strategy
• Implement any VuePress tweaks necessary for recommended integration strategy
• Write VuePress docs section(s) on integration
• Create VuePress theme or starter for integration
• Create PR in Netlify CMS repo to add VuePress to list of example SSGs

[dacsang97]

I completely integrate Netlify CMS for Vuepress by using enhanceApp.js
You must push config.yml (Configuration file of Netlify CMS) to .vuepress/public/admin/config.yml
_
enhanceApp.js

const Admin = () => import("./Admin");

export default ({ Vue, options, router }) => {
  router.addRoutes([
    {
      path: "/admin",
      component: Admin
    }
  ]);
};

_
Admin.vue

<template>
  
</template>

<script>
import CMS from "netlify-cms";
import "netlify-cms/dist/cms.css";
import netlifyIndentityWidget from "netlify-identity-widget";

export default {
  created() {
    window.netlifyIndentityWidget = netlifyIndentityWidget;
    netlifyIndentityWidget.init();
  }
};
</script>

[dacsang97]

I completely integrate Netlify CMS for Vuepress by using enhanceApp.js
You must push config.yml (Configuration file of Netlify CMS) to .vuepress/public/admin/config.yml
_
enhanceApp.js

const Admin = () => import("./Admin");

export default ({ Vue, options, router }) => {
  router.addRoutes([
    {
      path: "/admin",
      component: Admin
    }
  ]);
};

_
Admin.vue

<template>
  
</template>

<script>
import CMS from "netlify-cms";
import "netlify-cms/dist/cms.css";
import netlifyIndentityWidget from "netlify-identity-widget";

export default {
  created() {
    window.netlifyIndentityWidget = netlifyIndentityWidget;
    netlifyIndentityWidget.init();
  }
};
</script>

[tomcam]

I'm working on the smoother onboarding experience part at VuePress Book. It will include a Netlify walkthrough.

Comments are more than welcome!

[tomcam]

I'm working on the smoother onboarding experience part at VuePress Book. It will include a Netlify walkthrough.

Comments are more than welcome!

[TomPichaud]

Maybe we should wait for the plugin API to be done #240 and then create a Netlify CMS plugin.

[TomPichaud]

Maybe we should wait for the plugin API to be done #240 and then create a Netlify CMS plugin.

[capriosa]

I integrate NetlifyCMS on https://vuepress-deploy.netlify.com
There is a Netlify Deploy Button so if you have a Netlify account you can install VuePress with NetlifyCMS with one click.
In '.vuepress/public/config.yml' change the repo name

backend:
  name: github
  repo: capriosa/vuepress-deploy
  branch: master

Then add an Oauth app to your github account: https://github.com/settings/developers
For the Authorization callback URL, enter https://api.netlify.com/auth/done.

When you complete the registration, you’ll be given a Client ID and a Client Secret for the app. You’ll need to add these to your Netlify project:

Go to your Netlify dashboard and click on your project.
Navigate to Settings > Access control > OAuth.
Under Authentication Providers, click Install Provider.
Select GitHub and enter the Client ID and Client Secret, then save.

Now you can loggin to your NetlifyCMS with '/admin' after the URL of your site.

[capriosa]

I integrate NetlifyCMS on https://vuepress-deploy.netlify.com
There is a Netlify Deploy Button so if you have a Netlify account you can install VuePress with NetlifyCMS with one click.
In '.vuepress/public/config.yml' change the repo name

backend:
  name: github
  repo: capriosa/vuepress-deploy
  branch: master

Then add an Oauth app to your github account: https://github.com/settings/developers
For the Authorization callback URL, enter https://api.netlify.com/auth/done.

When you complete the registration, you’ll be given a Client ID and a Client Secret for the app. You’ll need to add these to your Netlify project:

Go to your Netlify dashboard and click on your project.
Navigate to Settings > Access control > OAuth.
Under Authentication Providers, click Install Provider.
Select GitHub and enter the Client ID and Client Secret, then save.

Now you can loggin to your NetlifyCMS with '/admin' after the URL of your site.

[ekoeryanto]

I prefer use cdn method of netlify cms and create separated netlify-cms stuffs (widgets, preview and editor-component) elsewhere so it build fast and easy to maintain.
I did it with nuxtjs project and here's my separated netlify-cms widgets

[ekoeryanto]

I prefer use cdn method of netlify cms and create separated netlify-cms stuffs (widgets, preview and editor-component) elsewhere so it build fast and easy to maintain.
I did it with nuxtjs project and here's my separated netlify-cms widgets

[samSwitch]

Any update here? I'd love to see some comprehensive docs for Netlify CMS integration for those of us like me who need a bit of help.

[samSwitch]

Any update here? I'd love to see some comprehensive docs for Netlify CMS integration for those of us like me who need a bit of help.

[tomcam]

I have a first draft of a writeup here: http://vuepressbook.com/netlify.html

Feel free to tell me how it sucks so I can make it better.

[tomcam]

I have a first draft of a writeup here: http://vuepressbook.com/netlify.html

Feel free to tell me how it sucks so I can make it better.

[capriosa]

Use my Netlify deploy button. See my comment above from 04.30

[capriosa]

Use my Netlify deploy button. See my comment above from 04.30

[samSwitch]

Thanks @tomcam looks good but seems its more about Netlify rather than integrating VuePress with a CMS specifically Netlify CMS.

Thanks @capriosa I'll have to give it a try.

[samSwitch]

Thanks @tomcam looks good but seems its more about Netlify rather than integrating VuePress with a CMS specifically Netlify CMS.

Thanks @capriosa I'll have to give it a try.

[ekoeryanto]

this is another example https://github.com/ekoeryanto/vuepress-netlify-cms
forked from @andreliem and modified to use netlify-git-gateway

[ekoeryanto]

this is another example https://github.com/ekoeryanto/vuepress-netlify-cms
forked from @andreliem and modified to use netlify-git-gateway