Sitejet en Plesk

¿Cómo descubro SiteJet Builder?

Preámbulo: Llevo casi un año usando mi hosting actual y, de hecho, estoy en esa fase de decidir si renovarlo o cambiarme. Aunque tras explorar varias opciones me quedo con mi hosting por todo lo que me ofrece.

Mientras trabajaba en mi nueva store, quería alojarla en un sitio separado de mi portfolio y otros proyectos, pero sin comprar otro dominio. Así que opté por crear un subdominio.

Hasta ahí, todo normal. Ya había estado toqueteando el panel de control varias veces, pero ese botón de Sitejet Builder no estaba ahí... De hecho, sigue sin aparecer en mi sitio principal, donde tengo varias webs alojadas. Sin embargo, al crear el subdominio, de repente apareció en el panel del nuevo sitio.

La curiosidad me pudo, así que decidí entrar, y de la nada me encontré con todo un entorno tipo WordPress, con opciones de personalización bastante interesantes. Estaba allí, sin más, integrado… sin instalar nada, simplemente dentro de mi panel de control.

Obviamente, después de explorarlo un rato, ya tenía ganas de sacarle el máximo provecho y ver qué podía hacer con él. Así que, prácticamente por accidente...
¡Ha nacido mi nueva web de servicios! 🠖 N7Studio Services

Ahora, ¿qué ventajas tiene realmente Sitejet en Plesk o cPanel y cómo lo he personalizado con Tailwind CSS para hacerlo más único y adaptado a mi estilo? Vamos a verlo. 👇

Tailwind en SiteJet... ¿Realidad o Locura?

Ventajas de Sitejet en Plesk y cPanel

Personalizando Sitejet con Tailwind CSS

Aunque Sitejet ofrece plantillas y estilos predeterminados, sentí la necesidad de personalizar más mi sitio. Por eso, decidí incorporar Tailwind CSS mediante su CDN, lo que me permitió jugar con el diseño sin necesidad de instalar nada adicional en el hosting.

Algunas de las ventajas de utilizar Tailwind en Sitejet Builder fueron:

  • Diseño totalmente adaptable sin necesidad de CSS tradicional.
  • Personalización rápida mediante clases utilitarias.
  • Implementación ágil sin afectar el rendimiento general del sitio.

Implementación de Tailwind CSS en Sitejet

Para utilizar Tailwind en Sitejet alojado en Plesk, simplemente agregué el CDN en la cabecera de mi plantilla: 

<script src="https://cdn.tailwindcss.com"></script>
En Sitejet se puede incluir tu propio código y etiquetas meta en la cabecera desde Configuración del sitio Web 🠖 SEO/Meta.
Con esto pude aplicar clases de Tailwind directamente en los elementos HTML sin necesidad de configurar un entorno de desarrollo adicional.

También puedes añadir Tailwind dinámicamente al Head del html utilizando una función en Javascript.

Desde el botón  <> Código   que ofrece SiteJet en la parte derecha de su barra inferior puedes acceder a las distintas secciones del código, modificar el JavaScript y el CSS general, así como añadir tus propias variables de configuración.

Sitejet By Plesk

Creando un Grid Dinámico para los Proyectos

Usando grid y grid-cols de Tailwind, estructuré la sección de proyectos con un diseño adaptativo y moderno.
Podéis ver como quedó el grid de proyectos en el video , con efectos hover de cambio de imágenes y brillos imposibles de hacer en sitejet de forma nativa sin escribir literalmente cientos de líneas en CSS.

Aquí abajo muestro la estructura de la tarjeta que corresponde a este blog:


<!-- CONTENEDOR DE N7BLOG -->
<div class="group relative bg-gray-900 pb-6 rounded-lg shadow-lg transform transition-all duration-300 hover:rotate-2 hover:scale-105 perspective-1000">
    <div class="relative z-10">
        <!-- IMAGEN VISIBLE -->
        <img src="https://nusky7studio.es/img/n7blogMobile.png" alt="Proyecto" class="w-full h-48 object-cover rounded-lg transition-opacity group-hover:opacity-0">
        <!-- IMAGEN HOVER -->
        <img src="https://nusky7studio.es/img/ntblog.png" alt="Proyecto" class="absolute inset-0 w-full h-48 object-cover rounded-lg opacity-0 transition-opacity group-hover:opacity-100">
    </div>
    
    <!-- OVERLAY -->
    <div class="absolute inset-0 z-0 bg-gradient-to-t from-teal-600 to-emerald-500 opacity-25 group-hover:opacity-50 blur-xl rounded-lg transition-opacity"></div>
    
    <!-- CONTENIDO -->
    <div class="relative z-20 mt-4 mx-6">
        <h3 class="text-xl font-bold text-center">N7 Blog</h3>
        <p class="text-gray-400 mt-2">
        Blog de tecnología y programación con noticias extraídas de mi feed RRSS.
        </p>
        <div class="flex justify-end mt-3">
            <a href="https://nusky7studio.es/blog/" class="mt-4 inline-block px-4 py-2 bg-teal-600 text-white shadow-lg rounded-md hover:bg-teal-800 transition">
                Ver Proyecto
            </a>
        </div>
    </div>
</div>

Con solo estas clases pude obtener un diseño único y flexible, sin escribir una sola línea de CSS más que los Keyframes para las animaciones, y ha quedado realmente espectacutlar...

Grid de Proyectos

Conclusión

Sitejet en Plesk y cPanel es una solución potente para la creación y gestión de sitios web, permitiendo un desarrollo ágil sin necesidad de configuraciones complejas. Al integrar Tailwind CSS, se puede lograr una personalización rápida y eficiente, lo que lo convierte en una gran opción para quienes buscan optimizar el diseño sin complicaciones.

Si bien el uso del CDN de Tailwind no es la mejor práctica en entornos productivos, resulta una excelente manera de prototipar y desarrollar rápidamente. Es perfectamente posible y factible utilizarlo sin problemas si no se abusa de él, pero es importante conocer sus limitaciones.

En entornos de producción, es probable que tengas que forzar algunos estilos generales o encontrar formas de ajustar los conflictos con el CSS nativo de Sitejet, ya que el CDN de Tailwind puede sobrescribir, y de hecho sobreescribe estilos de forma inesperada.

En definitiva, Tailwind en Sitejet es un experimento interesante, y con el enfoque adecuado, puede ser una alternativa viable para personalizar tu web sin necesidad de instalar dependencias adicionales o afrontar restricciones impuestas por la configuración del sitio.