Instalación y configuración de Statamic en el entorno ServBay

¿Qué es Statamic?

Statamic es un sistema de gestión de contenidos (CMS) moderno basado en el marco Laravel, adecuado para construir diversos tipos de sitios web. Statamic es conocido por su flexibilidad y potentes características, utilizando un sistema de archivos para almacenar contenido, aunque también puede optar por usar una base de datos.

Pasos para instalar Statamic

En este artículo, vamos a explicar cómo instalar y configurar Statamic usando Composer en el entorno ServBay.

Paso 1: Crear directorio del proyecto

Primero, en el directorio www de ServBay, crea un nuevo directorio para el proyecto:

bash

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

Paso 2: Crear proyecto Statamic usando Composer

ServBay ya incluye Composer, así que podemos usar directamente Composer para crear el proyecto Statamic:

bash

composer create-project statamic/statamic .

Paso 3: Configurar el servidor web

Agregar un nuevo sitio web
Abre ServBay, haz clic en la pestaña "Hosts" y añade un nuevo sitio web:
- Nombre: My Statamic Site
- Dominio: servbay-statamic.local
- Tipo de sitio web: PHP
- Versión de PHP: Selecciona la versión de PHP adecuada
- Directorio raíz del sitio web: /Applications/ServBay/www/servbay-statamic-app/public
Guardar configuración
Guarda la configuración y reinicia ServBay.

Paso 4: Configurar Statamic

Editar el archivo de configuración del entorno
En el directorio raíz del proyecto, copia el archivo .env.example como .env:
bash
```
cp .env.example .env
```
1
Generar la clave de la aplicación
Ejecuta el siguiente comando para generar una nueva clave para la aplicación:
bash
```
php artisan key:generate
```
1

Paso 5: Ejecutar Statamic

Acceder a Statamic
Abre el navegador y visite https://servbay-statamic.local, verás la página de bienvenida de Statamic.
Acceder al panel de control
Abre el navegador y visite https://servbay-statamic.local/cp, verás la página de inicio de sesión del panel de control de Statamic.
Crear cuenta de administrador
Sigue las instrucciones en la página para crear una cuenta de administrador, ingresa un nombre de usuario, contraseña y dirección de correo electrónico, luego haz clic en "Crear cuenta".

Paso 6: Instalar plugins y temas

Instalar plugins
Inicia sesión en el panel de control de Statamic, haz clic en el icono de "más", luego haz clic en "Plugins", busca e instala los plugins que necesites.
Instalar temas
Haz clic en el icono de "más", luego haz clic en "Temas", elige e instala un tema de tu preferencia.

Usando Statamic para construir tu sitio web

Ahora que has instalado y configurado Statamic en el entorno ServBay, puedes empezar a usarlo para construir tu sitio web. Aquí hay algunas operaciones comunes:

Crear contenido y colecciones

Crear colección
En el panel de control de Statamic, haz clic en "Contenido" -> "Colecciones", crea una nueva colección, llena el nombre de la colección y otras configuraciones, luego haz clic en "Guardar".
Crear contenido
Haz clic en "Contenido" -> "Colecciones", selecciona la colección recién creada, haz clic en "Nuevo", llena el título del contenido y el contenido, luego haz clic en "Guardar".

Crear navegación
En el panel de control de Statamic, haz clic en "Contenido" -> "Navegación", crea una nueva navegación, llena el nombre de la navegación y otras configuraciones, luego haz clic en "Guardar".
Agregar ítems de navegación
Agrega colecciones y contenido a la navegación, luego haz clic en "Guardar".

Personalizar plantillas y estilos

Editar plantillas

Edita los archivos de plantillas Blade en el directorio resources/views para personalizar el diseño y la presentación del contenido en tu sitio web. Por ejemplo, edita el archivo default.blade.php:

html

<!-- resources/views/layouts/default.blade.php -->
<!DOCTYPE html>
<html lang="es">
<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>

Agregar estilos
Crea un archivo CSS en el directorio resources/css y referéncialo en el archivo de plantilla. Por ejemplo, crea el archivo app.css:
css
```
/* resources/css/app.css */
body {
    font-family: Arial, sans-serif;
}
```
1
2
3
4
Referencia el archivo CSS en la plantilla:
html
```

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
```
1
2

Agregar scripts

Crea un archivo de JavaScript en el directorio resources/js y referéncialo en el archivo de plantilla. Por ejemplo, crea el archivo app.js:

javascript

// resources/js/app.js
document.addEventListener('DOMContentLoaded', function() {
    console.log('Hello, Statamic!');
});

Referencia el archivo JavaScript en la plantilla:

html

<!-- resources/views/layouts/default.blade.php -->
<script src="{{ mix('js/app.js') }}"></script>

Compilar recursos
Ejecuta el siguiente comando para compilar los archivos CSS y JavaScript:
bash
```
npm install
npm run dev
```
1
2

Siguiendo estos pasos, has instalado y configurado exitosamente Statamic en el entorno ServBay y has comenzado a usarlo para construir tu sitio web. La flexibilidad y potencia de Statamic lo hacen ideal para construir diversos tipos de sitios web.

Instalación y configuración de Statamic en el entorno ServBay ​

¿Qué es Statamic? ​

Pasos para instalar Statamic ​

Paso 1: Crear directorio del proyecto ​

Paso 2: Crear proyecto Statamic usando Composer ​

Paso 3: Configurar el servidor web ​

Paso 4: Configurar Statamic ​

Paso 5: Ejecutar Statamic ​

Paso 6: Instalar plugins y temas ​

Usando Statamic para construir tu sitio web ​

Crear contenido y colecciones ​

Configurar el menú de navegación ​

Personalizar plantillas y estilos ​