Ponte en marcha con Craft CMS

Craft CMS es presentado por la gente talentosa de Pixel & Tonic. Se mantiene activamente y se mantiene en línea con los cambios en el mundo moderno del desarrollo web y su popularidad está aumentando entre los CMS, con una impresionante lista de clientes como Netflix. También tiene un servidor Discord muy activo, que creció a más de 5,000 miembros en solo un año de estar en vivo.

¿Por qué usar CraftCMS?

Craft CMS ha sido nuestro CMS de referencia durante unos cuatro años; hemos creado sitios web de clientes e incluso nuestro propio negocio en Craft. Como empresa, revisamos constantemente el mercado de CMS y siempre regresamos a Craft. Entonces, analicemos las razones por las que elegimos Craft CMS sobre los demás en el mercado:

• Familiaridad con la interfaz, lo que lo hace bastante fácil para cualquiera que venga de WordPress.
• Comunidad de desarrollo activa.
• Campos flexibles, que le dan control sobre cómo se estructura su contenido.
• Sin bloqueos ni cuotas mensuales. Solo una tarifa única si vas a Pro/eCommerce.
• Extensibilidad con la creciente tienda de complementos de Craft.

Entonces, con la introducción fuera del camino, le mostraré cómo ponerse en marcha con un entorno local de Craft CMS completamente configurado en unos quince minutos. Una vez que hayamos completado los siguientes pasos, debería tener una gran base para comenzar su próximo proyecto web y, con suerte, estar listo para dejar WordPress para siempre.

Instalación de nuestro entorno de desarrollo

Craft CMS viene con una herramienta muy útil para configurar su entorno local. Esta herramienta se llama Craft Nitro y simplifica la configuración de un entorno Craft CMS. Es nuevo en la escena Craft pero ayuda mucho.

Configuración de pases múltiples

Craft Nitro requiere algo llamado Multipass que crea una máquina virtual Ubuntu en su sistema. (No se preocupe, no necesitará configurar ni abrir Ubuntu).

• Descargue el último instalador de Multipass para su sistema operativo desde el sitio web oficial.
• Una vez descargado, ejecuta el instalador. Cuando esto esté completo, debería estar listo para pasar al siguiente paso.
  

Configuración de Craft Nitro

La configuración de Craft Nitro es sencilla e implica un script de línea de comandos para instalarlo en macOS y Linux, pero para Windows es un poco diferente. Veré cómo configurarlo para ambos tipos de sistema operativo a continuación. La buena noticia es que una vez que esté configurado, estará listo y podrá crear fácilmente nuevas instalaciones de Craft sin tener que volver a pasar por esto.

Instalación en macOS y Linux

Abra su Terminal y pegue la siguiente línea de script. Una vez pegado, siga las indicaciones de opciones en la línea de comando para crear su máquina virtual con los ajustes preestablecidos que tiene Craft Nitro. Esto debería estar perfectamente bien, pero si te apetece un ajuste fino, hazlo. Solo tenga en cuenta que Craft tiene requisitos mínimos para funcionar sin problemas.

Ejecute la siguiente línea en la Terminal:

 bash <(curl -sLS https://installer.getnitro.sh)

Instalación en Windows 10 Pro

La instalación en Windows es bastante compleja, pero no debería llevar mucho tiempo ponerla en funcionamiento. Solo asegúrese de tener habilitado Hyper-V. Desafortunadamente, Hyper-V no se puede instalar en la versión Home Edition de Windows.

1. Asegúrese de que Hyper-V esté habilitado (más detalles aquí);
2. Descargue nitro_windows_x86_64.zip de la última versión;
3. Cree una carpeta Nitro en su carpeta de home si aún no existe (es decir, C:\Users\<username>\Nitro );
4. Extraiga el archivo zip y copie nitro.exe en la carpeta Nitro que acaba de crear en su carpeta de inicio;
5. Si esta es su primera instalación, ejecútelo desde la línea de comando para agregar Nitro a su ruta global:
   

    setx path "%PATH%;%USERPROFILE%\Nitro"

6. Inicie el terminal de Windows ( cmd.exe ) con permisos de administrador y ejecute Nitro en él.

Una vez que haya completado lo anterior, siga las instrucciones del terminal para crear su primera máquina. Los ajustes preestablecidos predeterminados que establece Craft Nitro deberían estar perfectamente bien para su entorno.

Instalación de Craft CMS

Hasta ahora, instalamos Craft Nitro y creamos nuestra máquina virtual, y ahora estamos listos para instalar Craft CMS. En las siguientes instrucciones, vamos a descargar Craft y "montar" nuestros archivos, permitiéndonos desarrollar en nuestro sistema actual y ver los cambios reflejados en nuestra máquina virtual Ubuntu. También vamos a configurar nuestra base de datos inicial y obtener un dominio local que podamos usar, por ejemplo, myfancyproject.test. Vámonos:

Creación de un nuevo proyecto

1. Cree una nueva carpeta donde le gustaría desarrollar/instalar Craft;
2. Descargue Craft CMS desde la última versión (a través de Composer o Zip);
3. Descomprimir/Mover contenido a la carpeta que acabamos de crear;
4. Abrir Terminal/Línea de Comando;
5. Ir a nuestra carpeta creada. $ cd /path/to/project ;
6. Ejecute nitro add ;
7. Siga las indicaciones de la línea de comandos en pantalla. (Los ajustes preestablecidos suelen estar bien, pero modifíquelos como desee).

Sugerencia : si ve problemas de "No se puede leer" en macOS, Multipass debe tener acceso completo al disco. Para hacer esto, asegúrese de que multipassd esté marcado en Preferencias del sistema → Seguridad y privacidad → Privacidad → Acceso total al disco.

Conexión a nuestra base de datos

Ahora deberíamos tener un dominio de prueba y nuestros archivos de proyecto montados. Lo sé, bastante fácil hasta ahora, y esa es la parte difícil completa. La conexión a nuestra base de datos requiere que agreguemos los detalles de nuestra base de datos para nuestro sitio recién creado en el archivo .env de nuestro proyecto.

1. Abra el archivo .env de nuestro proyecto (ubicado en la carpeta raíz);
2. Cambie los detalles de la base de datos a lo siguiente:
   

    DB_USER="nitro" DB_PASSWORD="nitro" # 'nitro' is the default database DB_DATABASE="nitro"

Sugerencia : si desea abrir la base de datos en el programa SQL de su elección, todo lo que tiene que hacer es ejecutar nitro info en su línea de comando y verá la dirección IP de su base de datos en "IPV4". Utilice el nombre de usuario y la contraseña anteriores (junto con el puerto que seleccionó durante la configuración) para conectarse.

Instalar Craft CMS

Configuramos nuestra máquina virtual, configuramos nuestro dominio de prueba y preparamos nuestra base de datos. Ahora es el momento de instalar Craft CMS e ingresar a la sección de administración; todo debería ser sencillo desde aquí. Vamos a por ello.

1. Diríjase al dominio de prueba que configuró durante la configuración seguido de /admin (p. ej testdomainyouset.test/admin );
2. Debería ver la pantalla de instalación de Craft CMS ( ¡Hurra! );
3. Siga las instrucciones del instalador en pantalla;
4. Una vez que haya terminado, debería ser redirigido a su nuevo panel de administración.

Sugerencia : si no instaló Craft a través de Composer, es posible que se le solicite una clave de seguridad. Para generar una clave criptográficamente segura, use un administrador de contraseñas como 1Password / LastPass. (No hay límite de longitud, por lo que puede ser tan complejo como desee). Abra nuestro archivo .env una vez más, busque la siguiente línea SECURITY_KEY="" , pegue su clave generada entre comillas y guárdela.

Ahora debería tener un entorno de desarrollo local completamente configurado para Craft CMS, que proporcionará un excelente punto de partida para cualquier cosa que intente desarrollar, ya sea mover su blog de gatos de WordPress o crear una tienda de comercio electrónico. Solo recuerde apagar su servidor una vez que termine de usar nitro stop en su línea de comando.

Aquí hay algunos comandos útiles para Craft's Nitro que lo ayudarán durante el desarrollo:

• nitro start (inicia el servidor de desarrollo)
• nitro stop (detiene el servidor de desarrollo)
• nitro context (le muestra información sobre los entornos instalados)
• nitro info (información sobre el entorno actual, versión de PHP, etc.)

Configurando nuestro blog de gatos

Ahora que tenemos Craft en funcionamiento, podemos comenzar con nuestro blog de gatos y comenzar a disfrutar del poder que Craft nos ofrece. En esta sección, configuraremos nuestro modelo de contenido, crearemos nuestra plantilla de tema base y desarrollaremos nuestra página de inicio y las páginas de publicaciones internas.

Los modelos de contenido dan miedo, pero en Craft es todo lo contrario; hay un sistema GUI fácil de usar, ¡no hay necesidad de código complejo por aquí! Para nuestro blog de gatos, debemos configurar una sección llamada "Gatos" que necesita el nombre del gato, una foto y una pequeña descripción, y luego una sola página "Página de inicio".

Cómo crear secciones y páginas Cómo crear una publicación de gato

Cómo crear secciones y páginas

Vamos a crear nuestra sección "Gatos" y nuestra página de inicio, que se clasificará como "única" en el lenguaje de Craft. Las secciones son exactamente lo que parecen: secciones de su sitio web, y las páginas también se explican por sí mismas, páginas individuales de su sitio web, como los documentos legales y nuestra página de inicio.

Creando nuestra sección de gatos

1. Vaya a Configuración en el menú de la izquierda;
2. Haga clic en "Secciones";
3. Haga clic en "Nueva sección";
4. En el “Nombre” poner Cats ;
5. Sección Tipo Channel
   ( Los canales se usan para transmisiones de contenido similar, al igual que nuestros gatos).
6. Dentro del "Formato de URI de entrada", nos aseguraremos de que sea /cats/{slug} ;
7. Dentro de “Template” vamos a poner cat ;
8. Salvar.

Lo que hemos hecho anteriormente es decirle a Craft que nos gustaría que cualquier publicación dentro de la sección Cats tenga un formato de URL como este: ourtestdomain.test/cats/fluffy , y la plantilla que nos gustaría usar es cats.twig .

Creando nuestra página de inicio

1. Dentro de “Secciones”, haga clic en “Nueva Sección”;
2. En el “Nombre”, ponga Homepage de inicio;
3. Tipo de sección Single ;
4. Marque la casilla de verificación "Página de inicio";
5. Dentro de “Template” vamos a poner index ;
6. Salvar.

Creación de campos

Craft viene sin ideas preconcebidas de lo que quieres construir; te da una pizarra completamente en blanco. Creamos exactamente lo que queremos que sea la estructura de nuestra publicación generando nuestros propios "Campos". Vamos a crear los “Campos” de nuestro gato para el siguiente nombre, descripción y foto.

1. Dirígete a la sección de administración de tu sitio visitando yourchosendomain.test/admin ;
2. Vaya a Configuración en el menú de la izquierda;
3. Haga clic en "Campos";
4. En la parte superior derecha, haga clic en "Nuevo campo".

Configurar el nombre del gato

Vamos a necesitar un nombre para nuestros gatos, así que vamos a crear un campo de name .

• En el Nombre poner “Nombre del Gato”;
• Elija "Texto sin formato" en el Tipo de campo;
• Ahora Guardar.
  

Configuración de la descripción del gato

Nuestros gatos también necesitan una descripción, pero limitemos la cantidad de caracteres que nuestros autores pueden ingresar sobre cada gato.

• Haga clic en "Nuevo campo" nuevamente;
• En el Nombre poner “Descripción del Gato”;
• Elija el tipo de campo "Texto sin formato" nuevamente;
• Cree un límite agregando "2000" en el cuadro Límite de campo;
• Clic en Guardar.

Configuración de la foto del gato

Vamos a querer agregar fotos a cada una de nuestras publicaciones de gatos, y puede haber varias fotos por gato, no hay problema. Pero antes de crear un campo, debemos decirle a Craft dónde queremos que se almacenen las fotos en nuestro servidor. (Craft también tiene la opción de cargar en soluciones de almacenamiento en la nube).

• Dirígete a "Configuración" en el menú de la izquierda;
• Haga clic en "Activos";
• Haga clic en "Nuevo volumen";
• En el Nombre poner “Foto de Gato”;
• Habilite "Los activos en este volumen tienen URL públicas";
• En “URL base” ponga @web/uploads/ ;
• En "Ruta del sistema de archivos" ponga @webroot/uploads/ ;
• Salvar.

Las propiedades anteriores le dicen a Craft dónde nos gustaría que se almacenen nuestros archivos cargados. Puede cambiar estos a lo que desee. También puede leer más sobre la configuración de variables de entorno para estos en la documentación.

Campo coincidente con secciones

Ahora que tenemos nuestros campos y secciones configurados y funcionando, necesitaremos combinar los dos asignando qué campos nos gustaría que tuvieran nuestras secciones. Esto es tan fácil como arrastrar y soltar en Craft.

• Dirígete a Configuración;
• Haga clic en "Secciones";
• Ahora haga clic en "Editar tipo de sección";
• Ahora haga clic en nuestra sección "Gatos";
• Seleccione la pestaña "Campos" en el menú de la derecha;
• Arrastra los campos "Gatos" que creamos previamente al panel de contenido;
• Una vez arrastrado, guarde la sección de gatos.

Consejo : puede eliminar el campo "Título" de nuestras publicaciones deshabilitando la opción "Mostrar el campo de título". Es posible que desee el nombre del gato como título, por ejemplo.

Cómo crear una publicación de gato

Ahora es el momento de crear una publicación de gato esponjoso. Dirígete a "Entradas" en el menú de administración de la izquierda.

• Haga clic en "Nueva entrada";
• En el menú desplegable, seleccione "Gatos";
• ¡Crea tu publicación! ( Cuanto más esponjoso, mejor).

Listado de nuestros artículos sobre gatos

Ahora que hemos terminado nuestro modelo de contenido, podemos comenzar a construir la interfaz básica para nuestro blog de gatos. Craft está escrito en el lenguaje Twig/Liquid. Si alguna vez has incursionado en el desarrollo de Shopify, esto debería resultarte familiar; si no, es bastante fácil de recoger. Pero primero, debemos abrir nuestra carpeta de instalación de Craft en nuestro editor de código favorito (donde descomprimió la instalación de Craft).

1. Abra Craft Install en su editor de código;
2. Cree un nuevo archivo en Plantillas llamado index.twig
   ( Es posible que Craft haya instalado un índice predeterminado. Ábralo en su lugar y límpielo).
3. Agrega el siguiente código:

 <!DOCTYPE html> <html xmlns="https://www.w3.org/1999/xhtml" lang="en-US"> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> </head> <body> {# Create an entry query with the 'section' and 'limit' parameters #} {% set myEntryQuery = craft.entries() .section('cats') .limit(10) %} {# Fetch the entries #} {% set entries = myEntryQuery.all() %} {# Display the entries #} <div class="container"> <div class="row"> {% for entry in entries %} <div class="col"> <article class="card"> {% set catImage = entry.catsPhoto.one() %} {% if catImage %} <img src="{{ rel.url }}" class="card-img-top" alt="..."> {% endif %} <div class="card-body"> <h1><a href="{{ entry.url }}">{{ entry.title }}</a></h1> <h2>{{ entry.catsName }}</h2> <p>{{ entry.catsDescription }}</p> <a class="btn btn-primary" href="{{ entry.url }}">View {{ entry.catsName }}</a> </div> </article> </div> {% endfor %} </div> </div> </body> </html>

En el código anterior, le contamos a Craft sobre nuestra sección "Gatos" y ponemos un límite de 10 publicaciones. Luego, buscamos las entradas de esa sección y continuamos recorriendo cada uno de los gatos dentro de las entradas de búsqueda en el siguiente código. . Las imágenes son un poco diferentes en Craft: se almacenan como una matriz, por lo que hacemos otro ciclo dentro de nuestro código para obtener las imágenes de los gatos.

vamos a probar

Abra su URL de desarrollo de prueba que creamos durante la configuración. (Asegúrese de que su servidor nitro se esté ejecutando usando nitro start ). Ahora deberíamos ver las publicaciones que creamos en nuestra página de índice. Hacer clic para ver más información nos da un error 404, ¡así que arreglemos eso a continuación!

Sugerencia : Incluimos Bootstrap para que se vea un poco más elegante, pero siéntase libre de incluir cualquier marco que desee.

Página de publicación de gatos

Vamos a hacer lo mismo que hicimos con la página de índice. Vamos a crear la plantilla de cat creando un nuevo archivo dentro de la carpeta Plantillas llamado cat.twig . Como ya estamos dentro del contexto Entry , no tenemos que volver a consultarlo.

 <html> <body> {% block content %} {% set catImage = entry.catsPhoto.one() %} {% if catImage %} <img src="{{ rel.url }}" class="card-img-top" alt="..."> {% endif %} {{ entry.title }} {{ entry.catsName }} {{ entry.catsDescription }} {% endblock %} </body> </html>

Guarde esto y actualice nuestro sitio web de desarrollo de pruebas. ¡Ahora deberíamos poder navegar a nuestra página de entrada de gatos! ¡Voila!

sin cabeza

Si desea volverse más técnico con Craft y usarlo como su sistema de administración de contenido para alimentar su aplicación web, puede hacerlo usando el paquete Pro de Craft CMS que agrega cuentas de usuario y GraphQL a su configuración. La versión Pro de Craft es gratuita para probar y probar, lo que significa que puede realizar una prueba exhaustiva antes de comprometerse. Ahora veremos cómo configurar una API GraphQL básica usando el editor GraphQL integrado de Craft.

Iniciar prueba profesional

Una vez que haya instalado Craft CMS, diríjase a la "Tienda de complementos" y busque "Actualizar" en las opciones del menú de la izquierda. Haga clic en "Prueba" en la sección "Pro" y ejecute el proceso de actualización.

La configuración básica

Una vez que haya comenzado su prueba de Pro Craft CMS, ahora debería notar una nueva opción de menú en su panel lateral de administración: GraphQL. Antes de entrar directamente, necesitamos algunos modelos de contenido que puedan formar la salida. Cuando haya creado sus modelos de contenido, Craft CMS le creará automáticamente una API de GraphQL lista para usar. ¡Tampoco es necesario definir los esquemas!

Cree su punto final de API Cat

Tenemos nuestro contenido ordenado; ahora queremos crear el punto final para que podamos obtener todo nuestro contenido de gatos lindos. Hagamos eso ahora:

1. Abra su proyecto Craft CMS route.php en su IDE.
2. Agregar la siguiente regla hará que su punto final de API esté disponible en https://yourprojecturl.test/api :
   

    return [ 'api' => 'graphql/api', // ... ];

3. Guardar y cerrar.
4. Pruebe haciendo ping al punto final:
   

    curl -H "Content-Type: application/graphql" -d '{ping}' https://yourprojecturl.test/api

5. Debería recibir "pong" en respuesta.

Habilite su contenido

Hemos configurado nuestro punto final para recibir solicitudes. Ahora es el momento de habilitar/deshabilitar ciertas partes de nuestro sitio que nos gustaría que estuvieran disponibles a través de nuestra API. Por ejemplo, es posible que desee desactivar ciertas entradas que contienen información confidencial. Craft hace que este proceso sea extremadamente fácil; es un caso de marcar/desmarcar. (También puede volverse más complejo escribiendo sus propios esquemas). Por ahora, crearemos un esquema público que esté disponible públicamente. Puede crear esquemas privados que requieran una clave secreta, pero esto está fuera del alcance de esta guía.

1. Dirígete a la sección GraphQL a través de la barra lateral de tu panel de administración;
2. Haga clic en "Esquema público";
3. Habilita la sección "Gatos".
   ( Esto hará que nuestro contenido esté disponible a través de su terminal).
4. Salvar.
   

Probando nuestro punto final

Ahora que hemos elegido los datos que nos gustaría que estén disponibles a través de nuestro punto final, ahora es el momento de probarlo. En el menú desplegable de GraphQL en el panel de administración de la izquierda, verá un elemento llamado "GraphiQL". GraphiQL nos permite explorar nuestra API y consultarla dentro de nuestro tablero.

1. Abra GraphiQL;
2. Cambie "Esquema completo" a "Esquema público";
3. Escriba la siguiente consulta de GraphQL en el panel de la izquierda:
   

    query ($section: [String], $orderBy: String) { entries(section: $section, orderBy: $orderBy) { title slug id } }

4. Haz clic en el botón "Reproducir".

Sugerencia : si no está al 100 % en las consultas de GraphQL, eso no es un problema; Craft viene con una guía práctica para ayudarte.

Terminando

Ahora nos hemos sumergido bastante en el mundo de Craft CMS. Resumamos lo que hemos logrado en la siguiente guía:

• Configure un entorno de desarrollo local con Multipass;
• Creó y configuró una nueva instalación de Craft;
• Se agregó un dominio de prueba en el que podemos acceder a nuestra instalación;
• Creó un lindo blog de gatos;
• Se quedó sin cabeza;
• Creó un punto final de API para acceder a nuestros gatos.
  

Si está interesado en involucrarse más con Craft CMS y ser parte de la comunidad, debe unirse al servidor Craft Discord muy activo y leer más a través de la documentación oficial.