A simple and smooth static site generator and CMS and a Gulp-based build tool for static websites. This tool helps you automate tasks like HTML templating, SCSS compilation, asset optimization, and live browser reloading during development.
Install the tool globally using npm:
npm install -g pyltraThe following commands are available:
-
Build the project:
pyltra build
This command cleans the
distdirectory, processes HTML templates, compiles SCSS, optimizes assets, and generates the final output in thedistfolder. -
Start the development server:
pyltra serve
This command builds the project and starts a development server with live reloading. The server serves files from the
distdirectory. -
Run in production mode:
pyltra build --prod
This command enables production-specific optimizations like minification and sourcemap omission.
Your project must follow this structure for the tool to work correctly:
your-project/
├── src/
│ ├── templates/ # HTML templates (Nunjucks format)
│ │ └── *.html
│ ├── data/ # Data files (YAML, JSON, Markdown)
│ │ ├── shared.yaml # Shared data
│ │ ├── en.pages.yaml # Language-specific pages data
│ │ └── ... # Other data files
│ ├── assets/ # Static assets
│ │ ├── scss/ # SCSS files
│ │ ├── css/ # Plain CSS files
│ │ ├── js/ # JavaScript files
│ │ ├── img/ # Image files
│ │ └── other/ # Other static files
│ └── config.yaml # Configuration file
└── dist/ # Output directory (generated by the tool)
The tool reads configuration from a config.yaml file located in the root of your project. Here’s an example configuration:
languages:
- code: en
- code: fr
dataSources:
shared: data/shared.yaml
pages: data/${lang}.pages.yaml
collections:
articles:
dataFile: data/${lang}.articles.yaml
items:
- file: data/${lang}/article1.md
slug: article1
fallback:
title: "Default Title"
content: "Default Content"
templates:
articles-list: articles-list.html
article-item: article-item.html
bundles:
- bundles/example.html-
languages: List of supported languages. -
dataSources: Paths to shared and language-specific data files. -
collections: Define collections (e.g., blog posts) with their data files and item templates. -
bundles: Optional list of additional files to copy directly to thedistfolder.
This tool uses Nunjucks for HTML templating. Nunjucks is a powerful templating engine that allows you to create dynamic HTML templates with logic, loops, and variables.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
</head>
<body>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
{% if nav %}
<ul>
{% for item in nav %}
<li><a href="{{ item.url }}">{{ item.label }}</a></li>
{% endfor %}
</ul>
{% endif %}
</body>
</html>For more information on Nunjucks syntax and features, visit the official documentation: Nunjucks Documentation
You can download the latest version of this tool from NPM: Your Gulp Tool on NPM
Alternatively, you can clone the source code from GitHub:
git clone https://github.com/nullqube/pyltra.gitFeel free to open issues or submit pull requests on GitHub.
This project is licensed under the MIT License.