Construir para la web es siempre una perspectiva emocionante. Permite a los desarrolladores tener su camino para crear aplicaciones web. Pueden elegir el marco, la tecnología, las herramientas y la filosofía que desean utilizar.
Una de esas filosofías es Jamstack. Ofrece un enfoque flexible para resolver el problema del desarrollo web.
En este artículo, aprenderá a crear su primera aplicación Jamstack. Empecemos.
Tabla de contenido
¿Qué es Jamstack?
Jamstack es una de las nuevas filosofías web para construir cosas para la web. Técnicamente, ofrece a los desarrolladores una arquitectura web componible. Puede elegir sus marcos y herramientas para lograr el mismo objetivo.
Si miras con atención,
Atasco + pila = JAMstack.
Jamstack se compone de tres componentes principales:
- J para JavaScript
- A para la interfaz de programación de aplicaciones (API)
- M para marcado
Este enfoque separa la lógica empresarial de los datos, desvinculando la capa de experiencia web. Los beneficios incluyen:
- Tiempo de carga más rápido (casi instantáneo).
- Un flujo de trabajo de desarrollo flexible y rápido.
- Escalabilidad y mantenibilidad mejoradas.
Para leer más sobre Jamstack, consulte Jamstack para principiantes.
Historia de Jamstack
Jamstack es relativamente nuevo. En 2016, Matt Biilmann presentó Jamstack en la presentación de la empresa, mostrando al mundo cómo crear un sitio web sin seguir la ruta tradicional.
La solución separa la lógica de la aplicación de la dependencia del servidor backend. Por lo tanto, la mayor parte del contenido se sirve a través de archivos estáticos con CDN: funciones dinámicas admitidas y a las que se accede a través de API. Y, si el servidor necesita procesar alguna acción dinámica, se compila y se envía a CDN, antes de que el usuario final acceda a ella.
Para comprender mejor la historia de Jamstack, debemos observar los sitios web estáticos y dinámicos.
- Sitio web estático: un sitio web estático está alojado en el servidor pero no tiene aspectos dinámicos. Durante la era inicial de Internet, la mayoría de los sitios eran sitios web estáticos que servían HTML, CSS e imágenes almacenadas en un servidor. El enfoque es rápido ya que el servidor no tiene que perder tiempo procesando la solicitud del usuario y siempre tiene los archivos listos. Sin embargo, ninguna capacidad de cambiar nada conduce a ninguna interactividad.
- Sitio web dinámico: los sitios dinámicos ofrecen interactividad al procesar las solicitudes de los usuarios y generar el HTML requerido para servir. El enfoque es lento pero agrega los beneficios de la interactividad. La mayoría de los sitios modernos son sitios dinámicos. El mejor ejemplo serían los sitios web impulsados por WordPress.
Y, luego, tenemos sitios web de Jamstack. Aprendamos cómo resolvió el problema de los sitios estáticos y dinámicos.
Sitios web Jamstack: ¿Cómo funcionan?
Jamstack resuelve dos problemas centrales:
- Tiempo de carga lento del sitio dinámico
- Interactividad de sitios estáticos
Un sitio Jamstack sirve archivos estáticos, lo cual es rápido. Pero también contiene JavaScript, que puede interactuar con las API para ofrecer contenido dinámico.
Detrás de escena, necesitará un generador de sitios estáticos para hacer el trabajo pesado de crear páginas web estáticas.
Estos generadores de sitios web estáticos utilizan Markdown para servir sitios web estáticos. El generador de sitios estáticos genera archivos estáticos a partir de los archivos HTML, CSS y JavaScript disponibles. Una vez desarrollado, el sitio estático se sirve a través de CDN.
A medida que entrega archivos estáticos, los sitios se cargan casi instantáneamente. Sin embargo, para agregar un aspecto dinámico al sitio, debe confiar en JavaScript. Los archivos JavaScript pueden conectarse a las API y agregar datos dinámicos comunicándose con una base de datos.
Construyendo el primer sitio web de Jamstack
Como Jamtack ofrece libertad, puede elegir cualquier marco Jamstack/generador de sitios estáticos, incluidos Hugo, Gatsby, Next.js, Hexo y otros.
Lea también: Los mejores marcos para JamStack
Y para la implementación, puede implementarlo en GitHub Pages, Netlify, Azure Static Web Apps y otros.
Usaremos Hugo para el desarrollo de Jamstack y Netlify para alojar nuestro sitio para este tutorial.
El tutorial asume que tiene una comprensión básica de la web. Debes saber cómo funciona la web. Además, también debes saber cómo usar Git.
Empecemos.
#1. Instalación de requisitos previos: Go y Git
Para instalar Hugo, necesitas dos cosas: Git y Go. Necesitamos Git para agilizar nuestro flujo de trabajo de compilación (lo verá más adelante con Netlify). Se requiere Go ya que Hugo se basa en él.
Estamos usando Ubuntu ejecutándose en WSL 2 en Windows 11. Estamos accediendo al kernel de Ubuntu directamente desde Windows.
Lea también: Windows 11 se encuentra con Linux: una inmersión profunda en las capacidades de WSL2
Puede elegir un sistema operativo, Windows, Linux o Mac.
Instalando Git
En Ubuntu, puede instalar Git ejecutando el siguiente comando.
$ sudo apt update $ sudo apt install git
En el caso de Windows, deberá descargar los instaladores binarios de Windows. Consulta nuestra guía completa de instalación de Git.
Para verificar si Git está instalado correctamente, escriba el siguiente comando.
[email protected]:~$ git --version git version 2.34.1
Instalando Ir
Ahora es el momento de instalar Golang. Para hacerlo, debe ejecutar algunos comandos en Linux. Así que hagámoslo por pasos.
Paso 1: elimine la instalación anterior de Go y cree un árbol de Go local.
$ rm -rf /usr/local/go && tar -C /usr/local -xzf go1.20.4.linux-amd64.tar.gz
Paso 2: Personalización de la variable de entorno PATH
exportar RUTA=$RUTA:/usr/local/ir/bi
Paso 3: Finalmente, verifica si Golang está instalado correctamente.
$ go version. #output go version go1.18.1 linux/amd64
Impresionante, ¡ahora estamos listos para instalar Hugo!
Instalando Hugo
Dependiendo de si está usando Homebrew o Chocolately, deberá usar uno de los siguientes comandos.
Para cerveza casera:
$ brew install hugo
Para chocolatoso:
$ brew install hugo -confirm
Y, si no usa ninguno de ellos, puede instalarlos directamente desde la fuente.
$ mkdir $HOME/src cd $HOME/src git clone https://github.com/gohugoio/hugo.git cd hugo go install --tags extended
Para verificar si Hugo se instaló correctamente, ejecute el siguiente comando.
$ hugo -version
Start building sites …
hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1
INFO 2023/05/05 12:20:38 syncing static files to /home/nitt/kirukiru.es/public/
| EN
-------------------+-----
Pages | 35
Paginator pages | 0
Non-page files | 0
Static files | 23
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Total in 117 ms
#2. Creación de un sitio de Hugo
Hugo ofrece una manera fácil de crear un sitio. Para hacerlo, ejecute el siguiente comando.
$ hugo new site kirukiru.es-jamstack
Congratulations! Your new Hugo site is created in /home/nitt/kirukiru.es-jamstack. Just a few more steps and you're ready to go: 1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/ or create your own with the "hugo new theme <THEMENAME>" command. 2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>". 3. Start the built-in live server via "hugo server". Visit https://gohugo.io/ for quickstart guide and full documentation.
#3. Elegir un tema de Hugo
Hugo ofrece acceso a toneladas de temas. Estos temas proporcionan un punto de partida para su proyecto. Y, para construir un sitio Jamstack con Hugo, necesitas un tema.
#4. Creación de un sitio para pequeñas empresas con Jamstack
Para el tutorial, vamos a utilizar el tema Hugo Hero. Este tema polivalente ofrece funciones como secciones de ancho completo y creación de carteras a través de Markdown.
Para instalar el tema, copie su enlace de repositorio y clónelo. Antes de continuar, asegúrese de estar en el directorio raíz.
git clone https://github.com/zerostaticthemes/hugo-hero-theme.git themes/hugo-hero-theme
#output Cloning into 'themes/hugo-hero-theme'... remote: Enumerating objects: 1141, done. remote: Total 1141 (delta 0), reused 0 (delta 0), pack-reused 1141 Receiving objects: 100% (1141/1141), 28.17 MiB | 58.00 KiB/s, done. Resolving deltas: 100% (489/489), done.
Copiar el contenido predeterminado
Para usar el contenido predeterminado con el sitio, ejecute el siguiente comando.
$ cp -a themes/hugo-hero-theme/exampleSite/. .
Copia el contenido de la carpeta exampleSite en la raíz de su sitio.
Actualización del archivo Config.toml
A continuación, necesitamos editar el archivo Config.toml. Almacena información de configuración del proyecto y es necesario configurarlo correctamente para que funcione su sitio Jamstack.
Por ahora, necesita editar la siguiente línea.
baseURL = "/" themesDir = "themes" theme = "hugo-hero-theme"
Nota: Debe seguir actualizando el archivo Config.toml a medida que avanza su proyecto. Además, como usó el contenido predeterminado, su Config.toml se actualiza para acomodar el contenido de ejemplo.
Probando nuestro sitio Jamstack
Para ejecutar nuestro sitio, necesitamos generar el sitio de Hugo nuevamente con el comando hugo.
$ hugo
A continuación, activamos el servidor. Para hacerlo, ejecute el comando hugo serve.
$ hugo serve
#output [email protected]:~/kirukiru.es$ hugo server port 1313 already in use, attempting to use an available port Start building sites … hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1 | EN -------------------+----- Pages | 35 Paginator pages | 0 Non-page files | 0 Static files | 23 Processed images | 0 Aliases | 0 Sitemaps | 1 Cleaned | 0 Built in 71 ms Watching for changes in /home/nitt/kirukiru.es/{archetypes,content,data,layouts,static,themes} Watching for config changes in /home/nitt/kirukiru.es/config.toml Environment: "development" Serving pages from memory Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender Web Server is available at //localhost:42229/ (bind address 127.0.0.1) Press Ctrl+C to stop
Nota: Su sitio ahora está alojado y disponible en 127.0.0.1. Si, por alguna razón, no se abre, intente abrir la dirección alternativa que se proporciona al lado. En este caso, es localhost:42973
Edición de contenido predeterminado de temas
Desde aquí, puede editar el contenido predeterminado. Puede hacerlo yendo a la carpeta Contenido. Editemos el contenido de la página de índice. Para hacerlo, vaya a Contenido > Trabajo > Index.md
Así es como se ve después de editarlo.
Creación de un sitio de blog
Debe elegir un tema adecuado si solo está buscando crear un blog. Para este propósito, usemos el tema de Hyde.
De manera similar a cómo configuramos nuestro nuevo sitio, debe ejecutar los siguientes comandos.
$ hugo new site kirukiru.es-jamstack $ cd kirukiru.es-jamstack/themes $ git clone https://github.com/spf13/hyde /themes/hyde
A continuación, edite el archivo Config.toml para agregar el valor theme = ‘hyde’.
Crear una nueva publicación
Debe ejecutar el comando hugo new para crear una nueva publicación, seguido del archivo Markdown.
$ hugo new hellogeekflare.md
#output [email protected]:~/geefklare-jamstack$ hugo new hellogeekflare.md Content "/home/nitt/geefklare-jamstack/content/hellogeekflare.md" created [email protected]:~/geefklare-jamstack$
Editando la publicación
Para editar la publicación hellogeefklare.md recién creada, abra el archivo hellogeekflare.md en su editor de texto preferido.
Te mostrará el siguiente contenido.
--- title: "Hello kirukiru.es" date: 2023-05-04T11:39:10+05:30 draft: true ---
Aquí, puede agregar cualquier contenido en Markdown.
Agreguemos el siguiente contenido en Markdown.
### Hello, World! This is a new post created to show how easy it is to create **Jamstack website**. We’re using Hugo and Netlify to create our *basic Jamstack site*.
Una vez que coloque el contenido anterior en el archivo .md, debería verse como el siguiente (según su editor, estamos usando Visual Studio Code).
Sin embargo, se verá completamente diferente cuando lo sirvamos.
Nota: asegúrese de cambiar el valor del borrador de «verdadero» a «falso»
¡Impresionante! Creamos dos sitios web Jamstack, un sitio para pequeñas empresas y otro blog.
Después de editar su sitio, puede generar los archivos ejecutando el comando hugo. Creará el archivo y lo colocará en la carpeta /public.
$ hugo
#5. Implementación del sitio Jamstack en Netlify
Con nuestros sitios creados, vamos a implementarlos. Para este propósito, vamos a utilizar Netlify.
Netlify es un servicio respaldado por CDN que ofrece a usuarios como usted alojar sitios rápidos. Puedes conectar Netlify con Github y automatizar el proceso. Es un servicio gratuito con algunas características detrás del muro de pago.
Nuestro trabajo es enviar el código a Netlify y dejar que Netlify maneje todo por nosotros.
Configurar el repositorio de Git localmente
Ahora es el momento de que configuremos el repositorio de Git.
Para iniciar el repositorio de Git, ejecute el siguiente comando en la raíz de su proyecto.
$ git init
A continuación, debemos configurar el tema como un submódulo. Este es un paso importante. Técnicamente, crea sub-repositorios dentro de su repositorio. (¿Recuerdas que hiciste un clon de git para el tema de Hugo?). Te dará más control sobre tu sitio Jamstack.
Por ejemplo, puede descargar actualizaciones para su tema. También debe hacerlo porque Netlify necesita temas como submódulos para alojarlos.
Entonces, para agregar el tema como un submódulo, ejecute el siguiente comando.
$ git rim --cached themes/hyde $ git submodule add https://github.com/spf13/hyde themes/hyde
#output [email protected]:~/kirukiru.es-jamstack$ git submodule add https://github.com/spf13/hyde themes/hyde Adding existing repo at 'themes/hyde' to the index [email protected]:~/kirukiru.es-jamstack$
Crear un repositorio en GitHub
Una vez que se realiza la configuración local, es hora de crear un nuevo repositorio de GitHub.
Una vez creado, debe agregar el origen a su repositorio local.
$ git remote add origin https://github.com/logan99/kirukiru.es-jamstack-tutorial.git
Ahora, tíralo.
$ git branch -M main $ git pull origin main
Crear un nuevo compromiso
Ahora es el momento de crear un nuevo compromiso. Ejecute el siguiente comando para agregar todos los archivos a la rama principal.
$ git add .
Ahora, ejecute el comando de confirmación para confirmar los cambios.
$ git commit -m “First commit”
#Output [email protected]:~/kirukiru.es-jamstack$ git commit -m "First commit" [main (root-commit) fa69ab2] First commit 21 files changed, 1135 insertions(+) create mode 100644 .gitmodules create mode 100644 .hugo_build.lock create mode 100644 archetypes/default.md create mode 100644 config.toml create mode 100644 content/hellogeekflare.md create mode 100644 public/404.html create mode 100644 public/apple-touch-icon-144-precomposed.png create mode 100644 public/categories/index.html create mode 100644 public/categories/index.xml create mode 100644 public/css/hyde.css create mode 100644 public/css/poole.css create mode 100644 public/css/print.css create mode 100644 public/css/syntax.css create mode 100644 public/favicon.png create mode 100644 public/hellogeekflare/index.html create mode 100644 public/index.html create mode 100644 public/index.xml create mode 100644 public/sitemap.xml create mode 100644 public/tags/index.html create mode 100644 public/tags/index.xml create mode 160000 themes/hyde
Finalmente, envíe los cambios a GitHub.
$ git push --set-upstream origin main
Nota: Debe ingresar su nombre de usuario y contraseña de GitHub para trabajar.
#6. Trabajando con Netlify
Excelente, nuestro repositorio ya está creado. Ahora, pasamos a Netlify. Si ya tiene una cuenta, inicie sesión o cree una nueva cuenta.
Para cuentas más nuevas, instantáneamente ejecutará un asistente para usted. De lo contrario, aterrizará en el panel de control de su cuenta. Si aterriza en el tablero, haga clic en la opción «Agregar nuevo sitio» en Sitios.
En Agregar nuevo sitio, elija «Importar un proyecto existente».
Luego le pedirá que elija un proveedor de Git. Como estamos usando GitHub, lo elegiremos. También puede optar por Bitbucket, GitLab y Azure DevOps.
A continuación, enumerará todos sus proyectos. Desde aquí, seleccione el repositorio de GitHub que creó para este proyecto. Para nosotros, es el «kirukiru.es-jamstack-tutorial». También puede optar por cargar el otro proyecto que creamos.
Luego le pedirá que seleccione la rama para implementar y elija la configuración de compilación básica. Por ahora, puede configurar todo por defecto.
Haga clic en «Depoy Site» para implementarlo.
Ahora, debe esperar a que Netlify haga lo suyo. Una vez implementado, el mensaje será «Su sitio está implementado».
Ahora, haga clic en el sitio en la parte superior izquierda.
Sin embargo, notará que el sitio no carga correctamente. Esto se debe a que la URL base en el archivo Config.toml no está configurada correctamente. Como Netlify generó una nueva URL de proyecto, debe agregarla al archivo Config.toml.
En nuestro caso, el sitio está en https://animated-beijinho-2baa8b.netlify.app/
Eso significa que debemos agregarle la baseURL.
Para hacerlo, vaya a su configuración local y cambie el valor.
baseURL = 'https://animated-beijinho-2baa8b.netlify.app/' languageCode="en-us" title="My new Jamstack site" theme="hyde"
Para impulsar el cambio, debe ejecutar el siguiente comando.
$ git add . $ git commit -m “changed baseURL to make it work on Netlify”
Netlify es inteligente. Cuando detecta una nueva confirmación, vuelve a implementar automáticamente su sitio.
Si carga su sitio ahora, se cargará perfectamente.
¡Guau! Lo has hecho. Sé que hay mucho que aprender. Sin embargo, encontrará que todo el proceso es intuitivo una vez que lo haga varias veces.
Ultimas palabras
Jamstack ha enganchado a la nueva era de los desarrolladores. Desbloquea el rendimiento y también mejora la forma en que se implementan los sitios. Jamstack ha crecido con excelentes miembros del ecosistema como Hugo y Netlify. Sin duda, solo crecerá a partir de aquí.
A continuación, vea cómo implementar la aplicación frontend en Netlify.