Creando un blog con GatsbyJS, Material Design y Contentful — Parte 1

Instalando GatsbyJS e integrando con Eslint y Stylelint

Ya he hablado antes de GatsbyJS.

Crea un sitio web en menos de 5 minutos con GatsbyJS y ReactJS

Es mi framework favorito para la creación de sitios web y PWA’s, escrito en nodejs y reactjs, con un poder impresionante, y con unas características que lo hacen único:

Features

Bueno, hablar de GatsbyJS a fondo tomaría mucho tiempo, por lo cual propongo que lo dejemos para otra ocasión, en este caso haré una pequeña lista de todo lo que lograremos en la primera parte de nuestro tutorial, recordando que serán varias partes, posiblemente, 5 o 6, porque en verdad, dejaremos increible este blog. Para que así tú también puedas crear el tuyo.

Partes del tutorial

1. Instalación de GatsbyJS e inicialización de proyecto.
2. Corrección de errores (eslint y stylelint).

Instalación de GatsbyJS e inicialización de proyecto

Primero vamos a utilizar la versión 8.16.0 de nodejs, a todos los que me siguen saben que utilizo nvm para instalar las versiones de nodejs, pueden checar mis otros tutoriales para instalarlo.

Instalamos gatsby-cli de la siguiente forma.

$ npm install -g gatsby-cli
$ yarn global add gatsby-cli

Una vez instalado vamos a crear nuestro proyecto con el siguiente comando.

$ gastby new blog-contentful-material

Para seguir correctamente nuestro tutorial utilizaremos git , les recomiendo usarlo a su manera, dado que cada quien tiene su propio workflow.

$ cd blog-contentful-material
$ git init
$ git add .
$ git commit -m "Start project"

Nos saldrá el siguiente mensaje:

Reinitialized existing Git repository in /path-to-project/blog-contentful-material/.git/

Esto será porque estaremos reiniciando git

Corremos el servidor gatsby develop y checamos que todo funcione perfectamente. Tiene que salir la siguiente pantalla.

Corrección de errores (eslint y stylelint)

Primero que nada, vamos a instalar eslint y stylelint.

ESLint - Pluggable JavaScript linter

stylelint · stylelint

Escribimos el siguiente comando:

$ npm install --save-dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react stylelint stylelint-config-standard stylelint-order stylelint-scss stylelint-selector-bem-pattern
$ yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react stylelint stylelint-config-standard stylelint-order stylelint-scss stylelint-selector-bem-pattern

Ahora vamos a agregar los siguientes archivos para terminar de configurar eslint y stylelint, y también es importante integrar nuestro editor correctamente para que podamos checar el código on-the-fly.

Para eslint

Para stylelint

Ahora los errores empezarán a salir, vamos a corregir cada uno, para simplificar, pondré cada uno de los archivos en gists y así se puedan copiar.

./src/pages/index.js -> ./src/pages/index.jsx

./src/pages/404.js -> ./src/pages/404.jsx

./src/pages/page-2.js -> ./src/pages/page-2.jsx

./src/components/header.js -> ./src/components/header.jsx

./src/components/image.js -> ./src/components/image.jsx

./src/components/layout.js -> ./src/components/layout.jsx

./src/components/seo.js -> ./src/components/seo.jsx

Hemos arreglado todos los errores que arroja nuestro linter (eslint) en los archivos de React, ahora vamos a hacer unos pequeños cambios al archivo ./gatsby-config.js

Listo, hemos corregido todos los errores, por el momento es todo, en la siguiente parte tendremos que integrar material design y contenful, será bastante entretenido, te invito a estar al pendiente de mi blog.

El repositorio del proyecto es el siguiente.

onimenotsuki/blog-contentful-material