Diccionari.cat
Optimot, consultes lingüístiques

caHome jekyll-install-part3

Com crear un lloc web econòmicament per menys de 6€ amb Github i Jekyll - Part3

Índex: Part1 / Part2 / Part3 / Part4 / Part5

Part3 - Estructura de fitxers

Jekyll és un motor de transformació de text. Bàsicament, l’alimentem d’un text escrit en markdown, txt o html i mitjançant un procés intern et retorna un web estàtic. És a base d’editar unes plantilles (o layouts) internes que podem canviar l’interfície o distribució de la pàgina o decidir si volem un web o un blog. Al web de jekyllrb hi trobarem molta informació sobre com funciona o quina estructura segueix.
Per si algú vol llegir la informació de primera mà (en anglès), el contingut que conté aquest post prové d’aquí.

Agafant com a referència aquest blog, l’estructura simplificada és la següent:

.
├── _config.yml
├── _images
|   ├── test1.png
|   └── test2.jpg
├── _includes
|   ├── footer.html
|   ├── header.html
|   └── sidebar.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   ├── 2016-03-25-HD_tacho_Part1.md
|   ├── 2016-04-01-HD_tacho_Part2.md
|   └── ...
├── _public
|   └── hyde.css
├── _site
├── blog1.xml
├── README.md
├── 404.html
└── index.html

_config.yml: Aquest fitxer pot contenir informació de configuració o variables globals.
_images: Directori on guardar les imatges del teu blog o web.
_includes: Fitxers que poden ser mesclats amb les plantilles (o layouts) o posts per simplificar el codi. Per exemple, per afegir comentaris a cada entrada del blog s’han d’afegir unes línies de codi determinades. Si es crea un fitxer amb aquestes línies i es guarda dins d’aquest directori, només farà falta cridar aquest fitxer al final de cada post.
_layouts: Dins d’aquest directori es guarden les plantilles que formaran cadascuna de les parts del web o del blog. Les plantilles són escollides al començament de cada post o pàgina a la part superior (YAML Front Matter).
_posts: La part dinàmica del teu web estàtic. Cada vegada que s’afegeixi un fitxer en aquest directori, Jekyll reconstruirà tot el web de nou. El nom de cada fitxer ha de seguir un format específic: Any-Mes-Dia-títol.MARKUP (Per exemple:2016-07-24-Github_install3.md). L’URL del post (permalink) es pot especificar a la part superior, però la data ve determinada pel nom del fitxer.
_public: Dins d’aquest directori es pot posar els fitxers d’estil tals com *.css.
_site: en aquest directori és on el web estàtic es genera per defecte quan Jekyll finalitza el seu procés.
blog1.xml: Fitxer encarregat de proporcionar les noves publicacions als agregadors feed.
README.md: Sol ser el primer fitxer que es publica quan es crea un repositori a Github. Pot incloure una descripció del lloc web o del blog. No és ni molt menys necessari.
404.html: Per si es vol tenir un fitxer 404 personalitzat.
index.html: Pàgina principal del web.

Per entrendre com funciona Jekyll intèrnament, intentaré fer un diagrama que expliqui els pasos que va fent per arribar a donar el lloc web final:

momex.cat --> index.html (comença a construir pel default)
   default.html -->head.html (amb tots els meta, title info, css, js, icons, ...)
                -->sidebar.html (barra lateral amb la seva configuració)
                --> { { content } } --> resta de l'índex --> list.html (generarà la llista de posts)

Un cop ja coneixem l’estructura bàsica d’un web basat en github-pages / Jekyll, ja ho tenim més o menys tot llest per començar a crear i editar el nostre web / blog de manera local. En el següent post, explicarem com crear un repositori per poder pujar el web a Github.
Seguir Part4

Índex: Part1 / Part2 / Part3 / Part4 / Part5

Instal·lar jekyll. Instal·lar github-pages. Com vaig moure la meva pàgina web el meu web a github? Blogs amb github jekyll. Blog gratuït
keywords: Jekyll, github, github-pages, web, estàtic, instal·lació, Part3