blog-creator

Motor de blog/portal flat-file multisite con Vue.js — Static Site Generator sin base de datos.

Blog-creator es un motor de blogs y portales que almacena cada post y página como fichero plano Markdown con front-matter. Construido con Vue.js 3 + Vite, utiliza SSG (Static Site Generation) para producir HTML estático puro. Es multisite y reutilizable: el núcleo de plantillas y lógica vive en un paquete npm versionado, y cada site es un repositorio independiente que solo aporta su contenido y diseño (variables SCSS).

Features

• Flat-file CMS — Sin base de datos. Cada post es un archivo .md con front-matter.
• Static Site Generation — Genera HTML/JS/CSS estático listo para desplegar en cualquier hosting.
• Multisite — Un solo motor, múltiples sites. Cada site tiene su propio diseño vía variables CSS.
• Importador WordPress/Blogger — Scrapea la URL pública y convierte entradas a formato plano.
• CLI completo — Comandos dev, build, import, scaffold para gestionar sites.
• RSS/Atom + Sitemap — Generación automática de feeds y sitemap.xml.
• Accesibilidad WCAG AA — Skip-links, focus visible, landmarks ARIA, contraste mínimo 4.5:1.
• Analítica — Inyección de Google Analytics (GA4) mediante configuración.
• Markdown avanzado — Front-matter con gray-matter, renderizado con markdown-it.

Installation

npm install @ciberchema/blog-creator

Usage

CLI

npx blog-creator --help

blog-creator v1.0.0 — Motor de blog/portal flat-file multisite

Usage:
  blog-creator dev              Start development server
  blog-creator build            Build static site to ./public
  blog-creator import           Import from WordPress/Blogger
  blog-creator scaffold <name>  Create a new site
  blog-creator --help           Show this help

Create a new site

npx @ciberchema/create-blog-site mi-nuevo-site
cd mi-nuevo-site
npm install
# Edit site.config.json and styles/_variables.scss
npm run dev      # Preview in browser
npm run build    # Generate static site in ./public

Import content from WordPress/Blogger

cd mi-site
npx blog-creator import --url=https://blog-origen.com

Scripts

| Script | Description | |---|---| | npm run dev | Start Vite dev server with HMR | | npm run build | Build static site (SSG via vite-ssg) | | npm run import | Import content from WordPress/Blogger |

Configuration

Each site has a site.config.json:

{
  "title": "Mi Blog",
  "description": "Descripción del sitio",
  "lang": "es",
  "domain": "https://midominio.com",
  "social": { "X": "https://x.com/usuario" },
  "analytics_id": "G-XXXXXXXXXX",
  "media_base_url": "/media"
}

El diseño se personaliza mediante styles/_variables.scss (CSS custom properties) y opcionalmente styles/_custom.scss.

Content format

Los posts y páginas se escriben en Markdown con front-matter YAML. El motor usa markdown-it con html: true, linkify: true (URLs sueltas se convierten en enlaces automáticamente) y typographer: true.

Front-matter completo

---
title: "Título del post"          # Obligatorio
slug: mi-primer-post               # Opcional (por defecto = nombre del fichero sin .md)
date: 2026-07-13                   # Opcional (ordenación descendente)
status: public                     # public | draft (obligatorio)
type: post                         # post | page (opcional)
categories: [viajes, opinion]      # Opcional (crea /categories/:cat automático)
tags: [asturias, verano]           # Opcional (crea /tags/:tag automático)
excerpt: "Resumen corto"           # Opcional (si se omite, auto-generado 160 chars)
featured_image: /media/portada.jpg # Opcional (hero en post, card en listing)
lang: es                           # Opcional
---

Enlaces e imágenes

Sintaxis Markdown estándar. Las imágenes reciben loading="lazy" automáticamente.

[Texto del enlace](https://ejemplo.com)
![Texto alternativo](/media/foto.jpg)

Cómo crear un post

1. Crea un fichero .md en content/posts/ (convención: YYYY-MM-DD-tu-slug.md)
2. Escribe el front-matter mínimo:

   ---
   title: "Tu título"
   status: draft
   ---

3. Añade el contenido Markdown tras el ---
4. Previsualiza con npm run dev
5. Cuando esté listo, cambia status a public y ejecuta npm run build

Para crear una página (no un post), pon el fichero en content/pages/ — aparecerá en /{slug} (ej. /about).

Project structure

blog-creator/
├── index.html                    # HTML entry point
├── package.json                  # @ciberchema/blog-creator
├── CHANGELOG.md                  # Version history
├── src/
│   ├── main.js                   # Vue app entry (ViteSSG)
│   ├── App.vue                   # Root component
│   ├── router.js                 # Dynamic routes from markdown content
│   ├── components/               # Vue components (Header, Footer, PostCard, etc.)
│   ├── templates/                # Page templates (Home, SinglePost, Listing, NotFound)
│   ├── styles/                   # SCSS with CSS variables + WCAG AA utilities
│   ├── build/                    # Build logic (parser, RSS, sitemap, media)
│   ├── cli/                      # CLI commands (dev, build, import, scaffold)
│   └── importer/                 # WordPress/Blogger scraper
└── create-blog-site/             # Scaffold package for new sites
    └── template/                 # Default site template with sample content

AI agent skills

This project includes skills for AI coding assistants (e.g. opencode). Cada skill se dispara con una frase en lenguaje natural durante la sesión con el agente.

| Skill | Trigger phrases | Qué hace | |---|---|---| | readme-generator | «genera el README», «actualiza el README», «regenera el README», «rewrite README», «update README» | Lee package.json, LICENSE, CHANGELOG.md, el árbol de src/ y genera o actualiza README.md con secciones estándar coherentes con el código real. | | commit-writer | «genera un commit», «escribe commit message», «make a commit», «commit this», «conventional commit», «analiza los cambios», «agrupa los cambios», «dame los comandos git» | Lee todos los cambios pendientes (git status), los agrupa por tipo/scope lógico y produce comandos git add <files> + git commit -m "..." listos para copiar y pegar, siguiendo Conventional Commits. |

Para usar un skill, simplemente di la frase de activación durante la conversación con el agente. El agente cargará las instrucciones del skill automáticamente.

Architecture

El motor sigue un modelo polyrepo:

• Core (@ciberchema/blog-creator): Contiene plantillas Vue, lógica de build, CLI y estilos compartidos. Se publica como paquete npm versionado (semver).
• Sites (repositorios independientes): Cada site instala el core como dependencia y solo aporta site.config.json, styles/_variables.scss y contenido en /content/.

El despliegue es simple: copiar la carpeta public/ por FTP/SFTP, o conectar el repositorio del site a Netlify/Vercel/GitHub Pages para auto-deploy.

Contributing

Las contribuciones son bienvenidas. Por favor, abre un issue o pull request en el repositorio de GitHub.

License

GNU General Public License v3.0