Introducción a JAMstack

Taller con Hugo y Netlify

Rafael Luque / @osoco

JAMstack

Un cambio de paradigma en la arquitectura web

Legacy Web

Problemas del paradigma

Seguridad
Gran porcentaje de CMSs infectados.
Rendimiento
Construcción por cada visitante.
Escalabilidad
Único origen.

Seguridad en CMSs

Informe 2016-Q3 de Sucuri Remediation Group

JAMstack

noun \’jam-stak’\

Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

3 criterios

NO es JAMstack

  • Server-side CMS: Wordpress, Drupal, Joomla, etc.
  • Web monolítica: Rails, Grails, etc.
  • SPA con renderizado isomórfico de vistas en el servidor.

El nuevo paradigma

Arquitectura: Workflow:

Generadores estáticos

https://www.staticgen.com

Un ecosistema de servicios

Headless CMS
https://headlesscms.org (Forestry, NetlifyCMS).
Formularios de contacto
Formspree
Comentarios
Disqus, GoTell
Registro y autenticación
GoTrue, Gotiator
Ecommerce
GoCommerce, GoJoin

Ventajas

Rendimiento
Página generadas en tiempo de despliegue.
Seguridad
Menor superficie de ataque.
Escalabilidad
CDN.
Coste
Hosting más económico (incluso gratis).

TTFB

Time to First Byte

TTFB con JAMstack

TTFB con Wordpress

Taller con Hugo y Netlify

Práctica 1: Hugo Quickstart

Instalación de Hugo (0.31.1)

En Mac:


		  brew install hugo
	      

Con tarball:


		  mkdir -p ~/hugo
		  cd ~/hugo
		  curl https://github.com/gohugoio/hugo/releases/download/v0.31.1/hugo_0.31.1_Linux-64bit.tar.gz
		  tar xvfjz hugo_0.31.1_Linux-64bit.tar.gz
	      

Check:


		  ~/hugo/hugo version
		  Hugo Static Site Generator v0.31.1 linux/amd64
	      

Creación de un sitio


		  hugo help new
              

		  hugo new site hugo-workshop
              

Añadir un tema

https://themes.gohugo.io/


		  cd hugo-workshop
		  git init
		  git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
              

Edita config.toml:


                  theme = "ananke"
              

Añadir un primer post


		  hugo new posts/primer-post.md
              

Edita posts/primer-post.md.

Generar el sitio


		  hugo server -D
              

Comprueba http://localhost:1313

Práctica 2: Despliegue continuo con Netlify

Fork de Victor-Hugo

Crear fork del proyecto Victor-Hugo en tu cuenta de GitHub:

https://github.com/netlify/victor-hugo

Clonar en tu equipo:


		  git clone git@github.com:luque/victor-hugo.git
	      

Instalar dependencias


		  cd victor-hugo
		  npm install
	      

Iniciar servidor local


		  cd victor-hugo
		  npm start
	      

Comprueba http://localhost:3000 y http://localhost:3001.

Aplica un tema


		  cd victor-hugo
		  git init
		  cd site
		  git submodule add https://github.com/MunifTanjim/minimo.git themes/minimo
		  cp -R themes/minimo/exampleSite/* .
              

Registra el repository en Netlify

https://app.netlify.com/start

Despliegue en Netlify

Práctica 3: Headless CMS

NetlifyCMS

https://www.netlifycms.org/

1. Get Started

2. Connect

3. Configure

4. Deploy

5. Check site is online

6. Access CMS admin

7. Edit contents

Referencias

JAMstack
Seguridad
Hacked Website Report 2016-Q3
Static Site Generators
Headless CMS

Referencias

Services for JAMstack

¿Preguntas?

Licencia de Creative Commons
Este obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 4.0 Internacional.