hand Inicio
hand JSBloqs
hand GutenBloqs
Qué?
nochedía

DESARROLLO WEB con
REACT y WORDPRESS

Apúntate a la newsletter (escribo algo de tanto en cuanto)
Wallpaper)

Crea una página web en 10 minutos con GatsbyJS

2700 palabras
10 minutos
July 3, 2020
cursosgatsbybasico

Páginas web para desarrolladores en un entorno moderno y proporcionando unas velocidades de escándalo y un hosting gratuito? Esto es lo que consigues con Gatsby, y puedes empezar en sólo 10 minutos

Prólogo

Páginas web en sólo 10 minutos?

No es nada del otro mundo, un WordPress mismo te lo permite sin demasiadas complicaciones

Voy a reformular la pregunta:

Páginas web incluyendo el hosting gratuito en sólo 10 minutos?

Aquí la pregunta ya tiene más miga, pero aún y así tienes hostings gratuitos con WordPress que te permiten

  1. Abrir una cuenta con ellos
  2. Instalar WordPress
  3. Instalar algún theme

Y listos

Por lo que voy a reformular la pregunta otra vez

Páginas web para desarrolladores, exageradamente rápidas, incluyendo el hosting gratuito y en sólo 10 minutos?

Eso ya es otra cosa

Por qué?

Porque instalar un WordPress para usuarios en 10 minutos se puede hacer, pero para desarrolladores ese proceso es insuficiente

Lo normal en un entorno WordPress es que el desarrollador quiera huir de la deuda técnica que significa el tener que trabajar con WordPress y se vaya a entornos como

U otros entornos similares que te reconcilian con el monstruo que es WordPress

Y hacer una web en esos entornos ya no son 10 minutos

Y aquí es donde la pregunta gana relevancia

Qué entorno te permite construir una página web con lo mejor de lo mejor en términos de tecnologías utilizadas y entornos de trabajo, en sólo 10 minutos?

Pocos entornos

Uno de ellos, quizá el más popular, es Gatsby

Páginas web para desarrolladores en sólo 10 minutos con GatsbyJS

Gatsby es un entorno de trabajo basado en React que nos permite construir una página web estática con todo lo que ello implica

Y qué implica trabajar con webs estáticas?

  • Velocidad

Una web estática es una web sin cerebro, es como un póster en la pared, una vez está colgado sólo se trata de acercarse y mirarlo, sin más, por lo que tu web será rápida por defecto

  • Facilidad de hostings

Si tu web es un póster colgado en la pared, el hosting es barato (la mayoría de las veces, gratis). En cambio, si tu web es un restaurante con su cocina y sus camareros, el hosting (la mayoría de las veces) te costará dinero

  • Externalizar el cerebro

Una web estática no tiene cerebro, pero no hay que alarmarse, puedes externalizarlo

Quieres hacer un login de usuarios? Lo externalizas

Quieres tener un formulario para dejar comentarios? Lo externalizas

Con WordPress todo eso lo tienes de serie, con Gatsby todo esto lo externalizas, con la ventaja de que la gran mayoría de servicios externos son gratuitos

Tanto el hosting como los servicios externos son normalmente gratuitos en una primera etapa

Su proposición de valor acostumbra a ser: Cuando empieces, te facilitamos la vida, y cuando crezcas y necesites más chicha, entonces podrás contratar nuestros servicios más premium

Bien, pues ahora que ya tenemos claro el contexto, vamos allá

  1. Prólogo
  2. Introducción
  3. Qué es Gatsby
  4. Entorno de trabajo
  5. Creando un website Gatsby
  6. Adaptando el contenido
  7. Publicar con GitHub y Netlify
  8. Comentario

Introducción

Qué vas a aprender en este curso?

Vas a aprender a implementar un site de Gatsby en muy poco tiempo, y esto te servirá como punto de partida para entender y crecer con Gatsby

De paso verás conceptos de React y de CSS-in-JS, que no es más que mezclar el css con el JavaScript

Hay algún curso previo que debería hacer?

  • Necesitas saber lo básico de HTML y casi que también de CSS, tienes los cursos aquí y aquí

  • Necesitas saber JavaScript, por lo que puedes pasarte por el curso que tengo aquí

  • Necesitas saber React? No, en este curso aprovecho para introducir el mínimo necesario de React

  • Necesitas definir tu entorno de trabajo para Gatsby, es muy rápido, y lo tienes definido aquí

Debería aprender WordPress o Gatsby?

Depende de lo que busques, pero posiblemente quieras aprender los dos

La omnipresencia de WordPress lo convierte en un objetivo básico para cualquier desarrollador, puesto que su base de usuarios es enorme

Esto quiere decir aprender php, pero también quiere decir React puesto que WordPress lo está utilizando para su front-end, y aunque de momento la integración de React es aún parcial, lo más esperable es que tarde o temprano toda la base de WordPress migre a JavaScript

Conclusión? Que si quieres desarrollar en WordPress, tendrá mucho sentido aprender también a desarrollar en ecosistemas "puros" de React, definitivamente te hará mejor desarrollador

Y si no quieres tocar WordPress?

Entonces Gatsby es una magnífica puerta de entrada al mundo React, más allá de que por sí solo ya representa una de las maneras más eficientes que existen de programar páginas web

Qué es Gatsby

Es literalmente un generador de webs estáticas

Qué quiere decir esto? Que a partir de una información que tu le das, Gatsby utiliza el servidor NodeJS para convertir esa información en una serie de páginas estáticas (esto es, html, css y JavaScript) listas para ser consumidas

Una vez en producción, esa página estática no necesitará de ningún servidor que procese nada, y esa es la gracia de las webs estáticas, que sus requerimientos para funcionar son mínimos (sinónimo de velocidad)

Diferencias con WordPress?

WordPress (u otros sistemas como NextJS) son una mezcla de frontend y backend, es decir que cualquier petición que tu haces a una web implicará una llamada al backend

Gastby utiliza un backend (NodeJS) sólo durante el desarrollo, una vez las páginas estáticas están "compiladas" todo es frontend

NextJS es el "otro" gran framework para desarrollar webs con React (hay otros, puedes echarles un vistazo a staticgen.com), y aunque se desarrolló con un backend (NodeJS) en mente, también permite compilar webs 100% frontend y en ese sentido representa una alternativa a GatsbyJS

Hasta qué punto Gatsby es React?

Hasta el 100%

Gatsby es React, o dicho de otra manera, Gatsby se escribe en React, no hay más

Podríamos hacer todo lo que hace Gatsby con React? Evidentemente, del mismo modo que podríamos hacer todo lo que nos ofrece React con JavaScript, y lo mismo con C, etc etc etc

Por qué desarrollar con Gatsby es más agradable que hacerlo con WordPress?

Podríamos decir que esto es subjetivo

Pero no lo es

Se trata de la evolución natural de los lenguajes y entornos

WordPress está entre nosotros desde 2003, en todo ese tiempo muchas cosas han cambiado pero WordPress nunca podrá adaptarse al 100% a esos cambios

Si lo hiciera, toda la base de aplicaciones hechas con WordPress quedarían obsoletas (algo impensable)

Por eso cada cierto tiempo aparecen nuevos lenguajes sin esa carga que representa su historia

Hoy en día lo mejor en programación web posiblemente sea un entorno JavaScript y un framework tipo React, Angular o Vue (y a saber cuánto durará), y dentro de esos entornos Gatsby (con React) te facilita muchísimo la vida

Al final, para valorar qué es lo mejor habrá distintas opiniones

Lo mejor podría ser aquello que te permita ser más productivo y generar código más robusto y más escalable, y siempre contextualizado a unos objetivos concretos, en este caso generar páginas webs rápidas y (si se quiere) complejas

Entorno de trabajo

Podemos programar con muchos tipos de entornos de desarrollo, pero el que ha ganado más tracción en los últimos tiempos es sin duda vscode, lo que es el editor y todos sus extensiones

También necesitamos NodeJS, con el que instalaremos el propio gatsby y todos los demás "paquetes" necesarios

Y poca cosa más, pero en lugar de ponerlo en este curso lo he separado aparte y lo tienes aquí

Creando un website Gatsby

Y una vez preparado nuestro entorno, ya entramos en materia

En este curso no vamos a entrar en detalle en cómo funciona Gatsby, sino que lo trataremos desde una perspectiva casi de implementador

Es una buena manera de conocer Gatsby y a la vez de poder ver sus resultados

Seleccionar un starter

Al igual que con WordPress escogeríamos un theme, con Gatsby escogeremos un starter

Un starter viene a ser una página web que ya está hecha y que podremos modificar a nuestro gusto

Si empezásemos una web desde cero, eso conceptualmente sería un starter (para que técnicamente lo fuera deberíamos hacerlo público)

Además, un starter puede componerse de ningún, de uno o de varios themes, y esos themes vendrían a ser como starters que se encargan de partes concretas de una página web, pero esto ahora no nos preocupa

Y dónde escogemos starters? por ejemplo en gatsbyjs.org, y en este curso utilizaremos el starter eventually que lo tienes aquí

Este starter nos configurará por defecto lo siguiente:

  • Responsive (esto es, se adapta a todos los tamaños posibles)
  • Con soporte para una progressive web application

Lo primero quiere decir que la página se verá bien en cualquier tamaño de pantalla

Lo segundo es un gran qué de Gatsby ya que sin hacer nada tenemos out-of-the-box la versión progressive web app de nuestra aplicación, lo que permite instalar la página como si se tratara de una aplicación nativa en nuestro móvil (de momento en Android, los de Apple se resisten ya que son aplicaciones que no pasan por su Apple Store)

Empezando

Ahora que ya tenemos el starter, nos vamos con el terminal a la carpeta donde tenemos nuestros proyectos en general

En el terminal, para movernos en las carpetas utilizamos los comandos cd mi_carpeta para entrar en la carpeta de nombre mi_carpeta, y cd .. para salirnos de la carpeta y volver a la carpeta padre

Y allí escribimos

bash
gatsby new gatsby-starter-eventually https://github.com/anubhavsrivastava/gatsby-starter-eventually

Este comando nos creará la carpeta gatsby-starter-eventually y dentro de ésta nos habrá copiado todos los archivos del starter

Ahora con vscode abrimos esta carpeta y así lo especificamos como nuestro workspace y veremos todos los archivos en el menú de la izquierda

image

Y para ejecutarlo y ver la página web resultante vamos al terminal y ejecutamos gatsby develop, y una vez termine (en el terminal verás el output de la compilación) puedes coger tu navegador e ir a la dirección /localhost:8000 y verás tu página funcionando

El diseño es sencillo y de una única página que se adapta a todos los tamaños, con un fondo de pantalla que le da espectacularidad al mensaje (y que está atenuado con filtros css), y donde tenemos espacio para un título y una frase, nuestro CTA (call to action), junto con un formulario para que nos den su correo

Cómo ves, es una landing muy visual, si a esto le unimos un buen copy sólo tenemos que añadirle un dominio y una campaña de marketing y ya lo tenemos, te dejo un video corto para que veas cómo luce el site

Adaptando el contenido

Ya tenemos instalado el starter, ahora vamos a modificar el texto

En este caso se trata de una sola página que nos servirá de landing page para por ejemplo validar una idea y pedir un correo, y para este starter la mayoría de las modificaciones las podemos hacer en el archivo ./config.js

js
// config.js
module.exports = {
siteTitle: 'Gatsby Starter Eventually', // <title>
manifestName: 'Eventually',
manifestShortName: 'Landing', // max 12 characters
manifestStartUrl: '/',
manifestBackgroundColor: '#663399',
manifestThemeColor: '#663399',
manifestDisplay: 'standalone',
manifestIcon: 'src/assets/img/website-icon.png',
pathPrefix: `/gatsby-starter-eventually/`, // This path is subpath of your hosting https://domain/portfolio
// social
heading: 'Eventually',
subHeading: "A simple template for telling the world when you'll launch your next big thing.",
socialLinks: [
{
icon: 'fa-github',
name: 'Github',
url: 'https://github.com/anubhavsrivastava',
},
{
icon: 'fa-twitter',
name: 'Twitter',
url: 'https://twitter.com/onlyanubhav',
},
{
icon: 'fa-facebook',
name: 'Facebook',
url: 'https://facebook.com/theanubhav',
},
{
icon: 'fa-envelope-o',
name: 'Email',
url: 'mailto:anubhav.srivastava00@gmail.com',
},
],
}

Verás que el código que ves arriba es ligeramente distinto al que aparece en el github del starter, esto es así a causa de aplicar mis opciones de prettier en mi vscode

Toca cambiar lo que nos apetezca

Pero qué es cada cosa?

Para entender qué está pasando, nos vamos al archivo raíz ./index.js

js
// index.js
import React from 'react'
import Layout from '../components/Layout'
import Footer from '../components/Footer'
import Header from '../components/Header'
import EmailForm from '../components/EmailForm'
import SlideShow from '../components/SlideShow'
var settings = {
images: [
{ url: require('../assets/images/bg01.jpg'), position: 'center' },
{ url: require('../assets/images/bg02.jpg'), position: 'center' },
{ url: require('../assets/images/bg03.jpg'), position: 'center' },
],
// Delay.
delay: 6000,
}
const IndexPage = () => (
<Layout>
<Header />
<EmailForm />
<Footer />
<SlideShow settings={settings} />
</Layout>
)
export default IndexPage

Todo lo que empieza por import lo que hace es importar componentes, y es habitual que cada componente tenga su propio archivo (es una manera de organizar código)

Luego se define la variable settings que nos define tres imágenes y la variable delay, es decir, que el autor del starter nos está exponiendo la parte más configurable de la estética del starter para que podamos modificarla de una forma cómoda

Y luego se define el componente de ese archivo, el IndexPage, que nos devuelve asimismo otros componentes que compondrán la página final

Entonces, estábamos con el archivo config.js, y allí tenemos la variable heading, cómo podemos saber dónde está esta variable?

La manera más fácil es buscarla en el buscador de vscode

Pero también podemos intuir que por su nombre estará en el componente <Header />, que se define en el archivo que tiene el mismo nombre (esto no es obligatorio, pero es una sana costumbre), y que lo podemos ver en el import correspondiente import Header from '../components/Header'`

Para que nos entendamos, cada componente lo que hace es devolver un conjunto de componentes, y esos componentes pueden ser componentes React o puede ser html (a esta mezcla entre React y html se le llama JSX)

Por ejemplo, podríamos definir el componente así, y sería totalmente válido

js
const IndexPage = () => (
<div>
<div>Header</div>
<div>Email</div>
<div>Footer</div>
<div>Imagen de fondo</div>
</div>
)

Pero claro, pierde toda la gracia

Vamos a abrir el componente de Header en ../components/Header.js

js
// Header.js
import React from 'react'
import config from '../../config'
export default function Footer() {
return (
<header id="header">
<h1>{config.heading}</h1>
<p>{config.subHeading}</p>
</header>
)
}

Y aquí encontramos lo que buscábamos

  • Importamos la variable config con import config from '../../config'

  • Utilizamos esa variable para asimismo utilizar las variables heading y subHeading con {config.heading} y {config.subHeading}

Para utilizar una variable en React lo hacemos entre corchetes {...}

Y esto de qué nos sirve?

Que si nos apetece podríamos definir aquí nuestro texto y quitarlo del archivo config.js

Es esto buena idea? Depende, para según qué webs tiene sentido mantenerlo todo centralizado en un archivo como este config, pero cuando la complejidad augmenta no tiene ningún sentido y lo suyo es definirlo dentro del propio archivo

Para este caso y como ejemplo tonto, cambio el texto como si esto fuera para una web de escape rooms

js
heading: 'Escape Rooms de Barcelona',
subHeading: "Si quieres recibir cada semana información sobre los mejores Escape Rooms de Barcelona, inscríbete en nuestra lista de correo",

También quito la parte donde damos crédito al autor del theme, algo que haríamos al terminar la conversión (para que no nos afectase a nuestra marca) o que no tendríamos que hacerlo si compensamos al autor de alguna manera (posiblemente tenga algún sistema en su web para monetizar estos agradecimientos)

La manera más rápida de hacerlo es quitando el componente <Footer />

js
// index.js
import React from 'react'
import Layout from '../components/Layout'
import Header from '../components/Header'
import EmailForm from '../components/EmailForm'
import SlideShow from '../components/SlideShow'
var settings = {
images: [
{ url: require('../assets/images/bg01.jpg'), position: 'center' },
{ url: require('../assets/images/bg02.jpg'), position: 'center' },
{ url: require('../assets/images/bg03.jpg'), position: 'center' },
],
// Delay.
delay: 6000,
}
const IndexPage = () => (
<Layout>
<Header />
<EmailForm />
<SlideShow settings={settings} />
</Layout>
)
export default IndexPage

Si quisiésemos cambiar las imágenes podríamos hacerlo aquí, o podríamos simplemente cambiar las imágenes en el directorio /assets/ y utilizando los mismo nombres de archivo

Y ya tendríamos nuestro starter personalizado

Con esto buscaríamos correos de gente interesada (y así veríamos si hay interés o no)

Para conseguir el correo, aquí el componente que se encarga de esto es el <EmailForm /> (es una sana costumbre esto de poner nombres semánticos a nuestros componentes)

Vamos a verlo

js
import React, { Component } from 'react'
export class EmailForm extends Component {
constructor() {
super()
this.state = { message: '' }
this.onSubmit = this.onSubmit.bind(this)
}
onSubmit(e) {
e.preventDefault()
e.stopPropagation()
this.setState({ message: 'Thank you!' })
setTimeout(() => {
this.setState({ message: '' })
}, 3000)
}
render() {
const { message } = this.state
return (
<form id="signup-form" onSubmit={this.onSubmit} method="post" action="#">
<input type="email" name="email" id="email" placeholder="Email Address" />
<input type="submit" value="Sign Up" />
<span className={`${message ? 'visible success' : ''} message`}>{message}</span>
</form>
)
}
}
export default EmailForm

Sin entretenernos, es importante identificar que cuando el usuario aprieta el botón se ejecuta la función onSubmit={this.onSubmit}, y esa función la tenemos arriba, y si te fijas verás que no hace nada excepto mostrarte un mensaje de "Thank you!" durante 3000 milisegundos

Es decir, son 2 cosas:

  • Si quieres cambiar el "Thank you!" éste es el lugar para hacerlo (el autor no lo ha puesto en el config.js)

  • Y lo importante, este código no nos almacena el correo

Para hacerlo necesitamos de un backend, y como Gatsby no nos ofrece ninguno tenemos 2 opciones

  • Mirar si nuestro hosting lo ofrece, es habitual que lo hagan (es su manera de "ligarte" a ellos)

  • Ir a un servicio externo (es eso de externalizar cerebros) como puede ser mailchimp.com, sendinblue.com, mailerlite.com o formcarry.com, todos con free tiers generosos

  • O también podríamos simplemente enviarnos un correo utilizando el servidor de gmail con SendMail.js o posteando las direcciones en google sheets con googleSheets.js

Es perfectamente posible encontrar starters que ya nos hayan configurado esto por defecto, pero normalmente estos servicios proporcionan una documentación más que suficiente para hacerlo nosotros mismos

Publicar con GitHub y Netlify

Y ahora sí, una vez ya tenemos nuestro starter configurado y funcionando vamos a publicarlo en internet

Lo haremos con Netlify, y utilizaremos el sub-dominio que nos dan en el proceso (es muy sencillo vincular ese dominio con un dominio que hayamos comprado)

Cómo hacerlo?

Tenemos dos posibilidades

  1. Hacerlo manualmente, es decir hacer un gatsby build, coger la carpeta /build y subirla a Netlify (y listos)

  2. Integrarlo con github (o similar) para automatizarlo todo (y el gatsby build se hará en los servidores de Netlify)

Qué diferencias hay entre gatsby develop y gatsby build?

El primero no nos optimiza el código, lo cual nos facilita

  • Localizar donde están los errores que tengamos durante el desarrollo
  • Ver los cambios que hagamos en el código a tiempo real puesto que a cada cambio detectado vuelve a compilar por defecto

El segundo es el que nos compila la página estática pensada para producción

Cuántas veces hay que hacer ese deploy de la página a Netlify?

Siempre que hagamos un cambio, por pequeño que sea

Esto puede sonar a problema, pero ya te aseguro que es mucho más rápido y cómodo que tener que editar tus entradas en el dashboard de WordPress (en este caso, cuando los cambios sean de contenido)

Y cómo vincular github con netlify?

Para esto, mejor utilizar un pequeño vídeo

Comentario

Y ya está, con esto ya tienes una web publicada en nada de tiempo

En realidad, si ya tienes tu cuenta de Netlify y GitHub preparada, publicar un starter es algo que puedes hacer en menos de 2 minutos, pero claro está que si tienes que modificar el contenido y comprar y configurar un dominio quizá nos acerquemos más a la media hora

En cualquier caso, son tiempos muy cortos

🙋‍♂️

Qué tal el curso?

👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏
Enviar Feedback ✍️
El texto está en blanco!
Gracias por enviarme tu opinión
👍

Si quieres explorar más cursos y más entradas en el blog, los tienes todos en la página principal, y si el contenido te ha ayudado dame las gracias por ejemplo por twitter con este enlace 👍

Privacidad
by kuworking.com
[ 2020 >> kuworking ]