ng-hackeruna: Crea tu Blog con Angular y WordPress Headless [Open Source]

🚀 ¿Quieres un blog ultra-rápido, moderno y con la flexibilidad de Angular, pero sin abandonar WordPress como gestor de contenido? ng-hackeruna es un proyecto open source que te permite exactamente eso.

💡 TL;DR: Clona el repositorio, configura la URL de tu WordPress, y tendrás un blog Angular 20 funcionando en minutos. Ver repositorio en GitHub →

🎯 ¿Por Qué Este Enfoque?

Esta arquitectura de WordPress Headless + Angular no es nueva. Proyectos reconocidos en la comunidad Angular como angular.love han migrado de WordPress tradicional a Angular manteniendo WordPress como backend.

¿Por qué funciona tan bien esta combinación?

WordPress Tradicional	WordPress Headless + Angular
Rendering PHP en servidor	SPA ultra-rápida con lazy loading
Plugins que rompen el sitio	Solo REST API, sin conflictos
Difícil de personalizar	Control total del frontend
SEO limitado por tema	SEO optimizado con meta tags dinámicos
UX anticuada	UX moderna con animaciones y dark mode

Como menciona el equipo de angular.love:

“Cuantos más plugins instalas, más difícil se vuelve gestionarlos. Las dependencias entre plugins pueden romper
todo el sitio. Decidimos reconstruir el frontend manteniendo WordPress como headless CMS.”

✨ Características de ng-hackeruna

🏗️ Arquitectura del Proyecto

ng-hackeruna/
├── src/app/
│   ├── core/                # Servicios y modelos
│   │   ├── services/        # WordPressApiService, ThemeService
│   │   ├── models/          # Interfaces TypeScript
│   │   └── interceptors/    # HTTP interceptors
│   │
│   ├── features/            # Páginas principales
│   │   ├── home/            # Página de inicio
│   │   ├── post/            # Detalle de post
│   │   ├── search/          # Búsqueda
│   │   ├── portfolio/       # Proyectos
│   │   └── contact/         # Formulario de contacto
│   │
│   ├── shared/              # Componentes reutilizables
│   │   └── components/      # PostCard, Sidebar, Loader...
│   │
│   └── layout/              # Header y Footer
│
├── environments/            # Configuración por entorno
└── styles/                  # Estilos globales Tailwind

🚀 Cómo Usar ng-hackeruna para Tu Blog

Paso 1: Clona el Repositorio

# Clona el proyecto
git clone https://github.com/juanitourquiza/ng-hackeruna.git
cd ng-hackeruna
# Instala dependencias
npm install

Paso 2: Configura Tu WordPress

Este es el único archivo que necesitas modificar:

// src/environments/environment.ts
export const environment = {
  production: false,
  
  // 👇 CAMBIA ESTO por la URL de tu WordPress
  wordpressApiUrl: 'https://tu-wordpress.com/wp-json/wp/v2',
  
  // Opcional: para formulario de contacto con reCAPTCHA
  recaptchaV3SiteKey: 'TU_SITE_KEY_AQUI'
};

¿Qué URL usar?

• Si tu WordPress está en https://miblog.com
• Tu API estará en https://miblog.com/wp-json/wp/v2

Paso 3: Configura CORS en WordPress

Si tu frontend y WordPress están en dominios diferentes, necesitas habilitar CORS. Agrega esto a tu
wp-config.php:

// wp-config.php
// Permitir CORS para tu frontend Angular
header("Access-Control-Allow-Origin: https://tu-frontend.com");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");

O usa un plugin como WP CORS para gestionarlo visualmente.

Paso 4: Ejecuta el Proyecto

# Desarrollo
npm start
# Abre http://localhost:4200
# Build para producción
npm run build
# Los archivos estarán en dist/hackeruna-frontend/browser/

🔧 Qué Más Puedes Personalizar

1. Cambiar el Nombre y Branding

// src/app/layout/header/header.component.ts
// Cambia el logo y nombre
// src/app/layout/footer/footer.component.ts
// Cambia links de redes sociales
// src/index.html
// Cambia title, meta tags, y favicon

2. Modificar el Diseño

/* src/styles.scss - Variables de color */
:root {
  --accent-blue: #0077FF;      /* Tu color principal */
  --background-light: #FFFFFF;
  --background-dark: #121212;
  --text-primary: #121212;
}

3. Agregar/Quitar Páginas

// src/app/app.routes.ts
export const routes: Routes = [
  { path: '', loadComponent: () => import('./features/home/home.component') },
  { path: 'post/:slug', loadComponent: () => import('./features/post/post-detail.component') },
  // 👇 Agrega tus propias rutas
  { path: 'nueva-pagina', loadComponent: () => import('./features/nueva/nueva.component') },
];

4. Sistema de Comentarios

El proyecto incluye integración con Giscus (comentarios via GitHub Discussions):

// src/app/shared/components/giscus-comments/giscus-comments.component.ts
// Cambia estos valores por los de TU repositorio:
script.setAttribute('data-repo', 'tu-usuario/tu-repo');
script.setAttribute('data-repo-id', 'TU_REPO_ID');
script.setAttribute('data-category-id', 'TU_CATEGORY_ID');

Obtén tus IDs en giscus.app.

📡 Endpoints de WordPress Requeridos

El frontend consume estos endpoints estándar de la REST API de WordPress:

Endpoint	Descripción	Uso en ng-hackeruna
GET /wp-json/wp/v2/posts	Lista de posts	Home, búsqueda, categorías
GET /wp-json/wp/v2/posts?slug=X	Post por slug	Detalle de post
GET /wp-json/wp/v2/categories	Categorías	Filtros y navegación
GET /wp-json/wp/v2/tags	Etiquetas	Meta tags SEO
GET /wp-json/wp/v2/users	Autores	Página de autor

⚠️ Importante: Asegúrate de tener el parámetro ?_embed=true habilitado para obtener imágenes destacadas y datos de autor en una sola petición.

🎨 Comparación con angular.love

El proyecto angular.love también usa esta
arquitectura. Aquí una comparación de decisiones tecnológicas:

Característica	ng-hackeruna	angular.love
Framework	Angular 21	Angular (última versión)
Estilos	Tailwind CSS	Tailwind CSS ✅
Estado	Angular Signals	Signal Store ✅
Comentarios	Giscus	Giscus ✅
Búsqueda	WordPress nativo	Algolia (premium)
i18n	No incluido	Transloco
Iconos	Material Symbols	ngx-fast-svg
Caching	HTTP interceptors	Cloudflare KV + Workers
Licencia	MIT (Open Source)	Propietario

La diferencia clave: ng-hackeruna es completamente open source bajo licencia MIT. Puedes usarlo,
modificarlo y redistribuirlo libremente.

🤝 Cómo Contribuir

¡Las contribuciones son bienvenidas! Aquí algunas formas de ayudar:

🐛 Reportar Bugs

Abre un Issue en GitHub describiendo el problema.

💡 Proponer Features

¿Tienes una idea? Abre un Issue con la etiqueta enhancement.

🔧 Enviar un Pull Request

# 1. Fork el repositorio en GitHub
# 2. Clona tu fork
git clone https://github.com/TU-USUARIO/ng-hackeruna.git
# 3. Crea una rama para tu feature
git checkout -b feature/mi-nueva-funcionalidad
# 4. Haz tus cambios y commit
git add .
git commit -m "feat: agregar nueva funcionalidad X"
# 5. Push a tu fork
git push origin feature/mi-nueva-funcionalidad
# 6. Abre un Pull Request en GitHub

📝 Convención de Commits

Usamos Conventional Commits:

• feat: – Nueva funcionalidad
• fix: – Corrección de bug
• docs: – Cambios en documentación
• style: – Cambios de formato (no afectan lógica)
• refactor: – Refactorización de código
• test: – Agregar o modificar tests
• chore: – Mantenimiento general

🌟 Ideas para Contribuir

• ⬜ Agregar SSR con Angular Universal
• ⬜ Implementar búsqueda con Algolia
• ⬜ Agregar internacionalización (i18n)
• ⬜ Crear más temas de color
• ⬜ Mejorar accesibilidad (a11y)
• ⬜ Agregar más tests unitarios
• ⬜ Documentar con Storybook
• ⬜ Optimizar imágenes con ngx-fast-svg

📦 Tech Stack Completo

{
  "framework": "Angular 20",
  "language": "TypeScript 5.7",
  "styling": "Tailwind CSS 4",
  "state": "Angular Signals",
  "http": "Angular HttpClient + RxJS",
  "testing": "Vitest",
  "icons": "Material Symbols",
  "fonts": "Google Fonts (Inter, Roboto Mono)",
  "comments": "Giscus (GitHub Discussions)",
  "license": "MIT"
}

🌐 Demo en Vivo

Puedes ver el proyecto funcionando en producción:

👉 hackeruna.com

El sitio consume WordPress como headless CMS y demuestra todas las funcionalidades del proyecto.

📚 Recursos Adicionales

• 📦 Repositorio GitHub – Código fuente completo
• 📖 angular.love – Por qué migramos – Caso de estudio similar
• 📘 Angular Documentation – Docs oficiales
• 📙 WordPress REST API – Documentación de la API
• 🎨 Tailwind CSS Docs – Framework de estilos

❓ FAQ

¿Necesito saber Angular para usarlo?

Para uso básico, solo necesitas configurar la URL de tu WordPress. Para personalizar, conocimientos básicos de Angular/TypeScript son útiles.

¿Funciona con WordPress.com?

Sí, WordPress.com expone la REST API. Asegúrate de que tu plan permita acceso a la API.

¿Puedo usar otro CMS?

Sí, puedes adaptar el WordPressApiService para consumir cualquier API (Strapi, Contentful, Sanity, etc.).

¿Es SEO friendly?

Sí, incluye meta tags dinámicos, Open Graph, y Schema.org. Para máximo SEO, considera agregar SSR.

¿Puedo usarlo comercialmente?

¡Absolutamente! La licencia MIT te permite el uso comercial sin restricciones.

---

🚀 ¿Listo para Empezar?

git clone https://github.com/juanitourquiza/ng-hackeruna.git
cd ng-hackeruna
npm install
npm start

En 5 minutos tendrás tu blog Angular funcionando. ¡Dale una ⭐ en GitHub si te resulta útil!

👉 github.com/juanitourquiza/ng-hackeruna

¿Tienes preguntas o sugerencias? Déjame un comentario abajo o abre un Discussion en
GitHub. 👇