Home/ Documentation/ Components, Master pages and Libraries/ Pinegrow CMS for static HTML websites

Pinegrow CMS for static HTML websites

No code on the server. No API calls. No generators. Just HTML.
Pinegrow CMS lets end-users edit static HTML websites without touching the HTML code.

The simple process

  1. Open any HTML page (or create it with Pinegrow).
  2. Define editable areas with Pinegrow PRO.
  3. Let the end-users use Pinegrow in CMS mode to easily update the content.

Defining editable areas

You can make different parts of elements editable:

Inner content

By ticking the “Inner content” checkbox everything inside the element is fully editable.

Pinegrow Components actions allow you to define editable content

Attributes

Selected attributes (for example a link href attribute) are editable.

Pinegrow Components actions allow you to define editable content

Classes

Classes can be defined for addition or removal from the element.

Pinegrow Components actions allow you to define editable content

Background image

Ticking the “Bkg. image” checkbox allows the background image (set as inline style) to be changed.

Pinegrow Components actions allow you to define editable content

Collections

Component types can specified for addition, deletion or rearrangement inside the content of the element. 

Pinegrow Components actions allow you to define editable content

…or all together

You can also combine all above mentioned editable modes on a single editable area.

Simplified UI for the end-user

Content contributors (users who edit the content) can use Pinegrow in CMS mode with a simplified user interface.

Minimal user interface

The following features of the full Pinegrow Web Editor are disabled:

  • Styles, Actions and WordPress panels
  • Creating new pages (only new pages based on project’s master pages can be added through Project panel)
  • Opening URL as pages
  • Editing the code of the whole page

Powerful properties

All edits to the page can be done through the Properties panel. 

The Pinegrow Properties panel makes all editable fields available in one place

Inline editing

Inline editing for larger sections of editable content. 

Editing text in the Pinegrow CMS mode can still be done in the Page View

Add items to collections

Convenient buttons to add new items to editable collections.

Pinegrow CMS mode adds buttons for adding allowable components

Delete and rearrange items

Delete collection items and rearrange them by dragging them in the tree. 

The Pinegrow Tree panel allows component rearrangement in CMS mode

Simplified tree outline

Only editable elements are shown in the document tree.

The Pinegrow Tree Panel only shows editable elements in CMS mode

Activating the CMS mode

Three ways this can be accomplished:

  1. During development you can use Components -> Test CMS mode to quickly switch to CMS mode and test how the page will behave. In test mode all menus and panels remain visible.
  2. Tick the Support -> Settings -> Run in CMS mode checkbox and restart Pinegrow to switch to full CMS mode. This is useful for testing and if the end-user has a normal Pinegrow PRO license but wants to use it in CMS mode.
  3. Get a special Pinegrow CMS license for each end-user who will update the content.

Special Pinegrow CMS Client license

The Pinegrow CMS license is suitable for end-users who will edit the website content. Pinegrow activated with a CMS license runs only in the CMS mode. Only editable areas can be edited. This license is not suitable for general website editing. The price of the license is just $20 (one-time payment, volume discount is available).

Buy Pinegrow CMS Client licenses »

How many end-user licenses do we need?

Each individual end-user (content contributor) who will use Pinegrow needs a separate Pinegrow license: either Pinegrow CMS license or a normal Pinegrow PRO license run in CMS mode.

Under the hood

Information about editable areas and components is stored in data-pgc-* attributes directly in the HTML code. This is the standard and valid way of extending HTML attributes. It adds just a couple of extra characters to the code and makes pages self-contained with pure HTML.

Adding comments, forms and dynamic content to static HTML websites

One benefit of using WordPress or similar server-side CMSs is that they implement form and comment processing. But having to use a big CMS on your otherwise simple website just because of that, is unnecessary. Instead, you can use online services and embed their widgets into your plain HTML website.

For example:

Hosting and publishing

Use your preferred method of publishing the changes to your hosting provider, either with FTP, Git or provider-specific method. At this time, Pinegrow doesn’t host and upload files directly. You have to setup the publishing outside of Pinegrow.

The good news is that you can host static HTML websites anywhere. You can even get high-quality hosting for free:

Tutorial – How to host your HTML website on GitHub Pages for free

Getting started

Mr. Pine Cone – Sample Pinegrow CMS-enabled theme with step-by-step tutorial

Check out the Editable areas documentation for examples of what can be done with editable areas

Why use static HTML?

Big CMSs like WordPress are great for websites with lots of regularly updated content, for websites with multiple authors or for websites with custom server-side functionality.

But for most websites using server-side CMS is not necessary: they have just a couple of pages, a single person is updating the content, and the purpose is displaying information without running business processes on the server.

Using CMSs like WordPress comes with a price: creating such websites are more expensive and take more time. Server code is vulnerable to hackers and requires continuous updates. Serving CMS generated pages can lead to performance and stability issues on the server…

Still, many websites use CMSs because they let end-users easily update the content.

Pinegrow CMS is the bridge between simplicity of static HTML websites and user-friendliness of CMS authoring interfaces. Pinegrow CMS lets end-users edit static HTML websites without touching the HTML code.