Instalando e Configurando o Statamic no Ambiente ServBay

O Statamic é um sistema de gerenciamento de conteúdo (CMS) moderno baseado no framework Laravel. Ele é conhecido por sua flexibilidade e recursos avançados, sendo ideal para construção de diversos tipos de sites. Um dos grandes diferenciais do Statamic é utilizar, por padrão, o sistema de arquivos para armazenar conteúdo e configurações, embora também ofereça suporte a banco de dados.

Neste artigo, você encontrará um tutorial completo sobre como instalar e configurar o Statamic usando o Composer no ServBay, um ambiente local completo para desenvolvimento web. O ServBay oferece todo o necessário para o Statamic: ambiente PHP, suporte ao Composer e administração conveniente de sites.

Etapas para Instalar o Statamic

O processo de instalação do Statamic no ServBay é simples e eficiente. Siga as etapas abaixo:

Passo 1: Crie o Diretório do Projeto

Primeiro, crie um novo subdiretório para o seu projeto Statamic dentro do diretório raiz de sites do ServBay, em /Applications/ServBay/www. Abra o Terminal e execute:

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

Esses comandos acessam o diretório padrão de sites do ServBay, criam uma nova pasta chamada servbay-statamic-app e navegam até ela.

Passo 2: Crie o Projeto Statamic usando o Composer

O ServBay já vem com o Composer pré-instalado — uma ferramenta para gerenciamento de dependências PHP. Não é necessário instalar nada adicional para criar um projeto Statamic.

Dentro do diretório servbay-statamic-app, execute o comando Composer a seguir:

composer create-project statamic/statamic .

Este comando faz o Composer baixar a versão mais recente do Statamic e todas as suas dependências, instalando tudo no diretório atual (.). Aguarde até que o download e a instalação sejam concluídos.

Passo 3: Configuração do Servidor Web (Adicionar Site no ServBay)

Para que o Statamic funcione em seu ambiente local, você precisa adicionar uma nova configuração de site no aplicativo ServBay.

1. Abra o ServBay: Inicie o aplicativo ServBay em sua área de trabalho.

2. Acesse a aba “Sites”: Na interface do ServBay, clique na aba superior “Sites” (atenção: versões antigas podem exibir como “Hosts”).

3. Adicione um novo site: Clique no botão "+" no canto inferior esquerdo para adicionar uma nova configuração de site.

4. Preencha as informações do site: Na janela de configuração, informe:

   • Nome: Um nome fácil de identificar, como Meu Site Statamic.
   • Domínio: O domínio local de acesso ao site; recomenda-se o sufixo .local, como servbay-statamic.local. O ServBay configura automaticamente o DNS local.
   • Tipo de Site: Selecione PHP.
   • Versão do PHP: Escolha a versão do PHP compatível com seu projeto Statamic (normalmente, recomenda-se uma versão estável e recente).
   • Diretório Raiz do Site: Este passo é crucial. O arquivo de entrada do Statamic, index.php, fica na pasta public do projeto. Portanto, direcione o diretório raiz para: /Applications/ServBay/www/servbay-statamic-app/public.

5. Salve e aplique a configuração: Após preencher, clique em “Salvar”. O ServBay pode solicitar para reiniciar os serviços — faça isso para garantir que o servidor web (Caddy ou Nginx, por padrão) recarregue a nova configuração.

Passo 4: Configure o Ambiente do Statamic

Na raiz do projeto, o Statamic depende do arquivo .env para gerenciar configurações do ambiente (como chaves do app, conexão ao banco de dados etc).

1. Copie o arquivo de ambiente: O projeto Statamic inclui um arquivo modelo .env.example. No terminal, continue na pasta /Applications/ServBay/www/servbay-statamic-app e execute:

   cp .env.example .env

2. Gere a chave da aplicação: O Laravel/Statamic exige uma chave única para fins de segurança, como criptografia de sessões e outros dados sensíveis. Gere esta chave com:

   php artisan key:generate

   O valor do APP_KEY será criado automaticamente dentro do arquivo .env.

Passo 5: Execute e Acesse o Statamic

Agora, seu site Statamic está pronto para uso no ServBay.

1. Acesse o site Statamic: Abra o navegador e digite o domínio que você configurou no Passo 3, por exemplo, https://servbay-statamic.local. O ServBay já configura o certificado SSL (via ServBay User CA ou ServBay Public CA), permitindo acesso seguro via HTTPS. Você verá a tela de boas-vindas do Statamic.

2. Painel de Controle: O painel administrativo do Statamic é acessado pelo caminho /cp. No navegador, visite https://servbay-statamic.local/cp. Você verá a página de login ou configuração inicial do painel.

3. Crie a conta de administrador: Ao acessar o painel pela primeira vez, o sistema solicitará a criação de uma conta admin. Siga as instruções, preencha usuário, senha e e-mail, e clique em “Criar Conta”. Feito isso, é só fazer login e começar a gerenciar o seu Statamic.

Passo 6: Instale Plugins e Temas (Opcional)

O Statamic possui diversos plugins e temas para expandir as funcionalidades e personalizar o visual.

1. Instalar plugins: Após acessar o painel, utilize os menus (geralmente na barra lateral) ou comandos Composer para instalar plugins. Pelo painel costuma ser mais prático.
2. Instalar temas: Da mesma forma, baixe temas pelo painel ou adicione arquivos de temas no diretório apropriado.

Criando Sites com o Statamic

Com o Statamic instalado, você já pode explorar suas funcionalidades para construir seu site. Veja algumas operações básicas:

Criar Conteúdo e Coleções

O Statamic organiza o conteúdo em “Coleções”, similar a tipos de posts ou páginas em outros CMS.

1. Criar uma coleção: No painel, vá até "Conteúdo" -> "Coleções" e clique em “Criar Coleção”. Defina o nome (ex: Posts, Páginas) e outras configurações, como estrutura de rotas e campos personalizados (blueprints).
2. Adicionar itens de conteúdo: Dentro da coleção, clique em “Novo” para adicionar novo conteúdo (post de blog, página etc.), preenchendo os campos definidos no blueprint da coleção.

Configurar Menus de Navegação

É possível criar e organizar os menus de navegação do site.

1. Criar navegação: No painel, acesse "Conteúdo" -> "Navegação" e clique em “Criar Navegação”. Dê um nome, como Navegação Principal.
2. Adicionar itens ao menu: Arraste páginas ou itens de coleções criados para a estrutura de navegação, organizando a hierarquia do menu.

Personalizar Templates e Estilos

Como é baseado em Laravel, o Statamic utiliza o Blade para templates, controlando o layout e exibição do conteúdo.

1. Editar templates: Os arquivos de visualização (views) ficam normalmente em resources/views. Siga a estrutura do Statamic (subpastas como layouts, partials, collections etc.) e edite ou crie arquivos Blade (.blade.php) para personalizar o HTML das páginas. Por exemplo, edite resources/views/layouts/default.blade.php para alterar o layout principal:

   <!-- resources/views/layouts/default.blade.php -->
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>{{ $title ?? 'My Statamic Site' }}</title>
       {{-- Importar CSS compilado --}}
       <link rel="stylesheet" href="{{ mix('css/app.css') }}">
   </head>
   <body>
       <header>
           {{-- Exemplo: renderizando navegação chamada 'main_navigation' --}}
           @inject('nav', 'Statamic\View\ViewServiceProvider')
           @if ($main_navigation = $nav->navigation('main_navigation'))
               <nav>
                   <ul>
                       @foreach ($main_navigation->tree() as $item)
                           <li><a href="{{ $item->url() }}">{{ $item->title() }}</a></li>
                       @endforeach
                   </ul>
               </nav>
           @endif
       </header>
       <main>
           {{-- Exibe o conteúdo da página --}}
           @yield('content')
       </main>
       {{-- Importar JavaScript compilado --}}
       <script src="{{ mix('js/app.js') }}"></script>
   </body>
   </html>

2. Adicionar estilos e scripts: O projeto Statamic normalmente usa Laravel Mix, Vite ou similar para compilar recursos front-end. Os arquivos CSS e JS fontes ficam em resources/css e resources/js.

   Por exemplo, para adicionar CSS em resources/css/app.css:

   /* resources/css/app.css */
   body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
       line-height: 1.6;
       color: #333;
       margin: 0;
       padding: 20px;
   }
   nav ul {
       list-style: none;
       padding: 0;
   }
   nav ul li {
       display: inline;
       margin-right: 15px;
   }

   Adicione JavaScript em resources/js/app.js:

   // resources/js/app.js
   console.log('Assets frontend do Statamic carregados!');
   
   // Exemplo: interação simples
   document.addEventListener('DOMContentLoaded', function() {
       const navItems = document.querySelectorAll('nav li a');
       navItems.forEach(item => {
           item.addEventListener('mouseover', () => {
               console.log(`Cursor sobre: ${item.textContent}`);
           });
       });
   });

3. Compile os recursos front-end: Para transformar os arquivos fontes em CSS/JS prontos para o navegador, execute os comandos de compilação. O Statamic inclui o package.json, permitindo instalar dependências e compilar com npm ou yarn. O ServBay tem suporte ao Node.js, então basta rodar:

   npm install
   npm run dev

   npm install instala as dependências (Laravel Mix/Vite, Tailwind CSS, Vue/React etc.). npm run dev faz a compilação em modo desenvolvimento, gerando arquivos não minificados — útil para depuração. Em produção, use npm run prod ou npm run build.

Resumo

Seguindo todos os passos acima, você terá o Statamic instalado, configurado e pronto para usar no robusto ambiente local do ServBay. O ServBay oferece tudo em um só lugar (PHP, Composer, servidor web, gestão de sites e suporte a Node.js), tornando o processo de desenvolvimento com Statamic muito mais prático. Agora é só explorar o poder do Statamic, usando sua estrutura de arquivos flexível e recursos avançados para construir e evoluir seu site rapidamente!