Web jihočeských Pirátů

https://startbootstrap.com/template-overviews/one-page-wonder/

Web Pirátů v Jihočeském kraji.

Pro psaní článků je třeba umět markdown. Pro zbylé úpravy html a css framework Foundation 6. Takže je třeba seznámit se alespoň se základy gitu.

Jak přispívat?

Používáme technologii Jekyll, která tvoří web ze statických šablonovaných (Liquid) stránek. Díky tomu je vše velmi jednoduché:

články jsou markdown soubory v adresaři _posts
profily lidí z týmu jsou markdown soubory v adresaři _pepople
stránky jsou klasické html soubory (mohou být i markdown)

Lokální test

V adresaři s repozitářem spustíme příkaz: bundle exec jekyll serve --incremental --baseurl '' což spustí server s webem a my si ho můžeme prohlédnout.

Správný commit

Pro upload se používá git. Ten rozděluje "uploady" na commity.

Správný commit vždy:

zachová funkčnost
dodává 1 funcionalitu (např. nové menu)
obsahuje popis z kterého je zřejmé, co mění (např.: Rewrite main menu from Foundation 5 to Foundation 6)

Debug cache

Stránku vždy vyzkoušíme lokálně (tím předejdeme chybám jako špatné cesty)
Pokud by stránka lokálně nefungovala dobře, tak smažte _site a zkuste to znovu
Po nahrání na web stránku vyzkoušíme v anonymním okně prohlížeče
Zkusíme dát ctrl+f5
Správná kompilace i tak může trvat např. 5 minut
Poslední možností je zaslat prázdný commit, který by měl vynutit přegenerování stránky:
```
git commit -m 'rebuild pages' --allow-empty  
git push
```

Adresařova struktura

Základní schéma:

├── _config.yml       - konfigurační soubor
├── _data             - yaml soubory nahrazující DB
├── _includes         - html snippety (hlavička, patička, ...)
│   ├── footer.html   -- patička stránky
│   ├── header.html   -- hlavička stránky
│   └── head.html     -- meta hlavička stránky
├── _layouts          - kompletní šablony stránek
├── _people           - vlastní kolekce obsahující stránky jednotlivých osob
│   ├── osoba.md    
│   └── ...
├── _posts            - příspěvky pro blog v markdownu
├── _sass             - sass styly (konvertované do css)
├── _site             - vygenerovaná stránka
├── assets            - přílohy (obrázky, pdf etc.)
│   └── img           
├── blog              - složka blog / aktuality
│   └── index.html    
├── css               - styly
│   └── main.scss     -- hlavní styl
├── kontakt           
│   └── index.html    
├── o-nas          
│   └── index.html    
├── program
│   └── index.html    
├── transparence
│   └── index.html
├── zapoj-se
│   └── index.html       
└── index.html        - úvodní stránka

Pokročilé

Výkon

Základním nástrojem pro měření výkonu kompilace: jekyll build --profile

TODO:

dopsat skript pro kontrolu velikosti obrázků
lépe sladit javascript
otestovat provoz na vlastním serveru

Jekyll

  <ul>
  {% for category in site.categories %}
      <li>{{ category[0] }}</li>
  {% endfor %}
  </ul>

Použité technologie

CSS / JS frontend Foundation 6, dokumentace
CSS template
integrace soc. sití
- Integrace FB
- Ladění FB
Disqus a Google analytics, Twitter light share
Responsibilita
Font pro loga: M+1p Heavy, vel. 72.

Instalace Jekyll na čistou Fedora 23

sudo dnf install gem rubygems-devel.noarch gcc ruby-devel
dnf install rpm-build
sudo gem install jekyll  jekyll-paginate

josef-spak/jihocesky.pirati.cz