Statie - part 1: How to run it Locally

~~Feb, 2017~~
Updated Sep, 2018
X comments
Found a typo? Edit me

This post is deprecated at March 2020

Statie was deprecated with last version 7, because 99 % of features are covered in Symfony application.

To create static content, migrate to Symfony app and SymfonyStaticDumper.

This post was updated at September 2018

Updated with Statie 5 and Twig support.

Statie is a tool to create semi-static webpages. It allows you to host your website on Github for free. Event with own domain and https. It was created in late 2016 based on Scuplin and its major feature is simplicity.

That was the "pitch", now I will show you how to use it.

Create Empty Project...

...and require Statie package.

composer require symplify/statie

3 Steps Life-Cycle

Statie has very simple life-cycle:

Create code in /source directory, using HTML, TWIG, Latte and Markdown
Generate HTML code via console
See the generated HTML output code in /output via local PHP server

Later, you can push output code to Github Pages or your server via FTP or SSH. But let's start with small step.

1. Create your Code

Statie supports HTML, TWIG and Markdown (in .md files only). For most of pages, HTML and TWIG/Latte is enough. Markdown is useful for repeated items like posts.

Let's create our index page.

<!-- source/index.twig -->

Hi!

Setup Layout

<!-- source/_layouts/default.twig -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        {% block content %}{% endblock %}
    </body>
</html>

And add layout and block content to the index.twig:

---
layout: "layouts/default.twig"
---

{% block content %}
    Hi, my job is to help you grow any direction you choose!
{% endblock %}

Section between --- is used to configure system or own variables. I will tell you more about that later.

2. Generate Final HTML Code

Run in project root in CLI:

vendor/bin/statie generate source

3. See Generate Code

Create PHP local server in CLI:

php -S localhost:8000 -t output

and open localhost:8000 in your browser.

Voilá!

The same demo as above, just with Latte syntax

Minitip: Use Gulp Work For You

It is quite annoying to refresh regenerate content manually every time you change the code.

Simple Gulp script can regenerate content for use.

Install gulp and gulp-watch:

npm install -g gulp gulp-watch

var gulp = require('gulp');
var watch = require('gulp-watch');
var exec = require('child_process').exec;

gulp.task('default', function () {
    // Run local server, open localhost:8000 in your browser
    exec('php -S localhost:8000 -t output');

    // Generate current version
    // For Windows use: exec('vendor\\bin\\statie generate', function (err, stdout, stderr) {
    exec('vendor/bin/statie generate', function (err, stdout, stderr) {
        console.log(stdout);
        console.log(stderr);
    });

    return watch(['source/**/*', '!**/*___jb_tmp___'], { ignoreInitial: false })
    // For the second arg see: https://github.com/floatdrop/gulp-watch/issues/242#issuecomment-230209702
        .on('change', function() {
            // For Windows use: exec('vendor\\bin\\statie generate', function (err, stdout, stderr) {
            exec('vendor/bin/statie generate', function (err, stdout, stderr) {
                console.log(stdout);
                console.log(stderr);
            });
        });
});

And run the script via:

gulp

Now open localhost:8000 and change source/index.twig.

It works!