Un CMS complet est rarement nécessaire. Parfois, il vous suffit de créer un site Web léger et statique? mais vous avez juste assez de pages pour que le processus de copie des fichiers de modèle et les modifications de balisage inter-sites deviennent une corvée. Aujourd'hui, je vais vous présenter une solution simple, Jekyll, qui facilitera la création de petits sites Web..
Étape 0: rencontrer Jekyll
Jekyll est un générateur de site statique simple, prenant en charge les blogs..
Jekyll est un générateur de site statique simple, prenant en charge les blogs. C'est ce que dit le site. Mais qu'est-ce que cela signifie exactement? Un générateur de site statique est un programme qui prend un ensemble de fichiers et génère votre site avec eux. Comme vous le verrez, nous pourrons utiliser un ensemble de modèles, créer les fichiers de contenu séparément, puis utiliser Jekyll pour générer notre site. Le? Blog au courant? partie signifie que nous pourrions utiliser cela pour créer un blog ou tout site Web comportant une série d'entrées de type post (comme un portefeuille). Essayons!
Étape 1: Installation de Jekyll
Reportez-vous ici pour plus d'informations sur Ruby Gems.
Nous allons commencer par installer Jekyll; c'est un joyau de rubis, cela devrait donc être assez simple.
gem installer jekyll # utilisez 'sudo' si votre configuration le requiert
Oui, c'est aussi simple que ça. Nous pourrions installer quelques pièces supplémentaires si nous prévoyons une configuration plus complexe. Cependant, comme nous ne le sommes pas, cela fera l'affaire..
Étape 2: Créer notre premier modèle
Chaque fichier ou dossier qui ne commence pas par un trait de soulignement sera copié sur le site généré..
Ensuite, configurons les dossiers pour Jekyll. Créez un dossier, appelé exemple-app pour ce tutoriel; nous allons créer un petit site de portfolio pour, par exemple, un photographe. Jekyll est un excellent exemple de ce qui se démarque: il s'agit d'un petit site qui ne sera pas mis à jour trop souvent, mais est suffisamment grand pour ne pas ouvrir toutes les pages lorsque vous devez modifier le balisage.
À l'intérieur exemple-app, créer un dossier appelé _layouts. Notez le trait de soulignement au début de ce dossier: tout dossier ou fichier commençant par un soulignement ne fera pas partie du site généré par Jekyll. Si elles ont un nom que Jekyll reconnaît (tel que _config.yml ou _layouts), leur contenu sera utilisé dans la génération du site, mais les fichiers eux-mêmes ne seront pas affichés sur le site. Rappelez-vous ceci: chaque fichier ou dossier qui ne commence pas par un trait de soulignement sera copié sur le site généré (qui, soit dit en passant, a la valeur par défaut). _site sous-dossier).
Alors, créons une mise en page. Nous allons commencer par une mise en page générale du site qui inclut tous les? Chrome? pour notre site. Créez un nouveau fichier, appelé default.html à l'intérieur de _layouts dossier (le nom importe peu) et ajoutez-y le code suivant:
% if page.title% page.title | % endif% John Doe, photographe
John Doe Photograghy
contenu
Quelques points à garder à l'esprit?
Tout d’abord, Jekyll utilise le système de gabarit Liquid (par défaut). Cela signifie que tout ce que vous pouvez faire avec Liquid, vous pouvez le faire dans un modèle dans Jekyll. Par exemple, dans le </code> tag, nous utilisons les deux types de balises Liquid: <em>balisage de sortie</em> et <em>balise de balise</em>. Le balisage de sortie peut générer du texte (si la variable référencée existe), contrairement au balisage de balise. Le marquage de sortie est délimité par des doubles accolades, tandis que le marquage des balises est délimité par le duo accolade / signe de pourcentage.</p> <p>La prochaine chose à noter ci-dessus est ce qui est à l’intérieur des balises Liquid: <code>titre de la page</code> et <code>contenu</code>. Ce sont des variables fournies par Jekyll; vous pouvez voir la liste des données de modèle disponibles dans la documentation. Nous pouvons également créer des données de modèle personnalisées, comme nous le verrons bientôt.</p> <p>Enfin, remarquez le CSS vers lequel nous allons créer un lien. <code>css</code> dossier à la racine de votre projet et jetez ce morceau de style dans un <code>style.css</code> fichier:</p> <pre>corps font: 16px / 1.5 verdana, helvetica-neue, helvetica, arial, san-serif; fond: noir; couleur: #ececec; rembourrage: 0; marge: 0; ul margin: 0; rembourrage: 0; a color: #ccc; texte-décoration: aucun; a: hover color: #ececec; texte-décoration: souligné; #main width: 960px; marge: 0 auto; arrière-plan: rgba (255, 255, 255, 0,4); header padding: 0 10px; débordement caché; h1 margin: 0; nav ul, ul.entries list-style-type: none; nav li a float: left; marge: 5px; .content padding: 10px; ul.entries li position: relative; marge: auto 20px; rembourrage: 20px; arrière-plan: #ecec; largeur: 600px; ul.entries img width: 600px; ul.entries li h3 position: absolute; en bas: -18px; à gauche: 17px; taille de police: 2em; ul.entries a color: #ececec; ul.entries a: hover color: #fff; footer font-size: 0.65em; text-align: center; </pre> <p>En outre, créez un <code>img</code> dossier et ajouter une image, nommée <code>bannière.jpg</code>; nous allons l'utiliser bientôt. Toute image fera l'affaire; juste recadrer à <code>960px</code> par <code>300px;</code>.</p> <p>Vous vous demandez peut-être pourquoi nous utilisons le <code>si</code> déclaration ci-dessus si le <code>titre de la page</code> la variable ne s'affichera-t-elle pas si elle existe? Eh bien, si cela existe, je veux inclure la barre verticale après; Une autre façon d’écrire serait la suivante:</p> <pre>page.title % if page.title% | % fin si %</pre> <p>Alors, comment utilisons-nous ce modèle? Eh bien, nous devons créer une page qui utilisera ce modèle. Dans le répertoire racine de notre projet, créez un <code>index.html</code> fichier. Voici le contenu:</p> <pre>--- layout: default --- <section role="banner"> <img src="//accentsconagua.com/img/images_26/building-static-sites-with-jekyll.jpg" /> </section> <section> <p> Bienvenue chez John Doe Photography! S'il vous plaît, consultez mon portefeuille pour voir mon travail. </p> </section></pre> <p>Voici le contenu de notre <code>index.html</code> fichier. Remarquez ce qui se trouve en haut du fichier: Jekyll appelle cet élément avant YAML. Tout fichier (qui ne commence pas par un trait de soulignement) comportant une matière YAML sera généré par Jekyll avant d'être placé dans le fichier. <code>_site</code> dossier (s'il n'a pas de trait de soulignement ni de YFM, il sera simplement copié <code>_site</code>). Dans ce cas, l’avant-propos YAML indique simplement à Jekyll le modèle que nous voulons qu’il utilise..</p> <p>Maintenant, ouvrez un terminal, <code>CD</code> dans le répertoire de votre projet et lancez <code>Jekyll</code>. Vous devriez voir quelque chose comme ça:</p> <pre>AVERTISSEMENT: Impossible de lire la configuration. Utilisation des valeurs par défaut (et des options). Aucun fichier ni répertoire de ce type - /Users/andrew/Desktop/example-app/_config.yml Site en construction: / Users / andrew / Desktop / example-app -> / Users / andrew / Desktop / example-app / _site Site généré avec succès : / Users / andrew / Desktop / example-app -> / Users / andrew / Desktop / example-app / _site</pre> <p>Ignorer l'avertissement; nous y viendrons sous peu. Pour le moment, vous pouvez voir que le site a été construit dans un environnement nouvellement créé. <code>_site</code> annuaire. Si vous ouvrez le <code>_site / index.html</code> déposer dans le navigateur de votre choix, vous devriez voir? un échec. Le problème est que nos chemins (URL et feuille de style) commencent par une barre oblique. Cela signifie que nous ne pouvons pas simplement les voir sous forme de fichiers, nous devons les voir sur un serveur. Bien sûr, vous pouvez aller démarrer W / MAMP, mais pourquoi prendre la peine? Jekyll a un serveur intégré. Alors, cours <code>jekyll --server</code>, et allez à localhost: 4000 pour voir quelque chose comme l’image ci-dessous:</p> <img src="//accentsconagua.com/img/images_26/building-static-sites-with-jekyll.png"> <p>Si l'image ci-dessus ne suffit pas, regardez le code de <code>_site / index.html</code>. Vous verrez que le modèle que nous avons spécifié a été fusionné avec le contenu fourni et-voila! -Nous avons notre page.</p> <p>Je tiens à vous rappeler que c'est la matière avant YAML qui rend cette magie possible; si un fichier ne commence pas par trois tirets, une ou plusieurs lignes de propriétés et une autre ligne de trois tirets, le fichier sera simplement copié dans le fichier. <code>_site</code> dossier, pas de génération.</p> <hr> <h2> Étape 3: Créer un modèle de portefeuille</h2> <p>Maintenant que nous sommes à l'aise avec les bases, créons un portfolio pour notre photographe fictif. Rappelez-vous comment j'ai noté que Jekyll est? Blog conscient ?? Eh bien, nous allons utiliser cette fonctionnalité de prise de conscience de blog à notre avantage: au lieu de posts, nous aurons des entrées de portefeuille.</p> <p>Les messages appartiennent à un dossier, appelé <code>_des postes</code>, alors créez cela maintenant. Le modèle de nom de fichier pour les publications doit également être spécifique: <code>année-mois-jour-titre.ext</code>. Les messages - en fait, n’importe quel fichier de votre site Jekyll - peuvent être en format Markdown ou HTML.</p> <p>Faisons donc quelques articles: rappelez-vous, ce seront en réalité des entrées dans notre portefeuille:</p> <h3><code>_posts / 2010-03-04-bikes.md</code></h3> <pre>--- layout: portfolio_entry image: /img/bikes.jpg titre: Bikes, Black and White --- Les vélos sont utilisés par presque tout le monde au centre-ville d’Amsterdam. Ceux-ci sont enchaînés à un porte-vélos.</pre> <h3><code>_posts / 2010-10-01-wing.md</code></h3> <pre>--- layout: portfolio_entry titre: L'aile et une prière image: /img/wing.jpg --- L'aile du bus aérien que j'ai conduit en Angleterre.</pre> <h3><code>_posts / 2011-06-05-bridge.md</code></h3> <pre>--- layout: portfolio_entry titre: Stone Bridge image: /img/bridge.jpg --- Un vieux pont de pierre à Londres.</pre> <h3><code>_posts / 2011-07-09-road.md</code></h3> <pre>--- layout: portfolio_entry titre: route et bordure image: /img/road.jpg --- Les pistes cyclables ici sont terriblement minces.</pre> <p>Assez simple, hein? Remarquez comment nous créons un champ personnalisé YAML: <code>image</code>. Ceci est l'URL de l'image pour cette entrée. Bien sûr, nous pourrions construire l’entrée entière HTML ici dans ce fichier, mais que faire si nous voulons changer cela? Il faudrait revenir et le changer à chaque entrée. De cette façon, nous pouvons utiliser notre <code>portfolio_entry</code> modèle pour les rendre. À quoi ressemble ce modèle? C'est assez simple aussi:</p> <h3><code>_layouts / portfolio_entry.html</code></h3> <pre>--- layout: default --- <h2>titre de la page</h2> <img src="//accentsconagua.com/img/ page.image " /> contenu </pre> <p>Si vous consultez la page de données de modèle, vous saurez que toute matière avant personnalisée que nous ajoutons sera disponible sous <code>page</code>; alors, ici, nous pouvons accéder <code>page.image</code>. Nous utilisons aussi <code>titre de la page</code> et <code>contenu</code> (tout après la dernière ligne à trois tirets).</p> <p>Je devrais mentionner ici que, alors que le post <code>Titre</code> est censé être disponible sur le <code>poster</code> objet, j'ai seulement pu le faire fonctionner sur le <code>page</code> objet. Tout ce qui fonctionne!</p> <p>En outre, notez que nous avons ce modèle en utilisant notre <code>défaut</code> disposition. Vous pouvez imbriquer des modèles comme ça et rendre votre travail encore plus facile.</p> <p>Cela nous donne nos pages d'entrée (post), mais qu'en est-il de la page principale du portefeuille? Lors de l'écriture de notre navigation dans notre mise en page par défaut, j'ai noté que nous le voulions comme <code>/portefeuille/</code>. Alors, créez un dossier, appelé <code>portefeuille</code> dans le répertoire racine et ouvrez un <code>index.html</code> déposer en son sein.</p> <pre>--- layout: titre par défaut: Portfolio --- <section> <h2>Portefeuille</h2> <p>Découvrez mes images ci-dessous!</p> </section> <ul> % pour post in site.posts% <li> <img src="//accentsconagua.com/img/ post.image " /> <h3> titre de l'article </h3> </li> % endfor% </ul></pre> <p>C'est notre pièce la plus compliquée à ce jour. Rappelez-vous, ce n'est pas un modèle: c'est une? Normale? fichier, mais il peut toujours inclure des balises Liquid. Nous commençons par mettre <code>disposition</code> à <code>défaut</code>, et <code>Titre</code> vers? Portfolio.?</p> <p>Notez que, dans le HTML, nous avons un liquide <code>pour-dans</code> boucle. On récupère tous les posts avec <code>sites.posts</code>; puis, nous passons en boucle sur ces messages avec <code>pour poster sur site.posts</code> / <code>fin</code>. Si vous avez travaillé avec WordPress ou tout autre système de blogage, vous devez être familiarisé avec le concept de <code>boucle</code>. C'est tout ce que c'est! Comme vous pouvez le constater, à l’intérieur, nous pouvons obtenir les propriétés standard, ainsi que tout élément frontal que nous avons défini (comme <code>image</code>).</p> <p>Maintenant si nous courons <code>jekyll --server</code> pour recréer le site et démarrer le serveur, localhost: 4000 / portfolio / devrait afficher ceci:</p> <img src="//accentsconagua.com/img/images_26/building-static-sites-with-jekyll_2.png"> <p>Et voici une page d'entrée:</p> <img src="//accentsconagua.com/img/images_26/building-static-sites-with-jekyll_3.png"> <p>Génial! Vous avez créé un portefeuille. Je suis sûr que vous voyez également comment cela fonctionne pour un blog. Passons maintenant à quelques options de configuration pour Jekyll..</p> <hr> <h2> Étape 4: Écrire un fichier de configuration</h2> <p>Il y a une pléthore d'options pour Jekyll. C'est génial qu'ils aient tous des valeurs par défaut vraiment sensibles, mais si vous voulez les changer, ce n'est pas difficile du tout.</p> <p>Il y a deux façons de définir des options.</p> <ul> <li> Tout d'abord, lorsque vous exécutez le programme sur la ligne de commande, vous pouvez passer des paramètres. Nous avons déjà vu le <code>--serveur</code> paramètre qui démarre un serveur après la génération du site.</li> <li> Une manière différente, et la façon dont nous allons utiliser ici, est dans un fichier de configuration, appelé <code>_config.yml</code>; c'est un fichier YAML, donc chaque ligne est <code>une clé: valeur</code> paire, tout comme dans la matière avant YAML. Jekyll recherchera ce fichier avant de générer le site.</li> </ul> <p>Alors, fais un <code>_config.yml</code> fichier, et regardons quelques-unes des options les plus courantes. </p> <blockquote> <p>Pour une liste complète des options, consultez la documentation de configuration..</p> </blockquote> <ul> <li> <strong><code>auto</code></strong>: Ajouter <code>auto: true</code> Jekyll continuera à fonctionner en surveillant les modifications apportées à votre dossier de projet et en régénérant le site à la volée..</li> <li> <strong><code>la source</code></strong>: Si vos fichiers source se trouvent dans un répertoire différent de celui où vous exécutez Jekyll, vous voudrez définir ce répertoire avec <code>la source</code> propriété.</li> <li> <strong><code>destination</code></strong>: Par défaut, la destination de votre site généré est <code>./_site</code>. Si vous voulez quelque chose de différent, placez-le ici.</li> <li> <strong><code>lien permanent</code></strong>: Le permalien est le chemin d'accès à vos publications. Par défaut, c'est <code>/year/month/day/title.html</code>. Cependant, vous pouvez personnaliser cela si vous le souhaitez. Entre autres, vous pouvez utiliser les variables <code>:année</code>, <code>:mois</code>, <code>:journée</code>, <code>:Titre</code>, et <code>: catégories</code>. <code>: catégories</code> vient de l'avant-propos; tous les autres proviennent du nom du fichier post. Ensuite, vous pouvez définir <code>lien permanent</code> à des choses comme <code>/: année /: mois /: titre /</code> ou <code>/:categories/:title.html</code>. Bonus: si vous avez un <code>lien permanent</code> propriété dans l’affaire, elle remplacera la valeur par défaut du site..</li> <li> <strong><code>exclure</code></strong>: Comme je l’ai dit plus haut, Jekyll ne génère pas de fichiers dans des répertoires commençant par un trait de soulignement. Mais si vous voulez que les dossiers soient ignorés, mais que cela ne commence pas par un trait de soulignement, vous pouvez le faire avec <code>exclure</code> dans votre fichier de configuration.</li> </ul> <hr> <h2> Étape 5: déploiement du site</h2> <p>Supposons donc que vous avez créé le site et que vous souhaitez le rendre gratuit sur le Web. Comment tu fais ça?</p> <p>Il y a plusieurs façons d'accomplir cela. Bien sûr, s'il s'agit d'un petit site que vous ne mettrez pas à jour trop souvent, il vous suffit de le transférer par FTP sur votre serveur; cela pourrait être votre seule option, si vous utilisez un hébergement partagé.</p> <p>Si vous avez une configuration VPS ou d'hébergement dédié, vous pouvez en exécuter davantage automatiquement. Consultez la documentation de déploiement pour obtenir une liste des bonnes idées. Si vous ne savez pas quoi faire, essayez de suivre les instructions pour utiliser le hook git post-receive; J'ai essayé ça et c'est plutôt cool. </p> <hr> <h2> Étape 6: Aller plus loin</h2> <p>Ceci est juste la pointe de Jekyll. </p> <ul> <li>Il y a une architecture de plugin qui vous permet de modifier la façon dont votre contenu est généré.</li> <li> Jekyll ajoute que vous pouvez faire plus avec Liquid et certaines extensions Liquid.. </li> <li>Il y a beaucoup de modèles de données dont nous n'avons pas parlé. Vérifiez-le et voyez ce que vous pouvez faire!</li> </ul> <hr> <h2>Conclusion</h2> <p>Voilà donc votre introduction à Jekyll - le générateur de site statique simple, prenant en charge les blogs. La prochaine fois que vous construirez un site de type portefeuille, de style brochure, style carte de visite, pensez que vous allez essayer Jekyll? Faites-moi savoir dans les commentaires et merci beaucoup pour la lecture!</p>
<div class="rek-block">
<center>
<ins class="adsbygoogle"
style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-3810161443300697"
data-ad-slot="9434875811"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
<div class="h-alltags">
<a href="articles/code">Code</a>
</div>
</div>
</div>
</div>
</div>
<div class="next_posts clearfix">
<div class="n_post">
<div class="next_posts-h1 left_nh1"><a href="/articles/code/building-the-back-end-of-a-photo-site.html">Construire le back-end d'un site photo</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_27_7/building-the-back-end-of-a-photo-site_2.jpg');"></div>
</div>
<div class="n_post">
<div class="next_posts-h1 right_nh1"><a href="/articles/code/building-single-page-web-apps-with-sinatra-part-2.html">Création d'applications Web à une page avec Sinatra partie 2</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_21/building-single-page-web-apps-with-sinatra-part-2.png');"></div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-langs">
<ul class="site-langs-list">
<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>
<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
</ul>
</div>
<div class="h-block"><a href="/">fr.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Informations intéressantes et conseils utiles sur la programmation. Développement de sites Web, conception de sites Web et développement Web. Tutoriels Photoshop. Création de jeux informatiques et d'applications mobiles. Devenez un programmeur professionnel à partir de zéro.
</div>
</div>
</footer>
<div class="search">
<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<input class="searchmain" type="text" id="search-input" placeholder="Chercher...">
<ul class="searchli" id="results-container"></ul>
</div>
</div>
<link rel="stylesheet" href="css/flags.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#edeff5",
"text": "#838391"
},
"button": {
"background": "#4b81e8"
}
},
"theme": "classic",
"position": "bottom-right"
})});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/scripts.min.js"></script>
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<script>
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".search");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
})
</script>
<script src="jquery.unveil2.min.js"></script>
<script>
$('img').unveil();
</script>
</body>
</html>
Share
Accentsconagua