Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CMS - Integrate Netlify CMS #143

Closed
6 tasks
slathrop opened this issue Apr 18, 2018 · 18 comments
Closed
6 tasks

CMS - Integrate Netlify CMS #143

slathrop opened this issue Apr 18, 2018 · 18 comments
Labels
contribution welcome Contributions welcome

Comments

@slathrop
Copy link
Contributor

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
@yyx990803 yyx990803 added help wanted Extra attention is needed contribution welcome Contributions welcome and removed help wanted Extra attention is needed labels Apr 18, 2018
@dacsang97
Copy link

dacsang97 commented Apr 19, 2018

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>

This was referenced Apr 22, 2018
@tomcam
Copy link

tomcam commented Apr 24, 2018

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

Comments are more than welcome!

@TomPichaud
Copy link

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

@capriosa
Copy link

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
Copy link
Contributor

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
Copy link

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
Copy link

tomcam commented Aug 6, 2018

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
Copy link

capriosa commented Aug 6, 2018

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

@samSwitch
Copy link

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
Copy link
Contributor

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

@ekoeryanto
Copy link
Contributor

ekoeryanto commented Aug 31, 2018

another reference:
apekarawang/apek#production

feature

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

@samSwitch
Copy link

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
Copy link
Contributor

ekoeryanto commented Sep 4, 2018

@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
Copy link

nwneisen commented Nov 6, 2018

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
Copy link
Contributor

ekoeryanto commented Nov 6, 2018

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
Copy link
Member

ulivz commented Jan 29, 2019

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.

@ulivz ulivz closed this as completed Jan 29, 2019
@FabioZanchi
Copy link

Hi,

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

Thank you

@ekoeryanto
Copy link
Contributor

@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"
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
contribution welcome Contributions welcome
Projects
None yet
Development

No branches or pull requests