shandevilla.com

Web personal de Shande Villa, fotógrafo de calle que vive en Guangzhou. Sirve también como enlace de la bio de Instagram.

HTML y CSS estáticos, sin frameworks, sin dependencias en el navegador y sin cookies. El único script de terceros es el captcha de Cloudflare (Turnstile), y solo se carga cuando alguien abre el formulario de contacto. Pensada para Cloudflare Pages; el formulario usa una Pages Function (functions/).

Qué hay en el repositorio

site/                 ← lo único que se despliega (directorio de salida)
  index.html          texto en español (funciona sin JavaScript y es lo que ve Google)
  css/estilo.css      todo el diseño
  js/                 idioma, menú, formulario, filtros del portfolio, visor de fotos (sin dependencias)
  i18n/zh.json, en.json   textos en chino e inglés
  img/                fotos optimizadas (WebP, varios tamaños)
  fonts/              fuentes autoalojadas (+ sus licencias)
  og.jpg, favicon.ico, icon-192.png, icon-512.png, apple-touch-icon.png (el logo 山德)
  sitemap.xml, robots.txt, _redirects, _headers
originales/           fotos originales, FUERA del despliegue
tools/                herramientas para quien edita (no se despliegan)
functions/api/contacto.js   backend del formulario de contacto (Pages Function)
build.mjs             único script de build: RSS de Substack + fuente china
REVISAR.md            traducciones al chino y al inglés pendientes de revisar

Ver la web en tu ordenador

node build.mjs                      # (opcional) trae tu último post de Substack
python3 -m http.server -d site 8000
# abre http://localhost:8000

Hace falta Node 18 o superior. Para la fuente china, build.mjs usa Python 3 y la librería fonttools (se instala sola en el build; si no se puede, se queda la fuente que ya está en el repositorio).

Desplegar en Cloudflare Pages

1. En el panel de Cloudflare: Workers & Pages → Create → Pages → Connect to Git y elige este repositorio.
2. Rama de producción: main (o rediseno mientras la pruebas).
3. Ajustes de build:
   • Framework preset: None
   • Build command: node build.mjs
   • Build output directory: site
4. En Environment variables añade NODE_VERSION = 22.
5. Save and deploy. Cloudflare te da una URL *.pages.dev para probar.
6. Dominio: en el proyecto, Custom domains → Set up a custom domain → shandevilla.com (y www.shandevilla.com si lo quieres).
7. Redirigir kungfundidos.com a shandevilla.com: con el dominio antiguo en Cloudflare, ve a Rules → Redirect Rules → Create rule:
   • Si Hostname es kungfundidos.com o www.kungfundidos.com
   • Entonces Dynamic redirect con expresión concat("https://shandevilla.com", http.request.uri.path), estado 301, conservando la cadena de consulta.
   • Para que la regla se ejecute, el dominio antiguo necesita un registro DNS con proxy naranja (por ejemplo un registro A a 192.0.2.1).

Las URLs antiguas del blog (/blog, /es/blog/…, /en/blog/…, /zh-cn/blog/…) y las páginas sueltas (/obra, /sobre-mi, /contacto) llevan a la portada con un 301 gracias a site/_redirects.

Que el último post de Substack se actualice solo

El título y el enlace de tu último post (la fila «Substack» del bloque «Fuera de China») se leen del RSS al construir la web, no desde el navegador. Para que se actualicen sin tocar nada:

1. En el proyecto de Pages: Settings → Builds & deployments → Deploy hooks → Add deploy hook (rama main).
2. Llama a esa URL con un POST cada día, por ejemplo con un trabajo programado gratuito en cron-job.org o con un Worker con Cron Trigger de Cloudflare.

Si Substack no responde el día del build, la web se publica igual: la fila de Substack sale sin título y enlaza a tu perfil.

Formulario de contacto (secreto y sin spam)

El botón «Abrir el formulario» de la sección Contacto abre un popup con email, asunto y descripción. Tu correo no aparece en ningún sitio: solo vive en una variable secreta de Cloudflare. Defensas contra spam: captcha Turnstile verificado en el servidor, campo trampa oculto para robots, comprobación de origen, límites de tamaño y limpieza de caracteres de control.

Hasta que lo actives, el popup avisa de que «todavía no está activado» y ofrece Instagram como alternativa. Para activarlo:

1. Turnstile: Cloudflare → Turnstile → Add widget. Dominios: shandevilla.com, kungfundidos.com y *.pages.dev (o el de tu proyecto). Modo Managed. Te da una Site key (pública) y una Secret key.
2. Email Routing (sin servicios externos): en el dominio shandevilla.com → Email → Email Routing → activar (Cloudflare añade los registros DNS). En Destination addresses añade tu Gmail y pulsa el enlace del correo de verificación; hasta entonces no envía nada.
3. Pages no ofrece el binding de correo, así que la web se despliega como Worker con archivos estáticos (wrangler.jsonc + worker.js, ya incluidos). Crea el Worker: Workers & Pages → Create → Import a repository (este repo, rama main) con Build command node build.mjs, Deploy command npx wrangler deploy y Variable de build TURNSTILE_SITE_KEY = la Site key. Luego en el Worker, Settings → Variables and Secrets:

Nombre	Tipo	Valor
TURNSTILE_SECRET	Secret	la Secret key
CONTACT_TO	Secret	tu correo (ya verificado en Email Routing)

CONTACT_FROM (el remitente, una dirección de tu dominio) y el binding EMAIL ya vienen en wrangler.jsonc; no los pongas en el panel. Después, mueve los dominios shandevilla.com y kungfundidos.com al Worker (Settings → Domains & Routes) y quita el proyecto de Pages.

Alternativa sin Email Routing: RESEND_API_KEY (Secret); la función usa Resend solo cuando no hay binding EMAIL.

4. Vuelve a desplegar (Retry deployment o un commit) para que la Site key entre en el HTML.

CONTACT_TO nunca debe ir al repositorio. Para probarlo en local hace falta wrangler pages dev site.

This is the beginning of the README. Read the rest at the original. Read the full README ↗