AMP is a framework, based on custom HTML tags ( a.k.a web components), that was initially created by Google, but now belongs to the OpenJS foundation.
Websites, built with this framework, are really fast and therefore given a huge advantage in Google search results.
By design AMP page is just an HTML page, with a little bit of boilerplate code and some restrictions. It comes with a lot of great building blocks. The only thing it is missing is an open-source CMS.
I'm going to show how I build AMP CMS and deploy a real-life project in this series of step-by-step articles, starting with this one.
AMP guarantees ultra-fast page rendering, so we need to make sure that the backend does it's part just as fast.
In my article "5 ways to use Redis in your next project", I've mentioned, that it's possible to use Redis as a primary database.
This is exactly what I'm going to do. With Redis, it is easy to use, backup, export, and import data. It scales well, and it's as fast as storage can be.
Redis allows us to store up to 512MB of text in a single key, which is more than enough for our needs: AMP pages are limited to just several kilobytes.
CMS will be written in TypeScript/NodeJS, using mocha/chai for TDD.
AMP has another restriction: all custom styles need to be either inlined in the
style property, either included in the text of the document inside of one
<style amp-custom> tag.
Since we'll need to concatenate all the used styles, be storing styles in sass and compile them on change for each page. This way we can also use powerful mixins, color transforms, and global style variables.
HTML Pages Content will be composed using
blocks. Templates will be used to wrap pages content while blocks are, as the name implies, reusable blocks of AMP/HTML code.
Each renderable block (including the page content itself) will have one or more of the following properties:
- markup: AMP/HTML markup of the page
components: List of AMP Components to include in the
styles: SCSS/SASS styles to include in the
We'll store assets as files, using S3-compatible storage with CDN (e.g. DigitalOcean Spaces).
We'll include a simple file manager in our control panel, with upload/rename/delete and image resizing functionality for
Our CMS will have REST API, serving JSON output, natively compatible with AMP.
The dashboard will also be written using AMP and several custom components (e.g. code editor).
Users will be able to control static and dynamic pages, their styling, markup, and dynamic parameters. As well as other users and their access permissions.
While CMS itself can be hosted anywhere, I'll deploy the final project to DigitalOcean using App Platform, Managed Redis, and Spaces.
AMP CMS GitHub project will also have a "Deploy to Digital Ocean" button.
AMP CMS is going to power a dark supernatural universe "The Wolf Sigil", a side project I'm building for a very talented writer.
You can also follow the development process directly on GitHub:
⚠️Important: Master branch is not yet stable as project is undergoing massive refactoring ⚠️
Content management system for blazingly fast websites powered by Svelte.
NoMoCMS is currently in active development. It's not ready for production use until it reaches v1.0.
Current stage: alpha
First-time & Emergency access
You can set up a superuser account though the following environment variables:
SUPERUSER_EMAIL, by default is set to
SUPERUSER_PASSWORD, by default is set to
WARNING: consider changing the default superuser credentials
To run on local machine you'll need:
- NodeJS (tested on v16.9.1) with NPM 7+
- PostgreSQL (or run
docker-compose up -d)
Project uses NPM workspaces:
To start in the development mode:
npm run start -w api npm run start -w dashboard
To build :
npm run build # build api & dashboard # OR specify a workspace npm run build -w api npm run build