Construcción Blog

HIce varios experimentos creando mi blog personal probando los siguientes stack

• Wordpress
• Ghost CMS
• Gatsby + Strapi CMS + Cloudinary + Heroku + PostgreSQL

Sin duda el stack mas complicado fue el último pero también el mas completo, fue allí donde nacio el diseño y la distrubicón de los datos de la versión final. El Stack me daba un CMS muy completo y versatil, pero despues de varios meses de mantenerlo, me di cuenta que consumía mas tiempo actualizando cada tecnología, migrando bibliotecas y manteniendome al día con la versión estable de cada una tecnología en mi stack.

Por ello tomé la decisión de mantenerlo simple (KISS), y eliminé todo a excepción de Gatsby para la generación del sitio web estatico y cambio los plugin para la conexión con strapi por un plugin para la generación del contenido a partir de archivos markdown (gatsby-transformer-remark). De esta manera dedico mas tiempo a escribir contenido y la tecnología utilizada es mas que suficinte para cumplir con el objetivo.

Tech stack

• Gatsby
• Github pages
• Docker y Docker Compose (Para desarrollo)

Docker image

La creación de imágen docker es solo desarrollo, ya que el despliegue se realiza utilizando github actions y github pages.

FROM node:14.18.3-stretch
WORKDIR /srv/app
COPY ./package*.json ./
RUN npm install
EXPOSE 8000
CMD [ "npm", "run", "develop"]

Para facilitar aún más la ejecución utilizo docker-compose.

version: '3'
services:
	jlpa-blog:
		container_name: jlpa-blog
		build: .
		command: "npm run develop"
		environment:
		- NODE_ENV=development		
		- GATSBY_TELEMETRY_DISABLED=1
		- INTERNAL_STATUS_PORT=42899
		ports:
		- 8000:8000
		- 42899:42899
		volumes:
		- .:/srv/app
		- /srv/app/node_modules

GithubPages

Mi blog personal al ser de contenido estático puede aprovechar la funcionalidad provista por Github a través del servicio de Github Pages, esto me permite alojar y servir el contenido generado por Gatsby en un subdominio de Github, también tenemos la opción de vicularlo a un dominio propio.

Github Actions

No todo el contenido del blog es público, hay contenido que prefiero mantener en privado por un determinado tiempo, asi que el código fuente está alojado en un repositorio privado, y mendiante una acción de Github publico el contenido generado por Gatsby a un repositroio público que ademas es un requisito para poder utilizar Github Pages.

name: Build and Deploy

on: [push]

jobs:

	build-and-deploy:

	runs-on: ubuntu-latest

	steps:

	- name: Checkout 🛎️
	  uses: actions/checkout@v2.3.1

	- name: Install and Build 🔧 
      run: |
	    npm ci
	    PREFIX_PATHS=true npm run build
	- name: Deploy 🚀
	  uses: JamesIves/github-pages-deploy-action@4.1.7
	  with:
		repository-name: jlpa-dev/brain
		branch: master # The branch the action should deploy to.
		folder: public # The folder the action should deploy.
		token: ${{ secrets.GH_PAT }}

La acción ejecuta los comandos necesarios para la contstrucción del sitio estatico, cuyo resultado se alamcena en una carpeta llamada "public", posteriomente se realiza una acción push del cotenido de esta carpeta al repositrio que tiene habilitado Githbub Pages.

Nota: El comando npm ci es similar a npm install, la diferencia reside en que npm ci, no crea ni almacena las dependencias en la carpeta llamada node_modules.