Cómo crear una web con Notion de forma gratuita

En Reboot somos muy fans de Notion y lo usamos para realizar múltiples funciones como ya hemos comentado en otros artículos. Hoy vamos a explicar cómo hemos creado una web con Notion para nuestro Playbook usando un dominio personalizado y el contenido disponible en diferentes idiomas de forma completamente gratuita.

Por qué Notion

A la hora de crear el Playbook queríamos poder actualizar el contenido de forma rápida y sencilla ya que este evoluciona a la vez que lo hace la empresa. Además necesitábamos algo que no nos llevara demasiado tiempo de desarrollo para centrar los esfuerzos en la landing de la empresa.

Notion es perfecto para esto ya que nos permite crear páginas públicas donde actualizar el contenido desde un entorno que nos gusta y al cual accedemos a diario. De hecho, si lo que necesitáis es justamente esto, compartiendo de forma pública vuestro directorio de Notion ya estaríais.

Pero como no nos gustaba tener el dominio de Notion con urls poco amigables decidimos ir un paso más allá y habilitar el acceso mediante un dominio personalizado. Para ello hacen falta un par de cosas más, pero en este post os enseñaremos a hacerlo de forma simple.

Herramientas utilizadas

Para poder crear nuestra web en Notion y acceder desde un dominio propio necesitamos las siguientes herramientas:

  • Tener un dominio comprado con el provedor que más os guste.
  • Una cuenta gratuita en Cloudflare.
  • Una cuenta gratuita en Notion.

    • Una vez tenemos las cuentas creadas podemos empezar a configurarlas.

    Configuración de Notion

    Lo primero que tenemos que hacer es crear una página de Notion pública. Para ello solo tenemos que pulsar en la opción de Share y habilitar la opción de "Share to web". Esto nos dará una url que, si disponemos de una cuenta PRO, también podremos habilitar la opción de indexación en buscadores.

    A partir de aquí el diseño y el contenido que crees en la página ya es cosa tuya. Eso sí, una pequeña recomendación es la de utilizar la estructura de tabla para la organización de contenidos ya que escala mucho mejor en pantallas con diferentes resoluciones que otras estructuras de datos más libres.

    En nuestro caso particular no solo tenemos el Playbook en español sino que también está en inglés, para ello tenemos una versión duplicada en otra página pública separada. Ambas están dentro de una página llamada Public simplemente para tener claro qué contenidos son de acceso público dentro de nuestro proyecto.

    Configuración de Cloudflare

    Una vez tenemos nuestra página en Notion es el momento de configurar la cuenta de Cloudflare ya que aquí es donde ocurre la magia. En este artículo no vamos a ver cómo crear una cuenta de Cloudflare y enlazarla a nuestro proveedor de dominios, pero en la guía de Fruitionsite lo explican de forma sencilla a través de capturas. Si lo preferís también lo tenéis en vídeo a partir del minuto 3:36.

    Cuando tenemos nuestra cuenta de Cloudflare necesitamos un worker para poder apuntar nuestro dominio a la url generada por Notion, así podremos modificar las solicitudes y respuestas HTTP mediante el uso de scripts de JavaScript.

    Para crear el worker tenemos que acceder al menú Workers accesible desde la barra superior de iconos en nuestra cuenta. Dentro de la página de Workers pulsaremos en "Manage Workers".

    Para crear el nuevo worker pulsamos en "Create a Worker".

    Ahora que tenemos nuestro worker creado tenemos que remplazar el código Javascript que nos dan de serie por uno propio que es el que nos permitirá gestionar la lógica de visualización de  nuestra página de Notion.

    Simplemente tenemos que copiar y pegar el script superior y modificarlo con nuestros datos y preferencias.

    Hay 5 modificaciones principales que podemos realizar al script para adaptarlo a lo que necesitemos, estas están comentadas en el código como "Step X" pero vamos a verlas de una en una.

  • Modificar el nombre del dominio al que apuntamos en la constante MY_DOMAIN. En nuestro caso utilizamos el subdominio playbook.reboot.studio ya que el dominio principal apunta a nuestro sitio web.
  • Añadimos los slugs de la página o páginas de Notion que queremos que se muestren en cada ruta. En nuestro caso en la ruta raíz hemos mapeado el slug de la página de Notion con el Playbook en inglés y en la ruta /es la página de notion con el Playbook en español. En función de lo que prefiramos podemos mapear más o menos páginas, en nuestro caso solo mapeamos las "home" las interiores dejamos que utilicen el slug que da notion de por sí.
  • Añadimos el título y la descripción que queramos a cada página, estos se añadirán a los metas para que aparezcan en las SERPS cuando nuestra página esté indexada.
  • Añadimos el nombre de una fuente disponible en Google Fonts si queremos reemplazar la fuente por defecto de Notion. Este paso es opcional pero está bien para darla un toque más personalizado.
  • Finalmente podemos añadir scripts personalizados a nuestra página para añadir herramientas adicionales tipo Google Tag Manager o Intercom.

    • Podéis modificar el script acorde a las necesidades que tengáis. De hecho, el script que utilizamos en nuestro caso es exactamente el que hemos añadido en el artículo.

    Finalmente para poder tener nuestro worker activo lo tenemos que enlazar a una ruta, esto lo podemos hacer desde la pantalla principal de Workers pulsando en "Add Route" donde nos aparecerá el siguiente menú.

    Aquí tenemos que seleccionar el worker que acabamos de crear, y escribir la ruta donde queremos que se ejecute. En la mayoría de los casos la ruta es la misma que hemos indicado en la const MY_DOMAIN pero con un asterisco al final tal que así playbook.reboot.studio/* para indicar que se ejecute en todas las rutas que contenga ese dominio y no solo en la ruta raíz.

    Una vez guardemos ya podremos acceder a nuestro sitio web.

    Conclusiones

    Como podemos ver gracias a Cloudflare y Notion podemos crear webs de forma sencilla y rápida. A nosotros nos encanta este stack para páginas estilo FAQs, documentación o directorios pero con imaginación y creatividad estamos seguros de que se pueden crear muchos otros tipos de páginas.

    Cabe destacar que si queremos ahorrarnos la configuración de Clouflare hay servicios de pago mensual como Super.so o hostnotion.co que nos permiten hacerlo plug and play y, en el caso de Super, añade algunas funcionalidades extra de personalización que puede ser interesantes.