Pyltra
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.
Installation
Install the tool globally using npm:
npm install -g pyltra
Usage
Commands
The following commands are available:
-
Build the project:
pyltra build
This command cleans the dist
directory, processes HTML templates, compiles SCSS, optimizes assets, and generates the final output in the dist
folder.
-
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 dist
directory.
-
Run in production mode:
pyltra build --prod
This command enables production-specific optimizations like minification and sourcemap omission.
File Structure
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)
Configuration File
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
Fields in config.yaml
:
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 the dist
folder.
Nunjucks Template Format
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.
Example Template (src/templates/index.html
):
<!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>
Nunjucks Documentation
For more information on Nunjucks syntax and features, visit the official documentation:
Nunjucks Documentation
Download
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.git
Contributing
Feel free to open issues or submit pull requests on GitHub.
License
This project is licensed under the MIT License.
1.1.0
Add 'init' to make the new project
Update in using gulp tasks