Hoy día para creadores de contenidos una herramienta esencial es tener una página donde concentrar todos los vínculos relevantes, como otras redes sociales, productos, vídeos relevantes, etc.

Esto se consigue utilizando plataformas ya reconocidas como Linktree, pero para ciertas características o estadísticas terminan por ser de pago.

Es aquí donde Linkstack entra en juego, ya que se trata de un servicio auto-hosteable, gratuito y de código abierto, que permite gestionar varios usuarios y páginas estáticas customizables de links con estadísticas.

Requisitos

Para poder continuar con este post, necesitarás lo siguiente:

  • Un servidor o VPS con alguna distribución de Linux.
  • Docker instalado y conocimientos básicos del mismo.
  • Algunos links que quieras centralizar.

Si no has trabajado anteriormente con Docker, te recomiendo que antes eches un vistazo a mi guía introductoria de Docker 101.

Instalación de Linkstack

Creo que no te pillará por sorpresa si te digo que lo vamos a configurar mediante Docker, ya que es lo más habitual para estos servicios hoy día.

Así que aquí te dejo la guía de instalación con Docker Compose.

Docker compose

Lo primero que deberemos hacer es crear la carpeta de trabajo de nuestra aplicación, utilizando el siguiente comando:

mkdir -p ~/linkstack
cd linkstack

Ahora será aquí donde crearemos nuestro docker-compose.yaml, lanzando lo siguiente por la terminal:

nano docker-compose.yaml

Deberemos introducir el siguiente contenido, recuerda adaptarlo a tus necesidades:

services:
  linkstack:
    hostname: 'linkstack'
    image: 'linkstackorg/linkstack:latest'
    environment:
      TZ: 'Europe/Madrid'
      SERVER_ADMIN: 'admin@dominio.local'
      HTTP_SERVER_NAME: 'linkstack.dominio.local'
      HTTPS_SERVER_NAME: 'linkstack.dominio.local'
      LOG_LEVEL: 'info'
      PHP_MEMORY_LIMIT: '512M'
      UPLOAD_MAX_FILESIZE: '32M'
    volumes:
      - 'linkstack-data:/htdocs'
    ports:
      - '8443:443'
    restart: unless-stopped

volumes:
	linkstack-data:

Las propiedades más relevantes son:

  • TZ: Pon tu zona horaria para mejor referencia de las estadísticas.
  • SERVER_ADMIN: Usa el correo o usuario que quieras como administrador.
  • *_SERVE_NAME: Los dominios que se van a utilizar para HTTP y HTTPS.

Una vez lo tengas todo, tan solo hay que ejecutar:

docker compose up -d

Y veremos que el contenedor se lanza y podemos acceder a la página de instalación en la ruta de nuestro servidor Docker utilizando el puerto 8443.

Configuración inicial

Se nos mostrará el proceso de instalación, preguntándonos lo primero por el idioma. En mi caso, he seleccionado el español.

Cuando le demos a Siguiente, nos hará una verificación automática de que tenemos las dependencias necesarias. Todas ellas estarán incluidas en el contenedor.

Continuamos el proceso, y ahora nos pregunta respecto al motor de base de datos que deseamos utilizar. Aquí dependerá de ti, pero en la enorme mayoría de casos, y más para usuarios individuales, SQLite es más que suficiente, por lo que será la opción escogida:

Ahora viene una parte esencial de la configuración inicial, rellenar el formulario del usuario administrador:

En este punto, lo más habitual sería introducir datos similares a los que tendrías en tu cuenta de LinkTree, por ejemplo. En mi caso quedaría algo tal que así:

Al darle a Siguiente, veremos que nos pide unas configuraciones sencillas:

  • Habilitar Registro: Permite que nuevos usuarios se den de alta en tu instancia de LinkStack (si es accesible para ellos).
  • Habilitar verificación por correo electrónico: Como su nombre sugiere, y de mano con la anterior, obliga a validar el correo electrónico de los nuevos usuarios registrados.
  • Establecer tu página como Página de inicio: Hace que si accedes a la raíz del servidor de LinkStack, se muestre la página de links de la cuenta del administrador.
  • Nombre de la aplicación: El nombre que aparecerá en el menú dentro de la interfaz web.

Si tu caso es como el mío, que sólo lo vas a usar tú para tus links, y no vas a permitir registros, te recomiendo dejarlo de la siguiente manera:

Cuando le des a la opción de Establecer tu página como Página de Inicio, te mostrará una advertencia. Con darle a Continuar es suficiente.

Ahora, al darle a Terminar la configuración, nos redirigirá a la página de inicio:

Crear tu página de Links

Dentro de la página de links, tenemos diferentes elementos relevantes:

  • Los propios enlaces.
  • Grupos y textos.
  • Perfil del creador.

Veremos cómo crear y administrar cada una.

Creación de enlaces

Si introducimos los datos de inicio de sesión, nos llevará al panel principal, desde el que podremos ver algunas estadísticas, y todo el menú de opciones.

Si en el menú de la izquierda, accedemos a Enlaces en la sección de Personalización, se nos cargará la página que buscamos.

Podemos ver la previsualización de nuestra página de links en formato móvil a la derecha, y en la parte central el listado ahora vacío de links, con la opción de Agregar nuevo enlace. Le damos a esta, que nos dirigirá al formulario correspondiente:

La primera opción te permite elegir entre diferentes tipos de bloques de links. Por defecto viene en Sitio predefinido, se trata de un listado de webs ya soportadas, con las que tan solo tienes que poner un texto a mostrar y tu enlace deseado, que el icono ya lo marcan automáticamente. Si no, siempre tienes la opción de Enlace personalizado.

En mi caso voy a hacer uno personalizado, que redirigirá a este mismo blog, así que el formulario quedará así:

Le damos a Guardar, y volveremos al listado de enlaces de antes, donde ya veremos nuestro link creado y la previsualización actualizada.

Contamos con otros muchos más bloques de tipos de enlaces que nos permiten adaptarlo todo a nuestras necesidades.

Agrupación de enlaces

Como tal, LinkStack no ofrece grupos en sí, pero podemos dividir nosotros nuestra página de enlaces para dar esa finalidad.

Para esto, haremos uso de los bloques de Título. Le damos a Agregar nuevo enlace, luego a Seleccionar bloque, y ahí lo escogemos:

Rellenamos el formulario, que tan solo nos pide el título en si a mostrar en el bloque:

Y procedemos a guardarlo. Ahora en el listado de enlaces, tan solo tenemos que jugar con las posiciones, poniendo en mi caso este título por encima del enlace del blog.

De esta manera, se muestra como si se tratara de una agrupación.

Perfil de creador

Ahora toca otra parte relevante: Customizar nuestro perfil, poniendo nuestros enlaces de redes, foto, fondo y tema.

Enlaces de redes

Empezaremos por rellenar nuestros enlaces de redes, que se encuentran en esta misma página donde gestionamos todos nuestros links, tan solo tenemos que hacer scroll hacia abajo y los podremos ver.

Rellena los que veas convenientes, y al darle a Guardar abajo del todo, verás que tu previsualización ya te los muestra.

Perfil

Ahora, vamos a por lo siguiente: Cambiar la foto de perfil, biografía y URL. Estas opciones las encontraremos en la sección de Apariencia en el menú izquierdo.

Aquí solo tienes que introducir lo que desees, subiendo la imagen de perfil, y revisando las opciones inferiores antes de guardar.

Cuando lo tengas, haz clic en Guardar, en la parte superior derecha tienes la opción de Ver página, que te abrirá una nueva pestaña de navegador para ver tu página en el dispositivo en el que te encuentras. Ahí deberías ver reflejado todo lo que hemos ido haciendo, aunque con opciones de administración que para el resto no saldrán disponibles.

Con esto tenemos nuestro perfil, ahora solo queda darle un toque más personal modificando el fondo y el tema.

Tema y fondo

Para esto, en el menú izquierdo nuevamente, vamos a la sección de Temas, donde tenemos una vista previa, y un botón de seleccionar temas.

Le damos a Selecciona un tema, y nos mostrará los defaults que tiene disponibles LinkStack, aunque se pueden poner customizados si deseas.

Voy a elegir el de PolySleek, y como verás, se ha aplicado sin problemas:

Si bajamos en esta misma página, nos saldrá el apartado para elegir un fondo de pantalla. Subiré uno de mi Homelab como ejemplo.

Quedando de esta manera al aplicarlo.

Por último, si tuvieras más ganas, podrías buscar temas customizados o incluso hacerte el tuyo propio, y subirlo. Encontrarás la opción para esto en la parte inferior de esta misma página.

Estadísticas

Uno de los puntos fuertes de LinkStack, es que nos da estadísticas básicas de clics. Esto nos permite saber qué enlaces están siendo más importantes o utilizados por tu comunidad.

Será lo primero que veamos al entrar en nuestro panel, ya que se encuentra en el Tablero de Control.

Junto con unas estadísticas más generales, de las cuales en nuestro caso de uso individual sólo nos interesa la primera fila.

También en la sección de enlaces veremos el número de clics de cada uno.

A nivel de localización o procedencia de los clics es cierto que no nos da información. Como he dicho, es algo básico que no hace uso de cookies de rastreo ni otros métodos.

Conclusión

Con LinkStack, y los cambios que hemos aplicado, podemos terminar teniendo una página de Links bastante completa, con una estética adaptada a nuestro gusto con los temas y la customización del perfil.

Te dejo de ejemplo mi página: links.runesoft.net

Si destacaría que no posee opciones como Links para productos, o conexiones con redes sociales para mostrar el feed actualizado, uno de los fuertes de servicios como LinkTree. Pero desde mi experiencia, no ha sido un inconveniente, aunque espero en un futuro poder contar con ellos.

Referencias

Para el desarrollo de este post, se han tomado las siguientes referencias y documentaciones:

Vídeo

0:00
/1:52