Crea una Web con Notion

Como ya he ido comentando en las últimas ediciones, me interesa mucho el punto en el que nos encontramos en cuanto a las posibilidades que se abren para la gente creativa, inquieta que, hasta hace poco, no contaba con demasiadas herramientas para poder llevar a cabo sus ideas y que ahora mismo, con el augue de las herramientas NoCode, va viendo cómo es capaz de construir pequeños productos o experimentos de manera rápida y sin mucho coste, ya para satisfacer una necesidad de construir y crear cosas, ya sea para validar ideas de negocio de forma sencilla o para tener un lugar donde poder poner aquello que crea de forma pública.

Aunque algunas personas no suelen verla así, yo entiendo Notion como una herramienta₂ más dentro de este abanico de aplicaciones que permiten construir productos. Puede que no tenga API aún y que, por lo tanto, esté todavía limitada en cuanto a automatizaciones o integraciones con servicios de terceros, pero realmente tiene integrado todo lo necesario para construir herramientas dentro de ella (yo me he construido una herramienta herramienta de control de ingresos y gastos bastante sofisticada dentro, por poner un sólo ejemplo) y, además, a esto hay que sumarle su funcionalidad como herramienta de documentación.

Si combinas su capacidad de construcción por bloques con la facilidad de integración de estos bloques unos con otros y lo sencillo que es compartir estas páginas y hacerlas públicas con servicios diseñados especialmente para ello, realmente tienes en tus manos una plataforma de publicación.

A esto hay que añadirle la ventaja de que, si ya has construido un sistema operativo dentro de la herramienta, tu flujo de trabajo de recopilación de información + procesado + ampliación de conocimiento + creación de nuevo contenido + publicación está integrado en un mismo lugar, con lo que el proceso se hace mucho más fluido y optimizado.

Partiendo de todos estos principios me he animado a lanzar una idea into the wild 👇

👉 Tu Página en Notion. El Curso 👈

Mi objetivo con este curso es dar a todas aquellas personas interesadas en publicar algo (su experiencia profesional, sus creaciones, sus servicios, su documentación de empresa si desean hacerla pública o básicamente cualquier idea que quieran compartir) las herramientas y conocimientos necesarios para hacerlo en Notion.

Pero quiero ir más allá y no sólo explicar cómo podemos llevar todo esto a una página de Notion, sino hacerlo siguiendo un proceso de 4 pasos que permita, no sólo publicar la web (este sería el último peldaño) sino pensar previamente en cómo tiene que ser esta web, qué objetivos queremos conseguir, cómo vamos a presentar la información, cómo trasladaremos esa estructura a bloques de Notion que nos permitan darle un aspecto visual determinado y, por último, no sólo publicarla sino añadirle detalles que le aportarán funcionalidad extra como por ejemplo un formulario de contacto, un chat de soporte, un botón de compra o pequeños scripts de CSS para darle un estilo más personalizado.

La idea es, por un lado, aprender los principios y fundamentos de diseño que nos permitirán crear páginas en Notion no sólo estéticamente agradables sino también, por otro lado, ir aumentando la complejidad de las mismas asegurándonos de que sigan siendo usables y estén diseñadas de una manera elegante.

Una vez sepas hacer todo esto, podrás llevar estos conocimientos y principios a otras herramientas o usarlos para seguir creando contenidos publicables dentro de Notion. Piensa en un portfolio, un blog o incluso un curso como aprendenotion.com, pudiendo incluso construir tu propio sitio de membresía restringiendo el acceso a determinadas páginas con plugins de terceros. Las posibilidades son muchas y, según vayan creciendo las funcionalidades de la herramienta, podremos hacer incluso más cosas. Ya se ha convertido en la plataforma favorita de muchas empresas para hacer pública su documentación, y cada vez más gente la usa para construir productos, cursos e incluso sistemas operativos dentro de ella.

Creo que esta tendencia irá al alza y que es una muy buena oportunidad para sacarle a la herramienta todas las posibilidades que tiene, ya no en el ámbito de la productividad o la documentación, sino en el de la expresión y la creación de contenido.

Para conocer más detalles sobre la idea y apuntarte si te interesa, te invito a que te pases por la página tupaginaennotion.com, que por supuesto para demostrar mi argumento está construida en Notion + Super.

Como detalle, diré que tardé en hacer todo eso una mañana. Unas 4-5 horas para hacer una web contando una idea, a la que he añadido un formulario que me permitirá saber si la idea tiene interés, ahorrándome todas las horas de trabajo y dinero que podría haber perder si me hubiera puesto a construirlo sin saber si hay gente interesada en ello o no, o si hubiera dedicado más tiempo y dinero a hacer una landing más compleja. Simplemente escribí lo que quería, en un medio que ya sé usar y que controlo, y pulsando un par de botones y poco más la tenía en el aire.

Esto es lo que quiero enseñarte.

Y, como aperitivo, he aquí el video en el que explico cómo subir luego todo eso a Super.

Cómo Crear una Web con Notion y Super.so

Para subir tu página a Notion necesitas mínimo 3 cosas:

1. Una página de Notion (o página + subpáginas) que quieras compartir (duh)
2. Un dominio. Yo compré el mío en dondominio.com, que te recomiendo porque dan un muy buen soporte en caso de que pasen cosas raras o necesites ayuda, con el plus de que además son españoles ;)
3. Una cuenta activa en super.so(← eso es un link de afiliado. Si te haces una cuenta con él a mí me descuentan 4$ de una mensualidad, así que si lo estás pensando y te apetece echar una mano, gracias desde aquí!). En Super te cobran por sitio activo, no por página. Esto que quiere decir? Que tu sitio puede tener tantas páginas y subpáginas como necesites y no aumenta el precio por ellas. Por ejemplo, aprendenotion.com está considerado un sitio único aunque tiene muchas páginas.

Crear sitio en Super

Para crear un sitio nuevo en Super, una vez tengas tu cuenta activa y estés loggeado, tendrás que ir a la sección Sites y, desde ahí, pinchar en el botón New site +

Se te abrirá un pop up con dos opciones. Mi recomendación es que elijas la primera, Super Static.

Esta versión no sólo tiene soporte para más funcionalidades (es más rápida, tiene mejor SEO, no depende de servidores externos así que pueden ayudarte si hay algún problema con tu sitio, etc..) sino, algo muy importante, y es que es la opción más segura a la hora de publicar nuestro sitio en Notion.

Esto es algo que yo no sabía, pero parece ser que sitios como Notelet o HostNotion, que usan scripts de Cloudflare, son vulnerables a que cualquier página pública en Notion pueda ser mostrada bajo cualquier dominio simplemente añadiendo a la URL su ID único.

Esto se traduce en que, si tú tienes una página pública de Notion subida, por ejemplo, a HostNotion, con el dominio mipaginachachi.com, yo podría añadir a esa URL el ID de cualquiera de mis páginas en Notion y todo el mundo podría verlo. Es decir, alguien con mala idea podría publicar lo que quisiera en tu dominio. No es una cuestión de la seguridad de tus datos privados, simplemente tu dominio no está seguro en esos servidores, y por lo tanto la mejor apuesta ahora mismo es usar la opción estática de Super, ya que convirtiendo las páginas de Notion a versión estática no hay riesgo de que esto ocurra.

Por cierto, todo esto lo sé gracias a que Ben Smith, otro embajador de Notion, llamó la atención sobre ello hace unos días en twitter, y aquí podéis ver algunos ejemplos concretos de cómo coge páginas subidas a esos servidores y básicamente manipula las URL para mostrar lo que quiere:

Site Settings

Una vez elegida la opción de Super Static, tienes que configurar los settings básicos del sitio:

• Elegir un nombre.
• Pegar tu nuevo dominio
• Copiar la URL de la página que quieres publicar. Para eso, tienes que ir a la parte superior derecha y, pinchando en Share, activar la opción "Share to the Web”. (Acuérdate de desactivar la opción de "allow duplicate as template" si no quieres que la gente se descargue la página y todo lo que haya dentro!)

Pretty URLs

El siguiente paso es el de convertir la ristra de URL que te genera Notion en cada página en una versión acortada. Si en tu caso sólo quieres publicar una página (no hay ninguna subpágina dentro) este paso puedes directamente saltártelo.

Si la página que vas a publicar tiene subpáginas, deberías meterte en cada una de ellas y hacer lo mismo que hemos hecho en el primer paso: Activar la opción de "Share to the Web" y copiar y pegar esa URL en su sitio correspondiente, así como elegir el slug que consideres para hacer esa URL más amigable.

Repite esto tantas veces como número de subpáginas tengas y luego pincha en Continue.

DNS Records

Aquí es donde tendremos que hacer un par de operaciones para que los DNS de tu dominio apunten a Super. En realidad sólo tienes que seguir los pasos que te indican, que es copiar y pegar un par de registros dentro de la zona de DNS de tu dominio.

En este caso, como yo he usado dondominio.com y ese dominio no está en la lista, le damos a Other. (Yo voy a mostrar el ejemplo de dondominio pero no creo que tenga mucha dificultad hacerlo desde cualquier otro de los dominios.)

Previamente a este paso, yo he tenido que hacer un par de operaciones en mi zona de DNS (insisto, esto es lo que yo tuve que hacer con dondominio.com, desconozco si habrá que hacerlo en todas partes, por eso si no controlas mucho de este tema mi recomendación es que contrates el dominio allí por si necesitas que te echen una mano)

Eliminé el registro tipo ANAME que me venía por defecto y, además, modifiqué el registro CNAME de las www para que dejara de apuntar a parkingsrv0.dondominio.com y apuntara a tupaginaennotion.com

Una vez hecho esto en mi zona de DNS, ya podía introducir los registros que me indicaban en Super.

Crea un nuevo registro de tipo A y copia y pega los datos que te indican.

En el registro CNAME que habíamos hecho que apuntara a tupaginaennotion.com, simplemente comprueba que su valor sigue apuntando a tu nuevo dominio.

Una vez hecho eso, puedes darle a Continue en Super.

Super Options

Finalmente, en la última pantalla tienes algunas opciones de personalización que te permitirán elegir una tipografía distinta a la que viene por defecto, asignarle a tu site un favicon o una imagen y descripción (que será la que se vea cuando lo compartas en redes sociales) y añadir javascript a tu página, así que puedes usar una herramienta de analítica para poder tener datos de tu site.

Por último, tienes dos opciones relativamente nuevas que te permitirán activar o desactivar la búsqueda interna en tu sitio (muy útil para buscar contenido, como en el caso de aprendenotion.com) y una opción para esconder o mostrar las propiedades de las páginas en el caso de que tu sitio tenga bases de datos con propiedades que no quieras que se vean.

Una vez configurado todo esto (siempre puedes volver atrás y hacer más cambios) es momento de darle a Save y, aunque tarda un ratito en comprobar los DNS, en seguida tendrás tu página lista.

Aparte de todo lo anterior, yo he usado en tupaginaennotion.com las siguientes herramientas:

• Formulario → Estoy probando tally.so por primera vez para este proyecto. No tengo ninguna opinión formada porque, como veis, el formulario que he usado es extremadamente sencillo, pero pueden construirse formularios complejos con lógica condicional y alguna cosa más interesante así que ya haré update si lo uso más a fondo.
• Textos con efectos → SnackThis.co
• Ilustraciones → Karthik Srinivas en Blush

<hr>

Eso es todo, espero que te sea útil y que empieces a subir tus proyectos a la web.

Si además quieres aprender a hacerlo siguiendo un sistema que te permita construir páginas más complejas, basadas en principios de diseño y usabilidad, que cumplan objetivos y que se integre perfectamente en tu flujo de trabajo en Notion, no olvides pasarte por tupaginaennotion.com y dejarme tu mail parasaber si estás interesada en el curso 🙂

PD: La semana pasada actualicé el Notion Starter Pack para incluir esta herramienta de control de ingresos y gastos que te he mencionado antes. Pero también puedes acceder a ella de manera independiente desde aquí.