DEV Community

Cover image for AMP CMS: Introduction
Valeria
Valeria

Posted on

AMP CMS: Introduction

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.

Backend

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.

Styles

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.

Content markup

HTML Pages Content will be composed using templates and 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 <head/>
  • styles: SCSS/SASS styles to include in the <style amp-custom></style>
  • scripts: TypeScript/JavaScript scripts to include in the <amp-script/>

Assets

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 amp-img srcset property.

API

Our CMS will have REST API, serving JSON output, natively compatible with AMP.

Control Panel

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.

DevOps

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.

Final Project

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:

GitHub logo ValeriaVG / nomocms

Content management system for blazingly fast websites, powered by Svelte

NoMoCMS

⚠️ Important: Master branch is not yet stable as project is undergoing massive refactoring ⚠️

Maintainability Test Coverage

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 clark.kent@daily.planet
  • SUPERUSER_PASSWORD, by default is set to clark&lois

WARNING: consider changing the default superuser credentials

Development

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

Discussion (0)