Introdução

Jigsaw é um framework baseado em Laravel que gera site estático em PHP. Foi desenvolvido pela empresa Tighten em maio de 2015, possui uma boa documentação e a comunidade é bem ativa.
Trata-se de uma aplicação que você pode utilizar em seu computador e que tem como saída os arquivos estáticos como: HTML, CSS e JavaScript.
Seu deploy pode ser feito em qualquer servidor web que provê conteúdo estático e se não quiser ter custos, pode publicar no GitHub Pages.

Iniciando um projeto

Para iniciar um projeto com Jigsaw é bem simples! Primeiro você deve abrir o terminal, criar uma pasta com o nome do seu projeto e em seguida acessar sua pasta. Para isso digite os seguintes comandos:

mkdir my-site && cd my-site

Instalando Jigsaw com Composer

Vamos utilizar o Composer (gerenciador de dependências do PHP) para fazer a instalação do Jigsaw no nosso projeto.

composer require tightenco/jigsaw

Inicializando o projeto

./vendor/bin/jigsaw init

Após iniciar o projeto você terá a seguinte estrutura de pastas:

Desenvolvimento - servidor local

Você pode acompanhar o desenvolvimento do site acessando o localhost:8000 após rodar o build e em seguida o serve.

Sempre que fizer alguma alteração e quiser acompanhar terá que rodar o build pois ele não carrega automaticamente as alterações.

./vendor/bin/jigsaw build

./vendor/bin/jigsaw serve

Compilando com Laravel Mix

Você também pode usar o Laravel para compilar e visualizar as alterações automaticamente utilizando o Browsersync. Para isso precisa instalar o NPM.

npm install

Depois disso digite o seguinte comando:

npm run watch

Desta maneira o Browsersync abrirá automaticamente uma nova guia do navegador e recarregará a página toda vez que você fizer uma alteração. Muito útil para visualizar suas alterações rapidamente!

Tipos de conteúdo

Todo o conteúdo do seu site deve ser armazenado na pasta source. O Jigsaw permite criar arquivos usando vários formatos, como:

• Laravel's Blade

• Markdown

• Ou vários outros tipos de arquivo

Laravel's Blade

Também é possível criar sites usando Blade que é o sistemas de templates padrão do Laravel. Para isso, basta criar seus arquivos na pasta source como [nome_do_arquivo].blade.php
Você pode conferir como funciona o Blade na documentação oficial do Laravel.

Markdown

Para este tutorial, optei por mostrar como criar os arquivos usando Markdown.

Markdown é uma linguagem de marcação desenvolvida por John Gruber e Aaron Swartz. Ela é projetada para que textos simples possam ser convertidos em HTML e muitos outros formatos.

Com ela é possível marcar títulos, listas, tabelas, etc., de forma muito mais limpa, legível e precisa, do que se fosse fazer com HTML que é muito verboso.

Configurações do site

Uma maneira de agilizar o trabalho é definindo variáveis de configuração do site. Imaginem que, por exemplo, o e-mail esteja disponível em diversas partes do site e que por algum motivo você tenha que alterar. Você até poderia utilizar um find/replace, mas com o Jigsaw é muito simples. Basta adicionar o email no array do arquivo config.php que será acessível em todo projeto, como uma propriedade do objeto $page.

Por exemplo, se o seu config.php estiver assim:

<?php

return [
    'contact_email' => 'support@example.com',
];

Você pode usar essa variável em qualquer arquivo do site, assim:

@extends('_layouts.master')

@section('content')
    <p>Entre em contato {{ $page->contact_email }}</p>
@stop

Helpers

Além de armazenar variáveis no arquivo config.php, podemos definir helpers adicionando uma chave com o nome da função. Os helpers são chamados referenciando o nome do método no objeto $page em qualquer arquivo.

Por exemplo, você pode adicionar um método que identifica se a página atual pertence a uma seção específica, para realçar a seção atual em um menu:

Essa função é acessível chamando $page->selected("url-da-pagina") de qualquer página.

Veja o exemplo:

<?php

return [
    'company' => 'Lyseon Tech',
    'selected' => function ($page, $section) {
        return str_contains($page->getPath(), $section) ? 'selected' : '';
    },
];

Depois disso, dentro do diretório source, crie a pasta _partials (nela você pode dividir o seu site em partes como menu e footer). Agora, podemos criar um menu que destaque se uma página está selecionada, para isso crie o arquivo: _menu.blade.php e nele coloque o seguinte código:

<style>
.selected{
  font-weight: bold;
  color: red;
}
</style>

<a class="{{ $page->selected('about') }}"
    href="{{ $page->baseUrl }}/about">Sobre nós</a>
<a class="{{ $page->selected('projects') }}"
    href="{{ $page->baseUrl }}/projects">Projetos</a>
<a class="{{ $page->selected('posts') }}"
    href="{{ $page->baseUrl }}/blog">Blog</a>

Ps: Ignore o style junto com o html, usei apenas para exemplificar.
No arquivo _layouts/master.blade.php inclua o menu digitando @include('_partials._menu')
E por último, para que você consiga ver seu menu funcionando, é preciso criar um arquivo no diretório source, nesse exemplo criei o arquivo about (Sobre nós).
Prontinho! Se estiver usando o Browsersync você já consegue ver o menu funcionando no seu navegador.

Collections

O Jigsaw fornece recursos trabalhar com collections. As collections podem ser usadas para gerar páginas como por exemplo de postagens de blog ou artigos. Pode ser usada também para incorporar blocos de conteúdo de uma página, como biografias da equipe, descrições de produtos ou um portfólio de projetos.

Para criar uma collection é bem simples, crie uma chave chamada collections no array de configuração do arquivo config.php . Cada collection deve ser indicada pelo nome da collection (normalmente, no plural), seguido por um array de configurações.
Veja o exemplo a seguir:

<?php

return [
    'company' => 'Lyseon Tech',
    'contact_email' => 'support@tighten.co',
    'collections' => [
        'posts' => [
            'path' => 'blog/{date|Y-m-d}/{filename}',
            'author' => 'Daiane',
        ],
    ],
];

Layout das páginas de post

Crie o arquivo post.blade.php dentro da pasta _layouts e chamar as variáveis que foram definidas no seu arquivo config.php

@extends('_layouts.master')

@section('body')
    <h1>{{ $page->title }}</h1>
    <p>By {{ $page->author }} • {{ date('F j, Y', $page->date) }}</p>

    @yield('content')

    <p>Total de {{ $posts->count() }} posts</p>

    <p>Listagem:</p>
    <ul>
    @foreach ($posts as $post)
        <li>
          <a class="{{ $page->selected($post->_meta->url[0]) }}" href="{{$post->_meta->url[0]}}">{{ $post->title }}</a>
        </li>
    @endforeach
    </ul>

@endsection

Pasta para armazenar os posts

Crie a pasta _post dentro da pasta source

Criando um item em uma Collection

Na pasta pasta _post criaremos nosso primeiro post em markdown para isso crie um arquivo [nome_do_arquivo].md seguindo o modelo abaixo:

---
extends: _layouts.post
title: "Meu primeiro Post"
author: Daiane
date: 2017-03-23
section: content
---

Jigsaw é um poderoso gerador de **site estático** em PHP!

Sumário da collection posts

Para termos um sumário de posts em ´/blog´, crie na raiz da pasta source o arquivo blog.blade.php conforme a raiz do path informado na collection posts no arquivo de configuração do site.

@extends('_layouts.master')
@section('body')
<ul>
  @foreach ($posts as $post)
    <li><a href="{{$post->_meta->url[0]}}">{{ $post->title }}</a></li>
  @endforeach
</ul>
<h1>Listagem de posts</h1>
@endsection

E assim temos nosso site utilizando Jigsaw.

Veja também:

Se quiser conferir esse projeto no meu GitHub