Blog de tecnología, administración de sistemas y redes para profesionales IT.

tengoping.com · Artículos · Categorías

# Clonar el repositorio
git clone https://github.com/Psycomy/tengoping.com.git
cd tengoping.com

# Instalar dependencias
npm install

# Servidor de desarrollo
npm run dev          # localhost:4321

# Build de producción
npm run build        # genera ./dist/

# Preview local
npm run preview

La búsqueda (Pagefind) solo funciona tras ejecutar npm run build, ya que indexa el HTML generado.

Crea un archivo .md o .mdx en src/content/blog/:

---
title: 'Título del artículo'
description: 'Descripción breve para SEO y tarjetas'
author: 'antonio'
pubDate: 2025-03-01
updatedDate: 2025-04-15
category: 'Linux'
tags: ['SSH', 'Seguridad']
image: '../../assets/images/mi-imagen.jpg'
draft: false
---

Contenido del artículo en Markdown...

Edita src/data/authors.json:

{
  "id": "nuevo-autor",
  "name": "Nombre Apellido",
  "avatar": "/images/nuevo-autor.svg",
  "bio": "Biografía completa del autor.",
  "bioShort": "Rol breve",
  "social": {
    "twitter": "https://twitter.com/usuario",
    "github": "https://github.com/usuario",
    "linkedin": "https://linkedin.com/in/usuario"
  }
}

Los comentarios usan giscus, que almacena las conversaciones en GitHub Discussions de este repositorio. La configuración está en src/components/GiscusComments.astro.

src/
├── components/        # Header, Footer, ArticleCard, ShareButtons...
├── content/
│   └── blog/          # Artículos en Markdown/MDX
├── data/              # authors.json, site.json, navigation.ts
├── layouts/           # BaseLayout, ArticleLayout
├── pages/
│   ├── blog/          # Listado paginado + artículos individuales
│   ├── categorias/    # Páginas por categoría
│   ├── etiquetas/     # Páginas por etiqueta
│   └── autor/         # Páginas de autor
├── styles/            # CSS global (temas claro/oscuro)
├── utils/             # Helpers TypeScript
└── content.config.ts  # Schema de Content Collections

public/
├── fonts/             # JetBrains Mono (auto-alojada)
├── manifest.json      # PWA manifest
├── sw.js              # Service worker (cache-first assets, network-first HTML)
└── _headers           # Cabeceras de seguridad para Cloudflare Pages

• SEO: OG images, RSS con enclosures, JSON-LD (BlogPosting, WebSite, Organization)
• PWA: manifest + service worker con estrategia de caché híbrida
• Compartir: botones nativos para Twitter/X, Telegram, WhatsApp, Reddit y LinkedIn
• Seguridad: cabeceras CSP, X-Frame-Options, Permissions-Policy vía _headers
• Búsqueda: indexación estática con Pagefind post-build
• Comentarios: giscus (GitHub Discussions)
• Accesibilidad: landmarks ARIA, navegación por teclado, breadcrumbs

Inspirado en la estética de terminal:

• Tipografía monoespaciada (JetBrains Mono) en todo el sitio
• Sin bordes redondeados, sin sombras — bordes sólidos
• Encabezados con prefijos markdown (## , ### )
• TOC con caracteres de árbol (├──, └──)
• Badges rectangulares, links en formato [bracket]
• Tema claro y oscuro con cambio automático

El sitio se despliega automáticamente en Cloudflare Pages con cada push a main.

Este blog ha sido diseñado y desarrollado con la asistencia de Claude de Anthropic, utilizando Claude Code como herramienta principal de desarrollo.

Contenido del blog bajo CC BY-NC-SA 4.0. Código fuente bajo MIT.