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