{"id":15601176,"url":"https://github.com/hacknlove/taller-landing-edge","last_synced_at":"2026-05-16T10:31:14.920Z","repository":{"id":194506213,"uuid":"690891350","full_name":"hacknlove/taller-landing-edge","owner":"hacknlove","description":null,"archived":false,"fork":false,"pushed_at":"2023-11-30T11:26:26.000Z","size":399,"stargazers_count":1,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-08T20:51:11.895Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hacknlove.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-13T05:07:38.000Z","updated_at":"2024-04-25T03:00:33.000Z","dependencies_parsed_at":"2023-09-13T17:58:24.388Z","dependency_job_id":"84ef5d97-f865-493d-bfe6-3e69fe490430","html_url":"https://github.com/hacknlove/taller-landing-edge","commit_stats":{"total_commits":6,"total_committers":3,"mean_commits":2.0,"dds":"0.33333333333333337","last_synced_commit":"b4f7614409d5abec168cf80cbb7d0d100d4119a1"},"previous_names":["hacknlove/taller-landing-edge"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacknlove%2Ftaller-landing-edge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacknlove%2Ftaller-landing-edge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacknlove%2Ftaller-landing-edge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacknlove%2Ftaller-landing-edge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hacknlove","download_url":"https://codeload.github.com/hacknlove/taller-landing-edge/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240810790,"owners_count":19861308,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-03T02:19:17.902Z","updated_at":"2026-05-16T10:31:09.900Z","avatar_url":"https://github.com/hacknlove.png","language":"Astro","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Taller Landing Edge\n\nEn este taller, vamos a aprender a hacer una landing page y a desplegarla en el edge.\n\n## Conceptos iniciales:\n**Landing page:** Es una página web que tiene como objetivo captar la atención de un usuario y llevarlo a realizar una acción determinada. Por ejemplo, suscribirse a un newsletter, descargar un ebook, comprar un producto, etc.\n\nSe llama landing page porque es la página a la que llega un usuario después de hacer click en un enlace, ya sea de un anuncio, un email, un post en redes sociales, etc.\n\n**Edge:** Es un servidor que se encuentra en la red de distribución de contenidos (CDN) más cercano al usuario final. Su objetivo es servir el contenido de la página web de la forma más rápida posible.\n\n## Preparativos:\n\n### Instalar herramientas\n\n1. Instalar [Visual Studio Code](https://code.visualstudio.com/). (Opcional. Puedes usar el IDE que prefieras)\n2. Instalar git\n3. Instalar [Node.js](https://nodejs.org/es/)\n\n### Preparar entorno de desarrollo\n\n#### Clonar este repositorio\n```bash\ngit clone https://github.com/hacknlove/taller-landing-edge.git\n\ncd taller-landing-edge\n```\n\n#### Crear Proyecto con Astro\n\n```bash\nnpm create astro@latest\n\ncd mi-landing\n```\n\nRespuestas:\n\n* **Install Astro:** Yes\n* **Where should we create your new project?** mi-landing\n* **How would you like to start your new project?** Include sample files\n* **Install dependencies?** Yes\n* **Do you plan to write TypeScript?** No\n* **Initialize a new git repository?** No\n\n### Compartir nuestro proyecto\n\nPara que todos podamos ver la web de todos, vamos a ejecutar los entornos de desarrollo en modo host.\n\nPara ello, vamos a modificar el archivo `mi-landing.json` y añadir ` --host` al script `dev`\n\nQuedará así:\n    \n```json\n\"dev\": \"astro dev --host\",\n```\n\n### Lanzar el entorno de desarrollo\n\n```bash\ncd mi-landing\nnpm run dev\n```\n\nDebemos ver algo así:\n\n```\n\u003e landing-edge@0.0.1 dev\n\u003e astro dev --host\n\n  🚀  astro  v3.0.13 started in 98ms\n  \n  ┃ Local    http://localhost:4321/\n  ┃ Network  http://192.168.1.132:4321/\n```\n\nSi abrimos la url `http://localhost:4321/` en nuestro navegador, veremos la web de nuestro proyecto.\n\nCualquiera que se encuentre en la misma red, podrá ver nuestra web en la url `http://\u003cnuestra-ip-local\u003e:4321/` (en el ejemplo anterior, `http://192.168.1.132:4321/`)\n\n## Introducción Astro\n\nEchando un vistazo a los archivos de nuestro proyecto `mi-landing/src`, podemos ver:\n\n* `pages/`\n* `components/`\n* `layouts/`\n\n`pages/` es el único directorio que tiene una función y un significado definido por astro. Las otras carpetas son solo convenciones de nombres que se usan para organizar el resto del código. Cada cual puede organizar su código como quiera.\n\n`pages/` es el directorio donde se encuentran las páginas de nuestra web. Cada archivo `.astro` en este directorio se convierte en una página de nuestra web.\n\nPor lo tanto `pages/index.astro` es la página principal de nuestra web.\n\nSi abrimos el archivo `pages/index.astro` podemos ver que se parece mucho un archivo html normal, con las siguientes diferencias:\n\n* Lleva un encabezado en javascript que define el contexto\n```\n---\nimport Layout from '../layouts/Layout.astro';\nimport Card from '../components/Card.astro';\n---\n```\n\nEn este caso está importando dos componentes.\n\n* El html que sigue, es realmente JSX. Podemos usar componentes, y podemos interpolar expresiones de javascript.\n\n* El tag `style` solo se aplicará a la página o componente en el que se encuentre.\n\nSi abrimos el archivo `layouts/Layout.astro` podemos ver cómo la propiedad title que se pasa en `index.astro` como `\u003cLayout title=\"\"\u003e...` se obtiene usando la variable global `Astro` como `const { title } = Astro.props;` (`const title = Astro.props.title`)\n\nVemos también que el contenido que le pasamos a `Layout` se renderiza en el tag `slot`.\n\nY vemos también que el tag `style` usa la directiva `is:global` para definir que el estilo se aplicará a todos los componentes y páginas.\n\nEn `components/Card.astro` no hay nada nuevo.\n\nDe momento, estas son las únicas cosas que necesitamos saber de Astro para hacer nuestra landing page.\n\n## Hacer nuestra landing page\n\nVamos a hacer una landing page para el paraisu.\n\nTendrá los siguientes elementos:\n1. Background \n2. Descripción\n3. CTA\n\n### Limpiar el proyecto\n\nVamos a borrar todo lo que no necesitamos.\n\nVe a `layouts/Layout.astro` y limpia style.\n\n```html\n\u003cstyle is:global\u003e\n\thtml {\n\t\tbackground: #000;\n\t\tcolor: #fff;\n        margin: 0;\n        padding: 0;\n    }\n    body {\n        margin: 0;\n        padding: 0;\n    }\n\u003c/style\u003e\n```\n\nVe a `pages/index.astro` y deja solo el layout.\n\n```astro\n---\nimport Layout from '../components/Layout.astro';\n---\n\n\u003cLayout title=\"Paraisu to Astro.\"\u003e\n\u003c/Layout\u003e\n```\n\nElimina el archivo `components/Card.astro`\n\n### Background\n\nCrea un archivo `components/Background.astro` y añade el siguiente contenido:\n\n```astro\n\u003cdiv\u003e\n    ES EL BACKGROUND\n\u003c/div\u003e\n```\n\nEdita `pages/index.astro` y añade el componente `Background`:\n\n```astro\n---\nimport Background from '../components/Background.astro';\nimport Layout from '../layouts/Layout.astro';\n---\n\n\u003cLayout title=\"Welcome to Astro.\"\u003e\n    \u003cBackground /\u003e\n\u003c/Layout\u003e\n```\n\nLa idea es añadir un componente \"vacío\", e ir iterando sobre él, viendo los cambios\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhacknlove%2Ftaller-landing-edge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhacknlove%2Ftaller-landing-edge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhacknlove%2Ftaller-landing-edge/lists"}