https://github.com/vruizz22/landing-arvi
Landing page de ARVI construida con Astro y Tailwind CSS; sitio estático rápido y accesible, con CI/CD en GitHub Actions y despliegue en AWS (S3 + CloudFront).
https://github.com/vruizz22/landing-arvi
a11y accessibility amazon-s3-bucket astro astrojs aws ci-cd cloudfront github-actions jamstack landing-page responsive-design seo serverless static-site tailwindcss web-performance
Last synced: 2 months ago
JSON representation
Landing page de ARVI construida con Astro y Tailwind CSS; sitio estático rápido y accesible, con CI/CD en GitHub Actions y despliegue en AWS (S3 + CloudFront).
- Host: GitHub
- URL: https://github.com/vruizz22/landing-arvi
- Owner: vruizz22
- License: gpl-3.0
- Created: 2025-08-26T12:01:01.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2026-03-25T20:04:57.000Z (3 months ago)
- Last Synced: 2026-03-26T19:40:26.852Z (3 months ago)
- Topics: a11y, accessibility, amazon-s3-bucket, astro, astrojs, aws, ci-cd, cloudfront, github-actions, jamstack, landing-page, responsive-design, seo, serverless, static-site, tailwindcss, web-performance
- Language: Astro
- Homepage: https://arvi.cl
- Size: 35.4 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Landing ARVI
Sitio de presentación de ARVI, enfocado en eventos, juegos mecánicos y soluciones eco-sustentables. Construido con Astro 5 y Tailwind CSS 4, con despliegue automatizado a AWS S3 + CloudFront.
- Sitio:
- Rama principal de despliegue: master
- Rama de desarrollo: develop
## Indice
- [Landing ARVI](#landing-arvi)
- [Indice](#indice)
- [Tecnologías](#tecnologías)
- [Estructura del proyecto](#estructura-del-proyecto)
- [Variables de entorno (Instagram)](#variables-de-entorno-instagram)
- [Scripts](#scripts)
- [Estilo de código](#estilo-de-código)
- [Configuración y contenido](#configuración-y-contenido)
- [Despliegue (CI/CD)](#despliegue-cicd)
- [Requisitos](#requisitos)
- [Cómo contribuir](#cómo-contribuir)
- [Roadmap sugerido](#roadmap-sugerido)
- [Licencia](#licencia)
- [Créditos](#créditos)
- [🧞 Commands](#-commands)
## Tecnologías
- Astro 5
- Tailwind CSS 4 (con @tailwindcss/vite)
- Iconos con astro-icon (Iconify)
- ESLint + TypeScript-ESLint + eslint-plugin-astro
- Prettier + plugins (Astro, Tailwind)
- GitHub Actions (OIDC) → AWS S3 + CloudFront
- Sitemap automático (@astrojs/sitemap)
## Estructura del proyecto
```
/
├─ .github/workflows/deploy.yml # CI/CD a AWS S3 + CloudFront (push a master)
├─ public/ # Assets estáticos públicos (favicons, imágenes, robots.txt)
├─ src/
│ ├─ assets/ # Imágenes y estáticos usados por Astro
│ ├─ components/
│ │ ├─ InstagramFeed.astro
│ │ └─ FAQ.astro # Placeholder
│ ├─ layouts/
│ │ └─ Layout.astro # Layout principal
│ ├─ pages/
│ │ └─ index.astro # Home
│ ├─ sections/ # Secciones de la Home
│ └─ styles/ # Estilos globales/utilidades
├─ astro.config.mjs # Site, Tailwind (Vite), Iconify, Sitemap
├─ tailwind.config.mjs
├─ eslint.config.js
├─ package.json
├─ pnpm-lock.yaml
└─ tsconfig.json
```
## Variables de entorno (Instagram)
Para consumir Instagram Graph API en build-time (SSG), configura estas variables:
```
INSTAGRAM_USER_ID=TU_INSTAGRAM_BUSINESS_USER_ID
INSTAGRAM_ACCESS_TOKEN=TU_LONG_LIVED_INSTAGRAM_ACCESS_TOKEN
```
En local:
- Copia `.env.example` a `.env`
- Ejecuta `npm run dev` o `npm run build`
En GitHub Actions:
- Agrega en Repository Secrets:
- `INSTAGRAM_USER_ID`
- `INSTAGRAM_ACCESS_TOKEN`
## Scripts
Desde package.json:
- dev: servidor de desarrollo
- build: build de producción a ./dist
- preview: previsualizar el build localmente
- astro: CLI de Astro
- lint: ejecutar ESLint
- format: aplicar Prettier
- format:check: comprobar formato sin escribir
Ejemplos:
```
pnpm install
pnpm dev
pnpm build
```
Con npm:
```
npm install
npm run dev
npm run build
```
## Estilo de código
- ESLint y Prettier están configurados.
- Recomendado ejecutar:
- pnpm lint
- pnpm format:check
## Configuración y contenido
- Configuración del sitio: astro.config.mjs (site: , integraciones).
- Tailwind: tailwind.config.mjs (tema, colores, fuentes y plugin de animaciones).
- Layout y metadatos: src/layouts/Layout.astro.
- Home: src/pages/index.astro.
- Componentes:
- InstagramFeed.astro: feed dinámico de Instagram en build-time.
- FAQ.astro: definido como placeholder.
- Secciones: src/sections/ contiene los bloques de la Home.
- Imágenes:
- Colócalas en public/ (sirve tal cual) o en src/assets/ (import desde componentes).
- Optimiza peso y usa formatos modernos (WebP/AVIF) cuando sea posible.
## Despliegue (CI/CD)
El despliegue se ejecuta automáticamente al hacer push a la rama master.
- Pipeline: .github/workflows/deploy.yml
- Pasos:
1) Build del sitio (Node 20)
2) Sincronización a S3:
- Assets (cache largo, 1 año)
- HTML (cache corto, 60s)
3) Subida de sitemaps y robots.txt con content-type correcto
4) Invalidación de CloudFront
- Requisitos (Secrets del repositorio):
- AWS_REGION
- S3_BUCKET
- CLOUDFRONT_DISTRIBUTION_ID
- INSTAGRAM_USER_ID
- INSTAGRAM_ACCESS_TOKEN
- Autenticación: OIDC asumiendo el role arn:aws:iam::084414214145:role/GitHubActionsDeployRole
Flujo recomendado:
- Trabajo en develop
- Merge a master para disparar el deploy
## Requisitos
- Node.js 20+
- PNPM (recomendado; el repo incluye pnpm-lock.yaml)
- Alternativa: npm o yarn
## Cómo contribuir
- Branches:
- feature/nombre-corto, fix/bug-descriptivo, chore/config-x, docs/readme, etc.
- Commits (Conventional Commits):
- feat, fix, docs, style, refactor, perf, test, chore, ci
- Ej.: feat(home): agrega carrusel de Instagram
- PRs:
- Un objetivo por PR
- Descripción clara y capturas si aplica
- Pasar lint y format antes de enviar
## Roadmap sugerido
- Completar contenido y comportamiento de FAQ.
- Añadir tests básicos.
- Mejorar accesibilidad (aria, focus en modales, contraste).
- Automatizar optimización de imágenes.
- Unificar y documentar favicons/og-images.
- Añadir pre-commit hooks (lint-staged, husky).
## Licencia
Este proyecto está bajo la licencia **GNU General Public License v3.0**. Consulta el archivo `LICENSE` para más detalles.
## Créditos
- Framework: Astro
- Estilos: Tailwind CSS
- Iconos: Iconify (astro-icon)
## 🧞 Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
| :------------------------ | :----------------------------------------------- |
| `pnpm install` | Installs dependencies |
| `pnpm dev` | Starts local dev server at `localhost:4321` |
| `pnpm build` | Build your production site to `./dist/` |
| `pnpm preview` | Preview your build locally, before deploying |
| `pnpm astro ...` | Run CLI commands like `astro add`, `astro check` |
| `pnpm astro -- --help` | Get help using the Astro CLI |