17/09/2021
Web para un cliente en 2021
Hacia mucho que no tenía que «hacer una web» para alguien que no fuera yo mismo o para la empresa que trabajara, es algo que siempre me ha gustado hacer de vez en cuando pero ultimamente me había centrado en otras cosas y me ha pillado un poco en fuera de juego en cuanto a que opciones tenía.
Además de eso, por circunstancias de la vida, había que hacer algo muy rápido y luego ya dedicar tiempo si fuera preciso para ampliar, completar y preocuparme de la gestión de contenidos.
Así que la opción más rápida que tenía era hacer algo en un archivo HTML y luego ya ver como resolvía lo demás, y eso he hecho.
Una vez que teníamos la primera versión funcional de la web acabada (este es el resultado), tocaba ver como se iban a gestionar esos contenidos.
Los requisitos del cliente (que por otro lado, al ser el cliente mi hermana y su socia pues tampoco me pone muchas pegas en lo que le propongo) son muy flexibles, les da igual como esté hecho, la única cosa que queremos es que sea facil de gestionar en el futuro para ellas.
Entonces sólo quedan por definir mis requisitos, yo quería que sea un sitio estático, es lo único que tenía claro, todos los mini sites que he hecho ultimamente son así y para este tipo de paǵinas que no tienen muchísimos contenidos las ventajas superan con creces a los inconvenientes.
Por otro lado, la infraestructura para hacer esto no es la mejor, la página va a estar alojada en un hosting compartido sin acceso por ssh y sin posibilidad de ejecutar muchas cosas allí.
Me puse a buscar gestores de contenidos para sitios estáticos y no he encontrado nada que me funcionara out-of-the-box, así que me tenía que currar algo seguro :(, pues al lío, al final las herramientas elegidas han sido:
- Cockpit CMS para gestionar los contenidos.
- Github Actions para construir el sitio.
Me gustan estos gestores de contenidos en los que tu eliges el tipo de contenidos que tienes y luego te buscas la vida para montarte las vistas, además Cockpit cumplía el resto de requisitos, que son que sea fácil de usar y que tenga un API lo suficientemente completa como para extraer todos los contenidos de allí.
En cuanto a Github Actions, pues no hay mucho que decir, no lo había usado nunca, pero el código lo tengo alojado allí así que me quedaba cerca...
¿Cómo encajan estas piezas en el puzzle?
Pues, he hecho una mini extensión para Cockpit que provee un botón para hacer despliegues, al ejecutarse, hace una llamada a Github que desencadena el proceso de build y despliega por FTP (es lo que hay).
El proceso de build a su vez hace llamadas al API de Cockpit para coger los datos y construye el sitio estático.
El archivo de Github Actions es muy sencillo y me ha valido con ir haciendo copia-pega de lo que vi por internet, pero de momento funciona:
# se ejecuta:
# - al hacer push (solo en la rama main)
# - manualmente
# - al hacer un llamada a https://github.com/user/repo/dispatches
on:
push:
branches: [ main ]
workflow_dispatch:
repository_dispatch:
name: 🚀 Deploy website
jobs:
web-deploy:
name: 🎉 Deploy
runs-on: ubuntu-latest
steps:
# actualizo el código
- name: 🚚 Get latest code
uses: actions/checkout@v2
# preparo el entorno con node
- name: 👷 Build site
uses: actions/setup-node@v2
with:
node-version: '12.15.0'
# instalo dependencias, creo la carpeta final y construyo el sitio
- run: npm install
- run: mkdir ./dist
- run: npm run build
# tal cual sacado del ejemplo de su documentación, lo subo por ftp
- name: 📂 Sync files
uses: SamKirkland/FTP-Deploy-Action@4.1.0
with:
server: server.url
username: username
password: ${{ secrets.ftp_password }}
local-dir: ./dist/
