Este proyecto es la implementación de una web creada en notion.so convertida a una web estatica mediante GitHub Actions y un script en python llamado loconotion
Notion permite crear notas y documentos, wikis, gestionar proyectos y tareas y, en realidad, hacer casi cualquier cosa. ... Notion es accesible desde la web, desde las apps para Windows y Mac y desde las respectivas para iOS y Android.
Notion.so es una aplicación genial, pero no está orientado a la creación páginas web porque tiene algunas carencias, como por ejemplo que para ser usado como página web es bástante lento, no dispone de soporte para SEO ni tampoco la personalización con dominios propios, pero sin embargo no he querido desaprovechar el potencial de su editor.
Había estado probando algunas soluciones parecidas, Pero o requerían de servidor o eran de pago. Me puse a buscar en GitHub y descubrí loconotion vi que lo que hacia era generar contenido estatico a partir de una URL de notion.so y se me encendio la bombilla. ¿Porque no usar GitHub Pages?
Podía crear la página estática y subirla directamente, pero me encanta complicarme la vida, así que empece a darle vida a mi idea. Sí puedo generar contenido estático y además puedo ejecutar código en contenedores, ¡Pues ya está! Puedo crear un pipeline para desplegar directamente la web en GH Pages y puedo aprovechar la cache de CloudFlare para reducir el TTFB conseguir una velocidad de cargá mucho más rápida, y este es el resultado.
Además
- Proyecto Serverless
- Control de metatags
- Ejecución de JavaScript Adicional
- Favicon personalizado
- CSS personalizado
- Purgado de cache en el deploy.
- Práctico como crear una Pipeline.
Si quieres desplegar tú propia web básada en notion tan solo tienes que clonar este repositorio.
$ git clone https://github.com/aitorroma/aitorroma
$ cd aitorroma
$ rm -Rf .git
$ git init
$ git add .
$ git commit -m 'First commit'
$ git remote add origin <remote repository URL>
$ git remote -v
$ git push origin master
Puedes editar el fichero project/aitorroma.com.toml
Editar el valor:
page =
Por tú página creada en notion.so
También debes editar los metatags del sitio:
[[site.meta]]
name = "title"
content = "Aitor Roma, Página Oficial"
[[site.meta]]
name = "description"
content = "Página personal de Aitor Roma, Apasionado del Software Libre, Cloud Computing y Growth Hacking"
Por último puedes modificar el contenido de:
project
├── aitorroma.com.toml
├── assets
│ ├── button.html
│ ├── calendar.html
│ ├── coffe.html
│ └── player.html
├── custom-script.js
└── favicon-16x16.png
Básicamente los ficheros:
- custom-script.js
- favicon-16x16.png
custom-scripts.js te permite añadir contenido en javascripts en mi caso he añadido las estadísticas de Matomo.
favicon-16x16.png es el favicon de la web
Los ficheros html de assets los cuelgo para poder cargarlos como contenido embebido en la web y añadir algunas cosas que no soporta de facto notion.so pero que se pueden crear fácimente usando html5 y css.
Para que funcione el deploy se debe configurar los siguientes secrets.
Los secrets vamos a categorizarlos en dos tipos los secrets de CloudFlare para limpiar la cache y el secret de Github Pages que permitira subir el contenido estático generado a la rama gh-pages
Partimos de que ya tenemos un dominio en Cloudflare, vamos a necesitar generar un token de la API de usuario que nos permita gestionar la cache para ello iremos al apartado Tokens de API de nuestro Perfil.
Una vez allí le daremos a Crear Token
Crearemos un Token personalizado algo parecido a esto pero seleccionando nuestro dominio.
Una vez configurada esta pantalla nos aparecerá un Token formado por números y letras que debemos guardar, porque ahora lo usaremos.
Ahora debemos ir a GitHub en nuestro repositorio y hacer click en ⚙️Settings / Secrets
Allí le damos a New repository secret
En está pantalla configuraremos el campo Name con el valor CLOUDFLARE_TOKEN (así en mayúsculas tal como está escrito.)
En Value pegaremos la token que hemos generado en CloudFlare
Vamos a CloudFlare en nuestro dominio y le damos a este icono.