Can Netlify be used to edit a pre-existing single-page site?

Netlify CMS
1

Hi,
I am trying to configure Netlify to allow a client to modify her simple HTML single-page website, which I created from scratch using a bootstrap template, not a static-site generator. All examples I’ve seen of Netlify CMS relate to creating blog posts and using Netlify templates to create webpages. Is there actually a way to tell collections to refer to already-existing markup on the page? Meaning, using the config to allow editing of the existing HTML section elements on the page? If not, can I change my markup so that Netlify CMS can identify and load it?
Thanks a lot for your help,
Jonathan

2

Is there actually a way to tell collections to refer to already-existing markup on the page?

Yes there is! You can use a file collection.

Netlify CMS doesn’t edit raw HTML however. It outputs data, like markdown, yaml and json. To use Netlify CMS on your site, you’ll need to process that data back into your templates. That’s where tools like static site generators come in. You can find a pretty elaborate list of those here.

3

Hi Tom,

thanks a lot for your quick reply. You say I’ll need to process that data back into my templates, but that’s the issue I guess - it’s a simple webpage, without any templates:)
So, I take it from your suggestion that to get it working with Netlify, it would be better to start the page from scratch using a static site generator?

4

Well you don’t have to start from scratch, you can convert the html you’re using to a static site gen system of your liking. Since it’s a single page you won’t have to convert much anyway. You’ll have to break up the page into data and skeleton. For instance:

<header class="page-title">
  This is the title
</header>

Would become something like this:
(syntax is of course different between languages)

Data:

title: This is the title

Template:

<header>
  {{data.homepage.title}}
</header>

You will have to have a basic understanding of the static site gen of your choice, and things can get a bit more complicated than that (lists and loops, parsing markdown), but most of the conversion will probably look something like that. I’ve heard Eleventy is pretty versatile and relatively easy to learn.

5

Perfect, I’ll get to it then:)
Thanks again for the info and the detailed reply!