Ways to deploy a Static and Jurassic Web Site (I)
Tags: vue, github, s3, beginners
Published: 2022-09-28 08:08:22


Vamos a ver cómo desplegar un sitio web estático en Vue.js en GitHub

Obviamente hay muchas alternativas: desde desplegarlo en #AWS #S3 como un sitio web estático, con en #GitHub pages y que quede versionado, o en plataformas como #Heroku que ofrecen capa gratuita, o en servicios de #AWS como #AWS Amplify o #App Runner

Veamos algunas de estas alternativas, comenzando por las más básicas: el sitio web estático en S3, y las GitHub Pages


## El Sitio Web (Local)

El sitio web que tomaremos de ejemplo, es un sitio de cinco pantallas con imágenes de Dinosaurios: es el "Jurassic Site", un sitio estático muy sencillo armado con HTML, Javascript, CSS y Vue.js para enseñar de forma didáctica los fundamentos de la programación y el desarrollo web... Es un sitio armado con fines didácticos, no van a encontrar información muy científica ni palentológicamente correcta sobre los dinosaurios :)
   
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/golqcbge7wernnofafxk.png)

Además de ser un sitio con fines educativos, las imágenes fueron tomadas de www.flaticon.com y de los links de distribución de imágenes señaladas en el archivo CREDITS.md del repositorio Github

## El Repo en GitHub

Availtable on:
https://github.com/Fundamentos-de-Informatica-Python/jurassic-site

There is a front, and a backend in flask, and still iterating on it...

## Opcion I: GitHub Pages

Veamos como sería con GitHub Pages: Ya tenemos el repo en GitHub, entonces... **settings **> **pages**: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dv0lzmtc35xe7q2ib0no.png)

Y después de unos segundos, nos indica que está disponible

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jwyajkjd5yi5wib1yld3.png)

Con la URL:
https://fundamentos-de-informatica-python.github.io/jurassic-site/

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vzvkejl042kbjzendgu1.png)

Lo que tiene de bueno esta variante, es que un **push a master** actualiza el site. Además, es gratuita y eventualmente se le podría configurar un dominio custom

## Opcion II: AWS S3

Para desplegar un sitio en un bucket de S3, es simplemente subir los archivos al bucket, manteniendo la estructura, convirtiendo al sitio en un bucket de S# y agregando una política publcia:

Para subir al bucket desde la CLI podemos ejecutar:

```
aws configure

aws s3 cp jurassic-front s3://jurassic-site/ --recursive  --exclude ".vscode"

```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hci1o0ypbc4umlhs8gpk.png)

y el bucket queda poblado:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1tpi66ibneadd98bxgnq.png)

Sitio web:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t609ufqreee30czgwdp0.png)
Que nos retorna:

http://jurassic-site.s3-website-us-west-2.amazonaws.com/jurasssic-site-01-trex.html

Nos queda habilitar a la Política públcia:

`{
    "Version": "2012-10-17",
    "Id": "PolicyMixJurassic",
    "Statement": [
        {
            "Sid": "PolicyMixJurassicPolicy",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::jurassic-site/*"
        }
    ]
}`




![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fovu1lm9s2vhyws5aqr.png)

Y obtenemos al sitio estático:

http://jurassic-site.s3-website-us-west-2.amazonaws.com/jurasssic-site-01-trex.html

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/txcrf6unk2mi0zba2hoc.png)


## Update del Sitio web en S3:

El inconveniente, es que no lo tenemos integrado al GitHub, y para subir los cambios por CLI, en principio subiría todo el site completo... obviamente muy ineficiente

# Conclusión:

En principio, por ahora solo exploramos dos formas de publicar un sitio estático: con GitHub pages, y con S3, en un siguiente post seguiremos incorporando variantes que harán la integración continua del sitio mucho más llevadera y alineada con las buenas prácticas de desarrollo.

Nos vemos en la próxima!
PAblo


-------------------------

Resources

- Images from Pexels and flaticon