Jigsaw - Gerador de sites estáticos em PHP - DEV Community
Daiane Alves for PHPWomenBR
Posted on Dec 7, 2019 • Updated on Feb 3, 2020
Jigsaw - Gerador de sites estáticos em PHP
#php #laravel #blade #staticsite
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.
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:
Instalando Jigsaw com Composer
Vamos utilizar o Composer (gerenciador de dependências do PHP) para fazer a instalação do Jigsaw no nosso projeto.
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 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.
Depois disso digite o seguinte comando:
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!
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
Ou vários outros tipos de arquivo
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.
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.
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:
'contact_email' => 'support@example.com',
Você pode usar essa variável em qualquer arquivo do site, assim:
<p>Entre em contato {{ $page->contact_email }}</p>
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.
'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:
<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.
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.
'contact_email' => 'support@tighten.co',
'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
<p>By {{ $page->author }} • {{ date('F j, Y', $page->date) }}</p>
<p>Total de {{ $posts->count() }} posts</p>
<p>Listagem:</p>
<a class="{{ $page->selected($post->_meta->url[0]) }}" href="{{$post->_meta->url[0]}}">{{ $post->title }}</a>
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:
title: "Meu primeiro Post"
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.
<li><a href="{{$post->_meta->url[0]}}">{{ $post->title }}</a></li>
<h1>Listagem de posts</h1>
E assim temos nosso site utilizando Jigsaw.
Se quiser conferir esse projeto no meu GitHub
@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