Simplifique su pila con un generador de sitios estáticos hecho a medida

 

 

 

  • Taller de diseño conductual, con Susan y Guthrie Weinschenk
  • SmashingConf UX y diseño, Amberes 2024

  • Índice
    1. ¿Qué es un generador de sitios estáticos?
    2. La tecnología de nuestro nuevo generador de sitios estáticos: manillares, Sanity.io y Netlify
      1. Requisitos previos
    3. Configurando nuestra estructura de documentos en HTML
    4. Convierta nuestro HTML en una plantilla que acepte datos
    5. Conexión a un CMS
      1. Configurando la cordura
      2. Creando un esquema de cordura
      3. Estructurar su contenido de forma reutilizable
    6. Incorporando nuestros datos a nuestro proyecto
      1. Instalar y configurar el cliente JavaScript de Sanity
      2. Obteniendo nuestros datos con GROQ
      3. Convertir el campo de texto enriquecido a HTML
      4. Usando el contenido de Sanity.io en manillares
    7. Configurar la implementación
      1. Implementación en Netlify
      2. Configurar un webhook
    8. Próximos pasos

    En el desarrollo moderno, existen muchas herramientas excelentes para desarrollar sitios web, pero a menudo son más de lo necesario para un proyecto determinado. En este artículo, exploraremos cómo tomar una humilde página HTML y hacer que su contenido sea editable en un CMS sin marcos ni JavaScript del lado del cliente.

     

    Con la llegada del movimiento Jamstack, los sitios con servicios estáticos han vuelto a estar de moda. La mayoría de los desarrolladores que ofrecen HTML estático no crean HTML nativo. Para tener una experiencia de desarrollador sólida, a menudo recurrimos a herramientas llamadas Generadores de sitios estáticos (SSG).

    Estas herramientas vienen con muchas características que hacen que la creación de sitios estáticos a gran escala sea placentera. Ya sea que proporcionen enlaces simples a API de terceros, como las fuentes de datos de Gatsby , o proporcionen una configuración detallada como la enorme colección de motores de plantillas de 11ty , hay algo para todos en la generación de sitios estáticos.

    Debido a que estas herramientas están diseñadas para diversos casos de uso, deben tener muchas funciones. Esas características los hacen poderosos. También los hacen bastante complejos y opacos para los nuevos desarrolladores. En este artículo, analizaremos el SSG hasta sus componentes básicos y crearemos el nuestro propio.

    ¿Qué es un generador de sitios estáticos?

    En esencia, un generador de sitios estáticos es un programa que realiza una serie de transformaciones en un grupo de archivos para convertirlos en activos estáticos, como HTML. Qué tipo de archivos puede aceptar, cómo los transforma y qué tipos de archivos salen diferencian a los SSG.

    Jekyll , uno de los primeros y aún populares SSG, utiliza Ruby para procesar plantillas de Liquid y archivos de contenido Markdown en HTML.

    Gatsby usa React y JSX para transformar componentes y contenido en HTML. Luego va un paso más allá y crea una aplicación de una sola página que se puede servir de forma estática.

    11ty renderiza HTML a partir de motores de plantillas como Liquid, Manillars , Nunjucks o literales de plantilla de JavaScript.

    Cada una de estas plataformas tiene características adicionales para hacernos la vida más fácil. Proporcionan temas, crean canalizaciones, arquitectura de complementos y más. Con cada característica adicional viene más complejidad, más magia y más dependencias. Son características importantes, sin duda, pero no todos los proyectos las necesitan.

    Entre estos tres SSG diferentes, podemos ver otro tema común: datos + plantillas = sitio final. Esta parece ser la funcionalidad principal de los sitios generadores estáticos. Esta es la funcionalidad en la que basaremos nuestro SSG.

    En esencia, un generador de sitios estáticos es un programa que realiza una serie de transformaciones en un grupo de archivos para convertirlos en activos estáticos, como HTML.

     

    La tecnología de nuestro nuevo generador de sitios estáticos: manillares, Sanity.io y Netlify

    Para construir nuestro SSG, necesitaremos un motor de plantillas, una fuente de datos y un host que pueda ejecutar nuestro SSG y construir nuestro sitio. Muchos generadores utilizan Markdown como fuente de datos, pero ¿qué pasaría si diéramos un paso más y conectáramos de forma nativa nuestro SSG a un CMS?

    • Fuente de datos: Sanity.io
    • Obtención de datos y creación de plantillas: nodos y manillares
    • Host e implementación: Netlify .

    Requisitos previos

    • NodeJS instalado
    • Cuenta Sanity.io
    • Conocimiento de Git
    • Conocimientos básicos de la línea de comando.
    • Conocimientos básicos de implementación de servicios como Netlify.

    Nota : para seguirlo, puede encontrar el código en este repositorio en GitHub .

    Configurando nuestra estructura de documentos en HTML

    Para comenzar la estructura de nuestro documento, escribiremos HTML simple. No hay necesidad de complicar las cosas todavía.

    En la estructura de nuestro proyecto, necesitamos crear un lugar para que vivan nuestros archivos fuente. En este caso, crearemos un srcdirectorio y lo colocaremos index.htmldentro.

    En index.html, delinearemos el contenido que queremos. Esta será una página acerca de relativamente simple.

    htmlhead meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" titleTitle of the page!/title/headbody h1The personal homepage of Bryan Robinson/h1 pSome pagraph and rich text content next/p h2Bryan is on the internet/h2 ul lia href="linkURL"List of links/a/li /ul/body/html

    Mantengamos esto simple. Comenzaremos con un h1para nuestra página. Seguiremos eso con algunos párrafos de información biográfica y anclaremos la página con una lista de enlaces para ver más.

    Convierta nuestro HTML en una plantilla que acepte datos

    Una vez que tengamos nuestra estructura básica, necesitamos configurar un proceso para combinarla con una cierta cantidad de datos. Para hacer esto, usaremos el motor de plantillas de manillares .

    En esencia, Manillar toma una cadena similar a HTML, inserta datos a través de reglas definidas en el documento y luego genera una cadena HTML compilada.

    Para usar manillares, necesitaremos inicializar un paquete.json e instalar el paquete.

    Ejecute npm init -ypara crear la estructura de un archivo package.json con algún contenido predeterminado. Una vez que tengamos esto, podemos instalar Manillares.

    npm install handlebars

    Nuestro script de compilación será un script de Nodo. Este es el script que usaremos localmente para construir, pero también lo que nuestro proveedor de implementación y host usarán para construir nuestro HTML para el sitio en vivo.

     

    Para iniciar nuestro script, crearemos un index.jsarchivo y necesitaremos dos paquetes en la parte superior. El primero es Manillar y el segundo es un módulo predeterminado en Node para acceder al sistema de archivos actual.

    const fs = require('fs');const Handlebars = require('handlebars');

    Usaremos el fsmódulo para acceder a nuestro archivo fuente, así como para escribir en un archivo de distribución. Para comenzar nuestra compilación, crearemos una mainfunción para que nuestro archivo se ejecute cuando se llame y una buildHTMLfunción para combinar nuestros datos y marcado.

    function buildHTML(filename, data) { const source = fs.readFileSync(filename,'utf8').toString(); const template = Handlebars.compile(source); const output = template(data); return output}async function main(src, dist) { const html = buildHTML(src, { "variableData": "This is variable data"}); fs.writeFile(destination, html, function (err) { if (err) return console.log(err); console.log('index.html created'); });}main('./src/index.html', './dist/index.html');

    La main()función acepta dos argumentos: la ruta a nuestra plantilla HTML y la ruta donde queremos que viva nuestro archivo creado. En nuestra función principal, ejecutamos buildHTMLla ruta de origen de la plantilla con cierta cantidad de datos.

    La función de compilación convierte el documento fuente en una cadena y pasa esa cadena a Manillar. Manillar compila una plantilla usando esa cadena. Luego pasamos nuestros datos a la plantilla compilada y Manillar representa una nueva cadena HTML reemplazando cualquier variable o lógica de plantilla con la salida de datos.

    Devolvemos esa cadena a nuestra mainfunción y usamos el writeFilemétodo proporcionado por el módulo del sistema de archivos de Node para escribir el nuevo archivo en nuestra ubicación especificada si el directorio existe.

    Para evitar un error, agregue un distdirectorio a su proyecto con un .gitkeeparchivo. No queremos enviar nuestros archivos compilados (nuestro proceso de compilación hará esto), pero queremos asegurarnos de tener este directorio para nuestro script.

    Antes de crear un CMS para administrar esta página, confirmemos que esté funcionando. Para probar, modificaremos nuestro documento HTML para usar los datos que acabamos de pasarle. Usaremos la sintaxis de la variable Manillar para incluir el variableDatacontenido.

    h1{{ variableData }}/h1

    Ahora que nuestro HTML tiene una variable, estamos listos para ejecutar nuestro script de nodo.

    node index.js

    Una vez que finalice el script, deberíamos tener un archivo en /dist/index.html. Si leemos abrir esto en un navegador, veremos nuestro marcado representado, pero también nuestra cadena "Esto es datos variables".

    Conexión a un CMS

    Tenemos una forma de juntar datos con una plantilla, ahora necesitamos una fuente para nuestros datos. Este método funcionará con cualquier fuente de datos que tenga una API. Para esta demostración, usaremos Sanity.io.

     

    Sanity es una fuente de datos basada en API que trata el contenido como datos estructurados. Tienen un sistema de gestión de contenidos de código abierto para que la gestión y la adición de datos sean más cómodas tanto para los editores como para los desarrolladores. El CMS es lo que a menudo se denomina CMS "sin cabeza". En lugar de un sistema de gestión tradicional donde sus datos están estrechamente vinculados a su presentación, un CMS sin cabeza crea una capa de datos que puede ser consumida por cualquier interfaz o servicio (y posiblemente muchos al mismo tiempo).

    Sanity es un servicio pago, pero tienen un plan “Estándar” que es gratuito y tiene todas las funciones que necesitamos para un sitio como este.

    Configurando la cordura

    La forma más rápida de poner en marcha un nuevo proyecto de Sanity es utilizar la CLI de Sanity. Comenzaremos instalándolo globalmente.

    npm install -g @sanity/cli

    La CLI nos brinda acceso a un grupo de ayudantes para administrar, implementar y crear. Para comenzar, ejecutaremos sanity init. Esto nos llevará a través de un cuestionario para ayudar a iniciar nuestro Studio (lo que Sanity llama su CMS de código abierto).

    Select a Project to Use: Create new project HTML CMSUse the default dataset configuration? Y // this creates a "Production" datasetProject output path: studio // or whatever directory you'd like this to live inSelect project template Clean project with no predefined schemas

    Este paso creará un nuevo proyecto y conjunto de datos en su cuenta de Sanity, creará una versión local de Studio y unirá los datos y el CMS por usted. Por defecto, el studiodirectorio se creará en la raíz de nuestro proyecto. En proyectos de mayor escala, es posible que desee configurarlo como un repositorio separado. Para este proyecto, está bien mantener esto unido. Quick news about games, health, travel, tv, movies

    Para ejecutar nuestro Studio localmente, cambiaremos el directorio al studiodirectorio y ejecutaremos sanity start. Esto ejecutará Studio en localhost:3333. Cuando inicie sesión, se le presentará una pantalla que le informará que tiene un "esquema vacío". Con eso, es hora de agregar nuestro esquema, que es como se estructurarán y editarán nuestros datos.

    Creando un esquema de cordura

    La forma de crear documentos y campos dentro de Sanity Studio es crear esquemas dentro del schemas/schema.jsarchivo.

    Para nuestro sitio, crearemos un tipo de esquema llamado "Acerca de los detalles". Nuestro esquema fluirá de nuestro HTML. En general, podríamos hacer que la mayor parte de nuestra página web sea un único campo de texto enriquecido, pero es una buena práctica estructurar nuestro contenido de forma desacoplada. Esto proporciona una mayor flexibilidad sobre cómo podríamos querer utilizar estos datos en el futuro.

    Para nuestra página web, queremos un conjunto de datos que incluya lo siguiente:

    • Título
    • Nombre completo
    • Biografía (con edición de texto enriquecido)
    • Una lista de sitios web con un nombre y una URL.

    Para definir esto en nuestro esquema, creamos un objeto para nuestro documento y definimos sus campos. Una lista comentada de nuestro contenido con su campo type:

     

    • Título - cadena
    • Nombre completo: cadena
    • Biografía: conjunto de "bloques"
    • Lista de sitios web: conjunto de objetos con campos de cadena de nombre y URL.
    types: schemaTypes.concat([ /* Your types here! */ { title: "About Details", name: "about", type: "document", fields: [ { name: 'title', type: 'string' }, { name: 'fullName', title: 'Full Name', type: 'string' }, { name: 'bio', title: 'Biography', name: 'content', type: 'array', of: [ { type: 'block' } ] }, { name: 'externalLinks', title: 'Social media and external links', type: 'array', of: [ { type: 'object', fields: [ { name: 'text', title: 'Link text', type: 'string' }, { name: 'href', title: 'Link url', type: 'string' } ] } ] } ] }])

    Agregue esto a sus tipos de esquema, guárdelo y su Studio volverá a compilarlo y le presentará sus primeros documentos. Desde aquí, agregaremos nuestro contenido al CMS creando un nuevo documento y completando la información.

    Estructurar su contenido de forma reutilizable

    Llegados a este punto, quizás te preguntes por qué tenemos un “nombre completo” y un “título”. Esto se debe a que queremos que nuestro contenido tenga el potencial de ser multipropósito. Al incluir un campo de nombre en lugar de incluir el nombre solo en el título, le damos más uso a esos datos. Luego podemos usar la información de este CMS para impulsar también una página de currículum o PDF. El campo de biografía podría usarse mediante programación en otros sistemas o sitios web. Esto nos permite tener una única fuente de verdad para gran parte de este contenido en lugar de estar dictados por el caso de uso directo de este sitio en particular.

    Incorporando nuestros datos a nuestro proyecto

    Ahora que hemos hecho que nuestros datos estén disponibles a través de una API, incorporémoslos a nuestro proyecto.

    Instalar y configurar el cliente JavaScript de Sanity

    Lo primero que necesitamos es acceder a los datos en Node. Podemos utilizar el cliente JavaScript de Sanity para forjar esa conexión.

    npm install @sanity/client

    Esto buscará e instalará el SDK de JavaScript. Desde aquí, debemos configurarlo para obtener datos del proyecto que configuramos anteriormente. Para hacer eso, configuraremos un script de utilidad en formato /utils/SanityClient.js. Proporcionamos al SDK el ID de nuestro proyecto y el nombre del conjunto de datos, y estamos listos para usarlo en nuestro script principal.

    const sanityClient = require('@sanity/client');const client = sanityClient({ projectId: '4fs6x5jg', dataset: 'production', useCdn: true })module.exports = client;

    Obteniendo nuestros datos con GROQ

    De vuelta en nuestro index.jsarchivo, crearemos una nueva función para recuperar nuestros datos. Para hacer esto, usaremos el lenguaje de consulta nativo de Sanity, el GROQ de código abierto .

     

    Construiremos la consulta en una variable y luego usaremos el cliente que configuramos para recuperar los datos según la consulta. En este caso, construimos un objeto con una propiedad llamada about. En este objeto, queremos devolver los datos de nuestro documento específico. Para hacer eso, consultamos según el documento _idque se genera automáticamente cuando creamos nuestro documento.

    Para encontrar el documento _id, navegamos hasta el documento en Studio y lo copiamos desde la URL o pasamos al modo "Inspeccionar" para ver todos los datos del documento. Para ingresar a Inspeccionar, haga clic en el menú "brocheta" en la parte superior derecha o use el acceso directo Ctrl+ Alt+ I. Esta vista enumerará todos los datos de este documento, incluido nuestro _id. Sanity devolverá una serie de objetos de documento, por lo que, en aras de la simplicidad, devolveremos la 0thentrada.

    Luego pasamos la consulta al fetchmétodo de nuestro cliente Sanity y devolverá un objeto JSON de todos los datos de nuestro documento. En esta demostración, devolver todos los datos no es gran cosa. Para implementaciones más grandes, GROQ permite una " proyección " opcional para devolver solo los campos explícitos que desee.

    const client = require('./utils/SanityClient') // at the top of the file// ...async function getSanityData() { const query = `{ "about": *[_id == 'YOUR-ID-HERE'][0] }` let data = await client.fetch(query);}

    Convertir el campo de texto enriquecido a HTML

    Antes de que podamos devolver los datos, debemos realizar una transformación en nuestro campo de texto enriquecido. Si bien muchos CMS utilizan editores de texto enriquecido que devuelven HTML directamente, Sanity utiliza una especificación de código abierto llamada Portable Text . Portable Text devuelve una serie de objetos (piense en el texto enriquecido como una lista de párrafos y otros bloques multimedia) con todos los datos sobre el estilo del texto enriquecido y propiedades como enlaces, notas al pie y otras anotaciones. Esto permite que su texto se mueva y use en sistemas que no admiten HTML, como asistentes de voz y aplicaciones nativas.

    Para nuestro caso de uso, significa que necesitamos transformar el objeto en HTML. Existen módulos NPM que se pueden utilizar para convertir texto portátil para diversos usos. En nuestro caso usaremos un paquete llamado block-content-to-html .

    npm install @sanity/block-content-to-html

    Este paquete generará todo el marcado predeterminado del editor de texto enriquecido. Cada tipo de estilo se puede anular para ajustarse al marcado que necesite para su caso de uso. En este caso, dejaremos que el paquete haga el trabajo por nosotros.

    const blocksToHtml = require('@sanity/block-content-to-html'); // Added to the topasync function getSanityData() { const query = `{ "about": *[_type == 'about'][0] }` let data = await client.fetch(query); data.about.content = blocksToHtml({ blocks: data.about.content }) return await data}

    Usando el contenido de Sanity.io en manillares

    Ahora que los datos tienen una forma que podemos usar, pasaremos esto a nuestra buildHTMLfunción como argumento de datos.

     

    async function main(src, dist) { const data = await getSanityData(); const html = buildHTML(src, data) fs.writeFile(dist, html, function (err) { if (err) return console.log(err); console.log('index.html created'); });}

    Ahora, podemos cambiar nuestro HTML para usar los nuevos datos. Usaremos más llamadas a variables en nuestra plantilla para extraer la mayoría de nuestros datos.

    Para representar nuestra contentvariable de texto enriquecido, necesitaremos agregar una capa adicional de llaves a nuestra variable. Esto le indicará a Manillar que represente el HTML en lugar de mostrarlo como una cadena.

    Para nuestra externalLinksmatriz, necesitaremos usar la funcionalidad de bucle incorporada de Seats para mostrar todos los enlaces que agregamos a nuestro Studio.

    !DOCTYPE htmlhtmlhead meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" title{{ about.title }}/title/headbody h1The personal homepage of {{ about.fullName }}/h1 {{{ about.content }}} h2Bryan is on the internet/h2 ul {{#each about.externalLinks }} lia href="{{ this.href }}"{{ this.text }}/a/li {{/each}} /ul/body/html

    Configurar la implementación

    Pongamos esto en vivo. Necesitamos dos componentes para que esto funcione. Primero, queremos un host estático que cree nuestros archivos por nosotros. A continuación, debemos activar una nueva compilación de nuestro sitio cuando se cambia el contenido en nuestro CMS.

    Implementación en Netlify

    Para el hosting, usaremos Netlify. Netlify es un servidor de sitio estático. Sirve activos estáticos, pero tiene características adicionales que harán que nuestro sitio funcione sin problemas. Tienen una infraestructura de implementación incorporada que puede ejecutar nuestro script de nodo, webhooks para activar compilaciones y una CDN distribuida globalmente para garantizar que nuestra página HTML se entregue rápidamente.

    Netlify puede ver nuestro repositorio en GitHub y crear una compilación basada en un comando que podemos agregar en su panel.

    Primero, necesitaremos enviar este código a GitHub. Luego, en el Panel de Netlify, necesitamos conectar el nuevo repositorio a un nuevo sitio en Netlify .

    Una vez que esté conectado, debemos decirle a Netlify cómo construir nuestro proyecto. En el panel, nos dirigiremos a Configuración Construir e implementar Configuración de compilación. En esta área, necesitamos cambiar nuestro "comando de compilación" a "nodo index.js" y nuestro "directorio de publicación" a "./dist".

    Cuando Netlify construya nuestro sitio, ejecutará nuestro comando y luego verificará la carpeta que enumeramos en busca de contenido y publicará el contenido dentro.

    Configurar un webhook

    También debemos decirle a Netlify que publique una nueva versión cuando alguien actualice el contenido. Para hacer eso, configuraremos un Webhook para notificar a Netlify que necesitamos reconstruir el sitio. Un Webhook es una URL a la que se puede acceder mediante programación mediante un servicio diferente (como Sanity) para crear una acción en el servicio de origen (en este caso Netlify).

    Podemos configurar un "enganche de compilación" específico en nuestro panel de Netlify en Configuración Construir e implementar Enganches de compilación. Añade un gancho, dale un nombre y guárdalo. Esto proporcionará una URL que se puede utilizar para activar de forma remota una compilación en Netlify.

    A continuación, debemos indicarle a Sanity que realice una solicitud a esta URL cuando publique cambios.

    Podemos usar Sanity CLI para lograr esto. Dentro de nuestro /studiodirectorio, podemos ejecutar sanity hook createpara conectarnos. El comando solicitará un nombre, un conjunto de datos y una URL. El nombre puede ser el que desee, el conjunto de datos debe ser productionpara nuestro producto y la URL debe ser la URL que proporcionó Netlify.

    Ahora, cada vez que publiquemos contenido en Studio, nuestro sitio web se actualizará automáticamente. No es necesario ningún marco.

    • El código se puede encontrar en este repositorio de GitHub →

    Próximos pasos

    Este es un pequeño ejemplo de lo que puedes hacer cuando creas tus propias herramientas. Si bien es posible que lo que necesite para la mayoría de los proyectos sean SSG con más funciones completas, crear su propio mini-SSG puede ayudarlo a comprender más sobre lo que sucede en el generador de su elección.

    • Este sitio publica solo una página, pero con un poco más en nuestro script de compilación, podríamos hacer que publique más páginas. Incluso podría publicar una publicación de blog.
    • La "experiencia de desarrollador" falta un poco en el repositorio. Podríamos ejecutar nuestro script Node en cualquier archivo guardado implementando un paquete como Nodemon o agregando "recarga en caliente" con algo como BrowserSync .
    • Los datos que residen en Sanity pueden impulsar múltiples sitios y servicios. Podrías crear un sitio de currículum que utilice esto y publique un PDF en lugar de una página web.
    • Podrías agregar CSS y hacer que parezca un sitio real.

    (ra, yk, il)Explora más en

    • CMS
    • javascript
    • Marcos
    • Generadores
    • Generadores estáticos





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Simplifique su pila con un generador de sitios estáticos hecho a medida

    Simplifique su pila con un generador de sitios estáticos hecho a medida

    Taller de diseño conductual, con Susan y Guthrie Weinschenk SmashingConf UX y diseño, Amberes 2024 Índice

    programar

    es

    https://pseint.es/static/images/programar-simplifique-su-pila-con-un-generador-de-sitios-estaticos-hecho-a-medida-1062-0.jpg

    2024-04-04

     

    Simplifique su pila con un generador de sitios estáticos hecho a medida
    Simplifique su pila con un generador de sitios estáticos hecho a medida

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20