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.
Ahora en la parte inferior derecha de la pantalla aparecerá algo como esto.
Copiaremos la Id. de zona y volveremos a las Secrets de Github crearemos una nueva secret CLOUDFLARE_ZONE:
Nombre: CLOUDFLARE_ZONE
Value: ( Id. de zona que hemos copiado)
Ahora es el momento de crear una secret de GitHub que nos permitirá subir el repositorio en una nueva rama de que usaremos para servirla en Github Pages
Para eso vamos a nuestro perfil / Settings
Una vez dentro de settings vamos a Developer Settings / Personal access tokens, configuramos el repositorio así.
Le damos abajo del todo en Generate token y volvemos al repositorio dentro de Secrets
Y configuramos una nueva secret
Name: GH_SECRET
Value: ( Valor que hemos copiado al generar el token)
Una vez tenemos todo esto configurado vamos a hacer que el script de deploy nos genere la web y vamos a configurar para poder servirla.
En nuestro repositorio vamos a la pestaña Actions y lanzamos una ejecución manual.
Al terminar la ejecución nos habrá generado una nueva rama con el contenido estatico de nuestra web, que pasaremos a configurar en el apartado
⚙️Settings / Pages
Dejaremos configurado:
Branch: gh-pages
Path: /root
Definiremos nuestro dominio.
Entramos en nuestro dominio de CloudFlare y configuramos 4 registros de tipo A con las siguientes IP.
- 185.199.108.153
- 185.199.109.153
- 185.199.110.153
- 185.199.111.153
Así con la nube naranja activa.
Una vez añadidas todas veremos esto pero con nuestro dominio.
Para activar una cache super efectiva de la web y que vaya a la velocidad del rayo iremos en el menu superior Reglas y crearemos una regla así.
Debeis cambiar vuestro dominio y darle a Guardar e implementar
Si haceis algún cambio en vuestra página de notion.so debéis ir a Github en Actions y hacer un deploy manual, de lo contrario se realizara diariamente a las 0:00 UTC.
