Tutorial: Primeros pasos con un sitio personal

00:00 / 00:00

Plantilla de sitio personal con Content Island + Astro

Guía completa para crear tu blog personal, personalizarlo y publicarlo.

En esta plantilla podrás:

Publicar tus posts
Mostrar tu perfil
Configurar el aspecto visual
Traducir el contenido
Organizar el contenido desde Content Island

Vamos paso a paso.

1. Crear el proyecto en Content Island

Accede a contentisland.net (puedes crear una cuenta gratuita).

Crea un nuevo proyecto llamado "myblog".
Selecciona que quieres partir de una plantilla.

Elige "Tu sitio personal".

Una vez creado, se mostrarán las instrucciones para generar el proyecto localmente en VSCode.

2. Crear el proyecto Astro desde VSCode

Abre VSCode sobre la carpeta vacía del proyecto.

Ejecuta el CLI de Content Island:

npm create contentisland@latest --  --template personal-static-site  --token <añade tu token aquí>

Cuando pregunte la ruta de destino, escribe:

Seleccionarmos que queremos instalar dependencias:

Lanza el servidor de desarrollo:

npm run dev

3. Configurar idiomas en Content Island

En el panel del proyecto, ve a General.
Elimina Inglés.
Añade Español.

Luego ve a Contenido → activa la vista de árbol para trabajar más cómodamente.

4. Personalizar la página de inicio (Home)

Para ver en detalle todas las secciones y campos editables que incluye la plantilla de sitio personal, visita la documentación oficial. Ahí encontrarás información actualizada donde podrás ver tanto las secciones como los campos editables.

4.1. Header

Busca el nodo del header.
Modifica el contenido del logo:

<>Braulio</>

4.2. MiniBio

Editar los campos:

name

Braulio Diez

role

Fundador y Desarrollador

description

Cofundador Content Island y me gusta el desarrollo web.

image

Aquí añadimos una imagen personalizada.

image alt

Foto de Braulio Diez

4.4. Contact Section

Actualizar los enlaces:

linkedin

Añadir tu enlace de LinkedIn aquí

GitHub

Añadir tu enlace de GitHub aquí

Email

mailto:  <añade aquí tu correo>

4.5. Hero Home Section

Filtra por HeroHome y completa:

title

El sitio de Braulio

description

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

4.6. Monthly Recommendation

Vamos ahora a Recommendations/Monthly Recommendation.

Completar:

description

🏝️ Blog de Content Island contentisland.net

linkLabel

contentisland.net

url

https://contentisland.net/en/blog/

4.7. Featured posts

De momento lo dejamos vacío. Se rellenará después cuando tengamos posts creados.

4.8. CTA (Call to Action)

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

4.9. Footer

Actualizar:

<>Braulio</>

5. Gestionar los posts del blog

En Content Island, localiza Posts.
Elimina todos los existentes.

5.1. Post 1

Nombre

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

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.

read time

5 min

content

# 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.

<Aquí añade una imagen>

5.2. Post 2

Nombre

Hola Content Island

title

Hola Content Island

slug

hola-content-island

summary

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

read time

8 min

content

# 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.**

6. Añadir Featured Posts

Ahora que ya existen posts:

Abre la sección Featured Posts.
Añade los dos posts creados.

7. Personalizar la página “About”

7.1. Tool section

Abrimos toolCollection, y elmininamos la siguientes tecnologías:

.NET
Git
SQL Server

Mantener:

React
HTML
JavaScript
TypeScript

Añadir (con icono SVG):

Astro
Content Island

7.2. Contact section

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.

7.3. Experience Section

Eliminar todas las experiencias.

Vamos a añadir las nuevas:

1. Basefactor

Nombre

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.

8. Page Meta (SEO)

homeTitle

Blog de Braulio

homeDescription

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

About Description

Más información sobre Braulio y su experiencia

About Title

Acerca de - Blog de Braulio

9. Tema (Theme)

Cambiar colores:

Primary

#265887

Secondary

#A12D55

10. Despliegue automático

Ya puedes conectar Content Island mediante un webhook a tu proveedor cloud (Vercel, Netlify…) para que los nuevos contenidos disparen un despliegue automático.

🎉 ¡Listo!

Tu sitio personal está creado, personalizado y preparado para seguir añadiendo contenido.