DEV Community

Cover image for Static content pages - still the fastest web-experience

Posted on • Originally published at

Static content pages - still the fastest web-experience

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:


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]

Enter fullscreen mode Exit fullscreen mode


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

Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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>"
Enter fullscreen mode Exit fullscreen mode

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':

Enter fullscreen mode Exit fullscreen mode

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

<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">
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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:

Discussion (1)

sroehrl profile image
neoan Author

Received a good tip: instead of staging locally, you can also use the PHP sdk and then forward the request accordingly.