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
Top comments (5)
@daianealves I tried this, but facing the following issue, I tried to get to git repo but the link is not working, else I would have raised an issue...
λ jigsaw init
Fatal error: Uncaught Error: Class 'Illuminate\Container\Container' not found in C:\laragon\www\jigswa\vendor\tightenco\jigsaw\jigsaw-core.php:55
Stack trace:
0 C:\laragon\www\jigswa\vendor\tightenco\jigsaw\jigsaw(8): require_once()
1 {main}
thrown in C:\laragon\www\jigswa\vendor\tightenco\jigsaw\jigsaw-core.php on line 55
You must first use jigsaw init to install jigsaw via composer
Try this: composer require tightenco/jigsaw
Done that already. not working
Try this:
1- Create a new folder
2- Enter your folder: cd my-site
3- Type: composer require tightenco/jigsaw
4- ./vendor/bin/jigsaw init
5- ./vendor/bin/jigsaw build
6- ./vendor/bin/jigsaw server