Cómo crear tu propio blog personal usando GatsbyJS

Este es la primera guía que publicamos. En este guía vamos a crear nuestro propio blog estático, sin necesidad de utilizar un servidor backend, gracias a la tecnología de GatsbyJS.

Utilizaremos archivos escritos usando Markdown para crear el contenido de nuestro blog.

¿Cómo funciona Gatsby?

GatsbyJS es un framework que reinventa React para adaptarlo a la generación de sitios estáticos. Los sitios generados con GatsbyJS son increíblemente rápidos y están optimizados para SEO.

Además, el renderizado de componentes usando React hace que sea fácil desarrollar interfaces de usuario avanzados.

Lo que hace tan rápido a GatsbyJS es que el servidor web simplemente tiene que servir archivos estáticos, por lo que el tiempo de respuesta depende únicamente del peso y la conexión del cliente. No hay un procesamiento ni un acceso a base de datos que requiera de un backend.

Sitios estáticos

Como decíamos, servir sitios estáticos tiene ventajas increibles en cuanto a velocidad, no solo por el simple hecho de limitar el uso de recursos del servidor al mínimo, sino porque además puede hacerse uso de redes de distribución de contenido (CDNs) para acelerar aun más la carga del sitio web, cacheando los recursos en ubicaciónes geográficas físicamente cercanas a los clientes.

Debido a esto, sitios web que requieren una alta velocidad de carga han ido migrando a estrategias estáticas, al menos para sus secciones más susceptibles de servir de punto de entrada desde buscadores web y otras fuentes de tráfico.

Los sitios estáticos presentan además otras ventajas, como su seguridad. Al reducir la superficie de ataque posible al mínimo (un servidor HTTP estático) se reduce drásticamente el riesgo de sufrir uno.

Plugins y starters

Que los sitios sean estáticos no supone que no puedan tener funcionalidad.

GatsbyJS tiene un ecosistema de plugins que aumentan sus capacidades increiblemente. Permiten agregar y procesar datos de distintas fuentes (bases de datos, archivos...), añadir metadatos, ejecutar funcionalidad dinámica, cambiar el proceso de build...

Los plugins son el método por defecto para extender GatsbyJS, e incluso funcionalidades "core" se publican como plugins, permitiendo así a los desarrolladores reemplazar esas piezas sin tocar otras si quisieran.

Starters

Los starters, son plantillas para proyectos que reunen de antemano una serie de plugins, componentes, páginas y confiugración específica. Suelen estar preparados para crear rápidamente distintos tipos de web, como blogs, portfolios, ecommerce...

Este será el método que utilizaremos para construir nuestro blog.

Preparar el entorno de desarrollo

Antes de empezar debemos asegurarnos de que tenemos todo lo necesario para no quedarnos bloqueados una vez estemos construyendo nuestro blog. Necesitaremos

• VSCode como editor de código
• NodeJS como entorno de ejecución

Recomendamos utilizar NodeJS v14 o superior.

Una vez tengamos NodeJS instalamos GatsbyJS

npm install -g gatsby-cli

Buscar el starter adecuado

Existen varios starter que están directamente preparados para crear un blog. El más típico es gatsby-starter-blog, pero hay muchas otras opciones. Nostros por ejemplo estamos utilizando para este blog gatsby-starter-delog.

Revisa los distintos starters en la página oficial de GatsbyJS y elige el que más se ajuste a tus necesidades.

Crear el proyecto

Una vez elegido el starter estamos listos para crear el proyecto. Vamos a la carpeta que utilicemos comúnmente como workspace y allí ejecutamos gatsby new nombredelproyecto giturldelstarter

Por ejemplo:

gatsby new devland-network https://github.com/W3Layouts/gatsby-starter-delog

Y una vez hecho esto podemos movernos a la carpeta del proyecto y ejecutar gatsby develop para ver los resultados en el navegador.

Personalizar la configuración

Lo primero sería revisar gatsby-config.js, independientemente de que starter hayamos elegido. En la mayoría de starters, este será el lugar donde podramos cambiar configuración y metadatos del sitio.

Sin embargo, GatsbyJS permite separar la información de metadatos del resto de configuración técnica del proyectro, por lo que algunos starters, como gatsby-starter-delog requieren que modifiquemos site-meta-data.json.

module.exports = {
  siteMetadata: require("./site-meta-data.json"),
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `markdown-pages`,
        path: `${__dirname}/_data`,
      },
    },
    ...

gatsby-config.js en un proyecto creado con gatsby-starter-delog

{
  "title": "DevLand Network",
  "siteUrl": "https://devland.network/",
  "description": "DevLand, comunidad en español por y para desarrolladores de software",
  "home": {
    "title": "Bienvenid@ a DevLand",
    "description": "DevLand es una comunidad de desarrolladores de software en español. ¡Únete a nosotros y empieza a construir la web del futuro!"
  }
}

site-meta-data.json en un proyecto creado con gatsby-starter-delog

Personalizar los estilos

La mayoría de starters incluirán una hoja de estilos global, o un archivo .js que lance el tema.

En gatsby-starter-delog debemos buscar el archivo src/styles/global.scss donde podemos modificar las variables del esquema de colores a nuestro antojo.

También podemos crear nuestras propias hojas de estilo .css para un componente específico o incluso usar un preprocessador de css como SASS (como es nuestro caso para la hoja global).

Crear nuestro primer artículo

Para crear nuestro primer artículo nos dirigiremos a la carpeta que almacena los contenidos en formato MarkDown (.md). Esta suele llamarse content o data. Como los archivos de contenido se procesan a través de un plugin de GatsbyJS, podemos revisar la sección del plugin gatsby-source-filesystem en el archivo gatsby-config.js para saber concrétamente cual es la carpeta que estamos buscando.

 plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `markdown-pages`,
        path: `${__dirname}/_data`,
      },
    },

En nuestro caso la ruta es /_data/.

Una vez allí, podremos encontrar seguramente una lista de artículos de ejemplo. Para crear el nuestro añadiremos un archivo MarkDown 20210704-hola-mundo.md.

Dentro, al principio del archivo, debemos añadir una sección principal de metadatos.

---
title: Hola Mundo
path: /hola-mundo
date: 20210704T16:15:50.738Z
---
Hola desde GatsbyJS! Este es mi blog personal.

## Para qué es este blog?

Aqui pondre ejemplos de código...

Como puede verse, una vez acaba la sección de metadatos ya puede empezar a añadirse contenido en MarkDown.

Si guardamos y vamos a la url que definimos en path, podremos ver el resultado.

Crear páginas estáticas

Además de publicar artículos regularmente, algo básico en los sitios de contenidos es la capacidad de generar páginas estáticas con información que no cambia a menudo. Páginas como Acerca de, Sobre nosotros, FAQ...

Para añadir una de estas páginas solo tenemos que crear un archivo .js en la carpeta /src/pages/ del proyecyto y crear dentro un componente similar al de las páginas de ejemplo.

Por ejemplo, podríamos crear /src/pages/acerca-de.js y dentro añadir algo como esto:

const AcercaDePage = () => {
  return (
    <Layout>
      <Helmet>
        <title>Acerca de {site.siteMetadata.title}</title>
        <meta name="description" content={site.siteMetadata.description} />
      </Helmet>
      <h2>Acerca de DevLand Netowrk</h2>
      <div className="grids"></div>
    </Layout>
  );
};

export default AcercaDePage;

Eso creará automaticamente una nueva página en localhost:8000/acerca-de

Crear componentes personalizados

Ahora imaginemos que queremos añadir nuestro propio componente. Solo tenemos que crearlo como un componente cualquiera de React.

Si todavía no sabes como crear componentes con React estate pendiente porque pronto publicaremos un curso al respecto.

Añadir funcionalidad dinámica

Si queremos añadir funcionalidad dinámica necesitaremos un servidor que ejerza de backend. Una vez lo tengamos, podemos lanzar peticiones utilizando fetch o librerías como axios como en cualquier aplicación hecha en React.

Igual que con los componentes de React, en próximos cursos veremos como crear nuestro propio servidor backend en NodeJS y utilizarlo desde nuestro frontend GatsbyJS.