Décliner des sites statiques performants avec un GSS (Jekyll, Hugo…)

Fonctionnement

1. Un ordinateur avec réseau et compte github
2. Équipe de 2 minimum
3. Travail collaboratif

Les sites statiques en 2 mots

Pas de charge inutile sur une BDD (Recherche de failles par des crackers), portabilité des contenus, versionning, export multi-formats, modularité du contenu…

Placement produits inside

Jekyll

RUBY - Plein de plugins, compilation SASS native, complet et compatible avec la plupart des services d'édition de contenu…

Hugo

GO - Pas de plugins, très rapide, livereload, moteur de template très puissant…

jamstatic.fr

Objectifs de cet atelier

1 - Simple ?

2 - Utilisable par un rédacteur ?

3 - Plus rapide ?

Let's go static !

Plugins Jekyll disponibles sur Github Pages

  # Plugins
  "jekyll-redirect-from"         => "0.12.1", # Seamlessly specify multiple redirections URLs
  "jekyll-sitemap"               => "0.12.0", # Generate a sitemaps.org compliant sitemap
  "jekyll-feed"                  => "0.8.0",  # Generate an Atom (RSS-like) feed
  "jekyll-gist"                  => "1.4.0",  # Liquid tag for displaying GitHub Gists
  "jekyll-paginate"              => "1.1.0",  # Default pagination generator for Jekyll.
  "jekyll-coffeescript"          => "1.0.1",  # A CoffeeScript converter for Jekyll
  "jekyll-seo-tag"               => "2.1.0",  # Add metadata tags for search engines and social networks
  "jekyll-github-metadata"       => "2.3.1",  # Propagate the site.github namespace
  "jekyll-avatar"                => "0.4.2",  # A Jekyll plugin for rendering GitHub avatars

  # Plugins to match GitHub.com Markdown
  "jemoji"                       => "0.8.0",  # GitHub-flavored Emoji plugin for Jekyll
  "jekyll-mentions"              => "1.2.0",  # @mention support for your Jekyll site
  "jekyll-relative-links"        => "0.3.0",  # Convert relative links to markdown files to their rendered equivalents
  "jekyll-optional-front-matter" => "0.1.2",  # Make front matter optional for Markdown files
  "jekyll-readme-index"          => "0.0.4",  # Render a project's README as the site's index
  "jekyll-default-layout"        => "0.1.4",  # Silently sets default layouts for pages and posts
  "jekyll-titles-from-headings"  => "0.1.4",  # Pull the page title from the first Markdown heading

1. Page d'accueil :: variable titre site et titre page
2. Un menu de pages
3. Liste d'actualités

1. Collection des thèmes des conférences de Paris-Web
2. Gallerie d'images
3. Listes des conférenciers de Paris-Web 2017

Starter Kit

https://github.com/luclemo/jekyll-starter https://github.com/csuarez/hugo-gulp-template

Formulaires

https://posativ.org/isso/
https://staticman.net/
https://formkeep.com/
https://formspree.io/

Recherche

https://github.com/daviddarnes/jekyll-search-js
http://elasticlunr.com/
http://tapirgo.com/

Headless CMS

http://prose.io https://graphcms.com/ https://getcockpit.com/ https://kenticocloud.com/

Performance

https://www.netlify.com/docs/redirects/ https://www.netlify.com/docs/headers-and-basic-auth/

Protection

https://robinmoisson.github.io/staticrypt/ https://www.aerobatic.com/docs/plugins/password-protect/ https://www.netlify.com/docs/headers-and-basic-auth/

Authentification

https://identity.netlify.com/

Ecommerce

https://snipcart.com/ https://cartjs.com/ https://shopify.com/

Let's work together