Update README.md with detailed project description, stack, structure, local development instructions, and deployment guidelines
This commit is contained in:
173
README.md
173
README.md
@@ -1,3 +1,172 @@
|
||||
# landing-2pi
|
||||
# 2piDev Landing Page
|
||||
|
||||
Repositorio para el código de la landing page de 2piDev
|
||||
Landing institucional de 2piDev construida con Eleventy y Tailwind CSS. El sitio es completamente estático: se genera en `_site/` y se puede servir desde Nginx, Dokploy o cualquier hosting de archivos estáticos.
|
||||
|
||||
## Stack
|
||||
|
||||
- [Eleventy](https://www.11ty.dev/) para generar HTML estático.
|
||||
- [Tailwind CSS](https://tailwindcss.com/) para estilos utilitarios y componentes.
|
||||
- [Bun](https://bun.sh/) como runtime/package manager.
|
||||
- Nginx en producción vía Docker.
|
||||
|
||||
## Estructura
|
||||
|
||||
```txt
|
||||
.
|
||||
├── src/
|
||||
│ ├── index.njk # Landing principal
|
||||
│ ├── css/
|
||||
│ │ ├── tailwind.css # CSS fuente con directivas Tailwind
|
||||
│ │ └── styles.css # CSS compilado que Eleventy copia al build
|
||||
│ └── images/ # Logos, screenshots, retratos y favicon
|
||||
├── _site/ # Build local generado, ignorado por Git
|
||||
├── .eleventy.js # Configuración de Eleventy
|
||||
├── tailwind.config.js # Configuración de Tailwind
|
||||
├── postcss.config.js # PostCSS + Tailwind + Autoprefixer
|
||||
├── Dockerfile # Build estático + runtime Nginx
|
||||
└── package.json # Scripts y dependencias
|
||||
```
|
||||
|
||||
## Desarrollo Local
|
||||
|
||||
Instalar dependencias:
|
||||
|
||||
```bash
|
||||
bun install
|
||||
```
|
||||
|
||||
Generar el sitio:
|
||||
|
||||
```bash
|
||||
bun run build
|
||||
```
|
||||
|
||||
Levantar servidor de desarrollo:
|
||||
|
||||
```bash
|
||||
bun run dev
|
||||
```
|
||||
|
||||
Por defecto, Eleventy sirve el sitio en `http://localhost:8080/`.
|
||||
|
||||
## Scripts
|
||||
|
||||
```json
|
||||
{
|
||||
"build:css": "tailwindcss -i ./src/css/tailwind.css -o ./src/css/styles.css --minify",
|
||||
"build": "bun run build:css && eleventy",
|
||||
"dev": "bun run build:css && eleventy --serve --watch"
|
||||
}
|
||||
```
|
||||
|
||||
Notas:
|
||||
|
||||
- `src/css/tailwind.css` es el archivo que se edita.
|
||||
- `src/css/styles.css` es generado por Tailwind y se mantiene versionado para que Eleventy pueda copiarlo como asset estático.
|
||||
- `_site/` no se versiona.
|
||||
|
||||
## Deploy con Dokploy
|
||||
|
||||
La forma recomendada para Dokploy es usar el `Dockerfile` incluido. El contenedor:
|
||||
|
||||
1. Instala dependencias con Bun.
|
||||
2. Ejecuta `bun run build`.
|
||||
3. Copia `_site/` a Nginx.
|
||||
4. Sirve la landing desde el puerto `80`.
|
||||
|
||||
En Dokploy:
|
||||
|
||||
- Tipo de deploy: Dockerfile.
|
||||
- Puerto interno: `80`.
|
||||
- No requiere variables de entorno.
|
||||
- No requiere base de datos ni servicios externos.
|
||||
|
||||
Build manual de la imagen:
|
||||
|
||||
```bash
|
||||
docker build -t 2pidev-landing-page .
|
||||
```
|
||||
|
||||
Ejecución local con Docker:
|
||||
|
||||
```bash
|
||||
docker run --rm -p 8080:80 2pidev-landing-page
|
||||
```
|
||||
|
||||
Luego abrir `http://localhost:8080/`.
|
||||
|
||||
## Assets
|
||||
|
||||
Los assets viven en `src/images/` y se copian automáticamente a `_site/images/`.
|
||||
|
||||
Incluye:
|
||||
|
||||
- Logo principal y favicon.
|
||||
- Imágenes generadas/originales para hero, resultados y casos de éxito.
|
||||
- Retratos ficticios generados para testimonios.
|
||||
- Logos SVG de tecnologías: `.NET`, TypeScript, React, PostgreSQL y AWS.
|
||||
|
||||
Para reemplazar una imagen, conservar el mismo nombre de archivo evita cambios en el HTML. Si se cambia el nombre, actualizar la referencia en `src/index.njk`.
|
||||
|
||||
## Contenido Principal
|
||||
|
||||
Toda la landing está en `src/index.njk`. Las secciones actuales son:
|
||||
|
||||
- Header con navegación y CTA.
|
||||
- Hero principal.
|
||||
- Problemas frecuentes de empresas en crecimiento.
|
||||
- Soluciones digitales.
|
||||
- Resultados y métricas.
|
||||
- Método de trabajo.
|
||||
- Stack tecnológico.
|
||||
- Casos de éxito.
|
||||
- Testimonios.
|
||||
- Formulario de contacto.
|
||||
- Footer.
|
||||
|
||||
Algunas listas, como servicios, pasos, tecnologías, casos y testimonios, están definidas como arrays dentro del template para facilitar edición rápida.
|
||||
|
||||
## Convenciones
|
||||
|
||||
- Mantener textos visibles con tildes y ortografía en español.
|
||||
- Mantener assets locales siempre que sea posible para evitar dependencias externas.
|
||||
- Usar SVG para logos e íconos de marca cuando exista una fuente confiable.
|
||||
- Antes de commitear, correr:
|
||||
|
||||
```bash
|
||||
bun run build
|
||||
```
|
||||
|
||||
## Git
|
||||
|
||||
Repositorio remoto:
|
||||
|
||||
```bash
|
||||
git remote -v
|
||||
```
|
||||
|
||||
Debe apuntar a:
|
||||
|
||||
```txt
|
||||
https://git.2pidev.com/jselesan/landing-2pi.git
|
||||
```
|
||||
|
||||
Flujo sugerido:
|
||||
|
||||
```bash
|
||||
git status
|
||||
bun run build
|
||||
git add .
|
||||
git commit -m "Describe el cambio"
|
||||
git push
|
||||
```
|
||||
|
||||
## Mantenimiento
|
||||
|
||||
Si se agregan nuevas tecnologías, sumar el SVG a `src/images/` y actualizar el array `techs` en `src/index.njk`.
|
||||
|
||||
Si se agregan nuevas secciones o componentes visuales, preferir mantenerlos en el mismo template mientras la landing siga siendo simple. Crear layouts/includes de Eleventy solo cuando haya repetición real o más páginas.
|
||||
|
||||
## Licencias y Uso de Imágenes
|
||||
|
||||
Los retratos de testimonios son ficticios y generados para este proyecto. Los logos de tecnologías pertenecen a sus respectivas marcas. Las imágenes de producto/interfaz usadas como visuales de la landing deben mantenerse como assets locales del proyecto para que el deploy sea reproducible.
|
||||
|
||||
Reference in New Issue
Block a user