Instalando e Configurando o Statamic no Ambiente ServBay

O que é Statamic?

Statamic é um sistema de gerenciamento de conteúdo (CMS) moderno baseado no framework Laravel, adequado para construir vários tipos de sites. O Statamic é conhecido por sua flexibilidade e recursos poderosos, ele usa o sistema de arquivos para armazenar conteúdo, mas também pode optar por usar um banco de dados.

Passos para Instalar o Statamic

Neste artigo, vamos mostrar como usar o Composer para instalar e configurar o Statamic no ambiente do ServBay.

Passo 1: Criar Diretório de Projeto

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

bash

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

Passo 2: Criar Projeto Statamic com Composer

O ServBay já vem com Composer, para que possamos usar direto o Composer para criar o projeto Statamic:

bash

composer create-project statamic/statamic .

Passo 3: Configurar o Servidor Web

Adicionar Novo Site
Abra o ServBay, clique na aba "Hospedeiros" e adicione um novo site:
- Nome: My Statamic Site
- Domínio: servbay-statamic.local
- Tipo de Site: PHP
- Versão do PHP: escolha a versão correspondente do PHP
- Diretório Raiz do Site: /Applications/ServBay/www/servbay-statamic-app/public
Salvar Configuração
Salve a configuração e reinicie o ServBay.

Passo 4: Configurar o Statamic

Editar Arquivo de Configuração do Ambiente
No diretório raiz do projeto, copie o arquivo .env.example para .env:
bash
```
cp .env.example .env
```
1
Gerar Chave do Aplicativo
Execute o comando a seguir para gerar uma nova chave de aplicativo:
bash
```
php artisan key:generate
```
1

Passo 5: Rodar o Statamic

Acessar o Statamic
Abra o navegador e acesse https://servbay-statamic.local. Você verá a página de boas-vindas do Statamic.
Acessar o Painel de Controle
Abra o navegador e acesse https://servbay-statamic.local/cp. Você verá a página de login do painel de controle do Statamic.
Criar Conta de Administrador
Siga as instruções na página para criar uma conta de administrador, insira nome de usuário, senha e endereço de email, depois clique em "Criar Conta".

Passo 6: Instalar Plugins e Temas

Instalar Plugins
Faça login no painel de controle do Statamic, clique no ícone de "Mais", depois clique em "Plugins" para procurar e instalar os plugins que você precisa.
Instalar Temas
Clique no ícone de "Mais", depois clique em "Temas" para escolher e instalar um tema de sua preferência.

Usando o Statamic para Construir um Site

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

Criar Conteúdo e Coleções

Criar Coleções
No painel de controle do Statamic, clique em "Conteúdo" -> "Coleções" para criar uma nova coleção, insira o nome da coleção e outras configurações, depois clique em "Salvar".
Criar Conteúdo
Clique em "Conteúdo" -> "Coleções", selecione a coleção que você criou, clique em "Novo", insira o título do conteúdo e o conteúdo, depois clique em "Salvar".

Criar Navegação
No painel de controle do Statamic, clique em "Conteúdo" -> "Navegação" para criar uma nova navegação, insira o nome da navegação e outras configurações, depois clique em "Salvar".
Adicionar Itens de Navegação
Adicione coleções e conteúdo à navegação, depois clique em "Salvar".

Customizar Modelos e Estilos

Editar Modelos

No diretório resources/views edite os arquivos de modelo Blade para personalizar o layout e a apresentação de conteúdo do seu site. Por exemplo, edite o arquivo default.blade.php:

html

<!-- 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>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
    <header>
        <nav>
            <ul>
                @foreach ($navigation as $item)
                    <li><a href="{{ $item->url() }}">{{ $item->title() }}</a></li>
                @endforeach
            </ul>
        </nav>
    </header>
    <main>
        @yield('content')
    </main>
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

Adicionar Estilos
No diretório resources/css crie um arquivo CSS e faça referência a ele no arquivo de modelo. Por exemplo, crie o arquivo app.css:
css
```
/* resources/css/app.css */
body {
    font-family: Arial, sans-serif;
}
```
1
2
3
4
Faça referência ao arquivo CSS no arquivo de modelo:
html
```

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
```
1
2
Adicionar Scripts
No diretório resources/js crie um arquivo JavaScript e faça referência a ele no arquivo de modelo. Por exemplo, crie o arquivo app.js:
javascript
```
// resources/js/app.js
document.addEventListener('DOMContentLoaded', function() {
    console.log('Hello, Statamic!');
});
```
1
2
3
4
Faça referência ao arquivo JavaScript no arquivo de modelo:
html
```

<script src="{{ mix('js/app.js') }}"></script>
```
1
2
Compilar Recursos
Execute o comando a seguir para compilar os arquivos CSS e JavaScript:
bash
```
npm install
npm run dev
```
1
2

Seguindo esses passos, você instalou e configurou com sucesso o Statamic no ambiente ServBay e começou a usá-lo para construir seu site. A flexibilidade e os recursos poderosos do Statamic o tornam uma escolha ideal para construir vários tipos de sites.

Instalando e Configurando o Statamic no Ambiente ServBay ​

O que é Statamic? ​

Passos para Instalar o Statamic ​

Passo 1: Criar Diretório de Projeto ​

Passo 2: Criar Projeto Statamic com Composer ​

Passo 3: Configurar o Servidor Web ​

Passo 4: Configurar o Statamic ​

Passo 5: Rodar o Statamic ​

Passo 6: Instalar Plugins e Temas ​

Usando o Statamic para Construir um Site ​

Criar Conteúdo e Coleções ​

Configurar Menu de Navegação ​

Customizar Modelos e Estilos ​