shaack / reboot-cms

A flat file, Markdown CMS in PHP with blocks structure.

Reboot CMS

A flat file, Markdown CMS in PHP, inspired by Pico, Redaxo and Craft CMS.

Reboot CMS is a minimal CMS without needing a database, but with the support of Blocks.

Why another CMS?

I developed Reboot CMS because I didn't find a CMS that works with flat markdown files but allows easy use of blocks.

Reboot CMS is very small and the pages are delivered extremely fast. My homepage shaack.com, which was build with Reboot CMS has a PageSpeed Insights performance scoring of 100.

Websites using Reboot CMS

• The Reboot CMS demo page
• shaack.com
• wukies.de
• chesscoin032.com

Install

Download the Reboot CMS repository and install it in your web root.

This should work out of the box.

Then (important), set the Admin password in /local/.htpasswd

Documentation

Page

Folder: /site/pages

A Page can be a flat Markdown file, can contain Blocks or also can be a PHP file.

Pages are auto-routed on web-requests:

• index.md or index.php will be shown on requesting /
• NAME.md or NAME.php will be shown on requesting /NAME
• FOLDER/index.md (or .php) will be shown on requesting /FOLDER
• FOLDER/NAME.md (or .php) will be shown on requesting /FOLDER/NAME

Example for a Markdown Page with Blocks:

---
title: Reboot CMS 
description: Reboot CMS is a flat file CMS, with the support of blocks. 
author: Stefan Haack (shaack.com)

---

<!-- jumbotron -->

# Reboot CMS

A flat file, markdown CMS with blocks

---
The main idea is, to have a **minimal CMS** without needing a database, but with the support of blocks.

---
[Learn more](documentation)

<!-- text-image -->

## The text-image block

The gray block above was a jumbotron block. This one is a text-image block, it contains two parts. Parts are separated
by `---`.

---
![alt text](dummy.svg "Title Text")

<!-- 
text-image:
    image-position: left
-->

## Configure blocks in the block comment

The text-image block can also display the image to the left.

---
![alt text](dummy.svg "Title Text")>

<!-- three-columns -->

### the

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.

---

### three-colums

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute
iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

---

### block

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.

This Page contains 3 Block types, "jumbotron", "text-image" and "three-columns". It will render to this:

Blocks can be configured in the block comment. With this configuration, the text-image block allows to display the image to the left side in desktop view.

Markdown files without blocks will render to a flat Markdown page like in every other flat file CMS.

You can define metadata for the page on top of the file in YAML Front Matter syntax.

Block

Folder: /site/blocks

A Block describes how a block is rendered. Blocks are written in PHP.

The code for the "text-image" Block which was used in the page above, looks like this:

<?php
// read the configuration
$imagePosition = @$block->getConfig()["image-position"];
?>
<section class="block block-text-image">
    <div class="container">
        <div class="row">
            <div class="col-md-7 <?= $imagePosition === "left" ? "order-md-1" : "" ?>">
                <!-- all text from part 1 (xpath statement) -->
                <?= $block->xpath("/*[part(1)]") ?>
            </div>
            <div class="col-md-5">
                <!-- using attributes of the image in part 2 -->
                <img class="img-fluid" src="/media/<?= $block->xpath("//img[part(2)]/@src") ?>"
                     alt="<?= $block->xpath("//img[part(2)]/@alt") ?>"
                     title="<?= $block->xpath("//img[part(2)]/@title") ?>"/>
            </div>
        </div>
    </div>
</section>

Elements in the markdown are queried and used as values for the block. The query syntax is Xpath with the addition of the part(n) function.

Another example, the "jumbotron" Block:

<?php /* jumbotron */ ?>
<section class="block block-jumbotron">
    <div class="container">
        <div class="jumbotron">
            <!-- use the text of the <h1> in part 1 for the display-4 -->
            <h1 class="display-4"><?= $block->xpath("/h1[part(1)]/text()") ?></h1>
            <!-- the lead will be the text of the <p> in part 1 -->
            <p class="lead"><?= $block->xpath("/p[part(1)]/text()") ?></p>
            <hr class="my-4">
            <!-- print everything from part 2 -->
            <?= $block->xpath("/*[part(2)]") ?>
            <p>
                <!-- the link in part 3 will be used as the primary button -->
                <a class="btn btn-primary btn-lg" href="<?= $block->xpath("//a[part(3)]/@href") ?>"
                   role="button"><?= $block->xpath("//a[part(3)]/text()") ?></a>
            </p>
        </div>
    </div>
</section>

Admin interface

You find the admin interface unter /admin. The default login is

• user: admin
• pwd: change_me

You can and should change the admin password in local/.htpasswd with

cd local
htpasswd .htpasswd admin

In the admin interface you can edit markdown pages and set the site configuration in which the navigation structure is defined.

Edit the startpage

Edit a flat markdown page

Edit the site configuration

In the site configuration, you can store global values of the site, like the navigation structure or the content of header elements. The site configuration is written in YAML.