README

JAVIER-PROGRAMACIÓN

  • desplegado en firebase
  • este es el repositorio para el sitio javier-programación
  • la idea fuerza es sustituir los despliegues que hacía antes con Aerobatic para tener un sitio público pero con autenticación
  • añado el dominio comprado en IONOS javieriranzo.com para usarlo en este sitio

FIREBASE WEB

  • crear el proyecto en firebase
  • crear la aplicación en el proyecto recién creado
  • indicar que se quiere hosting

REPOSITORIO

FIREBASE CLIENTE

  • instalar los tools de firebase
  • firebase init
  • te avisa que no estas en el directorio home lo que da igual
  • te pide que quieres instalar y se indica que Hosting
  • usamos el proyecto recién creado en el apartado firebase web arriba descrito
  • el directorio public sera el de salida lo que nos viene bien pues en ese directorio lo genera hugo
  • no lo configuramos como single-page app
  • esto crea
    • el archivo .firebaserc
    • el archivo firebase.json
    • el directorio public con una estructura mínima

GENERAR EL SITIO

  • con hugo se crea el sitio en el directorio public

DESPLIEGUE

  • nos autenticamos en firebase desde el cliente con firebase login y la cuenta javieriranzo3@gmail.com
  • se puede ver el sitio con el servidor de firebase con firebase serve
    • este comando sirve el sitio web en el puerto 5000
  • para desplegar se usa el comando firebase deploy
  • se puede ver el resultado en esta dirección ¿(https://javier-publico.web.app/)?
  • se puede usar el script npm
npm run firebase:deploy
  • que crea el sitio con el comando hugo y despliega en firebase
  • actualiza el fichero de donde sale la fecha de creación del sitio
  • puede que sea necesario autenticarse en firebase antes

AUTENTICACIÓN

EN LA WEB

  • se activa la autenticación con el método de inicio de sesión por correo y contraseña
  • luego en usuarios añadimos el usuario que queremos que se puede logear

EN EL CLIENTE

  • en el archivo init-firebase.js hay que poner los datos que usa firebase para relacionar nuestra aplicación con sus servicios incluida la autenticación
    • los podemos encontrar en la consola de firebase
      • javier-public / settings / Firebase SDK snippet / en la opción de configuración

EN EL TEMA

  • se modifica el tema en el archivo baseof.html para incluir las librerías que necesita firebase y las de configuración de nuestro proyecto

  • los cambios en el tema no los subo al repositorio del propio tema a espera de decidir si hago otro tema o lo dejo en cambio propios del sitio

  • luego se vuelve a crear el sitio con hugo y se prueba en local con firebase serve

  • al volver a desplegar la aplicación te lleva al login con lo que vemos que funciona

TEST

  • existe una script en package.json para lanzar los test
  • previamente hay que lanzar el servidor pues se ejecutan en local
npm run dev
npm t
  • para llevar los resultados al tablero de cypress
cypress run --record --key 23d6b594-0713-434b-922f-0c8c4f75b22b
  • para lanzar sólo uno de los test
cypress run --spec  "cypress\integration\JAVIER_PROGRAMACION\NAVEGACION_SIN_LOGIN.js"
cypress run --spec  "cypress\integration\JAVIER_PROGRAMACION\NAVEGACION_CON_LOGIN.js" --browser chrome

  • instalo start-server-and-test

  • npm install --save-dev cypress start-server-and-test

  • se lanza con npm run ci

  • de esa forma se crea el sitio con hugo, se borra el directorio public para volver a lanzar la creación del sitio y el servidor desde memoria

  • luego se lanza el test y se cierra el servidor

  • como curiosidad durante el test en la búsqueda se puede oir el video que tengo en la página de hugo aunque el navegador no se vea

  • copio las tareas que encuentro en un proyecto hecho con next.js pues me parecen interesantes

POST ABIERTOS

  • quiero dejar los posts para que se puedan ver sin login
  • en local
  • funciona si tienes la url directa

VERSIÓN ANTERIOR

  • la versión anterior de este sitio antes de desplegar en firebase se puede recuperar en el repositorios de bitbucket con la etiqueta ANTES-FIREBASE

ANTIGUO PRIMER-POST PROPÓSITO

  • pasar todo lo relacionado sobre programación de notas-programacion a este sitio generado con Hugo
  • notas-programacion ha crecido demasiado y ahora es por un lado un cuaderno de bitácora donde apunto lo que realizo día a día y diferentes notas sobre programación, despliegues, repositorios y cosas relacionadas.
  • quiero dejar notas-programacion como cuaderno de bitácora
  • usar Hugo para generar el sitio dado que es bastante más rápido que jekyll y más simple de instalar y usar
  • uso la plantilla hyde-y porque me parece simple y fácil de usar con los atajos de teclado`
  • cambio de plantilla a docdock que además de tener búsqueda tiene dos variaciones con colores una de ellas
  • pasar sólo lo que sea relevante y aprovechar para limpiar
    • menos es más

DESPLIEGUE

hugo server
  • desde DGA
C:\portables\Hugo\40_3\hugo

TEMA

DOCDOCK TEMA ANTERIOR

disableNavChevron = true
  • el tema se puede modificar poniendo la modificacion en C:\proyectos\hugo\javier-programacion\layouts que modifica lo que esta en C:\proyectos\hugo\javier-programacion\themes\hugo-theme-docdock\layouts
  • los estilo se pueden modificar copiando la estructura en el directorio static

BÚSQUEDA

  • la búsqueda es realmente buena.
  • busca sobre el archivo index.json
  • se configura en el archivo C:\proyectos\hugo\javier-programacion\themes\hugo-theme-docdock\static\js\search.js
lunrIndex.field('title', {
    boost: 15
});
lunrIndex.field('tags', {
    boost: 10
});
lunrIndex.field("content", {
    boost: 5
});
  • se puede configurar el peso de cada tipo de campo de búsqueda
  • el archivo index.json se crea con el archivo C:\proyectos\hugo\javier-programacion\themes\hugo-theme-docdock\layouts\index.json

ENLACES

  • los enlaces que se generan son en minúsculas
    • por ejemplo para la página gitClientes.md se genera el directorio gitclientes

MENU

  • el menú se configura sobre los directorios dentro de content
    • dentro de cada directorio el archivo _index.md configura la etiqueta del menú y el icono que puede llevar

CONFIG

  • tengo que quitar una / pues aunque en local no daba problemas en producción no resolvía la url
// code.after('<span class="copy-to-clipboard" title="Copy to clipboard"><object class="clippy-icon" type="image/svg+xml" data="' + baseurl + '/images/clippy.svg"/></span>');
code.after('<span class="copy-to-clipboard" title="Copy to clipboard"><object class="clippy-icon" type="image/svg+xml" data="' + baseurl + 'images/clippy.svg"/></span>');

README_VIEJO.MD

  • DESCONTINUADO AL PASAR A LA VERSIÓN QUE SE DESPLIEGA EN FIREBASE CON AUTENTICACIÓN
  • este es el repositorio para desarrollar el sitio javier-programacion

DESPLIEGUE

  • en aerobatic con la cuenta de javieriranzo@hotmail.com
  • el 2019-11-10 10:12:57 veo que no esta el sitio y lo intento recrear
aero login 
-- con la cuenta javieriranzo@hotmail.com
aero create --name javier-programacion
Creating new Aerobatic website in this directory

Website https://javier-programacion.aerobaticapp.com created. The trial period will end in 30 days.

--NOTHING HAS BEEN DEPLOYED YET--

To deploy your first version, run the following:

$ aero deploy
  • es una cuenta que expira en 30 días
    • 2019-11-10 11:24:34
  • es necesario crear la variable SITE_PASSWORD con el valor deseado

DOCDOCK

  • probando una plantilla muy interesante de Hugo
  • con la intención de cambiar la que estoy usando hyde-y
  • 2018-03-03 19:04:32 la cambio y paso a usarla con el estilo original
    • se puede cambiar al estilo flex y a las variantes de estilo por colores como se ve en config.toml

TEMA HYDE-Y

A FAVOR

  • el resaltado del código esta coloreado
  • la presencia es agradable
  • tiene tabla de contenidos

EN CONTRA

  • no tiene la búsqueda
  • un solo nivel de menú

TEMA DOCDOCK

A FAVOR

  • la búsqueda esta solucionada y parece rápida y más chula que la que tengo ahora en notas-programacion
  • varios niveles de menú de forma sencilla

EN CONTRA

  • requiere versión de Hugo superior

REPOSITORIO

bitbucket

  • Use it at your own risk!

SITIO DE EJEMPLO

  • este en themes\docdock\exampleSite
  • es necesario cambiar el nombre del tema
cd themes\hugo-theme-docdock\exampleSite
hugo serve --watch
  • lo sirve en otro puerto si esta el sitio principal lanzado

LAS FLECHAS

.fa {
  font-size: x-large;
  }

CLONAR EL TEMA

cd themes
git clone https://javieriranzo3@bitbucket.org/javieriranzo3/tema-simple-hugo.git

CHANGELOG

PENDIENTE

  • revisar este README.md
  • cambiar el nombre del proyecto en firebase a javier-programación