Cómo crear un sitio personal con Notion

Notion es una herramienta con varias posibilidades. Puedes usarla de muchas maneras, ya sea como lista de tareas, blog, calendario, tabla, área de trabajo, tablero de proyectos, etc. En este artículo, detallaré todos los pasos para usar Notion para crear un sitio web personal. Puedes hacerlo de forma gratuita y muy sencilla.

Lo que encontrarás en este artículo

Como mencioné anteriormente, la intención es hacer un sitio web personal, por lo que no entraré en detalles de Notion que serán irrelevantes para este proceso. No obstante, a lo largo del artículo, dejaré algunos enlaces que pueden ser interesantes para entender y visualizar la integridad de la herramienta. Incluso escribí otro artículo aquí en la comunidad, también aplicando Notion, pero esta vez enseñando cómo hacer un CV que también se puede exportar directamente a PDF.

Ejemplo de resultado final

Para que puedas ver lo que será posible hacer, aquí hay una imagen del sitio web personal que creé y que sirvió como modelo para escribir este artículo.

Entender las posibilidades de Notion

A pensar en desarrollar un sitio personal, pueden surgir muchas ideas visuales complejas e interesantes. Sin embargo, como tratamos con una herramienta facilitadora, intuitiva y “genérica”  para varios contextos, la desventaja recae justamente en recursos más específicos para el desarrollo de un sitio por completo.

Notion, por defecto, no cuenta con numerosas herramientas que permitan la personalización y el control total de cada parte de lo que se presentará en la pantalla del sitio. Hay varias herramientas que se integran con Notion y permiten una funcionalidad de la que carece Notion.

Piensa en el público objetivo

Antes de desarrollar un sitio web, es importante pensar en el público objetivo ("¿Para quién es este sitio web? ¿Para los reclutadores? ¿Para que otros desarrolladores vean mis proyectos? ¿Para ser mi cartera independiente? ¿Para que los miembros de mi familia vean mis nuevas habilidades con Notion?”).

Piénsalo mucho antes de continuar y ten claro cuál será tu audiencia. En el caso que usaré como ejemplo, es un sitio que funciona bien para mostrar a los reclutadores.

Busca referencias e inspiración

Para aprovechar al máximo el ocio creativo, podemos practicar el arte de robar como un artista, que consiste en mirar diferentes webs y recursos visuales creados por diseñadores para seleccionar todo lo que te parezca interesante y juntar diferentes ideas y referencias.

Dejo aquí una lista de sitios que considero interesantes para este paso:

• Dribble.
• Figma.
• Adobe Porfolio.
• Canva.

Nota: Mi referencia más grande la obtuve de un tutorial en YouTube que enseña cómo hacer un sitio web en Flutter.

Separar material personal

Después de obtener referencias y averiguar qué te gustaría tener en tu sitio, este paso consiste en tomar todo el material que te pertenece y dejarlo separado para que puedas usarlo en el sitio. De esta manera, es posible saber la cantidad de cada material y qué espacio se necesitará para presentar todo en el sitio.

Si tienes mucho, es bueno replantearse si realmente vale la pena presentarlo todo y dejar el sitio muy contaminado, lleno de información.

Materiales interesantes para separar:

• Proyectos en GitHub.
• Imágenes.
• Direcciones/usuarios de redes sociales interesantes.
• Links para blogs y artículos.
• Algún texto que hable sobre ti (¿Quién eres?, ¿qué haces?, características interesantes, etc.).
• Certificaciones.
  

¿Por dónde comenzar?

¡Listo! ¡Todo separado! ¿Y ahora? Es el momento de organizarse y ensuciarse las manos para empezar el trabajo de subir un sitio web.

Botones de navegación

En el caso que usaré como ejemplo, el sitio está completamente basado en una sola página. Este concepto también se conoce como Aplicación de una Sola Página (SPA por sus siglas en inglés).

Para que esto funcione bien, usaré botones de navegación que funcionarán para dirigir al usuario al bloque relacionado con el tema deseado/informado. Estos botones no son más que palabras en las que se puede hacer clic.

Llenando las secciones

Para cada botón, crearé un bloque en Noción (usando el Título 1) que actuará como la sección de ese botón.

Sección Sobre

Sección Proyectos

Sección Currículum

Mi sección de Currículum sigue el mismo patrón que la sección anterior, pero usando una base de datos para el CV.

Sección Contacto

En la sección Contacto, simplemente selecciona todos los contactos que correspondan con el sitio, luego selecciona una imagen que coincida con el ambiente y, finalmente, coloca un bloque junto al otro que contenga el hipervínculo debajo de la imagen, como éste:

Aplicando funcionalidades Notion

Crear una galería

Para crear este tipo de galería, simplemente sigue los pasos a continuación.

1. Digita /gallery view en cualquier línea de noción en blanco.
2. Selecciona New Database para crear una Database donde quedarán tus proyectos.
3. Haz clic … al lado del botón New de color azul.
4. Selecciona Layout.
5. Selecciona la opción Gallery.
6. En la opción Card preview, selecciona “Page cover”.
7. En cada ítem de Database, haz clic en “Add Cover” y selecciona una imagen que represente tu proyecto.
   

Detalle de información

A la hora de crear la Database de proyectos, es interesante utilizar la funcionalidad de Notion que permite detallar cierta información sobre la página a través de Propiedades.

1. Clic en algún ítem de Database.
2. Clic en el botón “Add a property”.
3. Selecciona el tipo de información.
4. Completa el campo con alguna información relevante sobre el proyecto.
   

Diseño del sitio

Para hacer el sitio más agradable y con una apariencia más personal, es muy importante agregar algunos detalles y elementos visuales de tu elección, basados ​​en los fundamentos del Diseño. Esto implica agregar imágenes, gifs, videos, colores, etc.

Uso de imágenes

Este es el momento adecuado para usar todas esas imágenes que se separaron al principio, pensar en cómo hacer para que todas las imágenes tengan el mismo lenguaje y que juntas puedan crear una identidad visual para el sitio.

Es muy común  usar íconos personalizados en Notion, ya que son muy fáciles de agregar. Solo arrástralos a la página.

Recomiendo el sitio de Flaticon, muy conocido para adquirir imágenes que puedes usar en tu sitio.

Gusto personal

El gusto personal dentro de un sitio web público puede ser muy subjetivo, por lo que debes tener mucho cuidado. Dependiendo del público objetivo del sitio, también es posible conocer el lenguaje visual que es muy probable que les guste, para poder combinar el gusto personal con el del público objetivo. Después de todo, no sirve de nada crear un sitio en el que el público objetivo odie navegar.

Por eso, recomiendo evitar reinventar la rueda o apostar por algo totalmente fuera de lo común. Es posible dejar tu identidad visual en elementos que son comunes al público como: Tab Bar, iconos intuitivos, colores predeterminados, etc.

Pasos finales

Finalmente, ahora con algo listo y totalmente presentable, solo se necesitan algunos toques finales para permitir una buena experiencia a los usuarios que van a utilizar el sitio.

Dirección del sitio web público

El sitio fue creado en una página de Notion y permite generar un enlace público a esa página. Para generarla, sigue los pasos a continuación:

1. Clic en el botón “Share”, ubicado en la esquina superior derecha de la página;
2. Ve a la opción “Share to web” y deja marcado ese campo;
3. Debajo de opción aparecerá un link al lado derecho y el botón “Copy web link”. Haz clic en él;
4. Ve hasta el navegador de tu preferencia y pega el link.

Modo edición y modo visualización

Después de habilitar el uso compartido de enlaces web, ahora tienes dos opciones de visualización: Una solo para ver y otra donde puedes editar. Para la opción de edición, debes iniciar sesión en Notion.

No te preocupes: las personas en la web no pueden editar tu sitio como tú.

Para personalizar la dirección, realice los siguientes pasos:

1. Clic en el botón de Side Bar en la esquina superior izquierda (Ctrl + \);
2. Clic en “Setting & members”;
3. Enseguida, clic en “Settings”
4. En “Domain” escribe el nombre de la dirección que deseas utilizar.
   

Nota: Recuerda que la dirección final quedará como: <nombre deseado>.notion.site.

Próximos pasos

A partir de aquí ya tenemos el sitio web completo, listo para ser utilizado y compartido con quien quieras. Lo que siguen son sugerencias para mejorar aún más el sitio web y la experiencia del usuario.

Sitio en inglés

Una buena mejora es hacer al sitio internacional, creándole una versión en inglés. Para lograrlo, simplemente replica la página y traduce todo el contenido. Después de terminar la traducción, habilita la página web y copia el enlace. Crea un botón con texto como "Versión en inglés" en la página original y colócala para que apunte a la página que acabas de crear en inglés.

Métricas y analytics

Analytics es algo muy común de usar en cualquier tipo de sitio web. Básicamente, es una herramienta que se hizo famosa con Google Analytics y que sirve para monitorear diversos comportamientos y características de los usuarios en relación al sitio web que se monitorea.

Una segunda buena mejora es contar con monitoreo de acceso al sitio (¿Cuántas personas acceden por día?, ¿dónde acceden las personas a mi sitio?, etc.).. Es posible observar numerosos comportamientos que pueden ayudar a tomar en futuras decisiones con tu sitio web personal.

Para usar el análisis, hay algunas opciones:

• A través de Notionlytics.
• Utilizando el propio Google Analytics.
• Creando una conexión entre Google Analytics y Notion a través de Zapier.
  

Conclusión

Este es el hito final largamente esperado de este artículo. Espero que lo hayas disfrutado y hayas tenido una gran experiencia creando un sitio web personal. ¡También te invito a unirte a la comunidad de Notion en Reddit para compartir el resultado de tu sitio y ver muchas ideas diferentes de personas de todo el mundo que usan Notion de maneras a veces inimaginables!

¡Felicidades por llegar hasta aquí!