Death to Legacy CMS Platforms: How XMS Solutions Are Transforming the Future

Have you ever seen the movie Office Space where the fax machine doesn’t work? Every day, the office workers struggle to use it, especially one certain employee, until he decides that enough is enough and ultimately kills it (with the help of his equally frustrated colleagues).
I think we can all relate to wanting to drop-kick outdated technology.


Work Your Own Way With Crafter CMS (Series Part 1): Step-Through Debugging

Most CMS platforms do a decent job of simplifying content and digital experience creation and editing for non-technical content managers. The challenges really start once you need to innovate and development is required. Traditionally CMS platforms have been pretty bad for developers. They require a lot of CMS specific knowledge and don’t integrate with developer tools and process.Here are 7 things that developers really want with a CMS:

Let me work locally with my own tools like my IDE and my source code management.
Let me leverage my existing skills. I want a low learning curve. Don’t make me learn a new, niche framework.
Let me work in teams on multiple projects at the same time without interfering.
Let me maintain a real development process.
Make the integration with the CMS seamless.
Don’t make me do builds.
Don’t make me do heavy deployments.

In this installment of the Work Your Way Series, we’re going to tackle item #1: Let me work locally with my own tools like my IDE and my source code management. Let’s start with some background: Crafter CMS uses Git as its primary content store. That’s the foundation of the solution for developer desire #1. A developer can mount a local clone of a Crafter CMS project directly with their IntelliJ, Netbeans, Eclipse or other IDE. That means they can use their preferred development tools to edit and debug code and templates. And as they work, all of the changes they make are tracked by the Crafter CMS via its native Git support. Sounds awesome right? Let’s learn how to get set up.


Working With Content as XML/DOM in Crafter CMS

In a previous article (Querying Content in Crafter CMS), we talked about how you can query content in Crafter using content and search services. Under the hood, Crafter CMS saves all of the content you create through the authoring interface (Crafter Studio) as XML. This XML is published from Crafter Studio to dynamic delivery engines (Crafter Engine) and is available through the content services and is also indexed in Solr and thus available through Crafter’s search services. There are times in the rendering engine (Crafter Engine) when you may want to get access to values in the XML directly and work with the content as an XML Document Object Model (DOM) API.
In the example below, I will show you how you can:


The Resurgence of Static

Static sites have been around as long as the web, but today’s static sites serve a very different purpose than the unsophisticated HTML and image files that you used to FTP to your web server. Making your site (or portions of your site) static can have a tremendous upside and can guarantee speed, scalability, and security. Combine these benefits with the power of modern JavaScript app frameworks, REST endpoints, and Content-as-a-Service capabilities, and you have a refreshing choice for developers who want full control of their web frameworks and are fighting to minimize every last millisecond of loading time.
The Move From Static to Dynamic
We saw the emergence of dynamic when the constraints of static failed to meet the new demands of the web. They were hard to update and did not allow for dynamic navigation and user interactivity. In order to maintain timely and relevant websites, companies started to store their content in databases and dynamically deliver it to their site visitors. This spurred the growth of content management systems (CMS), which allowed for the managing of content and files that could be dynamically displayed on different pages and areas of a website. A CMS meant that a content editor could update the content of a page or site and their changes would be reflected instantly, without having to use FTP or know HTML. These dynamic publishing platforms unleashed the tidal wave of online publishing that has changed our world and how we consume information.


How to Get Started With and Create a Simple CMS

This article was sponsored by Thank you for supporting the partners who make SitePoint possible.

Databases strike fear into the heart of the most experienced developers. Installation, updates, disk space provision, back-ups, efficient indexing, optimized queries, and scaling are problems most could do without. Larger organizations will employ a knowledgeable dev ops person who dedicates their life to the database discords. Yet the system inevitably fails the moment they go on vacation.

A more practical option is to outsource your database and that’s exactly the service provides. They manage the tricky data storage shenanigans, leaving you to concentrate on more urgent development tasks. the Basics is a plug and play cloud NoSQL database. It will be immediately familiar to anyone with MongoDB experience. The primary differences:

there’s no need to manage your installation, storage or backups

you can define a data structure schema in

data fields can have relationships with other fields in other collections

there’s no need to define indexes

data can be queried and updated through a REST API authenticated by HTTP or Auth0/JWT tokens

queries and updates are sent and received in JSON format

there are tools to enter, view and export data in various formats

it supports some interesting bonus features such as codehooks, email, web form generation, websites, realtime messaging, and more.

A free account allows you to assess the service with no obligation. Paid plans offer additional storage space, query throughput, developer accounts and MongoDB integration.

In the following sections I’ll describe how to:

configure a new database and enter data

use that data to render a set web pages hosted on, and

use the API to provide a search facility for content editors.

Step 1: Create a New Database

After signing up with a Google, Facebook or email account, you can create a new empty database. This generates a new API endpoint URL at

Step 2: Create a New Collection

A database contains one or more collections for storing data. These are analogous to SQL database tables. Collections contain “documents" which are analogous to SQL database records (table rows).

The interface offers two modes:

Standard mode shows the available collections and allows you to insert and modify data.

Developer mode allows you to create and configure collections.

Enter Developer Mode (top-right of screen) and click the Add Collection button.

A collection requires a unique name (I’ve used "content") and an optional description and icon. Hit Save to return to your database overview. The "content" collection will appear in the list along with several other non-editable system collections.

Alternatively, data can be imported from Excel, CSV or JSON files to create a collection by hitting Import in the standard view.

Step 3: Define Fields

Staying in Developer Mode, click the "content" collection and choose the Fields tab. Click Add Fields to add and configure new fields which classify the data in the collection.

Each collection document will sore data about a single page in the database-driven website. I’ve added five fields:

slug – a text field for the page path URL

title – a text field for the page title

body – a special markdown text field for the page content

image – a special image field which permits any number of uploaded images (which are also stored on the system)

published – boolean value which must be true for pages to be publicly visible.

Step 4: Add Documents

Documents can be added to a collection in either standard or developer mode (or via the API). Create a few documents with typical page content:

The slug should be empty for the home page.

Step 5: Create a Database-Driven Website (Optional) provides an interesting feature which can create and host a database-driven website using data documents in a collection.

The site is hosted at but you can point any domain at the pages. For instructions, click Settings from the Database list or at the bottom of the left-hand panel then click the Webhosting tab.

To create the website, Pages must be configured in Developer Mode which define templates to view the content. Templates contain a code snippet which sets:

the context – a query which locates the correct document in a collection, and

the HTML – a structure which uses handlebars template syntax to insert content into appropriate elements.

Click Add Page to create a page. Name it the special name /:slug – this means the template will apply to any URL other than the home page (which does not have a slug). Hit Save and return to the page list, then click the /:slug entry to edit.

Switch to the Settings tab and ensure text/html is entered as the Content Type and Publish is checked before hitting Update:

Now switch to the Code for "/:slug" tab. Enter the context code at the top of the editor:

"docs": {
"collection": "content",
"query": {
"slug": "",
"published": true

This defines a query so the template can access a specific document from our content collection. In this case, we’re fetching the published document which matches the slug passed on the URL.

All queries return an array of objects. If no document is returned, the docs array will be empty so we can add code to return that the page is not available immediately below the context:

<h1>Page not available</h1>
<p>Sorry, this page cannot be viewed. Please return later.</p>

Below this, we can code the template which slots the title, body and image fields into appropriate HTML elements:

<meta charset="utf-8">
<title>How to Get Started With and Create a Simple CMS</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
body {
font-family: sans-serif;
font-size: 100%;
color: #333;
background-color: #fff;
max-width: 40em;
padding: 0 2em;
margin: 1em auto;

<img src="" alt="image" />

<h1>How to Get Started With and Create a Simple CMS</h1>

<p><a href="/">Return to the home page…</a></p>

Note our markdown body field must be rendered with a markdown handler.

Save the code with Ctrl|Cmd + S or by returning to the Settings tab and hitting Update.

The /:slug page template will apply to all our content collection — except for the home page, because that does not have a slug! To render the home page, create a New Page with the name home with identical settings and content. You may want to tweak the template for home-page-specific content.

Once saved, you can access your site from I’ve created a very simple three-page site at

For more information about page hosting, refer to:

Pages and Database Driven Website Hosting

The Dynamic Website Demo

handlebar template syntax

Step 6: API Queries

Creating a site to display your data may be useful, but you’ll eventually want to build an application which queries and manipulates information.’s REST API provides endpoints controlled via HTTP:

HTTP GET requests retrieve data from a collection

HTTP POST requests create new documents in a collection

HTTP PUT requests update documents in a collection

HTTP PATCH requests update one or more properties in a document in a collection

HTTP DELETE requests delete documents from a collection

There are a number of APIs for handling uploaded media files, database meta data and mail but the one you’ll use most often is for collections. The API URL is:

The URL for my "content" collection is therefore:

Queries are passed to this URL as a JSON-encoded querystring parameter named q, e.g. fetch all published articles in the collection:{"published": true}

However, this query will fail without an API key passed in the x-apikey HTTP header. A full-access API key is provided by default but it’s advisable to create keys which are limited to specific actions. From the database Settings, API tab:

Click Add New to create a new key. The one I created here is limited to GET (query) requests on the content collection only. You should create a similarly restricted key if you will be using client-side JavaScript Ajax code since the string will be visible in the code.

It’s now possible to build a standalone JavaScript query handler (ES5 has been used to ensure cross-browser compatibility without a pre-compile step!):

// query handler
var restDB = (function() {

// configure for your own DB
api = ‘’,
APIkey = ‘597dd2c7a63f5e835a5df8c4’;

// query the database
function query(url, callback) {

var timeout, xhr = new XMLHttpRequest();

// set URL and headers‘GET’, api + url);
xhr.setRequestHeader(‘x-apikey’, APIkey);
xhr.setRequestHeader(‘content-type’, ‘application/json’);
xhr.setRequestHeader(‘cache-control’, ‘no-cache’);

// response handler
xhr.onreadystatechange = function() {
if (xhr.readyState !== 4) return;
var err = (xhr.status !== 200), data = null;
if (!err) {
try {
data = JSON.parse(xhr.response);
catch(e) {
err = true;
data = xhr.response || null;
callback(err, data);

// timeout
timeout = setTimeout(function() {
callback(true, null);
}, 10000);

// start call

// public query method
return {
query: query


This code passes queries to the API endpoint and sets the appropriate HTTP headers including x-apikey for the API key. It times out if the response takes longer than ten seconds. A callback function is passed an error and any returned data as a native object. For example:

// run a query
function(err, data) {
// success!
if (!err) console.log(data);

The console will output an array of documents from the content collection, e.g.

_id: "1111111111111111",
slug: "",
title: "Home page",
body: "page content…",
image: [],
published: true
_id: "22222222222222222",
slug: "page-two",
title: "Page Two",
body: "page content…",
image: [],
published: true
_id: "33333333333333333",
slug: "page-three",
title: "Another page",
body: "page content…",
image: [],
published: true

The API can be called from any language which can make an HTTP request. provides examples for cURL, jQuery $.ajax, JavaScript XMLHttpRequest, NodeJS, Python, PHP, Java, C#, Objective-C and Swift.

I’ve created a simple example at which allows you to search for strings in the title and body fields and displays the results:

See the Pen query by SitePoint (@SitePoint) on CodePen.

It passes the following query:

{ "$or": [
{ "title": {"$regex": "searchstring"} },
{ "body": {"$regex": "searchstring"} }

where searchstring is the search text entered by the user.

An additional h querystring parameter limits the returned fields to just the slug, title and published flag:

"$fields": {
"slug": 1,
"title": 1,
"published": 1

Further information:

Querying with the API

Code examples for REST API

Step 7: Build Your Own CMS

A few steps were required to create a database-driven website and a simple search facility. You could edit pages directly using’s user interface but it would be possible to build a bespoke CMS to manipulate the content. It would require:

A new API key (or change the existing one) to have appropriate GET, POST, PUT, PATCH and DELETE access to the content collection.

A user interface to browse or search for pages (the one above could be a good starting point).

A process to start a new page or GET existing content and place it in an editable form.

Processes to add, update or delete pages using the appropriate HTTP methods.

The editing system should run on a restricted device or behind a login to ensure only authenticated users can access. Take care not to reveal your API key if using client-side code!

Further information:

Data manipulation with REST

Code examples for REST API

Try Today!

This article uses to build a rudimentary CMS, but the service is suitable for any project which requires data storage. The REST API can be accessed from any language or framework which makes it ideal for applications with multiple interfaces, e.g. a web and native mobile view. provides a practical alternative to managing your own database software installation. It’s simple to use, fast, powerful, highly scalable and considerably less expensive than hiring a database expert! Your application hosting costs will also reduce since all data is securely stored and backed-up on the servers.

Finally, makes you more productive. You can concentrate on the main application because data storage no longer causes concerns for you and your team.

Start building your database today and let us know how you get on!
Continue reading %How to Get Started With and Create a Simple CMS%


Building and Running Crafter CMS From Source. It’s Simple!

Crafter CMS is an open-source content management system for web sites, mobile apps, VR, and more. You can learn more about Crafter here.  In this article, you will learn how to build Crafter CMS from source as well as how to start and stop the services.  It’s very easy!  Thanks to Gradle and a very easy install process, you will be up and running in 3 simple command line operations!
0. Prerequisites
You must have these prerequisites on your system before you begin:


Why Developers Should Care About CMS

As developers, we’ve got a strong handle on how to manage and deploy our code assets. Yet every one of us, at some point in our application build has said, “What about this text? What about these images? Where do these belong?” That’s pretty universal. Nearly every single application today has content in it. Be it a web app or a native app; it’s full of strings, images, icons, media, and other classes of content.
This content doesn’t really belong in our code base — because it’s not code. These non-code assets make us as developers pretty uneasy. We know that at some point a business user is going to ask us to make a change to one of those strings and we’re going to spend hours of build and deploy cycles to handle a 30-second code change. We know that at some point we’re going to need to translate that content. We know at some point we’re going to replace this UI with another one. We know all these things  — and we know leaving that content, even if it’s abstracted into a string table or a resource bundle, is going to come back to haunt us; no matter the abstraction: it’s part of the build, developers need to update it. Developers and systems folks need to deploy it.  


KeystoneJS: The Best Node.js Alternative to WordPress

KeystoneJS is a content management system and framework to build server applications that interact with a database. It is based on the Express framework for Node.js and uses MongoDB for data storage. It represents a CMS alternative for web developers who want to build a data-driven website but don’t want to get into the PHP platform or large systems like WordPress.
Although WordPress can be set up by not so technical users, KeystoneJS offers the control needed for professional ones to develop new websites—although it is still considerably easier to work with KeystoneJS than manually building your website from scratch. It not only offers a platform to build websites; you can replace almost everything on it and develop more specialized systems like applications and APIs.
Key Features

Auto-generated Admin UI: When you build something with KeystoneJS, the data models that you define are also used to automatically create an admin dashboard to manage your data. You do not have to set the database models directly; you describe your data using Lists.

Lightweight and easy to customize: The fact that you get control over everything without having to know a huge system inside-out makes websites both lightweight and easier to customize.

Easily extendable: KeystoneJS can be considered a library, and you are not limited to only using the functionality it provides. You can easily integrate any package from one of the largest library ecosystems: JavaScript.

Start from scratch or use a template: If you want to start building something like a blog, you don’t have to spend time dealing with the logic of the system; KeystoneJS provides templates ready to use or to customize. If you have specific requirements you can start from scratch by making use of the tools provided by it, but without having to write everything by yourself.

Specially built for developers: Other CMSs tend to include everything in one package so non-technical users can get started as fast as possible. However, KeystoneJS is targeted at developers who want to build a CMS but don’t want the bloat or limitations of pre-built systems.

Compatible with third-party services: KeystoneJS offers integration with some useful third-party services like Amazon S3, Cloudinary, Mandrill out of the box. Suppose you want to store certain data on Amazon S3, it is as easy as adding { type: Types.S3File } as a field type when you define your data.

Use Cases

Websites for non-technical users: If you work as a web developer for clients, you might find that the task of building a website for a non-technical person is not so easy since you also have to build an administration panel to add and update data. With KeystoneJS you don’t have to worry about doing the double amount of work; an administration panel is automatically created.

Dynamic websites: KeystoneJS provides a useful foundation and tools to work with dynamic data on websites, useful when static websites are too little to be considered, but a traditional CMS like WordPress is too heavy or opinionated for your project.

Performance: There is nothing like building something just for your needs; If you need a highly specialized website and performance is key, you can use KeystoneJS to build something that fits your exact needs and exploits the performance advantages of the Node.js platform, especially for concurrent services.

Ecosystem: JavaScript has one of the richest ecosystems of third-party packages. Also if you are required (or just prefer) to use JavaScript on both the client and the server, KeystoneJS is an excellent tool.

Tight Deadline: Do you have a project with specialized features and the deadline is very close? The way KeystoneJS handles data and the fact that the administration panel is created automatically means that you can spend more time building the actual logic of your site instead of handling implementation details.

Getting Started
There are two ways to start a KeystoneJS project:

From scratch, importing the KeystoneJS package.
Using the Yeoman Generator.

Continue reading %KeystoneJS: The Best Node.js Alternative to WordPress%


Active Cache a RESTful Response in Crafter CMS

Any time your services depend on another service there is a cause for concern. You can’t control the performance or the availability of the external service. Further, if the response of the external service is not unique across calls then there may be no real need to call out to it on each request you receive.
In this case, what you want to do is cache the request from the external service and have your service attempt to get the content from the cache. Active cache is a built-in Crafter CMS capability that makes building these sorts of solutions much easier. You tell Active Cache what you want, how to get it, and how often to refresh it in the background. From there on, you simply ask Active cache for whatever the current response is.