Tutorial de Publii: creación de un sitio estático implementado en Netlify

A diferencia de muchos de nuestros tutoriales habituales, la demostración de este es un sitio de comercio electrónico real y en pleno funcionamiento. De hecho, puedes comprar las pegatinas. 

→ Tiempo total gastado: 4 horas
→ Dinero total gastado: 115$ (15 en el dominio, 100 en pegatinas)

Lo que hice para este proyecto:

• Diseñé una pegatina muy básica usando Sketch .
• Usé Sticker Mule para crear y ordenar 100 pegatinas.
• Compré un nombre de dominio ( https://nextonewontbeamac.com/ ) usando iwantmyname .
• Se utilizó el CMS de sitio estático gratuito de Publii para generar archivos HTML, CSS y JS (es decir, ¡un sitio estático básico!).
• Hice un par de ajustes de diseño a su tema Simple usando VS Code .
• Agregué comercio electrónico a mi sitio estático usando Snipcart .
• Creé y conecté una cuenta de Stripe a mi cuenta de Snipcart para aceptar pagos con tarjeta de crédito.
• Implementé y alojé el sitio en Netlify (gratis).
• Redirigí mi dominio predeterminado de Netlify a mi propio nombre de dominio personalizado + SSL habilitado
• Creé una dirección info@nextonewontbeamac.com personalizada usando Zoho Mail (gratis)
• ¡Le vendí mi primera calcomanía a un colega! (El envío fue rápido).

En este tutorial, me centraré en las partes de creación e implementación de sitios web (Publii, Snipcart, Netlify).

1. Instalación de Publii

 

Primero instalé Publii. Es un proceso sencillo que comienza con una descarga en esta página .

2. Creación del sitio estático con Publii

 

Una vez instalado, Publii me invitó a crear un sitio. Acepté.

Luego seleccioné un tema, Simple , en la pestaña Configuración.

 

Ahora viene la parte divertida. Fui a Publicaciones y agregué una nueva.

 

Luego, utilicé una mezcla de frustración de los clientes (en Apple) y pésimas habilidades de diseño para crear esta belleza:

 

Después de eso, eliminé algunas cosas del tema Simple en Temas > Configuraciones personalizadas:

 

Siguiendo este hilo , también logré mostrar una sola publicación como página de inicio. No entraré en detalles sobre esto aquí, pero siéntete libre de hacer preguntas en los comentarios.

El toque final fue agregar un favicon troll:

 

Como puedes ver en el gif a continuación, la actualización/vista previa local funciona A1:

 

3. Añadir comercio electrónico con Snipcart

 

Necesitarás una cuenta de Snipcart si quieres hacer esta parte. Es gratis para siempre en el modo de prueba, para tu información.

Con Snipcart, agregar comercio electrónico a un sitio de Publii es fácil. En el administrador de Publii, agregué el código JS requerido de Snipcart en Herramientas > Título. En el panel de Snipcart, puede encontrar ese fragmento de código en Cuenta > Claves API .

 

Una vez hecho esto, volví a mi publicación de Publii y abrí el editor HTML:

 

Desde allí, agregué un botón de compra para mi producto, con los atributos HTML de Snipcart adecuados :

<button class="snipcart-add-item"
    data-item-id="1"
    data-item-name="Next One Won't Be a Mac - Sticker"
    data-item-price="5.00"
    data-item-image="https://boring-bose-80b3c8.netlify.com/media/posts/1/responsive/2544765-1-md.png"
    data-item-weight="10"
    data-item-url="https://nextonewontbeamac.com"
    data-item-description="Cancel that free Apple promo you're doing with your Mac.">
    Buy the sticker
</button>

 

4. Implementación del sitio estático en Netlify

 

¿Lo único que faltaba? Desplegar esa belleza en la red mundial.

Usé Netlify para hacerlo (gratis). Seguí principalmente estas sencillas instrucciones de la documentación de Publii.

El ID del sitio se encuentra en la configuración del sitio en Netlify.

 

El token de Netlify se puede generar en Cuenta > Aplicaciones OAuth .

 

Luego transferí mi dominio personalizado a Netlify. Para ello, utilicé este sencillo recurso .

 

Después de agregar mi dominio personalizado, cambié el DNS en mi panel iwantmyname usando los proporcionados por Netlify:

 

 

También agregué SSL a mi dominio personalizado usando la integración de Netlify con Let's Encrypt (¡gratis!). Aquí te explicamos cómo hacerlo.

 

Y eso es todo, amigos.

Asegúrate de visitar mi sitio de comercio electrónico totalmente funcional, muy rentable y ganador de premios Awwwards.

Si no quieres que tu próxima computadora portátil sea una Mac, compra una calcomanía; te la enviaré personalmente.

Reflexiones finales

No pensé que crearía e implementaría un sitio de comercio electrónico estático y funcional en un fin de semana. ¡Pero gracias a Publii y Netlify, lo logré! ¡Qué maravillosa es la vida!

Lo que podría hacer a continuación:

• Haz algunos retoques visuales: es feo.

• Agrega una sección Acerca de para responder a la obvia pregunta "¿Estás enojado, hermano?"

• ¿Lanzamiento en Product Hunt? 😅

De todos modos, ¡esperamos que esta publicación te inspire a lanzar sitios estáticos geniales!