Blogs
Website knowledge updates. Waiting / Landings with AI?

Website knowledge updates. Waiting / Landings with AI?

Tl;DR

Last year I made couple of 101 guides for HUGO and ASTRO.

But it was time to put cool components like this ig gallery used on this mdxhere

+++ People shared on reddit their favourite minimalistic sites +++ https://picsum.photos/ just in case you are tired of unsplash

Intro

Making a Landing should be easy already, with tools like: https://github.com/wandb/openui

OpenUI let’s you describe UI using your imagination, then see it rendered live.

Ok, ok, you have embraced the power of SSGs and aware of how many cool things can be done ,statically’ aka in browser with CSR.

And surprisingly, Front End can do many cool things, including authentication

Just SSG RepositoryJust SSG Repository
Making SSG look cool with shortcodes and components

There is one thing still stucked…

How to make SSG edit friendly?

Some WYSIWYG approach?

Repurposing md note taking tools?

Or…giving a try to F/OSS CMS?

One more time, because I already gave a try to these from a recent post: bcms and pagescms

This can be used to get a cool ig like gallery without importing each file independently, just the folder where they are saved:

IG Gallery astro and jsx for beyondajourney

<GalleryLocalFolder
  folder="content/articles/exploring-netherlands-by-bike/imgs"
  initialLoadCount={6}
/>

Place those youtube videos:

<div style="display: flex; justify-content: center;">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/hj0MfciILEc" title="Vistula near Kazimierz Dolny Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

Conclusions

Cool landings out-there: *these should be guiding slubnechwile.com.

Get a cool theme: https://www.builtatlightspeed.com/category/astro or from astro themes

  1. tydal.co

  2. https://esim.holafly.com/ - landing with a very clear header

  3. purplepalm.ai created here

  4. https://operately.com/

Those should be enough for some inspiration.

Resumen de los 3 puntos clave de emprendimiento:

  1. El marketing es más importante que la tecnología usada. No pienses que un producto “molón” se venderá solo; a la empresa solo le importa que soluciones un problema real, sin importar cómo lo hagas (IA, Excel, etc.). Enfócate en B2B, ya que las empresas están más dispuestas a pagar por soluciones que resuelvan problemas concretos.

  2. Detecta un problema real. Usa tu red de contactos y experiencia para identificar auténticas necesidades en empresas y luego dedícate a resolverlas, sin obsesionarte con la tecnología elegida.

  3. Valida la idea antes de programar o desarrollar nada. Antes de ponerte a construir, crea una página de espera (waitlist) y comprueba si realmente hay interés (por ejemplo, recolectando correos de potenciales clientes). Solo si ves interés real, desarrolla la solución; si no, repite el proceso buscando otros problemas. Puedes hacer una pequeña demo simple con IA si es útil, pero manteniendo lo más básico posible.

Which are inline with the BiP Recommendations from product hunt, here from reddit

Los puntos nuevos que aporta el post “Build In Public Cheatsheet” en Product Hunt son:

  • El enfoque consiste en compartir de forma transparente el desarrollo y el progreso de tu proyecto: La idea es que construir en público no es solo marketing, sino crear una relación con potenciales usuarios y obtener feedback real durante todo el proceso.

  • Proporciona una lista práctica de tipos de publicaciones que puedes hacer durante tu viaje de “build in public”: Ejemplos concretos como tuits, capturas de pantalla, avances, errores y aprendizajes.

  • Incluye una lista pública de otros emprendedores que construyen en público y la opción de unirte a esa comunidad, facilitando networking y visibilidad.

  • Ofrece un tablero(pipeline) para planificar el viaje “Build in Public”, permitiéndote organizar tus anuncios, lanzamientos y experimentos públicamente.

  • Enumera principios y buenas prácticas clave para construir en público, ayudando a tener un marco ético y estratégico en tu comunicación.

  • Recomienda herramientas útiles para el proceso, para facilitar desde publicación hasta análisis y seguimiento de comunidad.

  • El objetivo final es convertir la cheatsheet en un handbook más completo basado en experiencia real y colectiva, con espacio para feedback y mejora constante por parte de los usuarios.

Esto añade elementos de comunidad, planificación estructurada y repertorio específico de acciones y herramientas al enfoque estándar de validar ideas y captar demanda antes de construir.[1]

La comunidad de Reddit en r/SaaS, en general, coincide con los enfoques de la cheatsheet “Build In Public” y las recomendaciones de validar una idea antes de desarrollarla. Los usuarios destacan estos puntos adicionales:

  • Validación real: Recomiendan aprovechar la construcción en público no solo como marketing, sino como vía para obtener feedback genuino y rápido de la comunidad sobre el producto y sus características.[1]
  • Tipos de publicaciones útiles: Compartir avances, errores, aprendizajes y ejemplos reales (tweets, capturas de pantalla, demos) ayuda tanto a validar ideas como a captar seguidores o potenciales usuarios.[1]
  • Herramientas y organización: Se valora contar con una plantilla o board para planificar qué compartir públicamente y tener muy claro el objetivo de cada comunicación.
  • Contribución de la comunidad: Algunos comentarios sugieren personalizar la cheatsheet, compartir ideas de mejora y usar el repositorio como un espacio para sumar prácticas eficaces.
  • Cuidado con el “eco-chamber”: Algunos advierten del riesgo de obtener feedback solo de la comunidad builder/tech (ejemplo: Twitter, IndieHackers, Reddit) y no del público objetivo real del producto, por lo que insisten en no perder el foco en los auténticos clientes.[2]

En resumen, hay consenso sobre la utilidad de construir en público para tener feedback temprano, pero se recalca la importancia de hacerlo con propósito y orientar la validación hacia el público objetivo, no solo hacia otros emprendedores o comunidades tech. Esto agrega matices a la estrategia y refuerza lo aprendido en los recursos previos.[2][1]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Example TinyHost

I got to know a very cool SaaS on twitter:

PageSpeed Insights Google Search Console Google Trends
Website Carbon Benchmark Web Check Tool

FAQ

SSG Setup Installs

For Astro, see: https://stateofjs.com/en-US

#sudo apt install npm #this is ~180mb, but it will be an older version

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm

nvm install --lts

node --version
npm --v

For HUGO, based in GO:

hugo version

Be mindful about HUGO extended versions for some themes to work!

Testing SSG Themes Locally 

npm run dev -- --host 0.0.0.0 --port 4321 #http://192.168.1.11:4321/

time npm run build

#npm install -g http-server
#http-server ./dist

#cd ./dist
#python3 -m http.server 8009

#npm run build
#npx serve -s dist
#rm -rf .git
#hugo server 
hugo server --bind="0.0.0.0" --baseURL="http://192.168.1.106" --port=1319

SSG with Containers

To put astro/hugo inside a container is as simple as: *and you can also develop in this way, inside a container, without installing node/hugo/whatever:

HUGO SSG Selfhosted | Docker Config Setup 🐋 ↗ Astro SSG Selfhosted | Docker Config Setup 🐋 ↗

Checks before web delivery

The good thing about astro, is to plug that image optimization:

alt text

How to get Started with SQL