Statie: How to run it Locally

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:

  1. Create code in /source directory, using HTML, Latte and Markdown
  2. Generate HTML code via console
  3. 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, Latte (like Smarty or Twig, just bit different syntax) and Markdown (in .md files only).

For most of pages, HTML and Latte is enough. Markdown is useful for repeated items like posts.

Let's create our index page.

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

Hi!

Use Layout if you Like

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

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

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

---
layout: default
---

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

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á!

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.latte.

It works!



What do you think?