Statie - part 1: How to run it Locally
Why?
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.
What is new?
Updated with Statie 5 and Twig support.
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!
Have you find this post useful? Do you want more?
Follow me on Twitter, RSS or support me on GitHub Sponsors.