Instalação e Configuração do Jigsaw no Ambiente ServBay

O que é Jigsaw?

Jigsaw é um gerador de sites estáticos baseado em Laravel, adequado para construir documentação, blogs e sites estáticos simples. Ele oferece um sistema de templates flexível e ferramentas de desenvolvimento robustas, tornando a construção e a gestão de sites estáticos muito simples.

Passos para instalar o Jigsaw

Neste artigo, vamos mostrar como instalar e configurar o Jigsaw no ambiente ServBay.

Passo 1: Criar diretório do projeto

Primeiro, crie um novo diretório de projeto no diretório www do ServBay:

cd /Applications/ServBay/www
mkdir servbay-jigsaw-app
cd servbay-jigsaw-app

Passo 2: Usar o Composer para criar o projeto Jigsaw

O ServBay já vem com Composer pré-instalado, então podemos usar o Composer diretamente para criar o projeto Jigsaw:

composer create-project tightenco/jigsaw

Passo 3: Configurar o servidor web

1. Adicionar novo site

   Abra o ServBay e clique na aba "Host" para adicionar um novo site:

   • Nome: My Jigsaw Site
   • Domínio: servbay-jigsaw.local
   • Tipo de site: PHP
   • Versão do PHP: Escolha a versão do PHP correspondente
   • Diretório raiz do site: /Applications/ServBay/www/servbay-jigsaw-app/build_local

2. Salvar configuração

   Salve a configuração.

Passo 4: Construir o site Jigsaw

1. Instalar dependências

   No diretório do projeto, execute o seguinte comando para instalar as dependências npm:

   npm install

2. Construir o site

   Execute o seguinte comando para construir o site Jigsaw:

   ./vendor/bin/jigsaw build

Passo 5: Executar servidor de desenvolvimento local

1. Acessar o servidor de desenvolvimento

   Abra o navegador e acesse https://servbay-jigsaw.local, você verá a versão de desenvolvimento local do site Jigsaw.

Passo 6: Personalizar o site Jigsaw

1. Editar conteúdo

   Edite os arquivos Markdown e Blade templates no diretório source para personalizar o conteúdo e o layout do seu site.

2. Adicionar nova página

   Crie novos arquivos Markdown no diretório source para adicionar novas páginas. Por exemplo, crie um arquivo about.md:

   ---
   title: "Sobre Nós"
   ---
   
   # Sobre Nós
   
   Esta é a página sobre nós.

3. Configurar menu de navegação

   Edite o arquivo Blade template do menu de navegação no diretório source/_layouts para adicionar novos links de navegação.

4. Reconstruir o site

   Sempre que modificar o conteúdo ou templates, execute o seguinte comando para construir novamente o site Jigsaw:

   ./vendor/bin/jigsaw build

Usar o Jigsaw para construir sites

Agora que você instalou e configurou com sucesso o Jigsaw no ambiente ServBay, você pode começar a usá-lo para construir o seu site. Aqui estão algumas operações comuns:

Criar posts de blog

1. Criar post

   Crie novos arquivos Markdown no diretório source/_posts para adicionar posts ao blog. Por exemplo, crie um arquivo 2024-06-05-meu-primeiro-post.md:

   ---
   title: "Meu Primeiro Post"
   date: 2024-06-05
   ---
   
   # Meu Primeiro Post
   
   Este é o conteúdo do meu primeiro post.

2. Reconstruir o site

   Execute o seguinte comando para construir o site Jigsaw:

   ./vendor/bin/jigsaw build

Personalizar estilos e scripts

1. Editar estilos

   Edite os arquivos SCSS no diretório source/_assets/sass para personalizar os estilos do site.

2. Editar scripts

   Edite os arquivos JavaScript no diretório source/_assets/js para personalizar o comportamento interativo do site.

3. Compilar recursos

   Execute o seguinte comando para compilar os arquivos SCSS e JavaScript:

   npm run dev

Por meio desses passos, você instalou e configurou com sucesso o Jigsaw no ambiente ServBay e começou a usá-lo para construir seu site. A simplicidade e flexibilidade do Jigsaw fazem dele uma escolha ideal para construir sites estáticos.