Vuepress: 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>

[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 https://github.com/vuejs/vuepress/pull/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.

[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.

[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

[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]

another reference:
apekarawang/apek#production

feature

• vuetify
• recaptcha (finaly works!)
• netlify CMS
• progressive image *.md with v-img and vuetify-loader

[samSwitch]

Looks pretty comprehensive @ekoeryanto I like it.

Couldn't seem to get the cms script task to work however, it runs and webpack appears to compile successfully and launch the browser at http://localhost:8080/admin/ where I get a 'not found' message.

Probably just a mistake on my part, looks like you need some docs yourself - there is a lot going on.

[ekoeryanto]

@samSwitch

• make sure you are in the production branch
• run yarn start or npm start
• run (on another terminal) yarn webpack -w or npx webpack -w
• run watch script with npm run watch or yarn watch

and ya, I am not good in docs, contributions always welcome

[nwneisen]

I learned about VuePress a week ago and immediately wanted to convert my website while documenting the process. With @ekoeryanto's examples I was able to get Netlify CMS working and a basic how-to typed up here.

I would gladly type up a modified version of this for the VuePress and CMS docs. Is there any information I'm missing that someone would like to see added?

[ekoeryanto]

glad to know it helps you @nwneisen
I also created netlify-cms-widgets to quickly get started, feel free to request widget you need.

[ulivz]

We're closing this issue as stale as it's more than 20 days without activity, and without an associated Pull Request. Please feel free to continue discussion. We'll reopen this issue if anything actionable is posted.

[FabioZanchi]

Hi,

Is it possible to use the Netlify CMS only with Vuepress but without deploying on Netlify?

Thank you

[ekoeryanto]

@FabioZanchi it is possible with little hack, use a script that do nothing in netlify build command, and run your deploy script after that.

// package.json
{
  scripts: {
    build: "echo noop",
    postBuild: "firebase deploy --only hosting"
  }
}