CMS 101 for Webs

Most likely than not, you heard about these ,no code required’ CMS’s: the mighty wordpress and Ghost and their APIs.

If you are here because you like SSGs like Astro or HUGO…

…and you dont like to have DBs, neither you mind to open a IDE, you have FrontMatterCMS.

The thing about frontmatter: is that you will still to enjoy writing in markdown.

Testing FrontmatterCMS

Learn the concepts and tools to SelfHost confortable

Flat Files KB

Tools like SilverBullet or LogSeq are flat file centered

If you end up liking .md, you will be able to use it for your website and skip those database setups (and maintainance)

From there, you can:

1. Either build your own editor on top of astro/hugo themes: naaah…

2. Or use any of these CMS combined with SSGs - this makes a lovely stack and very efficient webs

3. As last alternative, you can go check these no code CMS’s - we all have had a WP at some point

Cool CMS

This docs are focusing on DecapCMS because:

• Its fully OSS and selfhostable
• Integrates perfectly with Astro themes
• Its Flat file (no DBs!) and GIT based - so you get full trazability AND you can use CI/CD
• Plus you get cool decoupling between content edition and content presentation/delivery

You can skip all the tinkering across several CMS as I have been doing over time.

Make sure to differenciate when you are helping vs serving others, if you are trying to build a business around website creation.

Before serving others, make sure to get one of those CMSs going and included in your proposal, to avoid been the content manager of anyone for free.

Having said that…lets go.

All Git-based CMS are a subset of file-based CMS.

Decap-CMS

I just loved working with DecapCMS so far as seen here, thanks to the twilight theme

DecapCMS is MIT and I also forked it: https://github.com/decaporg/decap-cms

graph TB
    subgraph "Public Internet"
        User[Blog Visitors]
        Editor[Content Editors]
    end
    
    subgraph "VPS/Server with Docker"
        Traefik[Traefik Reverse Proxy
:80, :443]
        TinyAuth[TinyAuth
Authentication]
        
        subgraph "CMS Stack"
            Astro[Astro Dev Server
:4321]
            DecapProxy[Decap CMS Proxy
:8081]
        end
        
        CronJob[Cron Job
Every 30 min]
    end
    
    subgraph "Git Repository"
        GitHub[GitHub/GitLab
Main Branch]
    end
    
    subgraph "Cloudflare"
        CFPages[Cloudflare Pages
Static Site]
        CustomDomain[yourdomain.com]
    end
    
    User -->|HTTPS| CustomDomain
    CustomDomain --> CFPages
    
    Editor -->|HTTPS| Traefik
    Traefik -->|Auth Check| TinyAuth
    TinyAuth -->|Authenticated| Astro
    Astro --> DecapProxy
    
    DecapProxy -->|Edit Content| Astro
    CronJob -->|Check Changes| DecapProxy
    CronJob -->|Git Commit & Push| GitHub
    
    GitHub -->|Webhook/CI| CFPages
    CFPages -->|Deploy| CustomDomain
    
    style Traefik fill:#00d4ff
    style TinyAuth fill:#ff6b6b
    style CFPages fill:#f39c12
    style CustomDomain fill:#2ecc71

• https://decapcms.org/docs/github-backend/

This architecture provides a production-ready, secure, and automated blogging platform that separates content management from content delivery, ensuring both security and performance! 🚀

That is the most important distinction when self-hosting Decap CMS! The choice between the Direct GitHub Backend and the Git Gateway Backend dictates your security, user management, and containerization complexity.

Here is a breakdown of the two approaches, emphasizing why the Git Gateway is the superior choice for managing non-developer editors.

🆚 Direct GitHub Backend

The Direct GitHub Backend relies on GitHub’s native OAuth flow to authorize users.

🛡️ Git Gateway Backend (Recommended)

The Git Gateway acts as an intermediary (a proxy service) between the Decap CMS UI and your Git repository. It is the necessary component for achieving proper decoupling of user roles.

🛠️ The Self-Hosted Container Solution

Given your requirement for external users to edit content without giving them GitHub access, you must use the Git Gateway Backend.

The Git Gateway container acts as the bridge:

1. Login: The editor logs in to your Git Gateway container (e.g., using email/password).
2. Token: The Gateway verifies the user and issues a JSON Web Token (JWT) to the Decap CMS UI.
3. Commit: When the editor clicks “Save,” the Decap UI sends the content and the JWT to the Gateway.
4. Proxy: The Gateway validates the JWT, takes the content, and commits it to GitHub using its own admin PAT.

This separation ensures your Astro SSG site stays secure while providing a professional, easy-to-use content management experience.

PageCMS

Page-CMS is also an interesting option: https://github.com/pages-cms/pages-cms

MIT | The No-Hassle CMS for Static Sites Generators

Strapi

Headless StrapiCMS Example

How to setup StrapiCMS?

If you are looking from CMS, you can have a look to this post, where I setup KeystaticCMS

• https://www.opensourcealternative.to/project/Strapi
  • https://docs.strapi.io/dev-docs/installation/docker

Astro JS x Strapi

https://www.youtube.com/watch?v=WI-_gVBoBBg https://github.com/PaulBratslavsky/pauls-strapi-crashcourse https://github.com/JAlcocerT/pauls-strapi-crashcourse

https://github.com/strapi/LaunchPad -> https://launch-pad-roan.vercel.app/en

Official Strapi Demo application

https://www.youtube.com/watch?v=Ud9obEHadLI

• https://elest.io/open-source/strapi

• https://strapi.io/blog/how-to-self-host-your-headless-cms-using-docker-compose

• https://hub.docker.com/r/strapi/strapi/tags

• https://docs.strapi.io/cms/installation/docker

• https://docs.strapi.io/cms/quick-start

• https://strapi.io/blog/how-to-self-host-your-headless-cms-using-docker-compose

How to Deploy Strapi - Headless CMS

Headless CMS based on nodejs

https://www.youtube.com/watch?v=HsojvBVk6JQ

https://www.youtube.com/watch?v=kJ4c9U5JStU

Consume the API from any client (React, Vue, Angular), mobile apps or even IoT devices, using REST or GraphQL.

1. Payload CMS (The TypeScript/Next.js Favorite)

Payload is a modern, open-source (MIT licensed) platform that functions as a powerful Headless CMS, Application Backend, and Admin UI.

It has rapidly gained popularity, especially among developers working with TypeScript and React-based frontends like Next.js.

2. PocketBase (The All-in-One Powerhouse)

Yes, there are several other notable self-hosted CMS alternatives, and the answer to whether PocketBase can be used as a CMS is a qualified Yes.

PocketBase is a single, compact, open-source application that combines an embedded SQLite database, a real-time API (REST/GraphQL), file storage, and an Admin UI into one easy-to-deploy Go executable.

Directus

Headless DirectusCMS Example

• https://astro.build/themes/details/directus-cms-template/
• https://github.com/directus-labs/starters/tree/main/cms/astro

Directus and Strapi are two of the most popular open-source, self-hosted headless CMS platforms, but they operate with fundamentally different philosophies.

The choice often comes down to whether you prefer a Database-First approach (Directus) or a Code-First approach (Strapi).

🆚 Directus vs. Strapi: A Key Comparison

When to Choose Which CMS

Would you like to explore the specifics of Directus Flows or find out more about Strapi’s plugin ecosystem?

BCMS

https://github.com/bcms/starters/tree/master/astro/e-commerce

Key Features of BCMS:

• It supports over 10 input types for diverse content needs.
• Detailed permission controls for user and client management.
• Omnichannel publishing capabilities for distributing content across multiple platforms.
• Internationalization support for global content delivery.
• Advanced media management with folder structures, support for videos, images, audio, documents, and real-time image processing.
• Extensibility with functions, cron jobs, and webhooks to automate workflows.
• Designed for programmatic SEO, job boards, eCommerce sites, and large enterprise-level projects.

Technical Architecture:

BCMS is an API-first, decoupled system where content storage and management are separated from presentation.

This enables developers to build flexible user interfaces independent of the backend system, ensuring content can be delivered via REST or GraphQL APIs to websites, mobile apps, or other digital platforms.[5]

Use Cases and Benefits:

• Ideal for scaling content management across various channels.
• Supports fast development by decoupling front-end and back-end.
• Global CDN ensures fast content delivery worldwide.
• Suitable for enterprises needing complex workflows and thousands of pages.[2][3]

BCMS combines developer-friendly capabilities with client usability, letting non-technical users manage content intuitively while enabling teams to build advanced, scalable web experiences.[1]

It can be used self-hosted or in the cloud, with free starter projects and integrations to jumpstart usage quickly.[6]

1 2

TinaCMS

• https://jalcocert.github.io/JAlcocerT/gabemorris12-mechanism-project-setup/

Besides Directus, Strapi, Payload, and PocketBase, the self-hosted landscape includes:

• TinaCMS: A Git-based CMS that allows for in-context, visual editing directly on the frontend (like a page builder experience), but with the content stored in local Markdown/MDX/JSON files within a Git repository.
• KeystoneJS: An open-source CMS built with Node.js and GraphQL. It is highly flexible and developer-focused, using code to define schemas and fields.

Websites without Coding

Im sure that you are wondering what about wordpress or ghost.

Links for Artists

Resources for artists to have referenced for their fans

LinkStack vs LittleLink

Two Selfhosted Link Alternatives

I will be adding here more drag and drop, no code content management systems.

Particularly ones that are OSS & Selfhostable, so that you can use them freely and legally within your HomeLab/VPS.

Selfh Ghost

About Scaling Ghost and Wordpress | Post

Selfhosted x PaaS

Selfhosted Server PaaS - Dokploy vs Coolify - Automated DIY Setup

PS: You can use these via PaaS Solutions like Dokploy.

This can enable your users to have a better DIY experience if they wont go for the DWY / DFY offer

If you like to build, you can also create webapps that wraps HUGO/Astro/Any SSG:

Conclusion on WYSIWYG Markdown:

1. For Best Out-of-the-Box Experience: Payload CMS is considered the most modern, offering a powerful, type-safe Rich Text editor (Lexical) that provides a great visual experience while storing structured content (JSON).
2. For Pure Markdown with Preview: Directus offers a dedicated Markdown interface that is often the most direct choice if you need to guarantee the output is clean Markdown.
3. For Extensibility: Strapi and Payload both shine, allowing you to easily swap in popular third-party editors (CKEditor, TinyMCE) if the default isn’t sufficient.

📝 Rich Text / Markdown Editor Comparison