GitHub Pages + GatsbyJS

En el anterior post se hablaba de qué era GitHub Pages, y cómo construir un sitio estático para documentar los repositorios o un sitio web para un uso no comercial.

Un sitio estático, no deja de ser contenido html, css y js. Aunque podemos utilizar una de las plantillas que nos ofrece GitHub Pages y a partir de ahí únicamente debemos subir ficheros markdown y ya la propia plantilla se encarga de construir la web estática. Sin embargo, esta aproximación no nos da mucho juego de cara a personalizar nuestro sitio.

Para poder crear nuestro propio sitio, personalizado, con el formato y los contenidos que prefiramos, existen múltiples framework que facilitan esta acción.

En este post, hacemos referencia a GatsbyJS, un framework gratuito y opensource basado en React que permite construir sitios estáticos fácilmente.

Requisitos

• Node.js
• Git
• Visual Studio Code
• Repositorio GitHub

Let's go

Si no está instalado Node, se puede descargar la versión apropiada para nuestro Sistema Operativo desde aquí.

Repetimos la misma operativa para Git, si no está instalado, están son los enlaces a las versiones de cada sistema operativo:

• macOS
• Windows
• Linux

Para poder editar los ficheros de una forma ágil y sencilla, utilizaremos Visual Studio Code.

Gatsby-cli

Se trata de una herramienta publicada como paquete npm que permite crear rápidamente nuevos desarrollos basados en Gatsby y ejecutar comandos para sitios Gatsby.

Este cliente nos va a permitir crear un sitio web en minutos, para ello instalamos el paquete npm de forma global desde línea de comandos.

npm install -g gatsby-cli

Una vez completada la instalación, podemos consultar la lista de comandos disponible en cualquier momento con el comando gatsby --help.

Crear sitio desde plantilla

Con el Gatsby-CLI instalado, creamos un nuevo sitio a partir de una de las plantillas gratuitas que ofrece Gatsby y la comunidad.

gatsby new DemoGatsbyJS https://github.com/gatsbyjs/gatsby-starter-default

Cuando ya está completada la instalación, accedemos al directorio nuevo, e iniciamos la aplicación para explorar el nuevo sitio web.

cd DemoGatsbyJS
gatsby develop

En el navegador, accediendo a localhost:8000 podemos explorar el nuevo sitio web.

Editar en Visual Studio Code

Para poder editar el nuevo sitio web, accedemos a Visual Studio Code desde el directorio en el que hemos creado la aplicación Web.

code .

Una vez abierto el IDE, actualizamos el fichero src/components/header.js y lo editamos:

import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"

const Header = ({ siteTitle }) => (
  <header
    style={{
      background: `#154D28`,
      marginBottom: `1.45rem`,
    }}
  >
    <div
      style={{
        margin: `0 auto`,
        maxWidth: 960,
        padding: `1.45rem 1.0875rem`,
      }}
    >
      <h1 style={{ margin: 0 }}>
        <Link
          to="/"
          style={{
            color: `white`,
            textDecoration: `none`,
          }}
        >
          {siteTitle}
        </Link>
      </h1>
    </div>
  </header>

Si no has cerrado la sesión del navegador con la web de la plantilla en localhost:8000, el sitio se habrá actualizado el color morado por un verde oscuro. Si lo cerraste, vuelve a acceder después de lanzar un gatsby develop.

Git

Por último, agregamos los ficheros a un repositorio y hacemos commit.

git init
git remote add origin https://github.com/rfcm83/DemoGatsbyJS.git
git pull
git add .
git commit -m 'First commit Gatsby Web Starter Kit'
git push origin master -f