website·Indexed 36 days ago
https://jigsaw.tighten.co/docs/installation/A framework for rapidly building static sites using modern tooling. Jigsaw allows developers to create content using Markdown and Blade templates, featuring powerful collection management, site variables, and Vite integration for asset compilation. It supports local development via .env configuration and deployment to platforms like GitHub Pages and Netlify.
source directory. Jigsaw supports multiple authoring formats for content files, including Laravel's Blade templating language, Markdown, and various other file types.index.blade.php as an index.html file within a subfolder named after the original file. This allows pages to be accessed via a directory path (e.g., http://example.com/about-us/) rather than a direct .html file path (e.g., http://example.com/about-us.html). For example, source/about-us.blade.php is rendered to build/about-us/index.html.@extends('_layouts.master')
@section('body')
<h1>Hello World</h1>
@endsectionextends key from the YAML front matter or the @extends directive from the Blade file.bootstrap.php using the $events object.// Example of registering listeners in bootstrap.php
$events->beforeBuild(function ($jigsaw) {
// Runs before source files are processed
});
$events->afterCollections(function ($jigsaw) {
// Runs after collections are processed, but before output files are built
});
$events->afterBuild(function ($jigsaw) {
// Runs after the build is complete and files are written to the build directory
});$page object provides several get functions to retrieve metadata about the current page. These methods allow you to dynamically access file paths, URLs, and system timestamps for the page being processed.// Get the path to the current page, relative to the site root
$page->getPath();
// Get the relative path (parent directories) of the current page, relative to the site root
$page->getRelativePath();
// Get the full URL to the item (requires baseUrl to be defined in config.php)
$page->getUrl();
// Get the filename of the page without the extension (e.g., 'my-first-page')
$page->getFilename();
// Get the file extension (e.g., 'md')
$page->getExtension();
// Get the last modified time of the file as a Unix timestamp
$page->getModifiedTime();extends key to the YAML front matter of a Markdown file or using the @extends directive in a Blade file.---
extends: _layouts.post
title: My First Blog Post
author: Keith Damiani
date: 2017-03-23
section: content
---
This post is profoundly interesting.{{-- _layouts/post.blade.php --}}
@extends('_layouts.master')
@section('body')
<h1>{{ $page->title }}</h1>
<p>By {{ $page->author }} • {{ date('F j, Y', $page->date) }}</p>
@yield('content')
@endsectioncount(), filter(), and where().{{-- List all post titles --}}
<p>Total of {{ $posts->count() }} posts</p>
<ul>
@foreach ($posts as $post)
<li>{{ $post->title }}</li>
@endforeach
</ul>
{{-- Filter posts by author --}}
@php
$authorPosts = $posts->filter(function ($value, $key) use ($page) {
return $value->author == $page->author;
});
@endphp
@if ($authorPosts->count() > 0)
<ul>
@foreach ($authorPosts as $post)
<li>{{ $post->title }}</li>
@endforeach
</ul>
@endifdate() function.---
date: 2018-02-16
---<!-- In Blade template --> <p>The formatted date is {{ date('F j, Y', $page->date) }}</p>
Run the npm run dev command to start the development environment. This setup uses Vite to handle JavaScript and CSS assets (located in source/_assets/js/app.js and source/_assets/css/app.css) and provides Hot Module Replacement (HMR).
When using this method, Jigsaw generates static HTML in the /build_local directory and automatically triggers a full browser page reload whenever Markdown or Blade files are modified.
npm run devnetlify.toml configuration file in your project root and connecting your repository to the Netlify app for continuous deployment.[build]
command = "npm run build"
publish = "build_production".markdown or .md file extension. You must specify the layout to extend and the section to populate within the YAML front matter.---
extends: _layouts.master
section: content
---
# My awesome heading!
My awesome content!