Stokry

Posted on Oct 1, 2020

Build a website with Vapid CMS

#html #javascript #webdev #tutorial

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.

Top comments (21)

Zen • Oct 1 '20

It's so cool! I'll try it ＼(◎o◎)／

Stokry • Oct 1 '20

Yes, I was amazed at how quickly you can build a simple website with CMS and how easily you can deploy it.

Zen • Oct 1 '20

Yep! I had use Vue for created website because easy. Then, I use Svelte and JSON Server. It's easier. Then, you tell us about this amazing library

(☉｡☉)!

Stokry • Oct 1 '20

Yes, I think this CMS is worth a try. I didn't build anything complex, but I think that this CMS has that ability.

Ami Amigo • Oct 2 '20

Now if you want something real simple you should try Surreal CMS. It's just plug and play

Stokry • Oct 2 '20

Thank you, I will try Surreal CMS.

Jordan Kicklighter • Oct 1 '20

Interesting, from this demo and what I can gather in their docs, it seems like this is more than just a headless CMS and actually incorporates the static site generator as well. Much more like wordpress with its templating and less like contentful + static site generator. I expected to be able to combine Valid with a framework like Vue/React/Svelte, but I'm not sure if that's possible (or even a good idea based on the project's goals).

Thanks for the share, very interesting to read into.

Stokry • Oct 1 '20

I didn't try something like that, I mean combine with Vue or Svelte but definitely, I will try. Thank you.

George Entenman • Oct 2 '20 • Edited

This looks very interesting and I'd like to try it.

But before I do, can you (or someone) tell me how data gets into Vapid? I see how you get it out, and I know there's a SQLite DB underneath but there's some part of the story still missing for me.

Even if it's obvious as hell, please humor me and give me a short answer or direct me to one. Thanks, ge

Stokry • Oct 2 '20

Hello, yes they are using SqliteDB and if you open vapid.sqlite file you will see the structure of the DB (records, sections, users etc). You can see the whole project on their Github project - link. I don't think that you can build anything complex with this but for a simple blog or portfolio or any landing page will be just fine.

Ami Amigo • Oct 2 '20

Interesting! Which templating language does Vapid use? Also have you tried Kirby CMS?

Stokry • Oct 2 '20

I think it is a hybrid between Mustache and Handlebars. Yes, I was using Kirby CMS, I build my first portfolio site with Kirby :-)

Ami Amigo • Oct 2 '20

How do you compare Kirby vs Vapid?

Maxime Simoncelli • Oct 1 '20

It's a great little tool albeit being not actively developed. I was enthusiastic when it released last year, but in the end I find netlify cms so incredibly more powerful and easier to use.

Stokry • Oct 2 '20

Yes, I see that at some point development is on pause. I will try to contact them to see will they continue with this project. I have a lot of ideas about how can this project be even better. And yes, Netlify CMS is great.