Insights / Artículos técnicos

Lanzamos la página web de Hatt

Lanzamos la página web de Hatt, un sitio personal que reúne ilustraciones, novelas y creación de avatares y gimmicks para VRChat. Está construido con Astro, Sveltia CMS y Pagefind, y diseñado para que Hatt pueda seguir publicando su actividad creativa.

  • Noticias
  • Desarrollo web
  • Sitio web
  • CMS
  • Astro
Lanzamos la página web de Hatt

Estructura principal del sitio de Hatt

  • Ilustración

    Preparamos un flujo para conservar ideas de personajes y notas de mundo como artículos y obras.

  • Novelas

    Reúne el acceso a historias publicadas en sitios externos y registros del proceso creativo.

  • Modelado

    Conecta la creación de avatares, gimmicks y accesorios para VRChat con BOOTH y YouTube.

Contenido
  1. Contexto
  2. Mostrar tres actividades en la portada
  3. Un sitio estático que puede seguir creciendo
  4. No separar los espacios externos de actividad
  5. También como caso de trabajo
  6. Resumen

Publicamos el sitio personal Página web de Hatt, que reúne la actividad creativa de Hatt en un solo lugar.

El sitio funciona como una entrada para ilustraciones, novelas y creación de avatares y gimmicks para VRChat. También lo agregamos a la página de trabajos de Acecore como caso de producción web y construcción con CMS.

Contexto

Hatt trabaja en varias actividades creativas, como ilustración, novelas y producción de avatares y gimmicks 3D para VRChat.

Sin embargo, las entradas estaban separadas entre blog, sitios externos de publicación, BOOTH, YouTube, X y otros canales. Las obras y los lugares de publicación ya existían, pero para una persona que llegaba por primera vez era difícil entender rápidamente qué crea Hatt y desde dónde empezar.

Por eso, en este proyecto no concentramos todas las obras en una sola página. Diseñamos el sitio como un hub que muestra la visión general de la actividad.

Mostrar tres actividades en la portada

La portada organiza la actividad de Hatt en tres áreas.

  • Ilustración: un lugar para conservar ideas de personajes y notas de mundo como artículos y obras
  • Novelas: una entrada a historias publicadas en sitios externos y registros del proceso creativo
  • Modelado: presentación de avatares, gimmicks y accesorios para VRChat

Primero comunica qué tipo de creador es Hatt y luego guía hacia el blog, las obras de modelado, el perfil y los enlaces externos. En un sitio personal, la clasificación de la actividad y el diseño de navegación importan tanto como la impresión visual.

Un sitio estático que puede seguir creciendo

Para la construcción usamos Astro, TypeScript, UnoCSS, Sveltia CMS y Pagefind.

Astro permite publicar el sitio como estático, con buena velocidad de carga y facilidad de mantenimiento. El blog y la información de obras se pueden editar desde el CMS, de modo que sea más sencillo seguir publicando sin tocar código.

También incorporamos Pagefind para la búsqueda interna. Aunque aumenten los artículos y obras, las personas visitantes pueden llegar a la información que buscan mediante palabras clave.

La forma de ordenar SEO y OGP en sitios Astro también se explica en Guía de mejora SEO: implementar datos estructurados y OGP en un sitio Astro.

No separar los espacios externos de actividad

La actividad de Hatt no termina dentro del sitio. Sitios de publicación de novelas, BOOTH, YouTube y X son lugares adecuados según cada tipo de obra.

Por eso, la página no reemplaza esos servicios externos. Funciona como una puerta de entrada que los conecta. Por ejemplo, en la página de modelado es fácil pasar a avatares y gimmicks publicados en BOOTH, y también están ordenados los enlaces a YouTube y X.

En sitios personales y portafolios, muchas veces resulta más efectivo crear rutas claras entre cuentas existentes que intentar integrarlo todo en una sola plataforma.

También como caso de trabajo

Agregamos el proyecto a la página de trabajos y portafolio de Acecore como “Producción de la página web de Hatt”.

Esta producción no fue solo publicar páginas. Incluyó organizar la actividad creativa, edición con CMS, búsqueda, OGP, sitemap y diseño de enlaces externos. Incluso en un sitio personal pequeño, preparar una estructura que pueda crecer después de publicarse aumenta el valor cuando se sumen nuevas obras y artículos.

Para consultar sobre producción web, visita Producción y operación web o contacta desde Contacto.

Resumen

La página web de Hatt ya está publicada como entrada para ilustraciones, novelas y creación de avatares y gimmicks para VRChat.

Acecore produce sitios personales, portafolios y sitios de negocio adaptados a cada objetivo. Si quieres consultar desde organización de contenido hasta CMS, búsqueda, SEO y operación posterior, contáctanos desde Producción y operación web o Contacto.

Flujos organizados durante la producción

  1. Organización

    Clasificamos la actividad en ilustración, novelas y modelado.

  2. CMS

    Hicimos que el blog y la información de obras se puedan actualizar con Sveltia CMS.

  3. Búsqueda

    Incorporamos Pagefind para encontrar artículos y obras con facilidad.

  4. Enlaces externos

    Ordenamos los accesos a YouTube, X y BOOTH.

Preguntas frecuentes

¿Qué se puede ver en la página web de Hatt?

Reúne ilustraciones, novelas, creación de avatares y gimmicks para VRChat, perfil y enlaces a actividades externas.

¿Con qué tecnología está construido el sitio?

Es un sitio estático construido con Astro, TypeScript, UnoCSS, Sveltia CMS y Pagefind.

¿Acecore también puede asesorar sobre sitios personales o portafolios?

Sí. Podemos ayudar con organización de actividades, diseño, CMS, búsqueda, SEO y flujos de actualización después de la publicación.