Skip to content

Commit 3a93b6a

Browse files
brauliodiezbrauliodiez
authored
Merge pull request #789 from Lemoncode/feature/astro
Feature/astro
2 parents 3c660a6 + a7fb749 commit 3a93b6a

326 files changed

Lines changed: 8016 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎04-frameworks/15-astro/01-entorno/readme.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Preparando el entorno
2+
3+
Lo primero instalamos el plugin de Astro en Visual Studio Code.
4+
5+
Esto nos va a ser de ayuda, tenemos syntax highlighting, intellisense...
6+
7+
Por cierto si buscamos Astro en Google no nos sale de primeras, mejor buscar `Astro Framework` o `Astro JS`.
8+
9+
https://astro.build/

‎04-frameworks/15-astro/02-creando-proyecto/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# build output
2+
dist/
3+
# generated types
4+
.astro/
5+
6+
# dependencies
7+
node_modules/
8+
9+
# logs
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
pnpm-debug.log*
14+
15+
16+
# environment variables
17+
.env
18+
.env.production
19+
20+
# macOS-specific files
21+
.DS_Store
22+
23+
# jetbrains setting folder
24+
.idea/

‎04-frameworks/15-astro/02-creando-proyecto/astro.config.mjs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// @ts-check
2+
import { defineConfig } from 'astro/config';
3+
4+
// https://astro.build/config
5+
export default defineConfig({});

‎04-frameworks/15-astro/02-creando-proyecto/package.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "ejemplo",
3+
"type": "module",
4+
"version": "0.0.1",
5+
"scripts": {
6+
"dev": "astro dev",
7+
"start": "astro dev",
8+
"build": "astro check && astro build",
9+
"preview": "astro preview",
10+
"astro": "astro"
11+
},
12+
"dependencies": {
13+
"astro": "^4.16.13",
14+
"@astrojs/check": "^0.9.4",
15+
"typescript": "^5.6.3"
16+
}
17+
}

‎04-frameworks/15-astro/02-creando-proyecto/public/favicon.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎04-frameworks/15-astro/02-creando-proyecto/readme.md‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
# Hola Astro
2+
3+
Vamos a arrancar por crear el proyecto.
4+
5+
Nos vamos a basar en el tutorial oficial de Astro, pero:
6+
7+
- Lo implementaremos usando TypeScript como lenguaje.
8+
- Desplegaremos en una página de Github IO.
9+
10+
## Creando el proyecto
11+
12+
Vamos a crear un proyecto desde cero, para ello usamos la tool de `Astro`:
13+
14+
```bash
15+
npm create astro@latest
16+
```
17+
18+
En la primera pregunta, `Where would you lik to create your new project?`, le decimos damos como nombre de carpeta `ejemplo`.
19+
20+
`Where would you lik to create your new project?`
21+
ejemplo
22+
23+
En cuanto a plantillas, vamos a decirle que partimos de un proyecto desde cero: `Empty Template`.
24+
25+
Vamos a indicarle ahora que SI queremos usar TypeScript
26+
27+
`Would you like to use TypeScript?`
28+
y
29+
30+
Le vamos a decir que quremos usar TypeScript en modo estricto.
31+
32+
`How would you like to start your new project`
33+
Strict
34+
35+
También le indicamos que instale todas las dependencias necesarias.
36+
37+
`Would you like to install dependencies?`
38+
y
39+
40+
Y en este punto nos pregunta si queremos generar repo de git en local, en nuestro caso le decimos que si, pero aquí depende mucho de como tengas tu proyecto organizado.
41+
42+
`Would you like to initialize a git repository?`
43+
y
44+
45+
Vamos ahora a abrir el proyecto desde VSCode y lanzarlo desde el terminal:
46+
47+
```bash
48+
npm run dev
49+
```
50+
51+
Abrimos el navegador y vamos a `http://localhost:4321`
52+
53+
Vamos ahora a hacer una modificación pequeña para ver que todo funciona correctamente.
54+
55+
Vamos a cambiar el texto del `index.astro`:
56+
57+
_./src/pages/index.astro_
58+
59+
```diff
60+
<html lang="en">
61+
<head>
62+
<meta charset="utf-8" />
63+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
64+
<meta name="viewport" content="width=device-width" />
65+
<meta name="generator" content={Astro.generator} />
66+
- <title>Astro</title>
67+
+ <title>Mi Blog de Ejemplo</title>
68+
</head>
69+
<body>
70+
- <h1>Astro</h1>
71+
+ <h1>Mi Blog de Ejemplo</h1>
72+
</body>
73+
</html>
74+
```

‎04-frameworks/15-astro/02-creando-proyecto/src/env.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference path="../.astro/types.d.ts" />

‎04-frameworks/15-astro/02-creando-proyecto/src/pages/index.astro‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
3+
---
4+
5+
<html lang="en">
6+
<head>
7+
<meta charset="utf-8" />
8+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
9+
<meta name="viewport" content="width=device-width" />
10+
<meta name="generator" content={Astro.generator} />
11+
<title>Mi Blog de Ejemplo</title>
12+
</head>
13+
<body>
14+
<h1>Mi blog de Ejemplo</h1>
15+
</body>
16+
</html>

‎04-frameworks/15-astro/02-creando-proyecto/tsconfig.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "astro/tsconfigs/strict"
3+
}

‎04-frameworks/15-astro/03-creando-repo/readme.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Creando un repo en Github
2+
3+
Vamos ahora a enlazar el repo local que hemos creado con uno en Github.
4+
5+
OJO en el repo del Máster Front End no hemos añadido este paso (no hay repo local), para evitar crear un repo dentro de un repo, y también enlazarlo a un repo de una cuenta en concreto.
6+
7+
Así que vamos a crearlo en directo :), podéis seguirme (puede que este paso nos de problemas a más de uno).
8+
9+
Vamos a github, creamo un repo en nuestra cuenta.
10+
11+
Creamos un nuevo repo desde Github, IMPORTANTE:
12+
- Dejalo como público (podría ser privado).
13+
14+
- No le pongas un README (dejalo desmarcado).ñ
15+
16+
- No añadas un `.gitignore` ni una licencia.
17+
18+
Ahora nos vamos a la carpeta de nuestro proyecto, y le indicamos que el repo local que hemos creado tire del repo de Github (cambiamos el Origin).
19+
20+
```bash
21+
git remote add origin <la url a tu repo del clone>
22+
```
23+
24+
Vamos a hacer un add y un commit de los cambios que hemos metido en el proyecto:
25+
26+
```bash
27+
git add .
28+
```
29+
30+
```bash
31+
git commit -m "Title updated"
32+
```
33+
34+
Y ahora vamos a hacer un push de los cambios al repo de Github:
35+
36+
```bash
37+
git push --set-upstream origin main
38+
```
39+
40+
Y ya lo tenemos subido a Github.

0 commit comments

Comments
 (0)