Creando un blog estático con Sapper y Strapi

 

 

 

  • Accesibilidad para diseñadores, con Stéphanie Walter
  • Implemente rápidamente. Implementar inteligentemente

  • Índice
    1. Parte delantera del zapador
      1. Estructura de la aplicación Sapper
    2. Extremo trasero de Strapi
      1. 1. Instale Strapi y cree un nuevo proyecto
      2. 2. Crear administrador
    3. 3. Crear tipo de colección de blogs
      1. 4. Agregue un nuevo usuario al tipo de colección "Usuarios"
      2. 5. Agregar contenido al tipo de colección "Blogs"
      3. 6. Establecer roles y permisos
      4. 7. Enviar solicitudes a la API de tipos de colección
    4. Uniendo ambos extremos
    5. Instalación de paquetes
    6. Implementar en Netlify
    7. Conclusión
      1. Recursos

    Este artículo le explicará cómo crear un blog estático impulsado por Svelte con Sapper y Strapi, así como cómo implementar el sitio web en Netlify. Comprenderá cómo crear un sitio web estático y cómo utilizar el poder de un CMS sin cabeza, con un ejemplo del mundo real.

     

    En este tutorial, crearemos un blog mínimo generado estáticamente con Sapper, un marco de JavaScript progresivo basado en Svelte, para nuestro front-end, y luego usaremos Strapi, un sistema de gestión de contenidos (CMS) sin cabeza de código abierto, para el back-end de nuestra aplicación. Este tutorial está dirigido a desarrolladores front-end de nivel intermedio, específicamente aquellos que desean la versatilidad de un CMS sin cabeza, como Strapi, así como la estructura mínima de un marco de JavaScript, como Sapper. No dudes en probar la demostración o consultar el código fuente en GitHub.

     

    Para leer el artículo sin problemas, necesitará la versión LTS de Node.js y Yarn o npm instalados en su dispositivo de antemano. También vale la pena mencionar que necesitará tener conocimientos básicos de consultas JavaScript y GraphQL.

    Antes de comenzar, eliminemos algunas definiciones. Un generador de sitios estáticos es una herramienta que genera sitios web estáticos, y un sitio web estático se puede definir como un sitio web que se obtiene a partir de archivos HTML puramente estáticos. Para obtener una descripción general de sus opciones actuales para generadores de sitios estáticos, consulte "Los 10 principales generadores de sitios estáticos en 2020 ".

    Un CMS headless , por otro lado, es un CMS accesible a través de una API. A diferencia de los CMS tradicionales del pasado, un CMS headless es independiente del front-end y no lo vincula a un único lenguaje o plataforma de programación. El artículo de Strapi " Por qué los desarrolladores frontend deberían utilizar un CMS sin cabeza " es un buen recurso para comprender la utilidad de un CMS sin cabeza.

    Los generadores de sitios estáticos, como los CMS sin cabeza, están ganando rápidamente un atractivo generalizado en la comunidad de desarrollo web front-end. Ambas tecnologías traen consigo una barrera de entrada mucho más baja, flexibilidad y, en general, una mejor experiencia para los desarrolladores. Veremos todo esto y más a medida que construyamos nuestro blog.

    Quizás se pregunte: "¿ Por qué debería usar esto en lugar de las alternativas?" Sapper se basa en Svelte, que es conocido por su velocidad y su tamaño de paquete relativamente pequeño. En un mundo donde el rendimiento juega un papel muy importante a la hora de determinar una experiencia de usuario eficaz, queremos optimizarlo para ello. Los desarrolladores de hoy tienen muchas opciones para elegir cuando se trata de frameworks front-end: si queremos optimizar la velocidad, el rendimiento y la experiencia del desarrollador (como lo hago yo en este proyecto), ¡entonces Sapper es una opción sólida!

    Entonces, comencemos a construir nuestro blog mínimo, comenzando con nuestra interfaz Sapper.

    Parte delantera del zapador

    Nuestra interfaz está construida con Sapper, un marco para crear aplicaciones web de extremadamente alto rendimiento utilizando Svelte. Sapper, que es la abreviatura de "Svelte app maker", permite a los desarrolladores exportar páginas como un sitio web estático, lo que haremos hoy. Svelte tiene una forma muy obstinada de estructurar proyectos, utilizando Degit .

    “Degit hace copias de los repositorios de Git y recupera la última confirmación del repositorio. Este es un enfoque más eficiente que usar git clone, porque no descargamos todo el historial de Git".

    Primero, instale Degit ejecutándolo npm install -g degiten su interfaz de línea de comandos (CLI).

    A continuación, ejecute los siguientes comandos en la CLI para configurar nuestro proyecto.

    npx degit "sveltejs/sapper-template#rollup" frontend# or: npx degit "sveltejs/sapper-template#webpack" frontendcd frontendnpm installnpm run dev

    Nota : Tenemos la opción de utilizar Rollup o Webpack para agrupar nuestro proyecto. Para este tutorial, usaremos Rollup .

     

    Estos comandos estructuran un nuevo proyecto en el frontenddirectorio, instalan sus dependencias e inician un servidor en localhost.

    Si eres nuevo en Sapper, necesitarás algunas explicaciones sobre la estructura del directorio.

    Estructura de la aplicación Sapper

    Si miras en el directorio del proyecto, verás esto:

    ├ package.json├ src│ ├ routes│ │ ├ # your routes here│ │ ├ _error.svelte│ │ └ index.svelte│ ├ client.js│ ├ server.js│ ├ service-worker.js│ └ template.html├ static│ ├ # your files here└ rollup.config.js / webpack.config.js

    Nota : Cuando ejecute Sapper por primera vez, creará un __sapper__directorio adicional que contiene los archivos generados. También notará algunos archivos adicionales y un cypressdirectorio; no necesitamos preocuparnos por ellos para este artículo.

    Verá algunos archivos y carpetas. Además de los ya mencionados anteriormente, estos son algunos de los que puedes esperar:

    • package.json
      Este archivo contiene las dependencias de su aplicación y define una serie de scripts.
    • src
      Contiene los tres puntos de entrada para su aplicación: src/client.js, src/server.jsy (opcionalmente) src/service-worker.js, junto con un src/template.htmlarchivo.
    • src/routes
      Esta es la esencia de la aplicación (es decir, las páginas y las rutas del servidor).
    • static
      Este es un lugar para colocar cualquier archivo que utilice su aplicación: fuentes, imágenes, etc. Por ejemplo, static/favicon.pngse servirá como /favicon.png.
    • rollup.config.js
      Estamos usando Rollup para agrupar nuestra aplicación. Probablemente no necesites cambiar su configuración, pero si quieres, aquí es donde deberías hacerlo.

    La estructura del directorio es bastante mínima para la funcionalidad que proporciona el proyecto. Ahora que tenemos una idea de cómo se ve el directorio de nuestro proyecto y qué hace cada archivo y carpeta, podemos ejecutar nuestra aplicación con npm run dev.

    Deberías ver la página de inicio de inicio de Svelte-eque de nuestro blog.

    Tu página de inicio de Sapper. ( Vista previa grande )

    ¡Esto se ve muy bien! Ahora que nuestra interfaz está configurada y funcionando, podemos pasar a la parte posterior de la aplicación, donde configuraremos Strapi.

     

    Extremo trasero de Strapi

    Strapi no tiene cabeza y está autohospedado, lo que significa que tenemos control sobre nuestro contenido y dónde está alojado: no tenemos que preocuparnos por ningún servidor, idioma o proveedor, y podemos mantener nuestro contenido privado. Strapi está construido con JavaScript y tiene un editor de contenido creado con React. Usaremos este editor de contenido para crear algunos modelos de contenido y almacenar contenido real que podremos consultar más adelante. Pero antes de que podamos hacer todo esto, debemos configurarlo siguiendo las instrucciones a continuación.

    1. Instale Strapi y cree un nuevo proyecto

    • Abra su CLI.
    • Correr yarn create strapi-app backend --quickstart. Esto creará una nueva carpeta llamada backendy creará la interfaz de usuario del administrador de React.

    2. Crear administrador

    • Navegue a https://localhost:1337/admin .
    • Complete el formulario para crear el primer usuario, el administrador.
    • Haga clic en "Listo para comenzar".

    Crea una cuenta de administrador. ( Vista previa grande )

    3. Crear tipo de colección de blogs

    • Navegue hasta "Creador de tipos de contenido", en "Complementos" en el menú de la izquierda.
    • Haga clic en el enlace "+ Crear nuevo tipo de colección".
    • Nómbrelo "blog".
    • Haga clic en "Continuar".

    Crea un nuevo tipo de colección. ( Vista previa grande )

    • Agregue un "campo de texto" (texto breve) y asígnele el nombre "Título".
    • Haga clic en el botón “+ Agregar otro campo”.

    Crea un nuevo campo de texto. ( Vista previa grande )

    • Agregue un "campo de texto" (texto largo) y asígnele el nombre "Descripción".
    • Haga clic en el botón “+ Agregar otro campo”.

    Crea un nuevo campo de texto. ( Vista previa grande )

    • Agregue un "campo de fecha" del tipo "fecha" y asígnele el nombre "Publicado".
    • Haga clic en el botón “+ Agregar otro campo”.

    Cree un nuevo campo de fecha. ( Vista previa grande )

    • Agregue un "campo de texto enriquecido" y asígnele el nombre "Cuerpo".
    • Haga clic en el botón “+ Agregar otro campo”.

    Cree un nuevo campo de texto enriquecido. ( Vista previa grande )

    • Agregue otro "campo de texto" (texto corto) y asígnele el nombre "Slug".
    • Haga clic en el botón “+ Agregar otro campo”.

    Crea un nuevo campo de texto. ( Vista previa grande )

    • Agregue un "campo de relación".
    • En el lado derecho de la relación, haga clic en la flecha y seleccione "Usuario".
    • En el lado izquierdo de la relación, cambie el nombre del campo a "autor".

    Cree un nuevo campo de relación. ( Vista previa grande )

    • Haga clic en el botón "Finalizar".
    • Haga clic en el botón "Guardar" y espere a que Strapi se reinicie.

    Cuando esté terminado, su tipo de colección debería verse así:

    Descripción general del tipo de colección de su blog. ( Vista previa grande )

     

    4. Agregue un nuevo usuario al tipo de colección "Usuarios"

    • Navegue hasta "Usuarios" en "Tipos de colección" en el menú de la izquierda.
    • Haga clic en "Agregar nuevo usuario".
    • Ingrese el “correo electrónico”, el “nombre de usuario” y la “contraseña” que desee y active el botón “Confirmado”.
    • Clic en Guardar".

    Agregue contenido de usuario. ( Vista previa grande )

    Ahora tenemos un nuevo usuario al que podemos atribuir artículos cuando agregamos artículos a nuestro tipo de colección "Blog".

    5. Agregar contenido al tipo de colección "Blogs"

    • Navegue a "Blogs" en "Tipos de colección" en el menú de la izquierda.
    • Haga clic en "Agregar nuevo blog".
    • Complete la información en los campos especificados (tiene la opción de seleccionar el usuario que acaba de crear como autor).
    • Clic en Guardar".

    Añade algo de contenido al blog. ( Vista previa grande )

    6. Establecer roles y permisos

    • Navegue hasta "Funciones y permisos" en "Complementos" en el menú de la izquierda.
    • Haga clic en la función "Público".
    • Desplácese hacia abajo hasta "Permisos" y busque "Blogs".
    • Marque las casillas junto a "buscar" y "findone".
    • Clic en Guardar".

    Establezca permisos para su rol público. ( Vista previa grande )
    psicologia y salud mental

    7. Enviar solicitudes a la API de tipos de colección

    Navegue a https://localhost:1337/Blogs para consultar sus datos.

    Debería recuperar algunos datos JSON que contienen el contenido que acabamos de agregar. Sin embargo, para este tutorial usaremos la API GraphQL de Strapi.

    Para habilitarlo:

    • Abra su CLI.
    • Ejecute cd backendpara navegar hasta ./backend.
    • Ejecute yarn strapi install graphqlpara instalar el complemento GraphQL.

    Alternativamente, puedes hacer esto:

    • En la interfaz de usuario del administrador, navegue hasta "Marketplace" en "General" en el menú de la izquierda.
    • Haga clic en "Descargar" en la tarjeta GraphQL.
    • Espere a que Strapi se reinicie.

    Descargue el complemento GraphQL. ( Vista previa grande )

    Cuando el complemento GraphQL está instalado y Strapi vuelve a estar en funcionamiento, podemos probar consultas en el área de juegos GraphQL .

    Eso es todo por nuestra configuración de back-end. Todo lo que nos queda por hacer es consumir la API GraphQL y renderizar todo este hermoso contenido.

    Uniendo ambos extremos

    Acabamos de consultar nuestro backend de Strapi y obtuvimos algunos datos. Todo lo que tenemos que hacer ahora es configurar nuestra interfaz para representar el contenido que obtenemos de Strapi a través de la API GraphQL. Debido a que estamos usando Strapi GraphQL, tendremos que instalar el cliente Svelte Apollo y algunos otros paquetes para asegurarnos de que todo funcione correctamente.

    Instalación de paquetes

    • Abra la CLI y navegue hasta ./frontend.
    • Correr npm i --save apollo-boost graphql svelte-apollo moment.

    Moment.js nos ayuda a analizar, validar, manipular y mostrar fechas y horas en JavaScript.

     

    Los paquetes ahora están instalados, lo que significa que podemos realizar consultas GraphQL en nuestra aplicación Svelte. El blog que estamos construyendo tendrá tres páginas: "inicio", "acerca de" y "artículos". Todas las publicaciones de nuestro blog de Strapi se mostrarán en la página de "artículos", brindando a los usuarios acceso a cada artículo. Si pensamos en cómo se vería, la ruta de nuestra página de “artículos” será /articlesy luego la ruta de cada artículo será /articles/:slug, donde slug es lo que ingresamos en el campo “Slug” al agregar el contenido en la interfaz de usuario del administrador.

    Es importante entender esto porque adaptaremos nuestra aplicación Svelte para que funcione de la misma manera.

    En ./frontend/src/routes, verá una carpeta llamada "blog". No necesitamos esta carpeta en este tutorial, por lo que puedes eliminarla. Hacerlo dañará la aplicación, pero no se preocupe: volverá a estar operativa una vez que creemos nuestra página de “artículos”, lo cual haremos ahora.

    • Navegar a ./frontend/src/routes.
    • Cree una carpeta llamada "artículos".
    • En ./frontend/src/routes/articles, cree un archivo llamado index.sveltey pegue el siguiente código en él.
    • Al pegar, asegúrese de reemplazarlo Your Strapi GraphQL Endpointcon su punto final Strapi GraphQL real. Para su versión local, normalmente será https://localhost:1337/graphql.
    script context="module" import ApolloClient, { gql } from 'apollo-boost'; import moment from 'moment'; const blogQuery = gql` query Blogs { blogs { id Title Description Published Body author { username } Slug } } `; export async function preload({params, query}) { const client = new ApolloClient({ uri: 'Your Strapi GraphQL Endpoint', fetch: this.fetch }); const results = await client.query({ query: blogQuery }) return {posts: results.data.blogs} }/scriptscript export let posts;/scriptstyle ul, p { margin: 0 0 1em 0; line-height: 1.5; } .main-title { font-size: 25px; }/stylesvelte:head titlearticles/title/svelte:headh1recent posts/h1ul{#each posts as post} li a rel='prefetch' href='articles/{post.Slug}' {post.Title} /a /li p {moment().to(post.Published, "DD-MM-YYYY")} ago by {post.author.username} /p{/each}/ul

    Este archivo representa nuestra /articlesruta. En el código anterior, importamos algunos paquetes y luego usamos Apollo Client para realizar una consulta: blogQuery. Luego almacenamos nuestra respuesta a la consulta en una variable resultsy usamos la preload()función para procesar los datos necesarios en nuestra página. Luego, la función devuelve posts, una variable con el resultado de la consulta analizada.

     

    Hemos utilizado el #eachbloque de Svelte para recorrer los datos de Strapi, mostrando el título, la fecha de publicación y el autor. Cuando se hace clic en nuestra aetiqueta, se dirige a una página definida por el slug que ingresamos para nuestra publicación en la interfaz de usuario de administración de Strapi. Esto significa que cuando se hace clic en el enlace, abrimos una página para un artículo en particular y el slug se utiliza para identificar ese artículo.

    Para nuestra /articles/:slugruta, cree un archivo llamado [slug].svelte, en ./src/routes/articlesy pegue el siguiente código:

    script context="module" import ApolloClient, { gql } from 'apollo-boost'; import moment from 'moment'; const blogQuery = gql` query Blogs($Slug: String!) { blogs: blogs(where: { Slug: $Slug }) { id Title Description Published Body author { username } Slug } } `; export async function preload({params, query}) { const client = new ApolloClient({ uri: 'Your Strapi GraphQL Endpoint', fetch: this.fetch }); const results = await client.query({ query: blogQuery, variables: {"Slug" : params.slug} }) return {post: results.data.blogs} }/scriptscript export let post;/scriptstyle .content :global(h2) { font-size: 1.4em; font-weight: 500; } .content :global(pre) { background-color: #f9f9f9; box-shadow: inset 1px 1px 5px rgba(0,0,0,0.05); padding: 0.5em; border-radius: 2px; overflow-x: auto; } .content :global(pre) :global(code) { background-color: transparent; padding: 0; } .content :global(ul) { line-height: 1.5; } .content :global(li) { margin: 0 0 0.5em 0; }/stylesvelte:head titlean amazing article/title/svelte:head{#each post as post} h2{post.Title}/h2 h3{moment().to(post.Published)} by {post.author.username}/h3 div class='content' {@html post.Body} /div{/each}p⇺a href="articles" back to articles/a/p

    Nota : En Svelte, los parámetros dinámicos se codifican mediante [brackets]. Nuestro [slug].sveltearchivo nos permite agregar rutas para diferentes publicaciones de forma dinámica.

    Al igual que en routes/articles/index.svelte, aquí importamos algunos paquetes y luego usamos Apollo Client para realizar una consulta: blogQuery. Esta consulta es diferente porque estamos filtrando nuestros datos para asegurarnos de que devuelvan una publicación de blog específica. El paramsargumento en nuestra preload()función nos permite acceder params.slug, que es el slug de la página actual (es decir, el slug de esta publicación de blog en particular). Usamos params.slugcomo variable en nuestra consulta GraphQL para que solo se devuelvan los datos con un slug que coincida con el slug de nuestra página web. Luego almacenamos nuestra respuesta a la consulta en una variable ( results) y nuestra preload()función devuelve posts, una variable con el resultado de la consulta analizada.

     

    Finalmente, mostramos el título, la fecha de publicación y el cuerpo de nuestra publicación (envueltos en {@html}la etiqueta de Svelte ).

    Eso es todo. Ahora podemos mostrar páginas dinámicamente para cualquier publicación agregada al backend de Strapi.

    Ahora podemos trabajar en las páginas “acerca de” y “inicio”. En ./frontend/src/routes, pegue este código en el about.sveltearchivo:

    svelte:head titleabout/title/svelte:headh1about this site/h1pminimalist web design really let's the content stand out and shine. this is why a simple website design is the first choice of so many artists, photographers, and even some writers. they want their creative content to be the center of attention, rather than design elements created by someone else. /ppthis minimal blog is built with a href="https://svelte.dev/"svelte/a and a href="https://strapi.io/"strapi/a images by a href="https://unsplash.com/@glencarrie"glen carrie/a from unsplash /p

    Para nuestra página de inicio, vayamos ./frontend/src/routesy peguemos el siguiente código en index.svelte:

    style h1, figure, p { text-align: center; margin: 0 auto; } h1 { font-size: 2.8em; font-weight: 400; margin: 0 0 0.5em 0; } figure { margin: 0 0 1em 0; } img { width: 100%; max-width: 400px; margin: 0 0 1em 0; } p { margin: 1em auto; padding-bottom: 1em; } @media (min-width: 480px) { h1 { font-size: 4em; } }/stylesvelte:head titlea minimal sapper blog/title/svelte:headpwelcome to/ph1thebblog./b/h1figure img alt='the birds on a line' src='bird-bg.png' figcaptionwhere less is more/figcaption/figurepstrongwe're minimal and that might seem boring, except you're actually paying attention./strong/ppa href="about"find out why/a.../p

    Hemos creado todas las páginas necesarias para que nuestra aplicación se ejecute como se esperaba. Si ejecuta la aplicación ahora, debería ver algo como esto:

    La página de inicio de tu blog minimalista terminada. ( Vista previa grande )

    Bastante dulce, ¿sí?

    Localmente, todo funciona muy bien, pero queremos implementar nuestro blog estático en la web y compartir nuestra hermosa creación. Vamos a hacer eso.

    Implementar en Netlify

    Vamos a implementar nuestra aplicación en Netlify, pero antes de que podamos hacerlo, inicie sesión en su cuenta de Netlify (o cree una cuenta, si aún no tiene una). Sapper nos da la opción de implementar una versión estática de nuestro sitio web y eso es lo que haremos.

    • Navegar a ./frontend.
    • Ejecute npm run exportpara exportar una versión estática de la aplicación.

    Su aplicación se exportará a ./frontend/sapper/export.

    Arrastre su carpeta exportada a Netlify y su sitio web estará activo en un instante.

    Arrastre su carpeta de exportación al Panel de Netlify. ( Vista previa grande )

    Opcionalmente podemos implementar nuestro sitio web desde Git siguiendo la documentación de Netlify . Asegúrese de agregarlo npm run exportcomo comando de compilación y __sapper__/exportcomo directorio base.

    También tenemos la opción de implementar con Vercel (formalmente ZEIT, como se menciona en la documentación de Sapper ).

    Conclusión

    Eso fue divertido, ¿verdad? ¿Acabamos de crear un blog estático con Sapper y Strapi y lo implementamos en Netlify en menos de 15 minutos? Además de la experiencia estelar del desarrollador, es un placer trabajar con Strapi y Sapper. Aportan una nueva perspectiva a la construcción para la web, y este tutorial es un testimonio de ello. Definitivamente no estamos limitados a sitios web estáticos y no puedo esperar a ver qué construyen después de esto. Comparte tus proyectos conmigo en Twitter . No puedo esperar a verlos. ¡Cuídate, hasta la próxima!

    Recursos

    • “ Sapper: el nuevo marco de JavaScript que realmente debes probar ”, John Hannah, Informe de JavaScript
    • Docs , zapador
    • “ Por qué los desarrolladores frontend deberían utilizar un CMS sin cabeza ”, Daniel Madalitso Phiri, Strapi
    • “ Blog Strapi Starter Nuxt ”, Maxime Castres, Strapi
    • “ Los 10 principales generadores de sitios estáticos en 2020 ”, Daniel Madalitso Phiri, Strapi

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

    • Herramientas
    • javascript
    • Sin cabeza
    • CMS
    • Marcos





    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

    Creando un blog estático con Sapper y Strapi

    Creando un blog estático con Sapper y Strapi

    Accesibilidad para diseñadores, con Stéphanie Walter Implemente rápidamente. Implementar inteligentemente Índice

    programar

    es

    https://pseint.es/static/images/programar-creando-un-blog-estatico-con-sapper-y-strapi-1052-0.jpg

    2024-04-04

     

    Creando un blog estático con Sapper y Strapi
    Creando un blog estático con Sapper y Strapi

    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