Netlify CMS – An open-source CMS for Git workflows

https://www.netlifycms.org/

by corny • 9 years ago

297 72 9 years ago

netlifycms.org

Myztiq• 9 years ago

Seems like a neat idea, I have not yet found a good example of the output that this generates on github.

I've used prismic.io and other such systems in the past, all wonderful. I'm glad to see this is evolving in other ways.

benaiah9• 9 years ago

The output is very flexible - you can define entry types as collections of "widgets", which would include stuff like a title, a cover image, a markdown body, etc. It's designed so you can use it as a CMS for almost any static site generator by defining how your data looks in the config - see https://github.com/netlify/netlify-cms/blob/master/example/c... for an example config (this is a configuration for the in-memory, non-persistent backend which we use for testing and demonstration).

rogerjin12• 9 years ago

I work at buttercms.com and we are huge fans of Netlify and how easy they've made hosting static websites and SPAs. This CMS looks awesome and it is clever how it hooks into Github.

steffoz2• 9 years ago

Thanks for citing DatoCMS, Netlify, appreciate it :)

Really love what these guys are trying to build: critical mass over static websites. That's what we need.

michaelmior• 9 years ago

+1 for DatoCMS! For simple use cases it works great and combined with Netlify makes for a great way to deploy simple static sites. Although I must say I'm pretty excited about Netlify CMS :)

steffoz2• 9 years ago

Thank you michael :)

laktek• 9 years ago

Pretty interesting and this is the first time I came across the term JAMStack (a concept I always had trouble in explaining to other developers).

Rendering content blocks in server and then further enhancing them on client-side using a JSON API can be how most sites will be built in future (especially, with ServiceWorkers we would be able to create more fine-grained offline experience too).

I'm also currently working on a project on similar lines, check out the initial blog post for more details - http://www.laktek.com/2016/11/29/introducing-pragma/

Edit: also loved the idea of a kanban board for edit-review-publish process. Might steal that idea ;)

brianllamar2• 9 years ago

Consider adding your project a list of headless cms's. I am hoping to expand the category and spread the JAM.

https://headlesscms.org/

radiospiel• 9 years ago

sorry, what exactly does this? Assuming one is looking for a CMS, the description on the frontpage does not tell me anything. How does it compare to other CMSes? After "Find out more" I know now that it does something with Github, but what exactly? (Also I now know that it has something to do with a JAMstack, whatever that might be.)

I am looking around for a smallish CMS, but I got no idea from the introductory pages on whether or not netlify could help me

benaiah9• 9 years ago

sorry, what exactly does this?

It's a CMS that works on static sites. Currently it primarily supports GitHub repos for storage, but the plan is to support other alternatives (it already supports pluggable backends, but the GitHub backend is the only one with significant support at this point).

How does it compare to other CMSes?

- It doesn't require a database - it works on static files.

- It doesn't handle building or serving websites - just editing their content.

- It has a built-in editorial workflow, which allows you to manage publishing and reviewing entries in a sophisticated manner (it uses Git repositories to do this, currently through the GitHub API), where "publishing" means pushing to a specific branch - you're free to build and deploy your website with any tooling you want.

- It supports arbitrary content types and build tools, by allowing you to describe your content in a config file.

- It is itself usable as a simple set of static files - its entire functionality is implemented as a JS application, so there's no server support required to host it beyond serving files. You can also use it as an npm module for more complex workflows (such as adding custom extensions to the CMS).

After "Find out more" I know now that it does something with Github, but what exactly?

The current primary backend for Netlify CMS is the GitHub API. This means that it allows you to store your files in a GitHub repo, connect Netlify CMS to it, and it will use that repo to store your changes. A build system could then pull that repo to deploy your site. The CMS itself is entirely build and deploy agnostic.

benaiah9• 9 years ago

I work on this project, and it's been a big day for us - Smashing Magazine just released a preview of its new site[0], which uses Netlify CMS as the admin interface. I'm happy to answer any questions about the project.

[0] https://next.smashingmagazine.com/2017/03/a-little-surprise-...

corny• 9 years ago

Haven't had a chance to fully try this out but am curious if it's possible to take advantage of Hugo shortcodes through the CMS admin?

benaiah9• 9 years ago

There's no built-in support for Hugo shortcodes that I'm aware of, but you can enter them into posts fine, as there's built-in support for arbitrary Markdown content. Depending on your use case, it might be possible to extend the editor with a new widget to do what you want, as well [0]. Feel free to start an issue at https://github.com/netlify/netlify-cms/ if you're interested further.

[0] https://github.com/netlify/netlify-cms/blob/master/docs/exte...

modernerd• 9 years ago

Congratulations! This is exciting stuff. I enjoyed reading Smashing Mag's writeup – their new site feels fast, and seeing their integrations with GoCommerce and Algolia makes static hosting much more compelling.

Do you have plans to extend this to a “batteries included” platform? At the moment it's one piece of a puzzle; users must still choose and configure their build and deployment pipeline, which puts it out of reach for less technical users.

To make static site hosting appealing to a wider audience it feels like a click-and-go platform with themes/plugins may be a good direction to follow. I have used https://www.siteleaf.com/ in the past and been impressed with the workflow. I'd love to help contribute to an open version that appealed to a wider non-technical audience.

bobfunk2• 9 years ago

We do really want to build a viable workflow around this stack, and get to a point where setting up a project like this is completely click-and-go - without giving up the fundamental basis of being open-source, based on open-standards and based on an open concept of the web!

Wordpress and the whole ecosystem around the LAMP stack did a great job around this and was a big player in building an open web, but the underlying tech stack is way outdated now, and the developer experience is so far off what modern front-end tooling is evolving into, so we aim to build something for a modern stack, that doesn't give up on the fundamental openness of an open-source ecosystem.

leejoramo2• 9 years ago

This is so close for what I am want. However, why are you using Liquid block elements

    {% section %}

And not something more writer friendly and MarkDown-style such as CommonMark's container blocks

    ::: section

This builds on the commonly used pattern of code blocks that markdown writers know and editing apps will hopefully eventually directly support

http://spec.commonmark.org/0.26/#container-blocks-and-leaf-b...

Ajedi32• 9 years ago

I'm not sure where you're getting that `::: section` syntax from. It doesn't appear anywhere in the CommonMark spec. Container blocks in Markdown are just things like blockquotes and list items...

toddmorey3• 9 years ago

There's a markdown-it plugin that implements container blocks as described:

https://github.com/markdown-it/markdown-it-container

Not an official part of the spec, but certainly something this CMS could support since you'd just parse the markdown it saves with whatever parser you choose with your static generator.

mattferderer• 9 years ago

Very minor fix, but you might want to fix your menu links in your template to have the forward slash at the end. It's causing a 301 which adds an unnecessary few ms to your load time.

Otherwise this is a really nice CMS & first time I've seen Netlify. I'm recommending we take a look at this as a possible solution to a writer's first & headless/decoupled CMS for our company. It was very easy to add a new content type. I think our non-developers could even do it fairly easily. I also really like your affordable options for hosting, especially the free open source stuff with a custom domain name & HTTPS. I will for sure give that a test run with some stuff.

samat• 9 years ago

This is an excellent project, thank you so much.

Is it possible to parse and edit embeds put into the articles via custom widgets? I see in the example how to add a widget to add something to my page. But I don't see how to parse markdown to present an editing to an 'old' widget. I also see that images are non-editable (both image file and alt) once placed into the article.

Is this is a hard limitation or rather widgets are half-baked?

cacozen• 9 years ago

You can definitely to parse and edit from custom widgets. Take a look at the documentation here: https://www.netlifycms.org/docs/extending/

The "fromBlock" property is what detects the insertion from the markdown to present back the widget interface when editing.

bobfunk2• 9 years ago

We have pretty big plans for the markdown editing component. It currently has a system of "editorComponents" that lets you define block level components that can be edited inside markdown bodies.

There's still some work ahead to make this really smooth, but the idea is to give simple ways to work with shortcodes, etc, without having to be aware of the syntax.

bradgessler6• 9 years ago

This will sound crazy, but I recently deployed a content management workflow for a rails app that mounts a WebDAV drive inside of a staging rails application that's running http://sitepress.cc/ (think Middleman in Rails, without all the dependencies)

If the marketing team wants to edit something, they mount the content drive, make changes using their text editor of choice, and are able to preview when they hit Save.

After they make a bunch of changes and add whatever media an engineer copies the changes off of the drive into a commit and deploys to production.

So far it's been working pretty well. The marketing and CS team are all able to edit markdown copy and run it easier through their content editing processes since it's just files. They don't need to learn or care about git. Designers can throw images in the volume without thinking too much about it.

Engineering is happy because they control their git history and commits. When it's time to optimize PNGs, compress assets, etc. the engineer can deal with and deploy to product with confidence.

We also run rspecs against every single page of content to enforce SEO, branding, etc.

Happy to answer questions or write something more detailed about it if others are interested.

edraferi• 9 years ago

That's pretty cool. What are the marketing folks using as a WebDAV client?

d_k_f• 9 years ago

They way I understood him, they simply mount the WebDAV share using their regular file manager, so Explorer on Windows or Finder on Mac.

reacweb• 9 years ago

I do it often for my website. The unix command is sshfs remotehost:remote_dir local_dir.

How do you do it with windows 10 ?

bradgessler6• 9 years ago

On macOS people mount the WebDAV volume as a network drive in Finder. To them it seems like just another folder.

As others point out WebDAV is also integrated into Windows Explorer.

The beauty of it is that people don't need to install additional software and almost everybody knows how to use a file system.

iagooar2• 9 years ago

I used to work at a project where I suggested doing EXACTLY this, because the customers were pretty old-school Microsoft Office users and we had to store lots of documents and organize them.

The idea never caught on because the people didn't find it as a good solution. Happy to see that somebody, somewhere out there has built exactly this and is happy with the outcome ;)

Cheered me up a lot, thanks for sharing!

bradgessler6• 9 years ago

Your welcome! The engineering team got some chuckles out of me deploying WebDAV but it works! I originally wanted to use Dropbox to sync a shared folder, but their Linux client doesn't deploy well in a Docker container. The first attempt at a WebDAV server was nginx, but it had bugs in its WebDAV implementation, so we reached out for good 'ol Apache.

The whole thing feels so retro, but it works pretty well and makes it just that much more fun of a solution.

cobookman• 9 years ago

I've done something similar by grabbing a google doc by url, scraping its html markup, and generating a site from it.

Some people have even done a google doc markup like language.

bradgessler6• 9 years ago

I highly recommend Sheets too for tabular data. The series of /vs pages at (like https://www.polleverywhere.com/vs/turning-technologies) are all generated from one Google Spreadsheet. You can see the spreadsheet data itself if you click "Download Spreadsheet" and see the tables if you click on any of the subpages.

I implemented the "scraping" via a Rake task. When marketing updates a point of comparison, an engineer runs the task which simply downloads a CSV file that is plugged into these pages and a nicely formatted XLXS file that's made available for download for people who want to see all the data in one place.

There's "big data". I call this "tiny data".

j_s• 9 years ago

As seen on HN 2 days ago: Show HN: HexoPress – a blog that syncs with your Google Docs https://news.ycombinator.com/item?id=13857137

bradgessler6• 9 years ago

Wow, didn't expect this much interest! If you find https://sitepress.cc (or are an avid Middleman/Jeckyll fan) and these workflows interesting we're hiring a marketing engineer to make this pipeline even better. https://www.polleverywhere.com/jobs#marketing-engineer or reach out to me Brad at Poll Everywhere dot Com

goblin89• 9 years ago

Looks like a typo in the Marketing Engineer vacancy copy:

You understand how HTTP cache headers, HTTP/2, and asset fingerprinting can increase speed page load times

Overall meaning is obvious, but “increase speed page load times”—probably meant either increase loading speed or decrease load times.

Are you open to fully remote, by the way? (As in, someone working with you while on the move traveling in SE Asia)

chocolatebunny• 9 years ago

I setup winscp to automatically sync a directory from a coworkers laptop to a webserver so he can edit his html documents in Microsoft Frontpage locally and have it sync with the remote server.

boondaburrah• 9 years ago

I was literally gearing up to build something almost exactly like this this week as my own hackathon project. I needed a blog and I don't wanna do static site generation on command line. I may still do it, but dang, way to take the wind out of my sails. :P

trqx• 9 years ago

If I follow instructions in the "Try it out"[1] link and click on "Connect to github" I end up having to giving r/w access to ALL of my github repositories.

Also, reading the Step by Step guide[2] I'd end up giving r/w access to my public keys as well.

Now, I just wake up and maybe I missed something but documentation should make it clearer that you either have to create a dedicated github account, or how to manage permission in a more granular fashion.

[1] https://www.netlifycms.org/docs/test-drive/

[2] https://www.netlify.com/blog/2016/10/27/a-step-by-step-guide...

benaiah9• 9 years ago

Unfortunately, GitHub's API does not provide per-repo permissions, so in order to read/write to any repo, the CMS has to get permission to read/write to all of them. This is a fundamental limitation of the GitHub API [0] - we'd love to be able to request more fine-grained permissions. This is a pretty frequent complaint about any application built with GitHub's API.

The r/w access to public keys is specific to setting up continuous deployment from a GitHub repo to Netlify's static hosting service. You can read more about why Netlify requests those permissions for continuous deployment here: https://www.netlify.com/docs/github-permissions/.

While Netlify's continuous deployment is (obviously) the deployment strategy we recommend, you can use the CMS for any static site, as it's totally build/deploy agnostic. You can use the CMS to edit your content and then build that content with Hugo and host on a VPS if you wish. You can also use Netlify to host your content without continuous deployment - it supports updating content with both an in-browser interface and a REST API [1].

The CMS is entirely open source, so you're free to inspect or fork the code - you can find the repository at https://github.com/netlify/netlify-cms/

[0] https://developer.github.com/v3/oauth/#scopes

[1] https://www.netlify.com/docs/api/

wwalser• 9 years ago

I have another question based on the instructions. Why does a Netlify user have to create an oAuth application of their own?

… in order to use the CMS, you’ll need to set up authentication with GitHub.

That's the opposite of how oAuth is typically used and I notice that at this point in the process the user has already gone through an oAuth flow when they clicked "Sign in with Github".

seanwilson• 9 years ago

So the best you can really do in terms of not giving access to all your other projects is to create a new GitHub user just for your site?

dsmithatx• 9 years ago

I'm no Github expert however, I have contributed to other repos without having write access. Could the software fork a repo and submit a PR rather than giving it write access?

I guess I answered my own question. A person could fork a repo and give write access to the fork, preserving their initial copy.

splatcollision• 9 years ago

What about supporting github read/write deploy keys? Those can be generated with permissions for a single repo, no?

nodesocket• 9 years ago

I'm looking to create a back office for a consultancy company. Typical data like clients, users, billing, etc. It seems like Netlify CMS would allow me to create custom collections and data types correct? So instead of pages and posts, I'd could have clients, users, invoices, etc.

benaiah9• 9 years ago

Yes - the CMS allows you to specify custom content types using the config (example at [0]), which can have a variety of fields. There's a variety of built-in fields, and you can create your own as well [1].

That said, the focus of the CMS team is mostly on online publishing right now - we're trying to make editing static sites accessible enough for everyday users and featureful enough for large publications. I'd love to hear more about your use case and what you were thinking about using Netlify CMS for - you can reply here, raise an issue at https://github.com/netlify/netlify-cms/, or contact me at ben@netlify.com if you'd like to speak privately.

[0] https://github.com/netlify/netlify-cms/blob/master/example/c...

[1] https://github.com/netlify/netlify-cms/blob/master/docs/exte...

NKCSS• 9 years ago

Minor nitpick on the screencast; when clicking save, it took 4-6 seconds for it to complete and then load another page? That's not the best way to show of your CMS and instantly makes me fear what will happen if I have a lot of content in there.

benaiah9• 9 years ago

Netlify CMS is a single-page app, so the delay you're seeing is the wait for an external API to respond that the entry has saved succesfully - you wouldn't want to leave the page only to find out that your changes weren't saved. When using the in-memory backend (which doesn't persist changes), saving happens with no such delay. Since the delay is almost entirely from the network and external API, it shouldn't get worse with lots of files unless the external API takes longer to respond. Our current primary backend is the GitHub API, which handles lots of files without much change in response time in my experience.

thenomad• 9 years ago

Looks very cool. Does this only work with Github?

Unfortunately that renders it pretty much useless for me (and probably other non-Github users) if so.

benaiah9• 9 years ago

Unfortunately GitHub is the only backend we've implemented so far. However, we are planning to support multiple backends, and the CMS is already architectured to do so.

brianllamar2• 9 years ago

There is an open issue, if you have any insight in providing other APIs backend https://github.com/netlify/netlify-cms/issues/57

ranyefet• 9 years ago

Great idea, definitely going to try it out

therealmarv• 9 years ago

So this does not work with gitlab, right?

benaiah9• 9 years ago

Not yet - there's an issue [0] for that in the GitHub repository [1].

[0] https://github.com/netlify/netlify-cms/issues/57

[1] https://github.com/netlify/netlify-cms

gogopuppygogo• 9 years ago

I've been using Netlify for over a year to host static websites on custom domains and it's been impressive to me. Their control panel and tight git integration makes for a powerful combination. Not to mention that they also introduced a free tier for custom domains that I'm now using for some sites.

This is exciting to see them work on. I'm disappointed to see that they aren't focusing on designers though. Something like RespondCMS for Netlify hosting would be a superior combo.

polymath213• 9 years ago

How does this compare to Contentful? I've been trying to combine their headless CMS with Middleman but it hasn't been that easy to use, although the experience I'm trying to create is non-standard (imagine a normal blog post but with cards inserted throughout). Plus, the cheapest paid plan is $249/month which is really hefty when compared to the competition. Their free tier does give you a good amount of features though and their admin UI is the best.

I was planning to deploy my site onto Netlify once done. Wondering if maybe your CMS is a better alternative to Contentful and I should just combine services.

toddmorey3• 9 years ago

Contentful is nice and since it's been around longer, it's a bit more baked. However, there's an amazing feature of static sites that are based off of local content (markdown and yaml files, for example): every aspect of your site can live in git.

Treating the content like code offers the advantage of being able to easily roll back a website to any one point in time, and I think it generally makes collaboration between designers, coders, and content editors easier.

When developing, it's really nice to just create a new branch and work on the content and design all at the same time.

The aim of this CMS is to hopefully offer the content editing experience of Contentful without requiring an external dependency, while also keeping all aspects of your site tightly integrated with your git workflow.

polymath213• 9 years ago

But the whole point of me using Contentful is that a non-developer will have an easy time editing content within Contentful vs. having to set up a local way of accessing those markdown/yml files through a git repo. Or do you somehow abstract that away?

redtuesday2• 9 years ago

Have you seen Contentful's webinar about lookbooks? Sounds like it could help: https://www.contentful.com/blog/2015/09/10/creating-a-digita...

polymath213• 9 years ago

This does look useful, thank you!

inthewoods• 9 years ago

Surprised in all this that no one has mentioned www.cloudcannon.com - works with Jekyll and allows our marketing group to make live edits on the website while maintaining the whole thing on Github.

m-j-fox• 9 years ago

Dumb question: what is a CMS?

0x27081990• 9 years ago

Content management system

roscoebeezie• 9 years ago

When CMS is not Conversational Monitor System...

matt4077• 9 years ago

I wish people would actually use open protocols instead of private APIs, at least in cases where both seem to be available.

As far as I can see, the only feature this needs that only github provides is pull requests – omitting those would still leave you with a useful CMS, and the information could also be communicated in, for example, branch names. That way, you could conceivably use any client you want to work on the repo.

So instead of implementing Gitlab next, why not make it work with git?

This situation reminds me of email clients and libraries, many of whom now use private APIs of a bunch of providers instead of SMTL and IMAP.

yellowboxtenant• 9 years ago

How does user management work?

Netlify CMS – An open-source CMS for Git workflows

Related Stories