Jemný, ale praktický úvod do statického webu
LinuxDays 2019

Jekyll

Instalace SSG Jekyll

• https://jekyllrb.com

# apt install jekyll

$ jekyll new test-site
$ cd test-site
$ bundle install --path vendor/bundle
$ bundle exec jekyll serve

$ chromium http://localhost:4000
						

Instalace SSG Jekyll - FIT

• https://jekyllrb.com

$ mkdir ~/gems
$ export GEM_HOME=~/gems PATH=~/gems/bin:$PATH
$ gem install bundler jekyll
$ alias bundler=bundler.ruby2.5 jekyll=jekyll.ruby2.5
$ jekyll new test-site
$ cd test-site
$ bundle install --path vendor/bundle
$ bundle exec jekyll serve

$ chromium http://localhost:4000
						

Instalace šablony

• http://jekyllthemes.org
• http://jekyllthemes.org/themes/freelancer/
• https://github.com/jeromelachaud/freelancer-theme

$ cd ..

$ git clone https://github.com/jeromelachaud/freelancer-theme.git
$ cd freelancer-theme
$ gem install bundler -v '~> 1.12'    # FIT
$ gem listbundler                     # FIT
$ gem uninstall bundler -v ...        # FIT
$ bundle install --path vendor/bundle
$ bundle exec jekyll serve

$ chromium http://localhost:4000
						

Základní konfigurace

$ vim _config.yml
$ bundle exec jekyll serve
						

• Úprava obsahu (jméno, e-mail, ...)
• Úprava barev dle barevných schémat
• Kontrola přístupnosti (barev)

Barvy

• http://paletton.com
• https://material.io/resources/color/
• lighthouse
• https://dequeuniversity.com/rules/axe/3.1/color-contrast

git

GitLab

GitLab Pages

https://gitlab.com

1. Register
2. New Project (blank): username.gitlab.io
3. .gitlab-ci.yml

CI/CD: .gitlab-ci.yml

image: ruby:2.3

variables:
  JEKYLL_ENV: production

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

Nahrání na GitLab

$ git remote remove origin
$ git remote add origin \
      https://gitlab.com/username/username.gitlab.io.git

$ vim .gitlab-ci.yml
$ git add .gitlab-ci.yml
$ git comit -m 'Add GitLab CI'
$ git push origin master

$ chromium https://username.gitlab.io
						

GitLab Pages z Jekyll šablony

1. Smazat původní projekt: Settings/General/Advanced/Remove
2. New Project (template)
   • Pages/Jekyll
   • username.gitlab.io
3. Spustit CI: CI/Pipelines/Run Pipeline

GitLab Pages jako kopie Jekyll tématu

1. Smazat původní projekt: Settings/General/Advanced/Remove
2. New Project (import project)
   • Repo by URL: https://github.com/jeromelachaud/freelancer-theme
   • username.gitlab.io
3. Set up CI/CD: ze šablony Jekyll

Teorie

Architektura webu

• Jednostránkový web
• Blog
• Hierarchický web
• Hypertextový web

Architektura webu

• Jednostránkový web
• Blog
• Hierarchický web
• Hypertextový web

Architektura webu

• Jednostránkový web
• Blog
• Hierarchický web
• Hypertextový web

Architektura webu

• Jednostránkový web
• Blog
• Hierarchický web
• Hypertextový web

UCD - User Centered Design

Návrh zaměřený na uživatele:
Web může být úspěšný, pokud plní potřeby a cíle svých uživatelů

• Jaký je cíl/účel webu?
• Kdo jsou jeho uživatelé?
• Jaké mají potřeby a cíle?
• Jaké mají vlastnosti a chování?

Teorie obrácené pyramidy

Od nejdůležitějšího k detailům

Typické problémy obashu

• Chybné umístění homepage, nekonzistence struktury
• Nevýstižné texty odkazů (ZDE)
• Špatné/nelogické členění obsahu (H1..H6)
• Vizuální strukturování obsahu místo sémantického (B/I)
• Nevhodné použití forátů dat (PDF/DOC, JPG pro screenshoty)

Typické problémy vzhledu

• Nečitelnost vinou špatného kontrastu/velikosti písma
• Banerová slepota (Banner-blindness)
• Fixní vzhled (neresponsivita), fixní velikost písma
• Nestandardní vzhled odkazů
• Animované prvky rušící pozornost

Koncept hierarchického webu

Teorie v praxi

Instalace šablony Skinny Bones

• https://github.com/mmistakes/jekyll-theme-skinny-bones

$ cd ..

$ git clone https://github.com/mmistakes/jekyll-theme-skinny-bones.git
$ cd jekyll-theme-skinny-bones
$ bundle install --path vendor/bundle
$ bundle exec jekyll serve

$ chromium http://localhost:4000
						

Adresářová struktura

_config.yml
_data/       - strukturovaná data pro generování obsahu (yml/json/csv/tsv)
_drafts/     - nepublikovaný dynamický obsah (--drafts)
_includes/   - načítání kusů kódů pomocí {% include file %}
_layouts/    - šablony stránek, obsah je vložen pomocí {{ content }}
_posts/      - dynamický obsah YYYY-MM-DD-title.MARKUP
_sass/       - definice CSS pro preprocesor SASS
_site/       - vygenerovaný výsledek (statický web)
index.html   - každý soubor zde nebo mimo ↑↑↑ s příponou html/md se zpracuje
						

Šablony a vkládání kusů kódu

Adresářová struktura - prakticky