Versatile Internet

Introducing Pagespace: Manageable Websites with Node.js

November 28, 2016 by Phil Mander

Like many web developers I’m often asked to build various custom yet manageable websites. Normally for people I know who want online portfolios or who have small businesses or organizations. The de facto technology choice here is usually Wordpress. I’ve built Wordpress sites before and never really enjoyed the experience. It’s based on a technology stack I wouldn’t normally choose to use and customizations often seemed to warrant hacky solutions. I wanted a solution based on my preferred web technology: Node.JS and where customizations could be elegantly made.

This seemed like a great opportunity to use an existing open-source solution, but I had difficulty finding something that was being actively developed and close to the requirements and goals of what I had in mind. Mostly in terms of overall simplicity and the website management/editing user experience. Perhaps naively, I started to work on a new project.

Now, what I started to create was fairly simple. No big deal. In-line editing (a bit like instant.cm) and some way to manage the page structure of a web site. Naturally, this side-project snowballed away and two years later I think I have something quite significant that far exceeds these simple requirements. Something significant that I’m aware is also somewhat of a cliché. I see tweets like this and, with a small dose of imposter syndrome, I’m almost embarrassed of my work. This is probably why I’ve been reluctant to make any effort to share it so far.

However, I was kind of aware of this from day one. I said to myself if this solves my own problems and if I learn something along the way then the project is a success. It’s definitely has done that. Pagespace now runs several websites that I have personally created and real people are happy using it. The platform and its deployment use many technologies (NodeJS, ES6, Express, AngularJS, MongoDB, Nginx) which I’ve either improved my knowledge of or newly learnt.

So what is Pagespace exactly? I like to call Pagespace a “website management system” rather than a CMS. You could loosely describe it as a CMS, but its more geared towards brochure style/portfolio websites that don’t need sophisticated content management capabilities. The mantra of Pagespace is to provide developers with a framework where they can easily create websites, which in turn are easily manageable by users with little training or technical knowledge.

For developers:

Developers first integrate Pagespace into an Express app as Express middleware. This will intercept the predefined routes of Pagespace, like its admin dashboard or API, and its managed routes. i.e. the paths of the pages being managed. Unmatched routes will be passed along the middleware chain. This makes it easy to deploy the managed website pages alongside any other backend services within the same app.

Next, you create one or more templates to render pages. Templates use the Handlebars templating engine. They utilize Handlebars partials to declare and include the manageable regions of the page. Pagespace templates are server-side rendered and unopinionated about client-side technologies. Therefore, you may use whatever technology (React, Angular etc) you prefer to enrich managed content or just run alongside it. The custom templates and their client-side assets (CSS, JS, images etc) are termed collectively as a “theme”.

<body class="{{template.name}}">
    <header>
        <p><a href="/"><i>Versatile</i> Internet</a></p>
    </header>
    <nav>
        {{#Nav}} {{> Nav }} {{/Nav}}
    </nav>
    <div class="wrap">
        <aside>
            {{#Aside}} {{> Aside }} {{/Aside}}
        </aside>
        <main>
            <h1>{{page.name}}</h1>
            {{#if template.showDate}}
                <p class="date">{{formatDate page.publishedAt }}</p>
            {{/if}}
            {{#Main}} {{> Main }} {{/Main}}
        </main>
    </div>
    <footer>
        {{#Footer}} {{> Footer }} {{/Footer}}
    </footer>
</body>

A snippet of this page’s Handlebars template (which is running on Pagespace)

All you need now is to fire up a MongoDB database and the website is good to go.

For managers:

For website managers, Pagespace provides the ability to manage the pages and structure of a web site, to edit the content on each page and to upload and organize media. As a user of the management dashboard you just see three top-level sections: Pages, Publish and Media. The UX emphasis is on providing an interface that’s highly usable by non-developers.

Screenshot of the Pagespace management dashboard

Page structure of this website via the management dashboard

Pagespace also has a plugin system for controlling the way each piece of content on a page is managed and rendered. I’ve written the following plugins so far:

  • Web copy: WYSIWG style editing.
  • HTML: Inject HTML directly. Useful for things like dropping in the embed code of a Youtube video.
  • Markdown: Wrtie content as markdown. This is what this post is using.
  • Posts: This can create a blog roll, by aggregating content from a collection of pages.
  • Nav: Include navigation menus based on the site structure
  • Gallery: Display thumbnails and lightboxes for a selection of managed images.

Plugins are distributed and installed as NPM modules.

What next for Pagespace?

Now I must conclude if I have just completed a “right-of-passage” or began something with some potential that I should continue to work on. Or both.

Up to this point I haven’t been collaborative in my approach to building Pagespace. I have to get out of my bubble and get wider feedback and support. Personally, Pagespace solves my problems, but are these universal? Does this help you? Do you like it?

I would be delighted if Pagespace can go on to establish an open-source community and grow in its usage. Please get in touch if you have something to contribute. Issues, ideas or code. Or you are interested in building your own websites with Pagespace. Please email, leave a comment or contribute via the Github issues page.

Try it

If you would like to try Pagespace, there are several options:

  • Run the Docker image. For the purpose of demoing, this image contains Node.JS, MongoDB and the demo Pagespace/Express app.
  • Install it via NPM and add it to your existing Express application.
  • Generate a new application from scratch using the Slush generator
  • Clone the Github repo then run npm install && npm start.

There is also a dedicated documentation site for both developers and users.

Checkout the Github repo for an overview and the source code.