Mi primer Post

Lectura de 3 min

Hola 👋 estás leyendo mi primer Post! Este Blog lo desarrollé en React + Next.js utilizando el siguiente tutorial. Si te interesa, puedes ver el repositorio en mi GitHub y seguro tienes mejores aportes!

Los post son escritos en Markdown, utilizo Typora como editor que está muy bueno ya que es verdaderamente minimalista.

El blog utiliza 2 dependencias esenciales para utilizar Markdown (MD) y luego procesarlos. La primera es gray-matter que parsea string a JSON. Por ejemplo este MD posee una cabecera con distintos datos como title, date, author e inclusive el link a imágenes que se utilizan en SEO.

La otra dependencia importante es remark que permite parsear y serializar los documentos MD a HTML y poder renderizarlos. Luego aplicando estilos globales en CSS puedes personalizar por completo tus documentos.

La idea es disponer de un blog sencillo, estático, de gran perfomance para el usuario y utilizarlo como extensión de cualquier sitio web.

Para instalar el proyecto debes:

Copiar el repositorio de GitHub

git clone https://github.com/nicosaporiti/nextjs-blog.git

Instalar las dependencias

npm install

El proyecto está realizado en:

• React 17.0.1
• Next 10.0.0
• Dependencias date-fns, gray-matter y remark

Comandos para modo desarrollo

npm run dev

Realizar deploy del Blog

Te recomiendo que abras una cuenta en Vercel y conectes el proyecto mediante GitHub para que cualquier deploy que realices en la rama principal se actualice directamente. Puedes redireccionar un subdominio de tu sitio a los servidores de Vercel y tener hosting del proyecto. El redireccionamiento es muy sencillo utilizando el administrador de DNS de tu hosting y creando un CNAME con los datos que te indica Vercel.

Si quieres hacer deploy local y directamente subir tu proyecto a otros alojamientos como Netlify ejecuta el siguiente comando:

npm run deploy

Next creará una carpeta llamada out dentro de tu repositorio, lo único que debes hacer es arrastrarla a la creación de nuevos proyectos de Netlify y ya tendrás tu blog corriendo.

Este proyecto utiliza getStaticProps y genera un SSG que básicamente es un sitio estático en HTML + JSON. Por lo tanto cada vez que crees un post, debes colocar los documentos en la carpeta posts y correr el comando de deploy para actualizar todo el blog.

Poco a poco iré agregando algunos features, por ejemplo comencé con el contador de palabras que calcula el tiempo de lectura.

Esto es una imagen aleatoria de Lorem Picsum

Gracias por leer! 😄