Static content pages - still the fastest web-experience

Tutorial: How to utilize to generate static content for your website.

In the constant battle of visibility, SEO and speed are important factors. Too often do we neglect these points due to our love for the dynamic web, slick SPAs and client-heavy gimmicks. Next to accessibility, static pages solve for many of these problems while our static site generators are usually monsters of their own.

Today, let's look at a "micro generator" that helps us to manage content dynamically while delivering static HTML pages.

Video-version of this tutorial: YouTube

The concept

The idea is rather simple: let's use the webhook capability of a headless CMS (here to receive content and write/update static HTML files. Next to what we want to achieve, this is a solution for additional challenges:

 - it enables us to omit any API necessities

 - it enables us to run our CMS locally or within a private network

In this POC, we will use the following folder structure



 /assets/menu.json (not used in the article, but in the video and gist)

/assets/script.js (not used in the article, but in the video and gist)




.htaccess (if apache)


Preparing the CMS

For development reasons (when you develop locally, you will find yourself having trouble sending webhooks to localhost), I installed locally. However, you can develop online (e.g. via FTP) to avoid a bigger setup. Whatever the case, setup your headless CMS to send webhooks to your endpoint. In my case, that was http://localhost/static-blog/receiver.php and using a baerer token for security.

Tip 1:

In, you can set webhooks in "Manage" -> "API"

Tip 2:

When using Apache, be sure to include the following in your .htaccess

RewriteEngine On
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule .* - [e=HTTP_AUTHORIZATION:%1]



Our receiver should account for the following tasks:

1. Validate calls to ensure the received call is legitimate

2. Account for various events (create, update etc)

3. Write/update static pages

4. Generate a menu


Let's start:

First, let's create our class that we can later initiate with new Receiver('our-webhook-secret');

class Receiver
    function __construct($mySecret)
        if (isset($_SERVER['HTTP_AUTHORIZATION']) && substr($_SERVER['HTTP_AUTHORIZATION'], 7) == $mySecret) {
            // valid call -> do things

Next, we want want to grab the payload of the call:

    private $data;
    private function fetchData()
        $data = file_get_contents('php://input');
        if (!empty($data)) {
            $this->data = json_decode($data, true);

We now have the data available as associative array in the property $data. At this point, we should know that the call is structured like this:

    "event": "created",
    "payload": {
        "name": "article-name",
        "content": [
                "content": "<p>Content</p>"

So let's make sure we have that information available in our instance and create a switch-case for the possible events

- created

- updated

- deleted

in our constructor:

function __construct($mySecret)
        if (isset($_SERVER['HTTP_AUTHORIZATION']) && substr($_SERVER['HTTP_AUTHORIZATION'], 7) == $mySecret) {
            switch ($this->data['event']) {
                case 'created':
                case 'updated':
                    // here, let's write to a file
                case 'deleted':


You might wonder about the method "writeToFile" as we don't have it yet. but first, we need to account for two prerequisites:

- template-rendering

- template

Using composer, let's include neoan3-apps/ops (composer require neoan3-apps/ops) and remember that we need the autoloader available (require_once __DIR__ . '/vendor/autoload.php';) in our receiver.

For now, the template is a primitive HTML file in /assets/template.html

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../assets/style.css">
<div class="container" id="blog">
            <li n-for="links as link">
                <a href="[[]]">[[]]</a>
    <div class="content-part" n-for="content as contentPart">

Ups... and have some issues with parsing this template. The hard brackets should be curlys!

The markup should be intuitive, but feel free to head over to the documentation at:


Finally, let's address our missing function:

private function writeToFile()
        // let's ignore the article if it is a draft
        if ($this->data['payload']['publish_date']) {
            // account for \Neoan3\Apps\Ops routing
                define('path', __DIR__);
            $destination = path . '/blog/' . $this->data['payload']['slug'] . '.html';
            $content = \Neoan3\Apps\Ops::embraceFromFile('assets/template.html', $this->data['payload']);
            file_put_contents($destination , $content);

That's it! We can now generate our first static article by using the backend.

Now, there is a lot of functionality missing (like delete, menu etc.). Some of it is addressed in the video and you can find a little more advanced version here:

neoan @neoan

1094 readers
php cms static pages
On topic

Install PHP 7.4 on Ubuntu

Finally PHP 7.4 is out! You have read about the new features, you have followed externals, you have gathered ideas on how new capabilities will save time. Let's get it running.

Scaffolding REST APIs with JWT authentication

Ever had the need for your own backend while developing your web-app?

Git: globally change GitHub-remotes from git@ to https

Does your IDE or composer set remote repositories to ssh rather than https? Or are repositories you are using set up that way? You are not alone. Let's fix it once and for all!

VueJS & neoan3: a love story.

Setting up neoan3 to play nice with Vue isn't hard. Here is how the two frameworks are combined to support fast, dynamic and rapid development.

Install PHP 8 on Ubuntu

PHP8 has finally been released and it is FAAAAST! Time to update.

SEO strategies for

How to get your content listed where you want it to.

MySQL: ERROR1364 fix

The painful realization of why people use containers. PHP SDK

Create your own blog.

How to Build an Express App in Node That Reads From a Headless CMS

A headless CMS lets you design your own front-end, sometimes your own back-end. Let's set up a small application to get us started. Beginner friendly. Approx. 20 min. to reproduce / follow along

MySQL in PHP - how to deal with databases

How I handle MYSQL database transactions in PHP

Cross publishing to

How to publish your content to from - hopefully

How to install global npm packages without sudo on Ubuntu

Running npm on a server can be painful. Privileges are there for a reason, and so is sudo. Running npm with sudo is not the solution.

Transformer - falling in love with PHP's magic methods all over again

PHP's magic functions have been around for a long time. But there were always good reasons to avoid them. Transformer is a practical and reliable way to make use of the most common operations we program: CRUD operations.

What is composer?

Composer has become PHP's package & dependency manager. Why you should use it.