Intro.

En este post te mostramos cómo generar desde cero la plantilla tu sitio personal completa con Astro + Content Island. Incluye toda la estructura de proyecto, componentes y la configuración necesaria para crear tu sitio personal o blog de forma rápida y con tecnologías actuales.

Plantilla sitio personal.

Te presento la plantilla de tú blog, en la que puedes publicar tus posts, ir a detalle, volver, mostrar info acerca de tu perfil, e incluso tematizarla a tu gusto.

Todo esto de una manera muy sencilla. En este post te la presentamos, y también puedes ver este vídeo sobre como funciona ¿Nos ponemos manos a la obra?

Creando el proyecto Astro.

Vamos a crear un proyecto en Content Island (en caso de que no tengas cuenta, puedes crear una gratis en contentisland.net).

Pinchamos en Add Project

Le damos un nombre myblog. Le indicamos que parta de una plantilla.

Elegimos la plantilla de "Personal site".

Y pinchamos en completar.

Una vez generado, tenemos disponible las plantillas de General, Model, Content, WebHook si nos hiciera falta. Pero la que se nos resalta de primeras es la de Quick Start, que nos da las instrucciones para poder crear nuestro proyecto desde Visual Studio Code.

Vamos a copiar el comando para crear el proyecto.

Abrimos VS Code y ejecutamos el comando, esto va a lanzar el cli de content island

Esta herramienta nos hará una serie de preguntas para configurarlo.

En cuanto ruta de destino, en nuestro caso como tenemos la carpeta de proyecto vacía, le indicamos que cree el proyecto en la carpeta actual (Tecleamos un punto)

Instalamos las dependencias

Y ya sólo tenemos que hacer un npm run devpara arrancar el servidor de desarrollo y ver el proyecto en el navegador.

Personalizando el proyecto.

Aquí puedes pensar, todo genial, pero yo quiero ver mis posts, mi info, mi foto..., y además lo quiero todo en español, vamos a personalizar este contenido en Content Island.

Nos vamos a la pestaña General pulsamos sobre el botón de Edit y eliminamos inglés, y añadimos español.

Guardamos los cambios.

Nos vamos a nuestro proyecto local, refrescamos y ya podemos ver que tenemos textos en Español.

Empezaremos por cambiar esta página Home y seguiremos por la de About. Voy a ir de arriba a abajo, primero las partes secundarias, hasta llegar al footer. Por último atacaremos los posts.

Personalizando la cabecera.

Empezamos por el header, cambiaremos el texto Jwd por mi nombre.

Para ello, iremos a la pestaña de Content, voy a decirle que quiero estructura de árbol, y buscamos la entidad Header.

Igual ahora ves muchas entradas, y te puede costar saber para qué sirve cada una, en la documentación de content island en la sección de templates tienes un mapa y una explicación de para qué es cada entidad.

Volvemos a Header, pinchamos y vemos en logo el texto que queremos cambiar.

Logo

<>Braulio</>

Publicamos.

Si Volvemos a nuestro sitio web y refrescamos, podemos ver el nombre actualizado.

Toca cubrir ahora la sección de mini bio.

Personalizando la mini bio.

Aquí vamos a actualizar los campos name, role, description, y image, image alt.

Name

Braulio Díez

Role

Fundador y Desarrollador

Description

Cofundador de Content Island y me gusta el desarrollo web.

Y para la foto, borro la que hay, y añadimos una nueva (podemos seleccionar una imagen desde el explorador, o bien, arrastrar y soltar).

alt

Foto de Braulio Díez

Para poder ver los cambios, muy importante, darle al botón de publicar.

Vamos a nuestro sitio web, refrescamos, y ya vemos el cambio.

Podemos ver que tenemos una sección de contactos que nos llevan a Linkedin, Github o a un correo electrónico. Pero son genéricos, yo quiero poner los mios.

Vamos a la sección de ContactSection

Aquí podemos ver una lista con los diferentes apartados que tenemos. Vamos a modificar cosas.

Email

mailto:braulio.diez@lemoncode.net

Github

https://github.com/brauliodiez

Linkedin

https://www.linkedin.com/in/brauliodiez/

Si te fijas, hemos hecho cambios en varias instancias, con lo que tendría que ir uno por uno guardando los cambios. Para este cambio es más cómodo usar la opción Bulk Publish.

Pulsamos, y veremos los cambios pendientes de guardar.

Si vamos a nuestra web y refrescamos, vemos que los links están asociados a mi cuenta.

Personalizando el Hero section.

Nos hemos dejado atrás la sección superior de la home, el Hero. Vamos a modificarlo.

Buscamos en el árbol HeroHome y rellenamos

title

El sitio de Braulio

Description

Post técnicos sobre headless CMS, front-end, producto y flujos de trabajo en equipo.

Publicamos y vamos a probarlo.

Y aquí tenemos los cambios en la sección Hero

Personalizando la sección de recomendación del mes.

Vamos a cambiar un card de recomendaciones. Nos vamos a la sección de Recommendation

Description

🏝️ Blog de Content Island

linkLabel

contentisland.net

linkUrl

https://contentisland.net/es/blog/

Publicamos.

Hacemos un refresh y vemos los cambios actualizados.

Ahora tocaría a la sección de post destacados, pero lo dejaremos para más adelante, ya que lo que haremos será borrar todos los post y crear los nuestros.

Personalizando el Call To Action.

Si seguimos bajando tenemos el Call to Action, vamos a configurarlo.

Title

¿Sobre qué temas te gustaría que escribiera?

Description

Estoy preparando nuevos posts, ¿Hay algún tema que te gustaría que tratara?

DescriptionTwo

Envíame un mensaje con tus sugerencias: braulio.diez@lemoncode.net

Publicamos.

Y si refrescamos vemos los cambios.

Personalizando el Footer.

Y para completar la parte de información secundaria (nos faltan los post), tenemos el footer.

logo

<>Braulio</>

Volvemos a publicar

Volvemos, hacemos un refresh y vemos los cambios.

La sección de contactos es la misma que modificamos antes, así que tiene los mismos valores.

Creando un post.

Vamos a por el core de nuestro sitio, los posts.

En Content Island, buscamos Posts borramos los que hay.

Fíjate que al borrar me avisa si esta instancia está en uso por otra. En este caso me está avisando que al borrar este post, borro también datos relacionados.

Borramos hasta dejar la colección vacía.

Vamos a crear el primer post:

Name

Presentando la plantilla de sitio personal de Content Island

title

Presentando la plantilla de sitio personal de Content Island

slug

presentando-la-plantilla-de-sitio-personal-de-content-island

date

17/11/2025

summary

Bienvenido a la plantilla de sitio personal de Content Island --- una forma rápida y flexible de crear tu propio sitio web personal, completo con una sección de blog y biografía.

Añadimos una imagen de cabecera.

readTime

8 min

Y en el contenido ponemos

# Presentamos la Plantilla de Sitio Personal Content Island

Acabamos de publicar **plantilla de sitio personal Content Island** --- una
forma rápida y flexible de crear tu propio sitio personal, completo con
un blog y una sección de biografía.

Esta plantilla está construida con **Astro** y potenciada por **Content
Island** como el CMS sin cabeza, lo que hace que sea increíblemente
fácil editar, personalizar y escalar tu contenido.

## ¿Por qué esta Plantilla?

Esta plantilla está diseñada para darte un punto de partida sólido para
un sitio personal moderno.

Ya sea que quieras publicar artículos técnicos, documentar procesos o
simplemente compartir tu trabajo, todo ya está integrado y listo.

## Características

- **Fácil de personalizar** --- Actualiza contenido y estructura
  directamente desde Content Island.
- **Diseño moderno** --- Limpio, responsivo y amigable para
  desarrolladores.
- **Arquitectura basada en Astro** --- Rápida, ligera y optimizada
  para SEO.
- **Flujo de trabajo con CMS sin cabeza** --- Todo tu contenido se
  almacena y gestiona en Content Island.
- **Construida con buenas prácticas** --- Valores predeterminados
  sensatos y patrones extensibles.

## Comenzando

1.  **Crea un nuevo proyecto desde la plantilla** dentro de Content
    Island.

2.  **Usa el CLI de Content Island** para preparar tu entorno local:

    ```bash
    npx content-island init
    ```

3.  Instala dependencias e inicia el servidor de desarrollo:

    ```bash
    npm install
    npm run dev
    ```

4.  Comienza a personalizar tus páginas, escribir publicaciones y
    ajustar componentes para que coincidan con tu estilo personal.

## Qué Puedes Construir

Con esta plantilla, puedes crear fácilmente:

- Una biografía personal o portafolio
- Un blog para publicaciones técnicas, ideas de producto o
  documentación de procesos
- Un sitio personal ligero, limpio y rápido que puedes extender con el
  tiempo

## Sumario

Esta plantilla busca darte una base simple pero poderosa para tu sitio
personal.

Personalízala, rómpela, reconstrúyela --- hazla tuya. Y con Content
Island manejando tu contenido, administrar tu sitio será fluido y sin
esfuerzo.

Le damos al botón de publish

Venimos al sitio, refrescamos la página y aquí tenemos nuestro primer post.

Añadimos un segundo post

name

Hola Content Island

title

Hola Content Island

slug

hola-content-island

fecha

19/11/2025

summary

Primeros pasos con Content Island, un Headless CMS sencillo y práctico

Añadimos una imagen de cabecera.

readTime

5 mins

contenido

# Presentamos la Extensión de VS Code para Content Island

Los desarrolladores pasamos la mayor parte del día dentro de **Visual
Studio Code** --- escribiendo, refactorizando, estructurando y dando
forma a la columna vertebral de sus proyectos. Así que, cuando se trata
de editar contenido Markdown o MDX almacenado en **Content Island**,
cambiar constantemente entre el navegador y el editor puede romper tu
flujo.

Queríamos solucionar eso.

Hoy os presentamos la **Extensión de VS Code para
Content Island**, un puente simple pero poderoso entre tu espacio de
contenido y tu editor favorito.

## ¿Por Qué Llevar Content Island a VS Code?

Porque tu contenido es parte de tu base de código.

Ya sea que mantengas un sitio de documentación, edites guías de
producto, iteres en componentes MDX o colabores con tu equipo, tener tu
contenido disponible _directamente dentro del editor_ es una enorme
mejora de productividad.

No más copiar--pegar.\
No más buscar archivos.\
No más cambiar de pestañas.

Solo abrir, editar y enviar --- todo en el mismo lugar donde ya piensas
y construyes.

## Cómo Funciona

La extensión agrega un flujo de trabajo fluido entre Content Island y VS
Code.

### 🔗 Abre Campos Markdown y MDX Desde Content Island

Cualquier campo almacenado como Markdown o MDX ahora muestra un **icono
de VS Code**. Haz clic, autoriza la conexión una vez y el documento se
abrirá al instante en VS Code.

### ✏️ Edita con Todo el Poder del Editor

Usa tu tema favorito, plugins, snippets, Copilot, atajos --- toda la
experiencia de edición que ya dominas.

### 🚀 Envía los Cambios de Vuelta a Content Island

Cuando termines de editar, presiona **Push** desde la paleta de comandos
o la barra lateral. Content Island detecta el cambio y actualiza el
campo automáticamente.

### 📚 Barra Lateral Opcional para Documentos Frecuentes

Ancla documentos usados frecuentemente, obtén la versión más reciente,
envía actualizaciones y organiza tu flujo de trabajo desde una barra
lateral dedicada.

Se siente natural porque _es_ natural.

## Diseñada para el Flujo del Desarrollador

Construimos esta extensión con un objetivo simple: **mantenerte en tu
zona**.

En lugar de interrumpir tu proceso mental para navegar interfaces,
puedes saltar directo al contenido, hacer la actualización y seguir
codificando.

Es pequeña, enfocada e intencionalmente minimalista --- lo suficiente
para hacer tu vida más fácil sin sobrecargar tu editor.

## ¿Cuándo La usarás?

- Actualizar documentación dentro de tu repositorio\
- Editar componentes MDX con vista previa instantánea\
- Hacer pequeños ajustes de contenido durante el desarrollo\
- Colaborar con compañeros que trabajan entre ambas herramientas\
- Mantener todo sincronizado sin abrir pestañas adicionales

Si tu flujo de trabajo toca Markdown o MDX, esta extensión se vuelve
segundo instinto muy rápido.

## Para Cerrar

La Extensión de VS Code es nuestra forma de hacer Content Island aún más
conectado con tu flujo de trabajo diario.\
Mantiene tu contenido cerca, tus herramientas unificadas y tu proceso de
edición sin interrupciones.

Esperamos que haga tu trabajo un poco más fluido --- y un poco más
disfrutable.

**Pruébala y cuéntanos cómo encaja en tu flujo.**

Publicamos y aquí tenemos nuestro segundo post.

¡¡OJO!! Si entras en el nuevo post, tenemos un error 404

¿Por qué? Resulta que para generar los post hacemos una llama en astro de GetStaticPaths y esto se ejecuta cuando hacemos el comando npm run dev, si queremos que esto lo pille ahora tenemos que parar el servidor y arrancarlo de nuevo otra vez. Importante, esto solo ocurre en desarrollo, en producción no pasa.

Paramos el servidor (ctrl + c en la consola del visual studio) y volvemos a ejecutar npm run dev. Volvemos al navegador, hacemos un refresh y...

Personalizando la lista de posts destacados.

Vamos a la sección de feature posts.

Vamos a publicar.

Vamos a la página, refrescamos y vemos que tenemos los dos post en la sección de destacados.

Ya hemos dejado lista la página Home

Personalizando el tech stack.

El hero ya lo tenemos, lo informamos en la página home, es la misma mini card pero puesta en un hero y el stack tecnológico es lo primero que vamos a tocar.

En el card de Tech Stack, voy a poner los iconos de las tecnologías con las que más trabajo.

Aquí tengo:

• Tool Section (lista)
• Tool (una)

En tool Collection borro .net, git, SQL Server

Me quedo con HTML, css, JavasCript, TypeScript, React y react la subo arriba del todo.

Y quiero añadir dos nuevas: Astro, Content Island(añadimos el icono en svg).

Name

Astro

Y añadimos otro

Name

Content Island

Me voy a tool collection a ver si el orden está bien (pongo Astro y Content Island arriba del todo).

Y como hemos hecho varios cambios, pulsamos sobre el botón Bulk Publish

Y Publicamos.

Vamos a ver que tal ha quedado, hago un refresh y vemos el listado de stack tecnológico actualizado.

Personalizando la sección de contacto.

Vamos a por el área de contacto.

description

¿Tienes dudas sobre Content Island o sobre usar un headless CMS? ¿Estás pensando en arrancar un proyecto nuevo? Dame un toque y vemos cómo puedo ayudarte.

Y publico.

Refrescamos y aquí tenemos el texto actualizado

Personalizando la sección de experiencia laboral.

Vamos a la parte de experiencia y vamos a quitar toda esta experiencia fake y vamos a poner información real.

Un apunte, si borro desde el campo experienceCollection me borra la relación, si borro desde el árbol, me da la opción de borrar la relación y el objeto. Cómo son experiencias fake, las vamos a borrar del tirón.

El check que vemos, comprueba que si este BluePixel exp (por ejemplo), se está usando en más sitios, si solo se usa aquí, nos aseguramos de borrarlo.

Vamos ha hacer lo mismo con las demás.

Cuando tengas borradas todas las entradas de experienceCollection saldrá un icono de advertencia de que la lista no puede estar vacía.

Vamos a añadir entradas reales.

Name

Basefactor

Company

Basefactor

Role

Founder

Period

2014- Actualidad

Description

Trabajo en diseño de producto, desarrollo y consultoría en Basefactor, somos los creadores de Content Island.

Añadimos más secciones:

Name

Lemoncode

Company

Lemoncode

Role

Founder

period

2016 - Present

description

Trabajo en definición de producto y en formación técnica (frontend y backend) en Lemoncode.

Name

Freelance

Company

Freelance

Role

Developer

Period

2010 - 2014

Description

Trabajé como desarrollador web freelance, construyendo sitios y aplicaciones web para varios clientes.

Name

Avanade

Company

Avanade

Role

Sr Consultant

Period

2004 - 2010

Description

Trabajé como ingeniero de software, centrándome en el desarrollo .NET y soluciones empresariales.

Name

Holte Group

Company

Holte Group

Role

Developer

Period

2001 - 2004

Description

Trabajé en el desarrollo de Prosjekt Senter y Baseline en Holte Group, centrándome en integraciones y arquitectura de productos basada en plugins.

Name

Global Teleworking

Company

Global Teleworking

Role

Desarrollador

Period

2000 - 2001

Description

Desarrollé un sistema de vigilancia de edificios y diseñé una plataforma para la gestión de proyectos.

Name

Start AG

Company

Start AG

Role

Desarrollador Junior

Period

1998 - 2000

Description

Contribuí a un sistema de creación y publicación de contenido, centrándome en la mejora de un visor de imágenes, otro de documentos y manejo optimizado de archivos comprimidos.

Name

Noria works

Company

Noria works

Role

Game developer

Period

1996-1997

Description

Game developer

Name

Softmail / Sitelsa

Company

Softmail / Sitelsa

Role

Desarrollador

Period

1990-1996

Description

Desarrollador Shareware

Y hacemos click en Bulk Publish

Publicamos.

Y vamos a ver que tal ha quedado.

Personalizando los metadatos del sitio.

Vamos a cambiar los metadatos de nuestra web.

homeTitle

Blog de Braulio

homeDescription

Post técnicos sobre headless CMS, front-end, producto y flujos de trabajo en equipo.

Añadimos nuevo favicon

About Description

Más información sobre Braulio y su experiencia

AboutTitle

Acerca de - Blog de Braulio

Publicamos

Refrescamos podemos ver la información actualizada.

Tematizando nuestro blog.

En esta sección podemos cambiar los colores, fuentes de nuestro sitio web, aquí simplemente vamos a cambiar los colores primarios y secundarios.

Vamos a la sección Theme de nuestro Content Island.

Primary

#265887

Secondary

#A12D55

Publicamos.

Hacemos un refresh y aquí tenemos el sitio web con los nuevos colores.

Despliegue.

Y si quieres ver como desplegar este proyecto en Vercel y además conectarlo con un web hook que permita que el sitio se actualice automáticamente al publicar cambios en Content Island, en nuestro canal de youtube puedes encontrar un vídeo que lo explica paso a paso.

Espero que te haya gustado esta plantilla.