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 and just select what you want via https://picsum.photos/images

Intro

Wanna build a sales pipeline?

A wau to capture leads?

Start with a catchy landing first.

The data, streamlit web apps, pygwalker and ApexCjarts Funnels will come later.

Just get that first YES.

Web Front End - Theme

• https://github.com/LaB-CH3/astrobrew
  • https://astro.build/themes/details/astrobrew/

Astrobrew is a free and open-source elegant landing page for Micro SaaS products built with Astro & Skeleton CSS

Getting Started

Making a Landing should be easy already.

Specially 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 Repository

Making SSG look cool with shortcodes and components

A Better Waiting2Landing

On this post I thought Ill make a better version of the initial waiting2landing presented https://jalcocert.github.io/JAlcocerT/how-to-create-a-waiting-list/

Time to create:

git init
git branch -m main
git config user.name
git config --global user.name "JAlcocerT"
git config --global user.name
git add .
git commit -m "Initial commit: Waiting to Landing v2 with PB and Cloudflare Workers and Pages"

#sudo apt install gh
gh auth login
gh repo create waiting-to-landing-pb --private --source=. --remote=origin --push

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:

<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>

Potential Themes for a Landing

1. This cool astro theme: https://github.com/ctrimm/astro-payroll-solution-theme

git clone https://github.com/ctrimm/astro-payroll-solution-theme #MIT Licensed
#https://payflo.corytrimm.com/ #demo

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

Sounds familiar?

Payroll Theme with PB as auth

SSG and CF Workers + Pocketbase | Post

Payroll Theme with PB as auth

Source Code Astro Theme + CF Workers + PB users collections as Auth

Conclusions

If you need icons, consider having a look to: https://www.jsdelivr.com/package/gh/selfhst/icons?ref=selfh.st

For just simpler Link Collection Themes, think about these selfhosted solutions:

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/

5. https://kurz.fyi/

6. Some include videos… bersoagency.com

Those should be enough for some landing page 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.

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.
• 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.
• 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.

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

People are doing

Simple things like these landing to collect leads and sell courses.

1. https://invertiresvivir.es/newsletter/
2. https://www.genteinvencible.com/
3. https://pobremillennial.com/
4. https://www.fejeremy.com/2024-app-x
5. https://www.inviertejoven.es/
6. authority.io
7. https://www.invertirdesdecero.com/

Not to talk about the subscribe then see some info models:

1. https://pobremillenial.substack.com/p/asi-empece-a-invertir-en-oro

Plugins for Astro Landings

Directus is fully self-hostable and commonly deployed using Docker containers. You can host it on your own servers or cloud infrastructure, providing control over your data, security, and updates. It requires a compatible environment like Docker and supports various SQL databases such as PostgreSQL, MySQL, SQLite, and more.[1][2]

Design your data model, build powerful APIs, and manage content for anything from simple websites to complex applications.

Baserow also offers a self-hosted version alongside their cloud option. The self-hosted deployment gives full control over infrastructure but requires installation and server maintenance, suitable for teams with IT resources.[3][4]

NocoDB supports both cloud and self-hosted variants as well. When self-hosted, you have complete control over your data and can customize and secure the deployment on your own infrastructure.[5][6]

DB2REST is designed to be easily installed and self-hosted, allowing quick setup of secure REST APIs over databases on your servers.[7][8]

DreamFactory can be self-hosted to build and manage REST APIs on your own infrastructure, offering full control over security and deployment.[9]

Hasura offers a premium self-hosted enterprise package requiring a Kubernetes cluster and collaboration with their team for setup, aimed at customers with stringent compliance needs.[10]

In summary:

What can I do with Directus?

With Directus, you can easily:

Perform CRUD operations on your data
Create roles so anyone can access the data
Assign roles with fully configurable permissions
Build beautiful dashboards and no-code applications
Build complex data queries without having to know SQL
Configure event-driven webhooks and task automation

All these popular alternatives to DbChart support self-hosting, with varying levels of deployment complexity and infrastructure requirements.[2][4][6][8][1][3][5][7][9][10]

This should help you decide based on your preference for self-hosting and specific deployment needs.

1 2 3 4 5 6 7 8 9 10

Example TinyHost

I got to know a very cool SaaS on twitter:

• https://tiiny.host/#pricing

Adding OpenGraph

https://alexsinelnikov.blog/open-graph-protocol-improving-your-saas-visibility-on-social-networks?s=35

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:

Checks before web delivery

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