DEV Community

Cover image for How I built AMP CMS for DigitalOcean App Hackathon
Valeria
Valeria

Posted on

How I built AMP CMS for DigitalOcean App Hackathon

What I built

A blazingly fast, mobile-first AMP CMS with very strong SEO possibilities and simple, yet powerful editors with live preview.

Category Submission:

Built for Business

App Link

amp-cms.dev

Hint: You can use demo credentials to look inside:

Screenshots

CMS admin login form

Enter dashboard

It has analytics!

Uses markdown to edit pages

Built-in SASS

Liquid templates

User permissions

Description

TL;DR Content management system for AMP websites, powered by Redis and TypeScript with One-Click deploy to DigitalOcean.

Why was it needed:

  • AMP is by design very restrictive. It uses rest requests for API, forbids some tags, requires you to place all styles in one place, and so on. AMP CMS handles it all out of the box, making the development much easier

  • AMP is a great framework, allowing sites to be cached in several levels and thus work really fast. AMP CMS was built with the speed in mind. It uses in-memory Redis

  • There's plenty of CMS SaaS out there, but this one is free and can be hosted on-premises or in the Digital Ocean App platform

What can it do now:

  • create liquid templates (same as Dev.to uses but with <% tag %> as a tag to keep it compatible with amp-mustache). Import them & extend them. Edit template & styles together and preview changes.

  • create sass template and partial styles

  • live preview templates & pages without publishing it

  • create pages, using markdown with custom YAML-parameters, that you can use anywhere in the template

  • create users with different permissions

What can it become:

  • AMP CMS has a built-in permissions system, with the potential to be used for paywall and subscription services.

  • It's possible to create a wide variety of different types of websites with AMP, but the system can be extended to prototype and design not only pages but different types of nested content and items

  • With a small modification, you can render page contents to JSON instead of HTML and use it in a mobile app or any other client

Link to Source Code

GitHub logo ValeriaVG / amp-cms

Content management system for blazingly fast AMP websites, written in TypeScript and powered by Redis

AMP CMS Logo

Maintainability Test Coverage

Content management system for blazingly fast AMP websites, written in TypeScript and powered by Redis.

AMP CMS is currently in active development. It's not ready for production use until it reaches v1.0.

Current stage: alpha

How to deploy

Note: Currenty it's not possible to automatically create Redis database for you, please do it manually and then link to the app deployment either by adding existing database in App dashboard components and setting env variable REDIS_URL to ${your-db-name.REDIS_URL}

Note: App Platform uses public paths and CMS won't run without a database, do not restrict access by api until you know it's IP address

Deploy to DO

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

This user is never stored or rendered anywhere else…

Permissive License

MIT

Background

At the beginning of my career, I used to work a lot with PHP CMS: WordPress, Joomla, ModX, Drupal, etc. Back in the day none of them were perfect to my taste, nor were PHP itself and relational databases.

Later on, NodeJS became my language of choice, along with a bunch of really cool technologies and possibilities. However, I was missing the convenience of CMS: after all, I was still building websites, and a lot of requirements were the same for every project: speed, SEO, and ability to control content with little to no coding.

Some time ago, a talented writer approached me with an idea for a web-based book. I loved his believable supernatural universe, loved the characters, and the honest monetization scheme he had in mind. I do believe, especially at these dark times, that a good fictional book can make a real difference. So, naturally, I've agreed to build it free of charge, as long as the tech behind it will be open-sourced.

We made a coming-soon landing page and both fell into no-time-limits limbo for probably half a year. I've had logos, a color palette, and a tech solution outline. The site needed to be fast, mobile-first, and optimized for search engines. AMP was an obvious choice, Redis and TypeScript came along as my personal favorites.

On the second day of 2021, I've found out about the ongoing DigitalOcean App Hackathon and I knew it was time for both my long-brewing CMS-in-NodeJS-idea and The Wolf Sigil. With a strict time limit this time: I had no more than a couple of weekends.

How I built it

I've written a series of articles, documenting every single step of the way:

TL;DR It is written in TypeScript, uses Redis as a primary database and a bit of LUA for custom Redis scripts.

The dashboard itself is written in Preact, with the exception of the login page, which is 100% AMP.

I've used monaco-editor to render all the code editors.

Styles are parsed by sass, templates - by liquidjs, markdown YAML is parsed by gray-matter and translated to amp/html with marked.

Additional Resources/Info

I've set up the "Deploy to Digital Ocean" button, but it doesn't allow yet to define a Redis instance, hence a bit of manual clicking is needed:

Create, wait till the Redis database is deployed, and attach to the app:

Edding existing database in components

Change DATABASE_URL to REDIS_URL in env variables:
DATABASE_URL:${tws-redis.DATABASE_URL}

Replaced variables REDIS_URL:${tws-redis.REDIS_URL}

Thank you for your time! Don't forget to share your thoughts and findings!

Discussion (0)