Notas de ciberseguridad y tecnología — aprendiendo en público
Colofón
Cómo se construye, diseña y mantiene este sitio.
Principios
- Contenido sobre decoración.
- Excelente experiencia de lectura para escritura técnica.
- Rápido, accesible y seguro por defecto.
- Fácil de mantener durante años — una nueva publicación es un solo archivo Markdown.
Pila de tecnología
- Next.js 16App Router, static HTML export (`output: 'export'`)
- TypeScript 5strict typing throughout
- Tailwind CSS 4design system + shadcn/ui components
- Shikibuild-time syntax highlighting (dual light/dark themes)
- unified / remark / rehypeMarkdown → static HTML pipeline
- next-themeslight/dark/system theme (no flash on load)
Diseño
Warm-amber accent on a neutral base — deliberately avoiding both the cliché neon-green "hacker" aesthetic and the indigo/blue corporate-SaaS look. Typography is the default Geist sans + Geist mono pair; code blocks use a terminal-prompt brand mark and Shiki's GitHub light/dark themes. Whitespace and hierarchy do the work; there are no hero images, stock photography, or decorative animations.
Contenido
Every post is a single Markdown file in content/<locale>/posts/<slug>/index.md with YAML frontmatter. No CMS, no database, no registry — add a file, the page exists. The same pattern powers projects, reading, talks and certifications. Translations are separate Markdown files linked by a translationKey field; articles are never runtime-translated.
Despliegue
next build produces a fully static out/ directory, pushed to GitHub and deployed to Cloudflare Pages automatically. No server runtime, no environment variables, no secrets. HTTPS is handled by Cloudflare. Build command: bun run build:cf.
Rendimiento
Article bodies are rendered to static HTML at build time — zero client JS for the prose itself. The only client islands are: the theme toggle, language switcher, code-block copy buttons, TOC active-section tracking, search, and keyboard shortcuts. No tracking, no analytics, no cookies, no third-party scripts. Images are lazy-loaded and served unoptimized (static export).
Accesibilidad
Semantic HTML landmarks, skip-to-content link, visible focus states,prefers-reduced-motion support, keyboard shortcuts with a focus-trapped help dialog, accessible code-copy buttons with aria-labels, and per-locale <html lang>.
Seguridad
No backend, no API keys, no secrets in the repo. A security.txt declares a vulnerability-disclosure contact. Cloudflare Pages serves a strict CSP, HSTS, nosniff and other security headers via _headers. The site itself demonstrates good security hygiene — it's a cybersecurity blog, after all.