Trabajar de forma local con un proyecto generado desde Stackbit implica comprender la estructura de archivos, las carpetas clave y las herramientas que hacen posible construir un sitio web moderno con la filosofía Jamstack. A continuación se desglosa paso a paso cómo clonar el repositorio, qué contiene cada directorio y cómo preparar el entorno para editar código de manera eficiente.
¿Cómo clonar el repositorio y empezar a trabajar en local?
El primer paso es obtener una copia del proyecto en tu computadora. Desde la plataforma de GitHub (o el servicio donde vive tu repositorio), se copia la URL que aparece en el botón Code [0:25]. Con esa liga, se ejecuta en la terminal el comando git clone seguido de la URL copiada [1:00].
bash
git clone https://github.com/tu-usuario/tu-repositorio.git
Es recomendable ubicarte en una carpeta de trabajo definida, como una carpeta llamada Develop, para mantener tus proyectos organizados. Una vez clonado, te mueves al directorio creado con cd nombre-del-proyecto [1:42] y abres tu editor de código favorito. En el caso de Visual Studio Code, puedes usar el atajo code . desde la terminal para abrirlo directamente [2:05].
A partir de este momento, ya no se trabaja con el editor visual de Stackbit, sino directamente con el código fuente y la arquitectura propuesta por la herramienta.
¿Qué contiene la carpeta content y por qué es fundamental?
Dentro del proyecto, la carpeta content almacena toda la información del sitio [2:30]. En su interior se encuentra data/config.json, un archivo con configuraciones esenciales como:
- El nombre de la implementación.
- El path principal del sitio.
- Templates personalizables (versión dark, light, colores disponibles).
- Elementos del header: título y navegación.
- Elementos del footer: pie de página y redes sociales.
También dentro de content vive el contenido del sitio escrito en Markdown [3:35]. Cada sección —blog, portafolio, about, contact— tiene su propia carpeta con archivos .md. Es importante respetar los archivos index de cada sección, ya que representan la estructura principal del sitio y contienen configuraciones de SEO que se abordan más adelante [4:48].
Si hay secciones que no vas a utilizar, como thank you o style guide, puedes guardar ese contenido como referencia y eliminar la sección del sitio [4:20].
¿Qué papel juega Markdown en la creación de contenido?
Markdown es el formato con el que se escriben todas las entradas y páginas. Permite agregar texto con formato, incrustar videos de YouTube, bloques de código y más, sin necesidad de un CMS tradicional [3:45]. Conocer su sintaxis es clave para sacar el máximo provecho al proyecto.
¿Qué recursos se almacenan en la carpeta public?
La carpeta public contiene los recursos estáticos del sitio, principalmente imágenes [5:15]. También puede alojar archivos JavaScript externos que se necesiten integrar. Es el lugar adecuado para agregar los recursos visuales propios y eliminar los de ejemplo que vienen precargados.
¿Cómo está organizado el código fuente en src?
La carpeta src es el corazón del proyecto y sigue una arquitectura clara dividida en subcarpetas [5:45]:
- Components: elementos individuales reutilizables como el footer, botones, action links e íconos [6:00].
- Layouts: plantillas visuales principales. Incluyen advance (estructura general con header y footer), blog, página individual, portafolio y blog post [6:25]. Si necesitas una nueva sección, puedes replicar un layout existente, asignarle un nombre y registrarlo.
- Pages: estructura propia de Next.js que define cómo se construye la app, el manejo del document, elementos de SEO y la detección de URLs dinámicas mediante slots [7:15].
- Sass (estilos): un preprocesador SASS ya configurado con archivos para botones, header, íconos, portafolio y más [7:40].
- Utils (utilerías): funciones para manejar links, procesar Markdown, trabajar con paths y cualquier lógica auxiliar del proyecto [8:00].
Finalmente, en la raíz se encuentran archivos de configuración como ESLint (para respetar estilos de código), Prettier (formato consistente), la configuración de despliegue con Netlify, el package.json con dependencias y archivos de Stackbit que conectan la plataforma visual con el código fuente [8:25].
Esta organización te permite personalizar a nivel de código y, al mismo tiempo, aprovechar los modelos de configuración amigables que ofrece Stackbit para habilitar secciones y opciones sin escribir todo desde cero. ¿Ya identificaste qué secciones vas a mantener y cuáles vas a eliminar? Comparte tu experiencia en los comentarios.
