Share
Octopress est un framework de blogging statique construit sur le dessus de Jekyll. Il utilise des scripts pour créer des fichiers statiques à déployer sur un serveur..
… Nous allons tout expliquer ici. Cependant, si vous n’avez jamais touché la ligne de commande, vous voudrez peut-être d’abord un peu d’amorce. Consultez ce guide, qui explique certaines commandes et fonctions de base.
Les navigateurs lisent HTML, CSS et JavaScript de manière native. Toutes les autres langues sont utilisées pour générer ces trois types de fichiers. Les sites statiques sont créés à partir de fichiers statiques codés en dur qui ne dépendent d'aucun processus serveur (contrairement à PHP ou à tout autre site généré par le serveur). Jekyll, l'infrastructure sous-jacente, s'appuie plutôt sur l'environnement local de l'éditeur de contenu pour générer les fichiers statiques qui seront éventuellement déployés..
Supposons, par exemple, que votre blog Wordpress contienne cinq articles. Lorsque vous visitez http://votresite.com, des extraits de ces cinq articles apparaissent sur votre page d'accueil. Vous cliquez sur un lien pour accéder à la page complète du message. Chacune de ces pages est transmise à votre navigateur au format HTML, stylisé par CSS; vous pouvez ou non avoir du JavaScript qui aide à définir certains comportements interactifs.
Les pages de votre blog utilisant Wordpress sont conçues à la volée; les requêtes de base de données sont exécutées pour obtenir les différentes pièces, telles que le titre, le contenu ou le permalien. Celles-ci sont ensuite retournées et traitées par PHP pour chaque demande (en supposant qu'aucun plugin de mise en cache ne soit installé).
Avec Jekyll, les choses sont différentes.
Content que tu aies demandé. Jekyll fait tout cela sur ton ordinateur, avant que les fichiers montent sur le serveur. Il lit certaines configurations et certains modèles locaux, puis construit l'ensemble de ces codes HTML, CSS et JavaScript directement sur votre ordinateur local, afin que votre serveur n'ait pas à le faire. Cela rend l'administration de votre serveur beaucoup plus facile, plus sûre et plus simple. plus rapide.
Il y a quelques réponses à cette question. En voici trois:
Alors, quels problèmes cette approche ne résout-elle pas? Tout d’abord, si votre site dépend de données créées par l’utilisateur, les sites générés statiquement ne donnent généralement pas beaucoup d’espace pour cela. Bien sûr, si vous ne vous fiez qu'à une base de données pour les commentaires, vous pouvez facilement la décharger sur quelque chose comme Disqus. Si vous vous basez sur des données réelles qui ne peuvent pas être extraites sur le front-end via JavaScript, les sites statiques ne sont probablement pas adaptés à vos besoins..
Le meilleur scénario: des blogs ou des sites centrés sur le contenu gérés par les développeurs Web. Vous avez peut-être compris cela avec le slogan d'Octopress, "Un cadre de blogage pour les pirates."
webuild.envato.com - construit avec Octopress, géré par l'équipe de développement d'Envato Octopress et Jekyll ne conviennent généralement pas à un créateur de contenu non axé sur la technologie, car vous allez effectuer un travail modéré sur le terminal. Toutefois, si vous êtes prêt à consacrer suffisamment de temps à la lecture de cet article, vous serez parfaitement adapté à un site utilisant Octopress..
Comprendre que ce que tous vos utilisateurs voient est HTML, CSS et JavaScript est le véritable secret du Web. Par conséquent, tester votre site Octopress localement ne nécessite aucune installation de serveur Apache, PHP ou MySQL. Tout ce dont vous avez besoin est d’un navigateur capable d’exécuter des fichiers locaux..
Toute bonne chose a un prix; vous devez avoir installé la version 1.9.3 de Ruby, ainsi que Jekyll et Bundler Ruby Gems, ainsi que Git. (Bien que Git ne soit pas nécessairement requis, il pourrait tout aussi bien l'être.) Une fois ces éléments installés, vous êtes prêt à vous lancer dans le développement. Pour installer Git, allez ici.
Les instructions qui suivent sont pour Mac; des commandes similaires peuvent être trouvées pour Windows via un gestionnaire de versions Ruby pour Windows appelé pik.
Tout d’abord, vérifiez quelle version de Ruby est installée sur votre ordinateur en exécutant ruby -v. Si la version n'est pas 1.9.3, continuez avec ces instructions. Vous pouvez passer à "Numéro de pièce délicat 2: pierres précieuses" si vous avez déjà 1.9.3.
L’installation de Ruby version 1.9.3 s’effectue relativement facilement avec RVM. RVM, ou Ruby Version Manager, vous permet d’installer plusieurs versions de Ruby sur votre système sans supprimer les versions précédentes. Les instructions d'installation rapide pour RVM et Ruby 1.9.3 sont les suivantes:
\ curl -L https://get.rvm.io | bash -s stable --ruby = 1.9.3
Remarque: si vous avez des problèmes liés à gcc (ou la "collection de compilateurs gnu", nécessaire pour compiler Ruby à partir de sa source), il peut être utile d'exécuter les commandes suivantes à la place.
\ curl -L https://get.rvm.io | bash -s stable CFLAGS = "- Wno-error = raccourcir-64-à-32" rvm installer ruby-1.9.3-p392
L'installation de XCode devrait également aider à résoudre de nombreux problèmes liés à GCC pour les utilisateurs Mac. Consultez ce fil sur GitHub pour plus d’informations sur le sujet..
Pour vous assurer que Ruby 1.9.3 a été installé avec succès, exécutez liste de rvm. Une fois ce processus terminé, vous pouvez exécuter ce qui suit pour définir la version de ruby par défaut de votre système sur 1.9.3:
rvm --default use 1.9.3
Pour vérifier et vous assurer que 1.9.3 a été sélectionné, vous pouvez à nouveau exécuter ruby -v. Ceci imprimera la version actuelle de Ruby.
RubyGems est un gestionnaire de paquets de code pour le langage de programmation Ruby, et l'une des principales raisons pour lesquelles la communauté de Ruby a acquis la réputation d'être utile et unifiée. Il permet aux utilisateurs d'installer facilement des packages de code open-source directement à partir de la ligne de commande. Ces gemmes sont stockées dans des dépôts officiels.
Pour installer les gems Ruby, exécutez les commandes suivantes à partir de la ligne de commande. (Si vous n'avez pas encore installé RubyGems, suivez les instructions ci-dessous avant d'exécuter ces commandes. Vous pouvez vérifier si vous avez déjà installé RubyGems en lançant quel bijou à partir de la ligne de commande, qui recherchera le gemme programme exécutable utilisé pour installer des gems.)
gem installer jekyll gem installer bundler
Cela va extraire les gemmes Jekyll et Bundler et les stocker dans un emplacement de votre ordinateur que Ruby utilise automatiquement comme bibliothèque, appelée "gemset". Jekyll est le puissant générateur de site statique derrière Octopress; Bundler est un format de spécification d'installation de gem qui facilite la satisfaction des dépendances de gem. En d’autres termes, il vous permet de répertorier les pierres précieuses dont vous avez besoin dans un simple fichier appelé Gemfile, et courir installation groupée dans le même répertoire pour obtenir toutes les gemmes répertoriées (au lieu de les installer à la main, une à la fois).
Tout d'abord, vous aurez intérêt à insérer Octopress dans un répertoire dans lequel vous conserverez votre site. Contrairement à la plupart des sites gérés par base de données, votre site actif reflète généralement votre site local, son contenu et sa présentation. Nous allons copier le référentiel git distant dans un dossier nommé "mysite" dans le répertoire Sites. (Ceci est un bon choix, en particulier pour les utilisateurs de Mac.)
cd ~ / Sites git clone git: //github.com/imathis/octopress.git mysite
Ensuite, vous voudrez vous rendre dans le répertoire et installer le paquet..
cd mysite bundle installer
Cela installera une collection de pierres précieuses, si vous ne les avez pas déjà installées sur votre machine.
Le contenu de votre répertoire devrait ressembler à ceci, à ce stade… Ensuite, vous voudrez installer le thème Octopress par défaut..
rake installer
Le contenu de votre répertoire, plus les fichiers de thème Bon à savoir: Râteau est un coureur de script Ruby. Il lit un "Rakefile", qui contient des instructions pour le râteau commander.
Le site Octopress offre un aperçu complet des configurations de blog, qui se trouvent dans _config.yml. Vérifiez le ici. Voici un exemple:
url: http://myblog.com titre: Mon sous-titre de super blog: Un blog super-auteur: Jonathan Cutrell simple_search: http://google.com/search description: Un site dédié à l'explication du fonctionnement d'Octopress. date_format: "ordinal" subscribe_rss: /atom.xml # c'est la valeur par défaut # subscribe_email: --- nous n'en avons pas pour l'instant. category_feeds: # Activer les flux RSS par catégorie (la valeur par défaut est false dans 2.1) email: # Adresse électronique du flux RSS si vous le souhaitez.
Il existe également un certain nombre de plugins disponibles, ainsi que de nombreuses autres configurations optionnelles pour Jekyll. nous n'allons pas tout couvrir, car nous essayons simplement de décoller et de courir.
Les paramètres tiers peuvent être renseignés dans le menu _config.yml fichier; ceux-ci sont évalués au moment de la compilation du site et permettent une intégration facile avec des services externes. Par exemple, voici une intégration simple de GitHub:
# Référentiels Github github_user: jcutrell github_repo_count: 14 github_show_profile_link: true github_skip_forks: true
Remarque: tout cela est déjà ajouté dans le fichier _config.yml; il suffit de le remplir pour tirer parti des fonctionnalités intégrées.
Bien! Vous pouvez commencer très rapidement à écrire un post. La syntaxe pour créer un article (selon la documentation) est simple:
rake new_post ["Some Awesome Title"]
Remarque: Si vous utilisez ZSH, vous devrez vérifier ce correctif sur GitHub et ajouter un alias à votre fichier zshrc..
mysite / source / _posts / 2013-03-27-some-awesome-title.markdown Cela crée un fichier pour votre message dans votre source / _posts annuaire. Par défaut, la publication sera créée sous forme de fichier de démarques. Le nom de l'article définira l'URL (c'est d'ailleurs une bonne chose pour le référencement). Si vous naviguez jusqu'au fichier nouvellement créé, vous verrez apparaître certains éléments clés YAML par défaut. Ici, vous pouvez ajouter une ou plusieurs catégories. Par exemple:
--- mise en page: titre de l'article: "Some Awesome Title" date: 2013-03-21 00:11 commentaire: vraies catégories: [Awesome, Amazing, Beautiful, Cool] ---
Vous pouvez ensuite ajouter votre contenu sous la matière principale.
Pour voir votre nouveau billet de blog, lancez-vous d'abord aperçu de rake, Ensuite, pointez votre navigateur sur localhost: 4000. Cela montrera votre message sur la page d'index!
Cliquez autour de l'interface pour avoir une idée de l'interface et de ses fonctionnalités. Remarque: le thème par défaut est responsive! En très peu de temps, vous avez un blog statique en cours d'exécution.
Pour créer une page (plutôt qu’une publication), exécutez quelque chose comme ce qui suit.
rake new_page [à propos]
mysite / source / about / index.markdown Cela crée une page à source / about / index.markdown. Vous pouvez aussi lancer:
rake new_page [about / index.html]
Qui va choisir le .html filetype au lieu de markdown. Dans cette page, vous pouvez apporter des modifications de la même manière que les publications..
Lorsque vous créez une publication, vous pouvez la relier directement à une page externe, similaire aux liens de page vers le plugin Wordpress (mais beaucoup moins compliqué)! Définissez simplement yaml avant-propos pour inclure les éléments suivants:
external-url: http://votreexternallink.com
Une autre bonne question. Vous êtes sur une lancée.
Comme nous l'avons dit précédemment, tout ce qu'un navigateur lit est HTML, CSS et JavaScript (si vous n'utilisez pas Flash ou une autre technologie externe). Lorsque vous utilisez une implémentation orientée serveur, HTML, CSS et JavaScript peuvent changer dès que l'utilisateur charge la page. la demande au serveur exécute du code pour créer le HTML à la volée en fonction de ce que le code renvoie.
Par exemple, avec un site tel que Wordpress, les liens vers les pages et les publications pointent vers des mises en page Web qui extraient les informations appropriées de la base de données MySQL au moment où l'utilisateur accède au site..
Octopress (et plus particulièrement, Jekyll) suivent un processus très similaire, mais au lieu de le faire sur demande, ils ne le font qu'une fois, sur votre ordinateur local..
Voici comment ça fonctionne. Un site Jekyll comporte trois éléments de base: la configuration, les mises en forme / comprend et les articles / pages. Si vous venez du monde Wordpress, vous pouvez les mapper aux options, aux fichiers de thème et à la base de données, respectivement (avec des lignes floues ici et là)..
Lorsque Jekyll exécute le processus de génération du site, il commence au fichier d'index et crée toutes les pages liées définies par les présentations. Tout au long de la construction, Jekyll utilise les configurations définies par le _config.yml fichier, ainsi que l’avant-plan YAML dans les articles, les pages et les mises en page. Jekyll utilise les fichiers de publication statiques et les fichiers de page en tant que collection d'objets énumérables et remplit le contenu dans toutes les présentations associées..
Le résultat final est un ensemble de fichiers source maintenus et secs dans la la source répertoire et uniforme généré le contenu statique dans le Publique annuaire.
Le dossier public sera rempli avec chaque page du site. Cela signifie que chaque fois que vous voyez une page, qu'il s'agisse d'une liste de publications paginée, d'une page 404 ou d'une page à propos, il s'agit en fait d'une seule page HTML que vous pouvez afficher directement dans le dossier public..
Un rapide coup d'œil dans le dossier public vous montrera un certain nombre de choses. Tout d'abord, la structure de répertoires est facilement navigable, car un serveur statique par défaut alimenté par Apache servirait à une URL équivalente à la structure de répertoires. La deuxième observation est que deux fichiers HTML donnés ont un contenu très similaire; ceci est le résultat de l'en-tête, du pied de page et du contenu de la barre latérale dupliqués extraits de mises en page et comprend, ce qui est tout à fait acceptable. La raison pour laquelle il est totalement acceptable est simple: le contenu du répertoire public n’est pas géré directement par vous, mais plutôt par le biais d’actions programmatiques. Par conséquent, DRY ne s’applique pas, car cela n’affecte ni la maintenabilité ni les performances du site marginalement.
En tant que designer, ce sera la partie que vous attendiez.
Octopress a certainement été conçu pour le blogueur. avec des informations très directes sur la façon de changer de thème, ils ont expliqué comment utiliser les fichiers présents dans le source / personnalisé dans ce guide. En résumé: Octopress est conçu pour les blogs et les pages de blogs, ainsi que pour le contenu personnalisé de la barre latérale et du pied de page. Cependant, vous pouvez facilement étendre la barre latérale. Le modèle supporté est de créer un nouveau fichier HTML à l'intérieur source / custom / asides / avec un contenu qui suit ce format:
Une sorte de titre
Foo, bar
Vous pouvez également facilement changer l'en-tête et le pied de page dans source / personnalisé. Cela facilite l'ajout de plusieurs fichiers JS / CSS, la modification ou la suppression des polices Google par défaut, etc..
Octopress est construit avec SCSS. La conception peut être modifiée / remplacée en utilisant le sass / custom / _styles.scss fichier. Ce fichier est inclus en dernier. Pour bien comprendre comment styliser Octopress, il faut d'abord plonger dans les modèles de base..
Remarque: Ne changez pas les modèles de base sauf si vous êtes complètement sûr de ce que vous faites ou si vous êtes prêt à casser quelque chose. Ce sont les fichiers qui définissent la construction finale de votre site statique!
Octopress offre la possibilité de changer facilement de thème. efficacement des copies du répertoire source. dans le .des thèmes répertoire, nous voyons le thème "classique", qui a été installé lorsque nous avons exécuté rake installer. Les fichiers source du thème sont copiés dans le répertoire de niveau supérieur et utilisés pour créer le site statique..
Dans le dossier source, nous pouvons voir quelques dossiers de thèmes évidents..
Les fichiers à l'intérieur du dossier _layouts définit les mises en page courantes des publications, des pages, des index de catégorie et le paramètre "par défaut", qui est un modèle de secours permettant d'attraper tout ce qui n'est pas l'un des trois premiers. Le dossier _partials ne permet que des éléments partiels de fichiers, tels que la navigation ou uniquement l'article, soient inclus. Ces fichiers sont des modèles HTML à base liquide, qui permettent la transmission de données. Ces données proviennent de la séquence principale YAML située à divers endroits sur le site. Par exemple, considérons l’étiquette liquide de _partials / article.html au dessous de.
% if site.disqus_short_name et page.comments! = false et post.comments! = false et site.disqus_show_comment_count == true% | Commentaires % endif%
Cette balise dit ce qui suit:
Si l'utilisateur a défini le nom abrégé de disqus dans la configuration du site principal et que les commentaires sont activés pour cette page ou cette publication, et que le site est configuré pour afficher le nombre de commentaires de disqus, le lien est répété sur la ligne suivante. Le lien pointera vers root_url et post.url si nous sommes sur la page d'index. sinon, il pointe directement sur #disqus_thread, un div qui contient les commentaires.
Comprenant cela, nous pouvons comprendre comment trouver et remodeler ou refactoriser certaines parties du site. Par exemple, si nous voulions ajouter une classe à des messages qui sont des liens externes directs, nous pourrions faire quelque chose comme ceci..
% si page.external-link ou post.external-link%contenu | extrait% autre %contenu | extrait% fin si %
Cela vérifie simplement si page.external-link ou post.external-link existent. S'ils le font, nous ajoutons une div supplémentaire à la div.entry-content élément. Il y a beaucoup de choses que vous pouvez exploiter avec la configuration simple de l'avant-projet YAML. Veillez à expérimenter et à proposer de nouvelles solutions à de nouveaux problèmes!
Octopress a tellement plus de pouvoir! Consultez la documentation détaillée et ne manquez pas cette liste exhaustive de plugins tiers Octopress; avec près de soixante plugins, l'intégration à des services tiers peut résoudre de nombreuses demandes et problèmes d'implémentation courants.
Commentez ci-dessous avec des idées sur les autres fonctionnalités que vous aimeriez voir également! Et rappelez-vous, le meilleur moyen d'apprendre est de se salir les mains. Entrez dans la documentation et le code; casser des choses, puis les réparer. Apprenez comme vous allez!
Vous avez des problèmes de compréhension? Vous avez besoin de plus de conseils ou vous cherchez quelqu'un pour examiner votre code et indiquer où tout s'est mal passé? Tuts + est un endroit formidable! Nous sommes tous passés par là, alors ne soyez pas timide. Mettez vos problèmes dans les commentaires! Si vous vous sentez généreux et que vous voyez quelqu'un avoir un problème dans le fil de commentaire, n'hésitez pas à l'aider.!
Accentsconagua