Share
Il s’agit de la première partie d’une petite série sur Middleman, "un générateur de site statique utilisant tous les raccourcis et outils du développement Web moderne". Les deux premiers tutoriels couvriront les bases, après quoi nous mettrons en pratique ce que nous avons appris avec un projet pratique. Middleman requiert l'utilisation de Ruby, mais n'hésitez pas à lire si cela vous est étranger. cette série est complètement adaptée aux débutants.
Qu'est-ce que tous les fuzz récents avec les sites statiques? Eh bien, ils sont rapides, faciles à installer et légers. Comme vous ne servez rien de ce qui concerne les bases de données, les sites statiques sont assez fiables et rapides. HTML, CSS et si nécessaire JS, c'est tout.
De nombreuses personnes utilisent des sites Web statiques pour créer leurs blogs et leurs pages personnelles. Les pages de destination fortement touchées par le trafic sont également un bon candidat. HealthCare.gov, de l’administration Obama, a utilisé de manière célèbre le système Jekyll, un autre générateur de site statique. Si vous avez besoin de quelque chose de rapide et facile, capable d'évoluer, les sites statiques peuvent être étonnants. Surtout que vous pouvez les héberger gratuitement sur GitHub Pages ou Heroku.
On peut soutenir que l’intensité du site statique a commencé il ya quelques années lorsque Jekyll est arrivé. Bien sûr, les sites statiques sont aussi vieux que le premier «Hello World!» De Sir Tim Berners-Lee, mais au cours des 15 dernières années, les applications protégées par une base de données sont devenues «tout ce qui importait». Il y a quelques années, l'un des co-fondateurs de GitHub avait besoin d'un meilleur moyen d'écrire des blogs et il a créé Jekyll, ce générateur de site statique très branché pour «Blogging comme un pirate informatique». Je l'ai utilisé à quelques reprises et je n'ai que de bonnes choses à signaler. L'équipe de base est géniale aussi. Quoi qu'il en soit, pour cette série, mon éditeur et moi avons convenu qu'il serait plus intéressant de couvrir Middleman. Il serait peut-être juste de dire que Middleman est un peu moins «prêt à utiliser un blog», mais néanmoins tout aussi puissant et d'une qualité exceptionnelle.
Middleman utilise Ruby, offrant un ensemble assez complet de fonctionnalités pour construire des choses sympas. Si vous avez déjà utilisé Rails ou Sinatra, vous vous sentirez comme à la maison. Il semble que Middleman et Jekyll sont les options incontournables pour les sites statiques de la communauté Ruby. J'ai également entendu de plus en plus de concepteurs affirmer qu'ils préféraient les utiliser pour le prototypage et la création de pages personnelles. Le point commun de ces frameworks de sites statiques est qu’ils sont assez simples à utiliser..
Dans cet article, je suppose que vous êtes au moins un bit intéressé par Ruby, et qu’il soit installé sur votre système. Si vous avez besoin d’aide, jetez un coup d’œil à Ruby for Newbies: Installation de Ruby et mise en route par Andrew Burgess.
Savoir manipuler RubyGems est également nécessaire, et encore une fois, Ruby for Newbies: Travailler avec Gems d'Andrew Burgess vous aidera à démarrer si besoin est. Je ferai de mon mieux pour ne pas vous décourager avec des concepts de programmation, mais je ne couvrirai pas les bases de la programmation telles que les boucles, les blocs de code, etc. Pour les débutants parmi vous, ne vous inquiétez pas, Middleman n'a pas beaucoup de pièces en mouvement, et je vais vous montrer à quel point il est facile d'apprendre.
Vous avez donc Ruby et RubyGems à votre actif? Génial, alors nous sommes prêts à partir.
Ouvrez votre terminal et entrez:
bash gem installer un intermédiaire
Si l’autorisation vous est refusée, vous devrez ajouter la commande à l’ordre avec sudo et entrez votre mot de passe administrateur système. Une fois ce processus terminé, vous pourrez utiliser quelques commandes d'intermédiaire utiles via l'invite de commande..
Cette commande lance un nouveau projet. Vous devrez lui donner le nom de votre application, puis appuyer sur Entrée..
intermédiaire bash init your_fancy_app Il faut également des arguments supplémentaires, comme le modèle par lequel vous voulez commencer. Cela le rend très pratique pour personnaliser vos applications avec des modèles dès le début, réduisant ainsi les tâches de configuration répétitives! Nous discuterons plus en détail des modèles dans un prochain tutoriel.
intermédiaire bash init your_fancy_blog --template = blog
intermédiaire bash init your_fancy_mobile_app --template = mobile
Middleman est livré avec un serveur local pour votre développement. Le démarrage vous permet de voir votre site à http: // localhost: 4567 / **. Si vous venez d'entrer ** intermédiaire sans aucun argument supplémentaire, cela déclenchera également votre serveur. Arrêtez votre serveur avec CTRL-c.
Une fois que vous avez quelque chose que vous êtes prêt à mettre sur un serveur Internet, vous devez construire votre site. Cela signifie que tout ce que vous avez préparé dans votre /la source dossier sera traité et la sortie finale sera sortie sur le /construire dossier que l'intermédiaire crée également pour vous. Tous vos fichiers qui utilisent des pré-processeurs tels que Slim, Haml, Sass, CoffeeScript seront traités dans leurs équivalents respectifs et placés dans votre répertoire / build.
Une fois que votre site est prêt à faire face à Internet, cette commande déploie votre /construire dossier sur votre serveur Web. Chaque mise à jour effectuée suivra ce processus.
Faites-vous une faveur tout de suite et activez LiveReload pour actualiser automatiquement vos pages après les modifications apportées à vos fichiers HTML, Sass ou JS. C'est très pratique pendant le développement, vous ne le regretterez pas! Middleman ces jours offre LiveReload hors de la boîte, il vous suffit d'ajouter
gemme rubis 'intermédiaire-foie'
à ton Gemfile et décommentez la ligne suivante dans config.rb:
ruby # Recharger le navigateur automatiquement à chaque changement de fichier, activer: livereload
Ensuite, vous groupez Middleman
bash bundle # ou bundle exec intermédiaire
Alors commençons avec /la source et /construire Dossiers. Entre eux se trouve la ligne de séparation qui sépare vos sections de développement et de production. Lorsque vous utilisez votre serveur Web local pour le développement, / source s'habitue pour servir votre application. Le dossier / build est utilisé par vos serveurs non locaux pour servir vos pages statiques. / build est créé chaque fois que vous utilisez construction d'intermédiaire dans votre ligne de commande. Par conséquent, vous devez faire attention à ne pas perdre votre temps par inadvertance à coder / build car ce travail disparaîtra après le processus de compilation. En général, tout votre développement est supposé se produire dans / source.
Le processus de construction crée les sites statiques que vous souhaitez que votre serveur héberge. Chaque fichier dans votre /la source dossier sera traité puis stocké dans /construire. Comme mentionné précédemment, votre Sass, CoffeeScript, Slim / Haml et vos partiels seront transformés en leurs équivalents très puissants. Toutes les mises en page seront également reconstituées. Si vous avez activé la compression pour ces fichiers, vous devez vous «lustrer» également. Pendant tout ce shabang, le dossier / build est réorganisé en éliminant les fichiers qui ne sont plus référencés dans / source. Pendant construction d'intermédiaire, toute modification apportée aux fichiers dans / source déclenchera une régénération des nouveaux fichiers statiques correspondants pour / build.
Le processus de déploiement est la dernière étape. Avec le /construire répertoire en place, vous avez tout ce dont vous avez besoin pour mettre votre application en circulation. Ma recommandation est de le faire tôt pour éviter les surprises.
Voyons la structure de base d'une application Middleman. Les composants principaux sont:
Comme vous pouvez le voir ci-dessous, le plus de Jazz va dans le /la source dossier. Ce que j'aime chez Middleman Apps, c'est leur organisation simple. La navigation dans la structure du document est simple, même pour les débutants.
Si vous n'êtes pas satisfait du nom de certains de ces dossiers, vous pouvez le modifier dans vos configurations (config.rb). Les mêmes noms seront utilisés pour votre fini /construire dossier.
"ensemble ruby: rép_ssss, 'nom_dossier_personnalisé'
set: js_dir, 'custom_folder_name'
set: images_dir, 'custom_folder_name "
Une fois que vous avez votre serveur en marche, vous pouvez vérifier d'autres options pour configurer Middleman directement dans votre navigateur: http: // localhost: 4567 / __ middleman / config /. Ils ne sont pas tous logiques, ni même importants à connaître à ce stade. Jetez un coup d'œil et un marque-page mental suffit pour l'instant.
Celui que tu cours construction d'intermédiaire vous pouvez regarder dans le /construire dossier. Tous les fichiers HTML, CSS et JS simples dont vous avez besoin pour servir votre site statique.
C'est à peu près tout ce que vous avez besoin de savoir pour vous lancer et vous orienter.
Suggestion: À ce pont, il serait logique de commencer à créer vous-même une application de test. Regardez autour de vous et découvrez comment les choses s'organisent et comment les pièces s'assemblent.
Le terme Front Matter vient de l'édition du livre et fait référence aux informations figurant au début d'un livre. Dans le cas de fichiers de site Web statiques, il s'agit de blocs d'informations stockés dans YAML. Chaque page vous permet d’avoir des variables qui peuvent être stockées tout en haut dans un triple trait d’union et d’un trait de fuite. Par exemple, voici le haut d'un fichier fictif appelé some.html.erb.
mise en page: Titre de l'emprunt: Noms de fille préférés de bond date date: 2015-11-09 tags: bond, 007
some_secret: je ne serai pas rendu tant que vous ne m'utiliserez pas.
bond_girls: - Strawberry Fields - Jill Masterson - Affaire Tiffany
"
Les variables YAML ressemblent à un hachage. Vous pouvez accéder à ces données locales via le page actuelle objet:
ruby current_page.data.some_variable
Vous l'utilisez souvent pour stocker des balises, des dates, des titres et des options de configuration, comme la mise en page que vous souhaitez utiliser pour des pages particulières. Front matter est un magasin YAML pour vos variables. Vous pouvez également utiliser JSON si vous préférez cela. Pensez-y comme à un endroit où placer des données qui pourraient normalement résider dans une base de données. Je discuterai des différentes options et utilisations en cours de route.
C’est une bonne occasion de revenir brièvement sur ERB. ERB vous permet de créer des modèles dynamiques contenant du code intégré. Vos noms de fichiers doivent avoir un .erb extension et vous devez mettre votre code dans les deux “conteneurs” suivants.
Pour le code qui est exécuté mais non “imprimé” sur la page, vous utilisez ceci:
html <% %>
Pensez-y comme à un "calcul uniquement".
Sinon, pour les valeurs de retour que vous souhaitez voir affichées en "imprimé" sur la page, vous devez également ajouter un signe égal. C'est tout.
html <%= %>
Les concepts de mise en page et de partiels sont étroitement liés. Laissez-moi vous donner une petite tournée éclair au cas où vous n'aviez jamais joué avec Rails, Sinatra ou similaire. Je pense que je devrais commencer par mises en page premier.
Les mises en page vous fournissent la structure nécessaire pour partager des balises communes entre différentes pages, qui appartiennent à la même "famille" de pages. C'est un outil pour éviter les doubles emplois et accélérer votre travail. Au lieu d'écrire le même squelette HTML partout, vous composez des dispositions pour des cas d'utilisation particuliers. Les exemples populaires sont deux configurations différentes pour un administrateur et un utilisateur «normal». Ils ont généralement une expérience très différente en regardant la "même" page.
Lorsque vous lancez une application intermédiaire simple, vous obtenez automatiquement un layout.erb déposer dans source / mises en page. Prenez note que ce fichier se termine par .erb et pas .html.erb. Les mises en page ne doivent pas être converties en HTML et Middleman émettra une erreur si vous créez des mises en page avec une extension .html. Si vous utilisez un langage de gabarit différent, tel que Slim ou Haml, les dispositions peuvent avoir leurs extensions. Comme le suggère le comportement par défaut, vous devez placer toutes vos mises en page dans le répertoire. / mises en page dossier dans la source.
Voici un exemple de source / layouts / layout.erb:
"html
"
Cette disposition par défaut est plutôt simple, mais fournit tout ce dont vous avez besoin pour commencer. Regardons:
Et à partir de là, vous pouvez personnaliser cette mise en page selon vos besoins. Un aspect potentiellement déroutant pour les débutants Ruby est le rendement mot-clé - cela signifie simplement qu'il passe par le reste du contenu que vous créez. En d'autres termes, rendement est un espace réservé pour vos vues qui sera rendu en elle. Si ce concept vous est totalement étranger, rappelez-vous de ne pas le toucher pour le moment, sinon votre application risque de ne pas fonctionner comme prévu. Chaque fois que vous créez vos propres mises en page, rendement il est essentiel, sinon votre contenu ne sera pas affiché. Vous comprendrez très vite, je vous le promets.
Si vous avez créé différentes mises en page, vous pouvez spécifier via l'avant-plan la mise en page que vous souhaitez utiliser, page par page. Supposons que vous disposiez d'une mise en page spéciale pour l'accueil des utilisateurs, qui est un peu plus commerciale. Ici nous avons welcome.html.erb.
mise en page: vente -
"
Sinon, vous pouvez spécifier des mises en page dans votre fichier config.rb.
page ruby "/welcome.html",: layout => "sales"
Si vous souhaitez éviter de le faire manuellement pour chaque page, vous pouvez les rassembler au même endroit. De nouveau, dans config.rb, vous utilisez un caractère générique (** \ ***) pour recueillir un tas de pages qui utilisent la même mise en page.
page ruby "/ sales / *",: layout => "sales"
Personnellement, j'aime bien mettre cette mise en page au premier plan. C'est très explicite et pas trop répétitif. Si j’en avais tout un tas, je préférerais utiliser l’approche générique..
Les partiels vous permettent d'encapsuler le code de vue que vous pouvez réutiliser à tout moment. Vous avez juste besoin de dire à votre vue où insérer un partiel et il est rendu bien là-dedans. Les partiels sont une technique très courante pour sécher votre code.
Des exemples très courants incluent les barres de navigation, les pieds de page et les sections de tête, que vous ne voudriez pas dupliquer dans tous les sens. Les fichiers pour les partiels commencent par un trait de soulignement. Pour commencer, vous pouvez les placer sous /la source. Vos mises en page sont un bon point de départ pour collecter le code à extraire en partiels. Chaque fois que vous trouvez quelque chose que vous devez réutiliser, les partiels seront un ami pratique..
Voici un exemple de /source/layouts/layout.erb.
"html
<%= partial "head" %> <%= partial "navbar" %> <%= yield %> <%= partial "footer" %>"
Et la source partielle / _head.html.erb:
"html
<%= stylesheet_link_tag “normalize”, “all” %> <%= javascript_include_tag “all” %>"
Parfois, vous souhaiterez extraire un partiel, non seulement pour éviter les doublons, mais également pour rendre vos vues plus lisibles. Au fil du temps, les sections de la tête sont connues pour devenir très chargées, par exemple. En eux, vous pouvez avoir autre les partiels qui ne traitent que du style ou des fichiers JS.
Vous vous rendrez compte à quel point les partiels sont pratiques lorsque vous pouvez appliquer des modifications qui se répercutent sur l'ensemble de votre application, où que vous ayez inclus le partiel. Il n'est pas nécessaire de parcourir plusieurs fichiers pour appliquer le même changement à plusieurs reprises..
Les aides sont des méthodes que vous pouvez utiliser pour de nombreuses tâches quotidiennes dans vos vues. Je pense que cela a été inventé dans Rails Land et est rapidement devenu omniprésent pour le développement Web moderne sur le Web. Vous avez déjà vu des aides comprenant des feuilles de style et des fichiers JavaScript. Il y a beaucoup plus d'où cela vient si.
Voici à nouveau notre partiel /source/_head.html.erb:
"html
<%= stylesheet_link_tag "normalize", "all" %> <%= javascript_include_tag "all" %>"
Ces aides sont destinées à vous aider à écrire un code de vue plus propre et plus concis. Dans la liste des aides ci-dessous, vous trouverez de nombreuses informations utiles. Vous n'êtes pas limité par ceux-ci cependant. Ecrivez vos propres méthodes d'assistance dans config.rb ou collectez-les séparément dans un module.
Cela fonctionne comme ceci: Dans votre config.rb, vous créez un aides bloquer et mettre toutes vos méthodes d'assistance à l'intérieur. C'est tout. Maintenant, vos points de vue y ont accès.
Exemple: /source/_navbar.erb.
"html
"
Et dans config.rb:
"les aides de rubis font
def random_username “# lorem.first_name # lorem.last_name” end
def random_image image_tag “# lorem.image ('30x40',: background_color => '333',: color => 'fff')” end
fin"
Ces aides peuvent s’avérer utiles lorsque je souhaite rapidement créer un prototype et éviter d’installer moi-même des images factices et du texte. Globalement, vous devriez rechercher le code que vous souhaitez être plus concis ou que vous dupliquez encore et encore. Les aides sont souvent un bon foyer pour cela.
A l’intérieur de ces aides personnalisées, j’ai utilisé d’autres aides de Middleman pour créer img balises à travers image_tag aussi bien que lorem objet pour certains noms d'utilisateur aléatoires et des espaces réservés pour les images. Ces trucs Lorem peuvent être un peu personnalisés pour répondre à vos besoins.
Cependant, en utilisant l'approche module, vous avez besoin d'un fichier séparé pour votre module. Créez un répertoire "lib" dans votre dossier racine (au même niveau que "source" et "build") et créez un fichier pour vos assistants..
Ici nous avons /lib/helpers.rb:
"module ruby PrototypingHelpers def random_image image_tag“ # lorem.image ('300x400',: background_color => '333',: color => 'fff') "end
def random_username “# lorem.first_name # lorem.last_name” end end "
Ensuite, vous devrez indiquer à votre fichier config.rb que vous souhaitez utiliser ces aides:
Ruby nécessite des aides 'lib / helpers' PrototypingHelpers
Boom! Vous êtes prêt à rouler. En général, je choisirais tout de suite l'approche par module. Cela me semble beaucoup plus propre, plus vous évitez de polluer votre fichier de configuration avec trop de choses.
J'aimerais aussi me pencher sur les aides à la sortie et content_for en particulier, car ils peuvent être un peu déroutants pour les débutants. Cela vous permet de capturer un tas de contenu que vous pouvez céder / réutiliser ailleurs. C'est une partie partielle de la miniature. Personnellement, j’irais avec un partiel la plupart du temps, mais de temps en temps, lorsque vous souhaitez appliquer des modifications ponctuelles de manière plus chirurgicale, c’est utile de savoir:
Voici index.html.erb:
"html <% content_for :navigation do %>
<% end %>
… "
Et admin_index.html.erb:
"html <% content_for :admin_navigation do %>
<% end %>
<% content_for :admin_javascript do %> <%= javascript_include_tag “admin” %> <%= javascript_include_tag “some_library” %> <% end %>
… "
Puis dans layout.erb:
"html
<% if content_for?(:admin_javascript) %> <%= yield_content :admin_javascript %> <% else %> <%= javascript_include_tag "all" %> <% end %> <%= yield %> <%= partial "footer" %>"
La clé utilise grant_content qui met votre contenu collecté de la page individuelle dans la mise en page si elle est trouvée. Il n'est pas nécessaire de les utiliser uniquement avec des mises en page non plus. Lorsque vous avez besoin de rendre cela un peu plus compliqué, utilisez content_for? pour vérifier des blocs de contenu spécifiques avant de les insérer. C'est pratique lorsque vous souhaitez apporter de petites adaptations à des sections qui ne diffèrent que légèrement. Il est bon que vous puissiez enregistrer ce contenu un peu comme une configuration sur les pages pertinentes elles-mêmes et ne l’activer que si nécessaire. Vous ne devriez probablement pas être trop intelligent avec ces choses bien.
Un mot sur le lié à aide j'ai utilisé ci-dessus. C’est probablement celui que vous rencontrerez le plus souvent. Vous fournissez essentiellement à la méthode un nom et une URL ou un chemin vers lequel ce lien doit pointer. J'ai remplacé la dernière partie par un espace réservé pour plus de concision.
Vous trouverez ci-dessous un aperçu des aides disponibles qui sont prêtes à l'emploi. Je pense que les noms s’expliquent plutôt bien par eux-mêmes et je ne devrais pas vous expliquer en quoi chacun de ces éléments peut vous aider. Faites un signet mental de ce qui existe et vérifiez avec la documentation si cela vous pose problème..
Accentsconagua
étiquettelié àinput_tagfavicon_tagstylesheet_link_tagjavascript_include_tagcontent_forcontent_for?capture_htmlgrant_contentconcat_contentform_taglabel_tagselect_tagsubmit_tagfield_set_tagtext_field_tagcheck_box_tagpassword_field_tagtronquerpluraliserword_wrapescape_htmlsimple_formatjs_escape_htmltime_ago_in_wordsdistance_du_temps_en_motslorem.datelorem.wordlorem.namelorem.emaillorem.imagelorem.wordslorem.sentencelorem.last_namelorem.paragraphelorem.first_namelorem. paragraphesJe pense que c'est une bonne base pour commencer à jouer avec une application de jouets. Vous devriez avoir une bonne idée de ce que propose Middleman et comment naviguer dans le cadre. Dans la prochaine partie de cette série, nous allons aller plus loin et approfondir un peu plus le cadre. L’équipe Middleman a vraiment fait du bon travail en concevant l’API et en gardant les choses simples.
Si tout va bien, vous pouvez voir maintenant pourquoi ce framework a gagné en popularité et pourquoi c'est un bon choix pour toutes sortes de projets statiques.
