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

Statamic es un moderno sistema de gestión de contenidos (CMS) basado en el framework Laravel, conocido por su flexibilidad y potentes funciones, especialmente útil para crear todo tipo de sitios web. Una de sus características más destacadas es que utiliza el sistema de archivos para almacenar contenido y configuración de forma predeterminada, aunque también ofrece la posibilidad de usar una base de datos.

En este artículo te guiaremos paso a paso para instalar y configurar Statamic utilizando Composer en ServBay, un entorno local de desarrollo web integral. ServBay proporciona todo lo necesario para Statamic: entorno PHP, soporte para Composer y una gestión de sitios muy cómoda.

Pasos para instalar Statamic

El proceso de instalación de Statamic en ServBay es sencillo y eficiente. Sigue estos pasos:

Paso 1: Crea el directorio del proyecto

Primero, debes crear una nueva subcarpeta para tu proyecto Statamic en el directorio raíz de sitios de ServBay, ubicado en /Applications/ServBay/www. Abre la terminal y ejecuta los siguientes comandos:

bash

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

Esto te colocará en el directorio raíz de sitios de ServBay, creará una carpeta llamada servbay-statamic-app y luego accederás a ella.

Paso 2: Crea el proyecto Statamic usando Composer

ServBay ya incluye Composer preinstalado, una herramienta para la gestión de dependencias PHP. No necesitas instalar nada adicional; puedes usar Composer directamente para crear tu proyecto Statamic.

Dentro del directorio servbay-statamic-app que creaste, ejecuta el siguiente comando de Composer:

bash

composer create-project statamic/statamic .

Este comando ordena a Composer que descargue la última versión de Statamic junto con todas sus dependencias e instale todo en el directorio actual (.). Ten paciencia mientras se completa la descarga e instalación.

Paso 3: Configura el servidor web (añadir sitio en ServBay)

Para que ServBay pueda alojar tu proyecto Statamic, debes agregar una nueva configuración de sitio en la aplicación ServBay.

Abre la aplicación ServBay: Inicia la aplicación de escritorio ServBay.
Ve a la pestaña "Sitios": Haz clic en la pestaña "Sitios" en la parte superior de la interfaz (nota: las versiones antiguas pueden mostrar "Host").
Añade un nuevo sitio: Haz clic en el botón "+" en la esquina inferior izquierda para agregar una nueva configuración de sitio.
Rellena la información del sitio: En la ventana emergente, introduce la siguiente información:
- Nombre: Asigna un nombre reconocible, por ejemplo, My Statamic Site.
- Dominio: El dominio local para acceder al sitio; se recomienda usar el sufijo .local, por ejemplo, servbay-statamic.local. ServBay configurará la resolución DNS local automáticamente.
- Tipo de sitio: Selecciona PHP.
- Versión PHP: Elige la versión PHP compatible con tu proyecto Statamic (se recomienda usar la versión estable más reciente).
- Directorio raíz del sitio: Este paso es fundamental. El archivo de entrada de Statamic, index.php, se encuentra en el subdirectorio public de tu proyecto. Por lo tanto, debes establecer el directorio raíz en: /Applications/ServBay/www/servbay-statamic-app/public.
Guarda y aplica la configuración: Una vez completado, haz clic en "Guardar". Es posible que ServBay te pida reiniciar los servicios para aplicar los cambios. Hazlo siguiendo las indicaciones para asegurarte de que el servidor web de ServBay (por lo general Caddy o Nginx) cargue la nueva configuración de tu sitio.

Paso 4: Configuración del entorno Statamic

En el directorio raíz del proyecto, Statamic utiliza un archivo .env para gestionar la configuración del entorno (por ejemplo, la clave de la aplicación, conexión a la base de datos, etc.).

Copia el archivo de entorno: El proyecto Statamic incluye un archivo .env.example como plantilla. Desde la terminal, asegúrate de estar en /Applications/ServBay/www/servbay-statamic-app y ejecuta:
bash
```
cp .env.example .env
```
1
Genera la clave de la aplicación: Laravel/Statamic requiere una clave única por razones de seguridad (como el cifrado de sesiones y otros datos sensibles). Ejecuta el siguiente comando Artisan en el directorio raíz para generarla:
bash
```
php artisan key:generate
```
1
Este comando generará y rellenará automáticamente el valor de APP_KEY en tu archivo .env.

Paso 5: Ejecuta y accede a Statamic

Ahora tu sitio Statamic debería estar configurado y funcionando en ServBay.

Accede a tu sitio Statamic: Abre tu navegador web y escribe el dominio que configuraste en el Paso 3, por ejemplo, https://servbay-statamic.local. ServBay por defecto genera un certificado SSL para tus sitios locales (a través de ServBay User CA o ServBay Public CA), así que puedes acceder usando HTTPS. Deberías ver la página de bienvenida de Statamic.
Accede al panel de control: El panel administrativo de Statamic suele estar disponible en la ruta /cp. Ve a https://servbay-statamic.local/cp en tu navegador y verás la página de acceso o de configuración del panel de control.
Crea una cuenta de administrador: La primera vez que accedas, se te pedirá que configures una cuenta de administrador. Ingresa el nombre de usuario, contraseña y correo electrónico requeridos y haz clic en "Crear cuenta". Una vez hecho esto, podrás iniciar sesión y comenzar a gestionar tu sitio Statamic.

Paso 6: Instala complementos y temas (opcional)

Statamic cuenta con un ecosistema muy amplio de complementos y temas que permiten ampliar sus funciones y personalizar su apariencia.

Instala complementos: Ya conectado en el panel de control de Statamic, puedes instalar complementos directamente desde la interfaz (generalmente en la barra lateral izquierda) o mediante Composer. El método dentro del panel suele ser más visual e intuitivo.
Instala temas: También puedes instalar o cambiar temas desde el panel de control o copiando los archivos del tema en el directorio correspondiente.

Construye tu sitio web con Statamic

Una vez realizado todo el proceso de instalación y configuración, ya puedes aprovechar Statamic para construir tu web. A continuación te mostramos algunas operaciones básicas:

Crear contenido y colecciones

Statamic organiza el contenido mediante “Colecciones” (Collections), similar a los tipos de post o páginas en CMS tradicionales.

Crea una colección: En el panel de control de Statamic, navega a "Contenido" -> "Colecciones" y haz clic en "Crear colección". Define el nombre de la colección (por ejemplo, Posts, Pages) y otros ajustes (estructura de rutas, blueprint de campos, etc.).
Agrega elementos de contenido: Dentro de la colección creada, haz clic en "Nuevo" para añadir una entrada, ya sea un artículo o una página. Completa los campos definidos en el blueprint de la colección.

Configura menús de navegación

Puedes crear y gestionar los menús de navegación de tu web fácilmente.

Crea una navegación: Desde el panel, ve a "Contenido" -> "Navegaciones" y haz clic en "Crear navegación". Asigna un nombre (por ejemplo, Navegación Principal).
Agrega elementos de navegación: Arrastra las entradas que has creado (de colecciones o páginas independientes) a la estructura de navegación para organizar el menú.

Personaliza plantillas y estilos

Statamic se basa en Laravel, por lo que utiliza Blade como motor de plantillas para controlar la estructura y presentación del contenido.

Edita tus plantillas: Los archivos de vistas suelen estar en resources/views dentro del directorio raíz. Puedes modificar o crear archivos Blade (.blade.php) siguiendo la estructura habitual de plantillas que incluye subdirectorios como layouts, partials, collections, etc. Por ejemplo, edita el archivo de layout resources/views/layouts/default.blade.php para cambiar el marco general de tus páginas.

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>
    {{-- Referencia al CSS compilado --}}
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
    <header>
        {{-- Ejemplo: renderiza una navegación llamada '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>
        {{-- Renderiza el contenido de la página actual --}}
        @yield('content')
    </main>
    {{-- Referencia al JavaScript compilado --}}
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

Agrega estilos y scripts: Los proyectos Statamic suelen venir preparados para herramientas como Laravel Mix o Vite. Los archivos originales de CSS y JavaScript están en resources/css y resources/js.

Por ejemplo, en resources/css/app.css puedes escribir tu propio CSS:

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;
}

Y en resources/js/app.js para tu JavaScript personalizado:

javascript

// resources/js/app.js
console.log('¡Recursos frontend de Statamic cargados!');

// Ejemplo: interacción simple
document.addEventListener('DOMContentLoaded', function() {
    const navItems = document.querySelectorAll('nav li a');
    navItems.forEach(item => {
        item.addEventListener('mouseover', () => {
            console.log(`Pasando el mouse sobre: ${item.textContent}`);
        });
    });
});

Compila los recursos frontend: Para transformar los archivos fuente a CSS y JS listos para el navegador debes ejecutar los comandos de compilación. Los proyectos Statamic incluyen el archivo package.json, así que puedes instalar dependencias y compilar usando npm o yarn. ServBay soporta Node.js, por lo que puedes ejecutar:
bash
```
npm install
npm run dev
```
1
2
npm install instalará todas las dependencias indicadas (como Laravel Mix/Vite, Tailwind CSS, Vue/React, etc.). npm run dev ejecuta la compilación en modo desarrollo, generando archivos sin comprimir y, generalmente, con mapas de fuente para depuración. Para producción, puedes usar npm run prod o npm run build.

Resumen

Siguiendo estos pasos, habrás instalado, configurado y aprendido lo esencial para comenzar a usar Statamic CMS en el potente entorno local de desarrollo de ServBay. La integración de PHP, Composer, servidor web, gestión sencilla de sitios y el soporte de Node.js que ofrece ServBay te permite desarrollar con Statamic de manera ágil y cómoda. Ahora, puedes sacar el máximo partido a la estructura flexible de Statamic y a sus potentes características para construir y evolucionar rápidamente tus proyectos web.

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

Pasos para instalar Statamic ​

Paso 1: Crea el directorio del proyecto ​

Paso 2: Crea el proyecto Statamic usando Composer ​

Paso 3: Configura el servidor web (añadir sitio en ServBay) ​

Paso 4: Configuración del entorno Statamic ​

Paso 5: Ejecuta y accede a Statamic ​

Paso 6: Instala complementos y temas (opcional) ​

Construye tu sitio web con Statamic ​

Crear contenido y colecciones ​

Configura menús de navegación ​

Personaliza plantillas y estilos ​

Resumen ​