DEV Community

Cover image for Build a website with Vapid CMS
Stokry
Stokry

Posted on

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}}
Enter fullscreen mode Exit fullscreen mode

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}}
Enter fullscreen mode Exit fullscreen mode

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}}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

enter image description here

DASHBOARD

enter image description here

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

<small>{{address}}</small>
Enter fullscreen mode Exit fullscreen mode

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

enter image description here

And the Front end part:

enter image description here

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}}
Enter fullscreen mode Exit fullscreen mode

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}}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Latest comments (21)

Collapse
 
amiamigo profile image
Ami Amigo •

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

Collapse
 
stokry profile image
Stokry •

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

Collapse
 
amiamigo profile image
Ami Amigo •

How do you compare Kirby vs Vapid?

Collapse
 
bonfiglioalessio profile image
<A.BONFIGLIO/> •

Performance?
Google Lighthouse screen?

Collapse
 
stokry profile image
Stokry •

I am more than satisfied with the performance, I must that am using this CMS on a simple website but it is more than enough. Here is an image: enter image description here

Collapse
 
bonfiglioalessio profile image
<A.BONFIGLIO/> • • Edited

Perfect!
Can you link your website please?
Is a blog?

Thread Thread
 
stokry profile image
Stokry • • Edited

This is a site that I was using for demo purposes:, here is a link. Basically, it is a small blog/listing.

Collapse
 
zabouti profile image
George Entenman •

And can you enter data in markdown?

Collapse
 
stokry profile image
Stokry •

No, I am afraid that you can not use markdown.

Collapse
 
zabouti profile image
George Entenman • • 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

Collapse
 
stokry profile image
Stokry •

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.

Collapse
 
maximesimoncelli profile image
Maxime Simoncelli •

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.

Collapse
 
stokry profile image
Stokry •

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.

Collapse
 
jwkicklighter profile image
Jordan Kicklighter •

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.

Collapse
 
stokry profile image
Stokry •

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

Collapse
 
mzaini30 profile image
Zen •

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

Collapse
 
stokry profile image
Stokry •

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

Collapse
 
amiamigo profile image
Ami Amigo •

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

Thread Thread
 
stokry profile image
Stokry •

Thank you, I will try Surreal CMS.

Collapse
 
mzaini30 profile image
Zen •

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

(☉｡☉)!

Thread Thread
 
stokry profile image
Stokry •

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

View full discussion (21 comments)

Read next

railsstudent profile image

Text translation using Google Cloud Translation API in a NestJS application

Connie Leung -

samuellubliner profile image

Optimizing Fonts and Images (Next.js)

Samuel Lubliner -

sourabpramanik profile image

URL shortening using CLI

Sourab Pramanik -

samuellubliner profile image

Next.js App Router Course

Samuel Lubliner -