Cómo he construido mi cartera con Gatsby y ReactJS
Mi sitio personal necesita un poco de amor desde hace un tiempo, el último commit en él fue el 3 de abril de 2016. Así que necesito un nuevo sitio, y lo necesito rápido, y ahí es precisamente donde Gatsby me ayuda.
Lo que quiero
- Un sitio rapidísimo
- Facilidad para publicar una entrada en el blog con código destacado
- Muestra repos de GitHub específicos
- Escalable y fácil de mantener actualizado
Crear un sitio Gatsby
Sólo necesitas dos comandos:
npm install -g gatsby-cli
gatsby new site-name https://github.com/gatsbyjs/gatsby-starter-blog
Con Gatsby puedes poner en marcha un sitio en poco tiempo. Como tiene el concepto de starters puedes elegir entre cientos el que se ajuste a tu proyecto. En mi caso fue gatsby-starter-blog.
gatsby-starter-blog
Este starter tiene algunos plugins importantes instalados, así que fuera de la caja, tengo:
- Blog con archivos markdown
- Soporte offline
- Aplicación web progresiva lista
- Mejoras en el SEO
- Imágenes responsivas
- Google Analytics
- Tipografía de ritmo vertical
- prismjs para resaltar la sintaxis del código
Lo que he añadido
- Componentes con estilo
- Carga perezosa de imágenes dentro de archivos markdown con gatsby-remark-lazy-load y lazines (esto es imprescindible para el rendimiento).
- Github Repo Showcase con gatsby-source-github-api y este GraphQL Query:
{
search(query: "fmonteslab user:fmontes", type: REPOSITORY, first: 100) {
edges {
node {
... on Repository {
name
url
homepageUrl
description
createdAt
pushedAt
primaryLanguage {
id
name
}
repositoryTopics(first: 100) {
edges {
node {
topic {
name
}
}
}
}
}
}
}
}
}
Oublicar en Netlify
Netlify es uno de los mejores (si no el mejor) lugar para desplegar tu sitio Gatsby. Y es super fácil de hacer, sigue estos pasos.
Lo que obtuve
Sitio rápido
Gatsby se encarga de todo, caché, minificación, lazy load de tus imágenes, etc. Tuve que hacer algunos trabajos para mejorar el SEO, como zonas de golpeo y etiquetas aria en algunos botones para mejorar la puntuación:
Entradas de blog fáciles de publicar
Sólo tengo que crear un archivo markdown en mi carpeta /content/blog, hacer commit, push, y Netlify desplegará el sitio con el nuevo post.
Mis repos de GitHub
Cuando etiqueto uno de mis repos con #fmonteslab, vuelvo a desplegar mi sitio y se publicará.
Scalable
Con Gatsby, puedo crear nuevas páginas, extraer contenido de todas partes y añadir rápidamente contenido y características.
Más por venir
- Trabajo de SEO
- Publicar y publicar más
- Conectar con la API de Linked In para crear un currículum dinámico
- El cielo es el límite
Conclusión
Estoy muy contento con los resultados de mi sitio. Lo mantendré actualizado y lo conseguiré. Por favor, ve y comprueba el código: https://github.com/fmontes/fmontes-gatsby, haz un fork, úsalo, construye el tuyo propio.