A console application for Staticka. Useful for building content and templates into static HTMLs using terminal commands.
Install Console
via Composer:
$ composer require staticka/console
Create a new file by running staticka create
:
$ staticka create "Hello World"
pages/hello-world.md
---
name: Hello World
permalink: /hello-world
layout: main.twig
title: Hello World
description:
---
# Hello World
This is my first post that is built by Staticka.
Then run the staticka build
command to build the files:
$ staticka build
To see the output, open public/hello-world/index.html
in a web browser.
public/hello-world/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World - Staticka</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,700;1,300;1,700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap">
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand text-decoration-none" href="/">Rougin Gutib</a>
</div>
</nav>
<div class="jumbotron bg-dark text-white">
<div class="container">
<h1>Hello World</h1>
<p></p>
</div>
</div>
<div class="container post">
<h1>Hello World</h1>
<p>This is my first post that is built by Staticka.</p>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
NOTE: The result above is minified by default.
To build the website after changes are made on specified folders, run the staticka watch
in the terminal:
$ staticka watch
Changes found in "pages"...
Building website...
Website built successfully!
By default, it will watch any changes found in the pages
directory.
It is possible to add additional data by adding a new property named staticka
in the composer.json
.
{
"staticka":
{
"filters":
[
"Staticka\\Filter\\StyleMinifier",
"Staticka\\Filter\\HtmlMinifier",
"Staticka\\Filter\\ScriptMinifier"
],
"paths":
{
"assets": "$ROOT$/assets",
"pages": "$ROOT$/pages",
"plates": "$ROOT$/plates",
"public": "$ROOT$/public",
"scripts": "$ROOT$/scripts",
"styles": "$ROOT$/styles"
},
"variables":
{
"github": "https://github.com/rougin",
"base_url": "https://roug.in/",
"website": "Rougin Gutib"
}
},
"require":
{
"staticka/expresso": "~0.1"
}
}
NOTE: $ROOT$
is a special variable that corresponds to the directory of the composer.json
file.
Filters are helpful utilities that can alter the output after being generated. Some notable examples are the HtmlMinifier
, StyleMinifier
, and ScriptMinifier
which minifies specified elements in a static page. By default, the mentioned filters were already included.
These are a list of paths that are being used by Staticka in generating static pages and also being checked for changes when using the staticka watch
command:
assets
- location of the static assets that will be copied during compilation.pages
- folder path where the Markdown templates are being stored. When creating a new page throughstaticka create
, the new file will be saved in this path.plates
- the location of the Twig templates. This can be used in updating the templates besides on the default layout.public
- where the static pages be stored after building.scripts
- location of the Javascript filesstyles
- location of the SASS files. By default, Staticka compiles SASS files and also providedBootstrap 4
SASS files out of the box.
This section contains variables that can be passed for each page being generated. This might be useful when passing global variables such as the base URL, site name, or a text that must be available in all pages.
Please see CHANGELOG for more information what has changed recently.
$ composer test
The MIT License (MIT). Please see LICENSE for more information.