|
1 | | -# hablemospython.dev 🐍 |
| 1 | +# hablemospython.dev |
2 | 2 |
|
3 | | -Sitio web de introducción a la comunidad "Python en Español". Encontrarás |
4 | | -consejos y recursos de nuestras comunidades en Telegram, y Discord. |
| 3 | +Este es el código del sitio web de la comunidad "Python en Español". Ahí |
| 4 | +encontrarás consejos para quienes empiezan, cursos y libros recomendados, |
| 5 | +preguntas frecuentes, las normas de la comunidad y enlaces a nuestros grupos en |
| 6 | +Discord y Telegram, entre otras cosas. |
5 | 7 |
|
6 | | -## Implementación |
| 8 | +## Cómo está hecho |
7 | 9 |
|
8 | | -El sitio está construido con [Astro](https://astro.build/) y |
9 | | -[Tailwind CSS](https://tailwindcss.com/), a partir de la plantilla |
10 | | -[Astroplate](https://github.com/zeon-studio/astroplate). Es un sitio |
11 | | -estático: no hay backend, todo el contenido vive como archivos Markdown/MDX |
12 | | -dentro de `src/content/`. |
| 10 | +El sitio usa [Astro](https://astro.build/) y [Tailwind CSS](https://tailwindcss.com/), |
| 11 | +y parte de la plantilla [Astroplate](https://github.com/zeon-studio/astroplate). |
| 12 | +Es un sitio estático: no hay backend ni base de datos. Todo el contenido son |
| 13 | +archivos Markdown o MDX dentro de `src/content/`. |
13 | 14 |
|
14 | | -### Estructura principal |
| 15 | +### Dónde está cada cosa |
15 | 16 |
|
16 | | -- `src/content/pages/` — las páginas del sitio (Principiantes, FAQ, Código de |
17 | | - conducta, etc.), servidas en `/<slug>` mediante `src/pages/[regular].astro`. |
18 | | -- `src/content/blog/` — el blog y los episodios del podcast *Bit a bit* |
19 | | - (diferenciados por la categoría `podcast`), servidos en `/blog/<slug>`. |
20 | | -- `src/content/authors/`, `src/content/homepage/` — autores y el contenido |
| 17 | +- `src/content/pages/`: las páginas del sitio (Principiantes, FAQ, Código de |
| 18 | + conducta y demás). Cada archivo se publica en `/<nombre>/` gracias a |
| 19 | + `src/pages/[regular].astro`. |
| 20 | +- `src/content/blog/`: el blog y los episodios del podcast *Bit a bit*. Los |
| 21 | + episodios se distinguen por la categoría `podcast` y se publican en |
| 22 | + `/blog/<nombre>/`. |
| 23 | +- `src/content/authors/` y `src/content/homepage/`: los autores y el contenido |
21 | 24 | de la portada. |
22 | | -- `src/pages/` — rutas de Astro que no son puramente Markdown (portada, |
23 | | - `/otras-comunidades`, listados de blog/categorías/tags/autores, etc.). |
24 | | -- `src/config/` — configuración del sitio: `config.json` (metadatos, SEO), |
25 | | - `menu.json` (navegación), `social.json` (redes sociales), y estilos/tema en |
26 | | - `src/styles/theme.css`. |
27 | | -- `src/lib/data/communities.ts` — el listado de comunidades (Discord, |
28 | | - Telegram, WhatsApp) que se muestra en `/otras-comunidades`. |
29 | | - |
30 | | -### ¿Cómo contribuir? |
31 | | - |
32 | | -- Los cambios a las páginas existentes van directamente en los archivos de |
| 25 | +- `src/pages/`: las rutas que no son solo Markdown, como la portada, |
| 26 | + `/otras-comunidades/`, los listados del blog, las categorías, los tags y los |
| 27 | + autores. Aquí también está `search.json.ts`, que genera el índice del |
| 28 | + buscador. |
| 29 | +- `src/config/`: la configuración del sitio. `config.json` tiene los datos |
| 30 | + generales, `menu.json` el menú y `social.json` las redes sociales. Los |
| 31 | + colores y las fuentes están en `src/styles/theme.css`. |
| 32 | +- `src/lib/data/communities.ts`: la lista de comunidades de Discord, Telegram y |
| 33 | + WhatsApp que se muestra en `/otras-comunidades/`. |
| 34 | +- `astro.config.mjs`: además de la configuración de Astro, aquí están las |
| 35 | + redirecciones desde las direcciones antiguas del sitio (`/faq.html`, |
| 36 | + `/cursosylibros.html`, etc.). |
| 37 | + |
| 38 | +## Cómo contribuir |
| 39 | + |
| 40 | +No hace falta saber programar para aportar. Estas son las formas más comunes: |
| 41 | + |
| 42 | +- **Corregir o mejorar una página:** edita el archivo correspondiente en |
33 | 43 | `src/content/pages/`. |
34 | | -- Para agregar una nueva página, crea un nuevo archivo Markdown en |
35 | | - `src/content/pages/` con el frontmatter `title`/`description`/`draft`, y |
36 | | - agrégala a `src/config/menu.json` si debe aparecer en el menú superior o en |
37 | | - el pie de página. |
38 | | -- Para un nuevo artículo del blog o episodio del podcast, agrega un archivo en |
39 | | - `src/content/blog/` (usa `categories: ["podcast"]` para episodios del |
40 | | - podcast). |
41 | | -- Para agregar o modificar comunidades, edita |
42 | | - `src/lib/data/communities.ts`. |
| 44 | +- **Agregar una página nueva:** crea un archivo Markdown en |
| 45 | + `src/content/pages/` con los campos `title`, `description` y `draft` al |
| 46 | + inicio. Si quieres que aparezca en el menú o en el pie de página, agrégala |
| 47 | + también a `src/config/menu.json`. |
| 48 | +- **Publicar un artículo o un episodio del podcast:** agrega un archivo en |
| 49 | + `src/content/blog/`. Para un episodio usa `categories: ["podcast"]`. |
| 50 | +- **Agregar o actualizar una comunidad:** edita `src/lib/data/communities.ts`. |
43 | 51 |
|
44 | | -## Configuración |
| 52 | +Algunos detalles útiles al escribir contenido: |
45 | 53 |
|
46 | | -### Dependencias |
| 54 | +- Las preguntas de la FAQ usan el componente `<Accordion>`. Cada una tiene un |
| 55 | + enlace propio a partir de su título (por ejemplo `/faq/#cómo-instalo-python`), |
| 56 | + así que puedes compartir una pregunta ya abierta. Si quieres una dirección más |
| 57 | + corta, agrega un `id`: `<Accordion id="uv" title="...">`. |
| 58 | +- Para insertar un video de YouTube usa `<Youtube id="..." title="..." />`. |
| 59 | +- Los enlaces internos terminan en `/` (por ejemplo `/faq/`), igual que las |
| 60 | + direcciones del sitio publicado. |
47 | 61 |
|
48 | | -Este proyecto usa [pnpm](https://pnpm.io/). Instala las dependencias con: |
| 62 | +## Trabajar en local |
49 | 63 |
|
50 | | -```bash |
51 | | -pnpm install |
52 | | -``` |
53 | | - |
54 | | -### Desarrollo |
| 64 | +Necesitas [Node.js](https://nodejs.org/) y [pnpm](https://pnpm.io/). Instala las |
| 65 | +dependencias con: |
55 | 66 |
|
56 | 67 | ```bash |
57 | | -pnpm dev |
| 68 | +pnpm install |
58 | 69 | ``` |
59 | 70 |
|
60 | | -### Generar el sitio |
| 71 | +Estos son los comandos que más vas a usar: |
61 | 72 |
|
62 | 73 | ```bash |
63 | | -pnpm build |
| 74 | +pnpm dev # servidor local con recarga automática |
| 75 | +pnpm build # genera el sitio en dist/ |
| 76 | +pnpm preview # sirve lo que quedó en dist/ para revisarlo antes de publicar |
| 77 | +pnpm check # revisa los tipos de Astro y TypeScript |
| 78 | +pnpm format # da formato al código con Prettier |
64 | 79 | ``` |
65 | 80 |
|
66 | | -El resultado queda en `dist/`. `pnpm preview` sirve ese resultado |
67 | | -localmente para revisarlo antes de publicar. |
| 81 | +## Publicación |
68 | 82 |
|
69 | | -## Despliegue |
| 83 | +El sitio se publica en GitHub Pages con el workflow |
| 84 | +`.github/workflows/deploy-to-github-pages.yml`. Se ejecuta solo cada vez que se |
| 85 | +hace push o se fusiona un cambio en `main`, así que no hay que hacer nada más |
| 86 | +para ver tus cambios en línea. |
70 | 87 |
|
71 | | -El sitio se publica en GitHub Pages mediante el workflow |
72 | | -`.github/workflows/deploy-to-github-pages.yml`, que se ejecuta |
73 | | -automáticamente en cada push a `main`. |
| 88 | +El dominio es `hablemospython.dev`. Para que funcione, en la configuración de |
| 89 | +GitHub Pages el dominio personalizado está puesto en `hablemospython.dev`, el |
| 90 | +registro `www` apunta a GitHub y el apex tiene los cuatro registros A de |
| 91 | +GitHub Pages. GitHub se encarga de redirigir `www` al dominio sin `www` y de |
| 92 | +renovar el certificado HTTPS. |
0 commit comments