Search WRITE A POST

Daiane Alves
Jigsaw - Gerador de sites @daianealves

Information systems student, local

community leader PHPRio, PHPWomen e

estáticos em PHP WomakersCode e MSP Microsoft.

+ FOLLOW
Daiane Alves Dec 7 '19 Updated on Dec 10, 2019 ・5 min read
work
#php #laravel #blade #staticsite CFO at Lyseon Tech Soluções
Tecnológicas
location

Introdução Rio de Janeiro - Brasil

education
Information Systems - UNESA

Jigsaw é um framework baseado em Laravel que gera site estático em PHP. joined
Nov 9, 2019
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.
5 3 2 DISCUSS
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 Swar . 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]}}">{{ $
</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:
documentaçãção do Jigsaw

Se quiser conferir esse projeto no meu GitHub

clique aqui

Daiane Alves + FOLLOW

Information systems student, local community leader PHPRio, PHPWomen e
WomakersCode e MSP Microsoft.
@daianealves DaianeAlvesRJ

Add to the discussion

PREVIEW SUBMIT

Dec 8 '19
Mohd Samgan Khan

@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...

2 REPLY

 
Dec 8 '19
Mohd Samgan Khan

λ 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

2 REPLY

 
Dec 10 '19
Daiane Alves Author

You must first use jigsaw init to install jigsaw via composer

Try this: composer require tightenco/jigsaw

1 REPLY

 
Dec 10 '19
Mohd Samgan Khan

Done that already. not working

2 THREAD

Dec 10 '19
Daiane Alves Author

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

1 REPLY

code of conduct - report abuse

Classic DEV Post from Mar 28 '19

JavaScript One-Liners That

Make Me Excited
Andrew Healey Andrew Healey

A collection of smart and zany solutions to some common, and + FOLLOW

quite uncommon, problems.
844 48

Another Post You Might Like

Laravel Greatest Trick

Revealed: Magic Methods
Steven Yung Steven Yung

A small guide on how Laravel leverage magic methods in PHP + FOLLOW

159 8

Another Post You Might Like

The beauty of Docker for

local Laravel development
Andrew Schmelyun Andrew Schmelyun

Docker and Laravel can work together in beautiful harmony to + FOLLOW

make setting up customizable local dev environments easy and
simple.
232 27

★ Improving assertions on ★ Watch the Flare reveal live

Laravel fakes Freek Van der Herten - Jan 2

Freek Van der Herten - Jan 2

★ The value of the void ★ Improving Artisan

typehint in PHP commands
Freek Van der Herten - Jan 2 Freek Van der Herten - Jan 2

Home About Privacy Policy Terms of Use Contact Code of Conduct

DEV Community copyright 2016 - 2020  🔥