Échafaudage Jekyll pour démarrer de nouveaux sites Web. https://marcanuy.github.io/jekyll-skeleton/
Table des matières
Il s'agit d'un site Jekyll de base créé avec jekyll new --blank
(sans thèmes ni exemples de publications) pour servir de point de départ à tout site Web.
Son but est de démarrer rapidement de nouveaux sites Web en clonant ce dépôt et en le personnalisant selon vos besoins, en ayant déjà toutes les fonctionnalités que j'ajoutais et configurais à chaque fois que je créais une nouvelle instance Jekyll.
La démo en direct a l'air si " minimaliste " car elle n'utilise aucun thème et son seul objectif est de montrer la conception de la navigation du site Web et comment ajouter des articles/catégories.
Sa structure utilise la conception décrite dans les articles Comment ajouter Bootstrap 4 à Jekyll de la bonne manière, Jekyll multilingue sans plugins et Comment implémenter le fil d'Ariane sur un site Jekyll avec des catégories imbriquées appliqués sur une instance Jekyll vierge avec les suggestions fournies par les plugins ci-dessous.
Clonez simplement ce dépôt et commencez à créer le vôtre.
git clone [email protected]:marcanuy/jekyll-skeleton.git
Génère automatiquement à chaque build jekyll :
/sitemap.xml
/feed.xml
. SASS et personnalisation facile des variables Bootstrap 4 dans /assets/main.scss
et /_sass/_variables.scss
.
Ajoute automatiquement des balises de métadonnées pour les moteurs de recherche et les réseaux sociaux
Titre de la page, avec titre ou description du site en annexe
<head>
<title>...</title>
</head>
Description des pages
<head>
<meta name="description" content="..."/>
</head>
URL canonique
<link rel="canonical" href="..."/>
URL suivantes et précédentes sur les pages paginées
Site JSON-LD et métadonnées de publication pour une indexation plus riche
<meta property="fb:app_id" content="1822851531277021"/>
<script type="application/ld+json">
{"@context": "http://schema.org",
"@type": "WebPage",
"headline": "...",
"description": "...",
"url": "..."}</script>
Titre, description, titre du site et URL d'Open Graph (pour Facebook, LinkedIn, etc.)
<meta property="og:title" content="..."/>
<meta name="description" content="..."/>
<meta property="og:description" content="..."/>
<meta property="og:url" content="..."/>
<meta property="og:site_name" content="..."/>
<meta property="og:type" content="..."/>
<meta property="article:published_time" content="..."/>
<meta property="fb:app_id" content="..."/>
Métadonnées de la carte récapitulative Twitter
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="..."/>
<meta name="twitter:creator" content="..."/>
Multilingue
Menu de navigation linguistique pour chaque page vers toutes les autres versions de traduction
<a hreflang="es" href="http://example.com/es/foobar" />
<a hreflang="de" href="http://example.com/de/foobar" />
<a hreflang="en" href="http://example.com/en/foobar" />
Éléments de lien alternatifs dans la section head
du HTML
<link rel="alternate" hreflang="es" href="http://example.com/es" />
<link rel="alternate" hreflang="de" href="http://example.com/de" />
<link rel="alternate" hreflang="en" href="http://example.com/en" />
Redirige du sous-dossier de langue par défaut vers la page d'accueil du site ( /en
-> /
)
Fil d'Ariane pour les pages et les articles
<!-- url: /jekyll-skeleton/en/example-post -->
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/jekyll-skeleton/"><i class="fa fa-home" aria-hidden="true"></i></a></li>
<li class="breadcrumb-item ">
<a href="/jekyll-skeleton/en">en</a>
</li>
<li class="breadcrumb-item active">
Example Post
</li>
</ol>
jekyll-skeleton a été construit en gardant à l'esprit les principes suivants :
jekyll-seo-tag
.git clone https://github.com/marcanuy/jekyll-skeleton
cd jekyll-seleton
make install
make serve
Ajoutez la langue à _config.yml
:
defaults:
#languages
-
scope:
path: ""
values:
lang: "en"
layout: default
-
scope:
path: "es"
values:
lang: "es"
Son nom en _data/locales.yml
et un équivalent à chaque page dans la langue dans /_data/map.yml
:
-
en: index.html
es: es/index.html
-
en: about.html
es: es/acerca.html
Ajoutez une publication dans chaque langue située dans le sous-répertoire de langue : /en
, es
, etc.
Les propriétés suivantes dans les articles préliminaires sont utilisées :
---
title: # jekyll-seo-tag - The title of the post, page, or document
description: # jekyll-seo-tag - A short description of the page's content
image: # jekyll-seo-tag - URL to an image associated with the post, page, or document (e.g., /assets/page-pic.jpg)
author: # jekyll-seo-tag - Page-, post-, or document-specific author information (see below)
lang: # jekyll-seo-tag - Page-, post-, or document-specific language information
---
Jekyll-skeleton utilise les plugins suivants :
Si vous souhaitez héberger un site dérivé de ce dépôt dans Github, vous pouvez suivre ce guide : Déploiement automatisé des sites Web Jekyll sur les pages Github avec un Git Push To Github .
$ faire construire rm -fr _site/ rm -fr actifs/vendeur/ #from fil rm -fr actifs/polices #fontawesome dépendance rm -fr .sass_cache bundle install --path fournisseur/bundler Attention : la version en cours d'exécution de Bundler (1.13.6) est antérieure à la version qui a créé le fichier de verrouillage (1.15.0). Nous vous suggérons de mettre à niveau vers la dernière version de Bundler en exécutant « gem install bundler ». Utilisation de concurrent-ruby 1.0.5 Utilisation d'i18n 0.8.1 Utilisation du minitest 5.10.2 Utilisation de thread_safe 0.3.6 Utilisation de public_suffix 2.0.5 Utiliser le colorateur 1.1.0 Utiliser la couleur 1.2 Utilisation de ffi 1.9.18 Utilisation de la version 2.6.0 étendue transmissible Utiliser un mercenaire 0.3.6 Utilisation de mini_portile2 2.1.0 Utiliser le parallèle 1.11.2 Utiliser crier 2.0.7 Utiliser sass 3.4.24 Utilisation de rb-fsevent 0.9.8 Utiliser Kramdown 1.13.2 Utiliser du liquide 3.0.6 Utiliser rouge 1.11.1 Utilisation de safe_yaml 1.0.4 Utilisation du bundler 1.13.6 Utiliser tzinfo 1.2.3 Utilisation de l'adressable 2.5.1 Utiliser Ethon 0.10.1 Utilisation de rb-inotify 0.9.8 Utilisation de pathutil 0.14.0 Utiliser nokogiri 1.7.2 Utilisation de jekyll-sass-converter 1.5.0 Utilisation d'activesupport 5.1.1 Utiliser Typhée 0.8.0 Utiliser l'écoute 3.0.8 Utilisation de jekyll-toc 0.2.1 Utiliser HTML-proofer 3.7.2 Utiliser Jekyll-watch 1.5.0 Utiliser Jekyll 3.4.3 Utiliser Jekyll-feed 0.9.2 Utilisation de jekyll-redirect-from 0.12.1 Utiliser jekyll-seo-tag 2.2.3 Utilisation de jekyll-sitemap 1.1.1 Pack complet ! 7 dépendances Gemfile, 38 gemmes maintenant installées. Les gemmes groupées sont installées dans ./vendor/bundler. installation de fil fil installer v0.24.5 [1/4] Résolution des packages... succès Déjà à jour. Fait en 0,38s. mkdir -p actifs/fournisseur/ cp node_modules/font-awesome/css/font-awesome.min.css actifs/vendor/ cp -r node_modules/font-awesome/fonts actifs cp node_modules/jquery/dist/jquery.min.js actifs/vendor/ cp node_modules/tether/dist/js/tether.min.js actifs/vendor/ cp node_modules/bootstrap/dist/js/bootstrap.min.js actifs/vendor/ bundle exécutable jekyll build Fichier de configuration : /tmp/jekyll-skeleton/_config.yml Source : /tmp/jekyll-squelette Destination : /tmp/jekyll-skeleton/_site Construction incrémentielle : désactivée. Activer avec --incremental Générateur... réalisé en 5,474 secondes. Régénération automatique : désactivée. Utilisez --watch pour activer. $ arbre -L 3 _site/ _site/ ├── atouts │ ├── polices │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ ├── main.css │ └── vendeur │ ├── bootstrap.min.js │ ├── font-awesome.min.css │ ├── jquery.min.js │ └── tether.min.js ├── de │ ├── beispiel-post.html │ ├── index.html │ └── sous-catégorie1 │ ├── index.html │ └── post-in-unterkategorie.html ├── déployer_key.enc ├── fr │ ├── exemple-post.html │ ├── index.html │ └── sous-catégorie1 │ ├── index.html │ └── post-dans-sous-répertoire.html ├── es │ ├── index.html │ ├── post-exemple.html │ └── sous-catégorie1 │ ├── index.html │ └── post-fr-sous-répertoire.html ├── flux.xml ├── index.html ├── LICENCE ├── package.json ├── LISEZMOI.md ├── robots.txt ├── plan du site.xml └── fil.lock 9 répertoires, 32 fichiers $ faire un chèque bundle exécutif Jekyll Doctor Fichier de configuration : /tmp/jekyll-skeleton/_config.yml Les résultats de vos tests sont arrivés. Tout semble bien. bundle exec htmlproofer --check-html --http-statut-ignorer 999 --domaines-internes marcanuy.github.io,localhost:4000 --assume-extension _site Exécution de ["ScriptCheck", "LinkCheck", "HtmlCheck", "ImageCheck"] sur ["_site"] sur *.html... Vérification de 14 liens externes... A couru sur 13 fichiers ! HTML-Proofer s'est terminé avec succès.
N'hésitez pas à ouvrir des problèmes et/ou à contribuer !