Today I want to show you a cool Vapid CMS.

Often I need to build a simple website that has a dashboard where users can edit or add new pages/posts etc.
For log time I use WordPress as my go-to CMS for building simple websites, also I try a lot of static site generators. But it was way complicated for my case. So my search begins. I must say that I spent a loooot of time searching for something that will be useful for me, and then I found it - it's called Vapid CMS.

Vapid is an intentionally simple content management system built on the idea that you can create a custom dashboard without ever leaving the HTML.

THE HTML IS THE CMS

Add simple template tags to a static webpage, and Vapid will automatically generate the dashboard for you. No config files, no other languages required.

FASTEST WAY TO BUILD A CUSTOM WEBSITE

Static site builders like Jekyll and Middleman offer a modern development environment (e.g. live editing, SASS, Webpack, etc), but are difficult to share with folks who would like a dashboard to edit content.

Vapid takes the best of static site builders and introduces the ability to have a dashboard with almost no extra effort.
Vapid has only a few core concepts and a handful of content types. This is purposeful: you can master it quickly, and build sites without continually referencing documentation.

CONTENT TAGS

If you’ve ever used Mustache or Handlebars, Vapid will be very familiar to you. Add template tags to your HTML and Vapid will automatically create input fields in the dashboard. There are 7 content types including HTML, images, and others.

{{title}}
{{body type=html}}

SECTIONS

Sections are an organizational unit of Vapid. They allow you to group tags together, and display them under a separate dashboard link, other than General.

{{#section about}}
  {{title}}
  {{body type=html}}
{{/section}}

CONTACT FORMS

Want to create an email contact form? No problem, just use the #form tag. It’s nearly identical to #section, except that it automatically creates an emailable form for you. Zero configuration required.

{{#form contact}}
  {{name}}
  {{email}}
  {{message long=true}}
{{/form}}

Get Started

If you're interested in kicking the tires and are comfortable with dev environments, then install the app via these terminal commands.

npm install -g @vapid/cli
vapid new path/to/project/folder
cd path/to/project/folder
vapid start

Now, you can start developing. Open path/to/project/folder in your favorite text editor (see below for what file/folders are important). And preview your website: the public-facing site at http://localhost:3000; and the private dashboard at http://localhost:3000/dashboard.

If you’ve installed Vapid, and issued the vapid new path/to/project/folder command, you’ll notice that a new folder was created, containing the following:

data/
www/
.env
.gitignore
package.json

The data, .env, .gitignore, and package.json items are largely ignorable for now. But the www folder is where the magic happens.

Content Fields

To make your website dynamic (i.e. to create a custom dashboard), you add special template tags in your HTML. For example:

<html>
  <body>
    <h1>Hello, {{name}}!</h1>
  </body>
<html>

The {{name}} tag here has special meaning. It tells Vapid that you’d like place dynamic content there, and that you’d like the dashboard to have a text input field called “Name.” You can have as many of these as you like. Just enclose any word with two curly braces.

SIMPLE WEBSITE TUTORIAL
In this quick tutorial, we will be creating a simple website with posts.

This is a index.html page

<!DOCTYPE html>
<html>

<head>
  <title>Vapid Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://fonts.googleapis.com/css?family=Monoton|Work+Sans:400,800" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="/stylesheets/site.css">
</head>

<body>
  <header class="header" style="background-image: url({{background_image type=image tag=false required=false}})">
    <h2>A New Site</h2>
    <h1><span>Hello, {{vapid label="Greeting"}}</span>

    </h1>
    <div class="container">
      <p>This template already has few tags—visit the dashboard now to edit their content. And when you're done, <a
          href="https://docs.vapid.com/content-types" target="_blank">add your own content tags</a>.</p>
      <p><a href="/dashboard" class="login button">Login</a></p>
    </div>
  </header>
  <footer>
    <p>This is a footer.</p>
  </footer>
  <script src="/javascripts/site.js"></script>
</body>

</html>

DASHBOARD

If you want to add new field to the backend, you can do it like this:

<small>{{address}}</small>

Now if we go back to the admin section we will see that field:

And the Front end part:

As you can see it is very easy to add fields to the admin section and it will autmaticly display that on the front end.

Also you can add Section, for example About :
To create a section, just enclose template tags within a section block:

{{#section about}}
<div>
  <h2>{{title}}</h2>
  {{body type=html}}
</div>
{{/section}}

Similar to template tags, you can pass additional parameters to a section block. For example, you can change the label that appears in the dashboard sidebar.

{{#section about label="About Me"}}
<div>
  <h2>{{title}}</h2>
  {{body type=html}}
</div>
{{/section}}

Repeating Content

Occasionally, you’ll want to create a section that has repeating content. For example, let’s say you want to give the ability to edit company office locations:

<ul>
  {{#section offices multiple=true}}
    <li>
      <h5>{{name}}</h5>
      {{city}}, {{state}}
    </li>
  {{/section}}
</ul>

Link to Repeating Content

Vapid provides a way for you to link to individual records of repeating sections. Continuing the example above, we might want to create individual page for each office. For this, we can use the {{_permalink}} template tag (note the underscore before “permalink”).

<ul>
  {{#section offices multiple=true}}
    <li>
      <h5><a href="{{_permalink}}">{{name}}</a></h5>
      {{city}}, {{state}}
    </li>
  {{/section}}
</ul>

That is all for today, if you are interested you can go to Vapid website and learn more.
Even Vapid is a work in progress, I am running couple website on the production and so far it works very well.

Thank you all.

Build a website with Vapid CMS