# Preparing Your Repo & Account

Para preparar el proyecto de un repositorio de GitHub:

```
mi-proyecto/
 ├── index.html
 ├── styles.css
 ├── script.js
```

O si usas framework:

```
mi-proyecto/
 ├── package.json
 ├── src/
 ├── public/
```

### 🧾 Subir proyecto a GitHub

Si no lo has hecho:

```
git init
git add .
git commit -m "primer commit"
git branch -M main
git remote add origin https://github.com/tu-usuario/tu-repo.git
git push -u origin main
```

***

## 🌐 Crear cuenta en Netlify

Ve a Netlify: <https://www.netlify.com/> y regístrate (puedes usar tu cuenta de GitHub directamente).

<figure><img src="/files/Tz1p8rKIJtn02RBzUZCC" alt="Netlify.com tutorial para la universidad de la Costa CUC"><figcaption></figcaption></figure>

***

## Cómo conectar tu proyecto de GitHub con Netlify

Luego de hacer login con tu proyecto, vamos a encontrarnos este pequeño formulario que puede ud llenar seún las opciones que prefiera:&#x20;

<figure><img src="/files/tKywCfEbONXxDjLE3lb1" alt="Cómo conectar GitHub a Netlify Tutorial Unicosta CUC"><figcaption></figcaption></figure>

Luego de completar el formulario existirán dos preguntas: ¿Quiere construir un nuevo proyecto usando IA? Lo que implicaría que se generaría desde cero un nuevo repositorio, sin embargo lo que queremos es aprender a conectar un proyecto existente, trabajado anteriormente en la clase, con la plataforma Netlify y aprender a *desplegar* el mismo.

Por lo que la opción que debe tomar en la siguiente imagen es: **Import a Git repository**

<figure><img src="/files/GrZOUzeCI9A4KeDqL9h4" alt=""><figcaption></figcaption></figure>

Como se explicó en clases [Git es un Sistema de Control de Versiones](https://kelly-hecate-villa.gitbook.io/github-profile-readme-cuc/), y se puede usar en distintas herramientas que son Nubes o Clouds en dondes gestionar y guardar los proyectos que son basados en este sistema, por lo que GitHub no es la única nube que existe, también existen, GitLab, Bitbucket, entre otros... Cada herramientas sirve para lo mismo, pero para distinta necesidad o de distinta casa de software.

<figure><img src="/files/0UU7GtI5iYz5UuFnP7gZ" alt=""><figcaption></figcaption></figure>

Autoriza a Netlify para acceder a tus repositorios, una vez se otorgue el permiso, se crea la integración tipo webhook:

* GitHub notifica cambios
* Netlify ejecuta deploy automático

Es decir que Netlify siempre está escuchando: Un webhook esun método para que una aplicación proporcione a otras aplicaciones información en tiempo real mediante el envío automático de una solicitud HTTP POST cuando ocurre un evento específico.A diferencia de las API, que requieren sondeo para obtener datos, los webhooks envían datos de forma proactiva, actuando como "devoluciones de llamada" automatizadas para optimizar los flujos de trabajo y mejorar la eficiencia.

***

## ⚙️ Cómo configurar el build (importante)

Depende del tipo de proyecto:

### 🔹 Proyecto estático (HTML puro)

* Build command: *`(vacío)`*
* Publish directory: `/` o `.`

### 🔹 React / Vue / Angular

Ejemplo (React):

* Build command:

```
npm run build
```

* Publish directory:

```
build
```

💡 Netlify detecta automáticamente si tienes `package.json`

***

## 🚀 Y listo, hacemos deploy

Haz clic en:\
👉 **Deploy site**

Netlify lo que hará es más o menos esto:

1. Clonar repo
2. Instalar dependencias (si tiene un framework o un package.json=
3. Ejecutar build
4. Y ¡Publicar! Este paso te dará algo como:

```
https://random-name.netlify.app
```

Luego puedes cambiarlo. Evidentemente.

Pero bueno, lo importante de la clase para usar Netlify es lograr usar el deploy atomático, lo que usualmente es manual en proyectos profesionales o ya hace parte del flujo de la compañía con un [tech stack](https://www.meltstudio.co/faqs/how-to-choose-scalable-fast-and-low-cost-tech-stack-startup) bastante estable y/ robusto, lo que para efectos de las clases no tenemos.

Entonces, cada vez que haces:

```
git push origin main
```

Netlify: <mark style="color:yellow;">detecta el cambio y vuelve a hacer deploy.</mark> Esto es el concepto llamado CI/CD (Integración Continua/Despliegue Continuo) es una metodología de desarrollo de software que automatiza las fases de prueba, integración y entrega de código.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kelly-hecate-villa.gitbook.io/netlify-workshop-cuc/preparing-your-repo-and-account.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.