class: center, middle, inverse

# Generadors de webs estàtiques
### Jekyll

.footnote[Mateu Yábar]

---
# Webs dinàmiques
- Obtenir una llista de productes per mostrar-los
- Mostrar artícles d'un blog
- Afegir comentaris
- Loing/logout

---
# Webs dinàmiques
- Programació entorn servidor
  - Ktor (Kotlin)
  - Spring (java/kotlin)
  - php
  - ruby - Ruby on Rails
  - javascript - Node
  - .net (C#)

---
# Webs dinàmiques
- Programar l'accés a dades
- Servidor dinàmic
- Base de dades

---
# Generadors de webs estàtiques
- Intenten donar alguns dels abantatges de les webs diàmiques en una web estàtica
- Programa que donades unes 'plantilles' genera una web estàtica
  - Jekyll
  - Middleman
      - Aquestesta web està feta amb Middleman

---
# Jekyll
- https://jekyllrb.com/
- Compatible amb GitLab i GitHub
- Simple d'us

---
# Instal·lació de Jekyll
- Necessiten tenir Ruby instal·lat
- jekyll és un programa (gema) de ruby

---
# Instal·lació de Jekyll a l'aula

- Preparació
```bash
echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc
```

- Instal·la jekyll
```bash
gem install jekyll bundler
```

https://jekyllrb.com/docs/step-by-step/

---
# Creació d'un projecte Jekyll
- Crea una carpeta pel teu projecte
- Afegeix un fitxer index.html
- Executa

```bash
jekyll s
```

- Obre http://127.0.0.1:4000

---
# Front Matter
Podem definir variables per una pàgina posant el següent a la primera línia de la pàgina (en format YAML)

```
---
title: My awesome title
---
```

---
# Liquid
- Liquid es un llenguatge de plantilles
  - https://jekyllrb.com/docs/liquid/
- Podem recuperar un front matter usant:

```
<h1>{{ page.title }}</h1>
```

---
# Plantilles
- Normalment les diferents pàgines d'una web reutilitzen un contingut comú
- Podem usar plantilles

---
# Plantilles
- Crea el fitxer \_layouts/default.html

```
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>\{{ page.title }}</title>
  </head>
  <body>
    \{{ content }}
  </body>
</html>
```

---
# Plantilles
- Modifica el index.html

```
---
layout: default
title: HELLO
---

<h1>\{{page.title}}</h1>
```

---
# Markdown pages
- Podem crear pàgines usant markdown
- Crea el fitxer about.md

```
---
layout: default
title: About
---
# About page

This page tells you a little bit about me.
```

---
# Includes

- Podem incloure trossos per ser reutilitzats
- crea el següent fitxer \_includes/navigation.html

```
<nav>
  <a href="/">Home</a>
  <a href="/about.html">About</a>
</nav>
```

- i modifica el default layout

```
<body>
{% include navigation.html %}
{{ content }}
</body>
```

---
# Data files
- Podem guardar fitxers amb dades a \_data en format YAML o JSON
- Crea el següent fitxer: \_data/navigation.yml

```
- name: Home
  link: /index.html
- name: About
  link: /about.html
```

- modifica el navigation.html

```
<nav>
  {% for item in site.data.navigation %}
    <a href="{{ item.link }}">
      {{ item.name }}
    </a>
  {% endfor %}
</nav>
```

---
# Collections - config

- definir una collection

\_config.yml

```yaml
collections:
  actors:
    output: true
```

---
# Collections - data
- Pot ser html o md

./\_actors/charles_chaplin.md

```md
---
name: Charles Chaplin
birth_date: 16/04/1889
---
Sir Charles Spencer Chaplin, KBE, conegut com a __Charles Chaplin__,
Charlie Chaplin o encara més com a __Charlot__, va ser actor,
 compositor, productor i director de cinema. És considerat 
 com un dels millors mims i pallassos de la història del cinema.
```

---
# Collections - index

actors.html

```
---
layout: default
title: actors
---
<h1>Actors</h1>

<ul>
  {% for actor in site.actors %}
    <li>
      <h4><a href="{{ actor.url }}">{{ actor.name }}</a></h4>
      <em>{{ actor.birth_date }}</em>
      <p>{{ actor.content | markdownify }}</p>
    </li>
  {% endfor %}
</ul>
```

---
# Collections - layout

\_layouts/actor.html

```
---
layout: default
---
<h1>{{ page.name }}</h1>
<h2>{{ page.birth_date }}</h2>

{{ content }}
```

---
# Collections - config
Default layout

```yml
defaults:
  - scope:
      path: ""
      type: "actors"
    values:
      layout: "actor"
```

---
# Que més
- [Blogging](https://jekyllrb.com/docs/step-by-step/08-blogging/)
- Permet usar Sass (Lleguatge que genera css)
- [Themes](https://jekyllrb.com/docs/themes/)
- ...

---
# Jekyll a Github
- pujar a github
- Anar a settings, pages 
  - Selecciona github actions i la template de jekyll

---
# Jekyll a GitLab
- Afegeig el següent .gitingore

```
/_site
```

- i el següent .gitlab-ci.yml

```yaml
image: ruby:2.3

variables:
  JEKYLL_ENV: production

pages:
  script:
  - bundle install
  - bundle exec jekyll build -d public
  artifacts:
    paths:
    - public
  only:
  - master
```

---
# Creació d'un projecte Jekyll
La següent comanda l'estructura necessaria de carpetes

```bash
jekyll new PATH --blank
```