Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Middleman

Comment mettre en place un site statique avec intermédiaire

by
Length:LongLanguages:
This post is part of a series called Building Static Websites with Middleman.
Working With Data, Assets, and Templates in Middleman

French (Français) translation by Basheer Radman (you can also view the original English article)

Cela fait partie d’une série de petite tout intermédiaire, « un générateur de site statique en utilisant tous les outils et les raccourcis dans le développement web moderne ». Les deux premiers tutoriaux couvrira les bases, après quoi, nous allons mettre ce que nous avons appris en action avec un projet concret. Intermédiaire nécessite l’utilisation de Ruby, mais n’hésitez pas à lire sur si cela est étranger à vous ; Cette série est complètement newbie-friendly.

Intermédiaire et des Pages statiques

Ce qui est tout le duvet dernièrement avec les sites statiques ? Eh bien, ils sont rapides, assez simple à mettre en place et léger. Comme vous n'êtes pas n’importe quoi au service base de données liées, sites statiques sont assez fiable et rapide. HTML, CSS et le cas échéant JS — c’est tout.

Beaucoup de gens utilisent des sites Web statiques à mettre en place leurs blogs et pages personnelles. Les pages de destination qui sont touchés par le trafic fortement sont également un bon candidat. HealthCare.gov de l’administration Obama célèbre utilisé Jekyll, un autre générateur de site statique, pour leur site. Si vous avez besoin de quelque chose de rapide et facile, qui est capable d’évoluer hors de la boîte, sites statiques peuvent être étonnantes. Autant que vous pouvez héberger gratuitement sur GitHub Pages ou Heroku.

file

On peut dire que la vague site ensemble statique commencé quelques années en arrière quand Jekyll est venu. 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, la base de données applications sauvegardées est devenu « tout ce qui importait ». Un couple d’années en arrière, un des co-fondateurs de GitHub avait besoin d’une meilleure façon d’écrire des articles et il est venu avec Jekyll — ce générateur de site statique hanche pour « Bloguer comme un pirate informatique ». J’ai utilisé à quelques reprises et seulement de bonnes choses au rapport. L’équipe de base est trop génial. En tout cas, pour cette série mon éditeur et moi avons convenu qu'il serait plus intéressant couvrir intermédiaire. Il serait juste de dire que l’intermédiaire est un peu moins « blog-aware » out of the box, mais néanmoins tout aussi aussi puissant et grande qualité.

file

Ruby

Intermédiaire utilise Ruby, offrant un ensemble assez complet de fonctionnalités pour construire des trucs cool. Si vous avez déjà utilisé des Rails ou Sinatra vous vous sentirez comme à la maison. Il semble intermédiaire et Jekyll sont les options de go-to pour des sites statiques dans la communauté Ruby. J’ai aussi entendu parler plus et plus de concepteurs affirment qu’ils aiment leur utilisation pour le prototypage et pour mettre en place leurs propres pages personnelles. Ce que beaucoup de ces cadres de site statique ont en commun, c’est qu’ils sont assez simples à utiliser.

Dans cet article, je vais supposer que vous êtes au moins un peu intéressé à Ruby et confiez sur votre système. Si vous avez besoin d’aide, jetez un oeil à Ruby pour les débutants : Ruby installation et mise en route par Andrew Burgess.

Sachant comment faire face à RubyGems est nécessaire aussi et, encore une fois, Andrew Burgess Ruby pour les débutants : travail avec des gemmes vous aidera à démarrer si nécessaire. Je vais faire de mon mieux pour ne pas aller au-dessus de votre tête avec des concepts de programmation, mais je ne couvrir programmation bases comme les boucles, les blocs de code et autres. Pour les débutants parmi vous, ne vous inquiétez pas, intermédiaire n’est pas que beaucoup de pièces mobiles et je vais démontrer combien il est facile à apprendre.

Installation et mise en route

Donc vous avez Ruby et RubyGems sous votre ceinture ? Grande, puis nous voilà prêt à partir.

Ouvrez votre terminal et entrez :

Si on vous refuse l’autorisation de le faire, vous devez faire précéder la commande sudo, puis entrez votre mot de passe admin système. Une fois ce processus terminé, vous serez en mesure d’utiliser les deux commandes pratique intermédiaire via l’invite de commande.

file

init intermédiaire

Cette commande lance un nouveau projet. Vous devrez lui fournir le nom de votre application, puis appuyez sur entrée.

Il prend également des arguments supplémentaires comme quel modèle vous voulez démarrer avec. Cela le rend très pratique pour personnaliser vos applications avec les modèles dès le départ, réduire les tâches répétitives à l’installation un peu ! Nous aborderons plus sur modèles dans un prochain didacticiel.

serveur intermédiaire

Intermédiaire est livré avec un serveur local pour votre développement. Mise en service vous permet de voir votre site à https://localhost:4567 / **. Si vous entrez simplement ** intermédiaire sans aucun argument supplémentaire, cela déclenche également votre serveur vers le haut. Arrêtez votre serveur avec CTRL-c.

build intermédiaire

Une fois que vous avez quelque chose, vous êtes prêt à mettre sur un serveur connecté à internet, que vous avez besoin pour construire votre site. Cela signifie que tout ce que vous avez préparé dans votre dossier /source sera traité et le résultat final sera de sortie vers le dossier /build quel intermédiaire crée aussi pour vous. Tous vos fichiers qui utilisent les préprocesseurs comme Slim, Haml, Sass, CoffeeScript est traitée dans leurs homologues respectifs et mettre dans votre répertoire /build.

déployer des intermédiaires

Une fois que votre site est prêt à faire face à l’internet, cette commande déploie votre dossier /build sur votre serveur web. Chaque mise à jour que vous faire passera par ce processus.

livereload

Faites-vous plaisir tout de suite et activer LiveReload pour actualiser automatiquement vos pages après les modifications apportées à vos fichiers HTML, Sass ou JS. Il s’agit de grand confort au cours du développement, vous ne le regretterez pas ! Intermédiaire ces jours-ci offre LiveReload out of the box, vous avez juste besoin d’ajouter

à votre Gemfile et décommentez la ligne suivante dans config.rb :

Puis il est grouper intermédiaire

Source vs Build vs déployer

So let's get commencer avec dossiers /source et /build. Entre eux est la ligne de démarcation qui sépare les sections de votre développement et production. Lorsque vous utilisez votre serveur web local pour le développement, /source obtient mis au service de votre application. Le dossier /build est utilisé par vos serveurs non local pour servir vos pages statiques. /Build est créé chaque fois que vous utilisez la génération intermédiaire dans votre ligne de commande. Par conséquent, il faut veiller à ne pas passer accidentellement votre codage de temps en /build parce que ce travail va disparaître après le processus de génération. En général, tout votre développement est censé pour arriver en /source.

Le processus de génération crée les sites statiques que vous souhaitez que votre serveur hôte. Chaque fichier dans votre dossier /source obtiendrez traitée et stockée dans /build. Comme mentionné précédemment, votre Sass, CoffeeScript, Slim / Haml et partiels traitera dans leurs homologues deplyable. Toutes les mises en page vont être reconstitués ainsi. Si vous avez activé la compression de ces fichiers, c’est le moment qu’ils se « uglified » trop. Au cours de cet ensemble shabang, le dossier /build obtient rejuvinated par se débarrasser des fichiers qui n’ont plus aucune référence au /source. Au cours de la génération intermédiaire, toute modification apportée aux fichiers /source va déclencher une régénération des nouveaux fichiers statiques correspondantes pour /build.

Le processus de déploiement est la dernière étape. Avec le répertoire /build en place, vous avez tout ce que vous devez mettre votre app là-bas. Ma recommandation est de le faire au début pour éviter de rencontrer dans des surprises.

Un nouveau Site

Nous allons vérifier la structure de base d’une application intermédiaire. Les principales composantes sont :

  • /images
  • /javascripts
  • /Layouts
  • /StyleSheets
  • config.RB
  • Un fichier index.html.erb
  • Un Gemfile

Comme vous pouvez le voir ci-dessous, le plus Jazz va dans le dossier /source. Ce que j’aime intermédiaire apps est leur organisation simple. Navigation dans la structure du document est simple, même pour les débutants.

file

Si vous êtes malheureux avec la nomination de certains de ces dossiers, vous pouvez changer cela dans vos configurations (config.rb). Les mêmes noms servira pour votre dossier /build fini.

Une fois que vous avez votre serveur en cours d’exécution, vous pouvez consulter les autres options de configuration droite intermédiaire dans votre navigateur : http://localhost:4567/__middleman/config /. Tous ne serait judicieux, ou sont même important de savoir à ce stade. Donnez-lui un coup de œil et un signet mental est tout à fait suffisant pour l’instant.

Celui que vous exécutez la génération intermédiaire, que vous pouvez lire dans le dossier /build. Tous les plain HTML, CSS et JS fichiers que vous devez servir votre site statique.

file

C’est à peu près tous que vous devez savoir pour commencer et de vous orienter.

Suggestion : À ce pont il ferait beaucoup de sens si vous commencez à mettre sur pied une application de test vous-même. Regardez autour et avoir une idée de comment les choses sont organisées et comment les pièces s’emboîtent.

Pages préliminaires

Le terme priliminaires provient de la publication de livres, et il se réfère à l’information à l’avant d’un livre. Dans le cas des fichiers de site Web statique, il se réfère à des blocs d’informations qui sont stockées en YAML. Chaque page vous permet d’utiliser des variables qui peuvent être stockés à droite en haut à l’intérieur d’un leader et un triple trait d’Union. Par exemple, voici le début d’un fichier fictif appelé : some.html.erb.

Les variables YAML ressemblent à un hachage. Vous pouvez accéder à ces données locales par le biais de l’objet current_page :

Vous souvent utiliser pour stocker des étiquettes, des dates, des titres et des options de configuration — comme quelle mise en page que vous souhaitez utiliser pour certaines pages. Pages préliminaires est un magasin YAML pour vos variables. Vous pouvez également utiliser JSON si vous le souhaitez. Pensez-y comme un endroit pour mettre les données qui pourraient normalement résident dans une base de données. J’ai examinera les différentes options et utilise le long du chemin, lorsqu’elles sont soulevées.

ERB

Il s’agit d’une bonne occasion pour passer brièvement en revue ERB. ERB vous permet de créer des modèles dynamiques qui ont incorporé le code en eux. Vos noms de fichiers doivent avoir une extension de .erb et vous devrez insérer votre code dans les deux suivantes « conteneurs ».

Pour le code qui obtient exectuted, mais ne pas « imprimés » sur la page, vous utilisez ceci :

Pensez-y comme « calcul seulement ».

Sinon, pour des valeurs de retour que vous souhaitez voir apparaître « imprimés » sur la page, vous devez ajouter un signe "égal" aussi bien. Voilà.

Mises en page

Les concepts de mises en page et partiels sont étroitement liés. Laissez-moi vous donner une petite tournée triomphale dans le cas où vous n’avez pas joué avec Rails, Sinatra ou similaire avant. Je pense que je devrais commencer avec des présentations tout d’abord.

Mises en page vous fournissent la structure de balisage commun entre les différentes pages de partager — qui appartiennent à la même « famille » des pages. C’est un outil pour éviter les doubles emplois et d’accélérer votre travail. Au lieu d’écrire le même squelette HTML dans tous les sens vous composer des mises en cas d’une utilisation particulière. Les exemples populaires sont deux différentes mises en page pour un admin et un utilisateur « normal ». Ils ont généralement une expérience très différente en regardant la page « même ».

Lorsque vous lancez une application simple intermédiaire, vous obtiendrez automatiquement un fichier de layout.erb en source/layouts. Prenez note que ce fichier se termine par .erb et non. html.erb. Mises en page n’a pas doivent être rendus au format HTML et intermédiaire lèvera une erreur si vous créez des mises en page avec l’extension .html. Si vous utilisez un langage de templates différents comme Slim ou Haml, mises en page pourraient avoir leurs extensions. Comme l’indique la valeur par défaut, vous devriez mettre toutes vos mises en page dans le dossier /layouts dans la source.

Voici un exemple de source/layouts/layout.erb :

Cette mise en page par défaut est jolie barebones, mais fournit tous que vous avez besoin pour démarrer. Nous allons jeter un oeil :

  • Un peu de méta-informations.
  • Un titre de page dynamique qui lit les données depuis les priliminaires toutes les pages.
  • Méthodes d’assistance qui incluent le style et les fichiers JavaScript.
  • Et enfin une balise body pour envelopper votre contenu qui est « permis » dans la mise en page via < % = % de rendement >.

Et de là, vous pouvez personnaliser cette mise en page à tous vos besoins. Un des aspects pouvant prêter à confusion pour les débutants Ruby est le mot clé yield — cela signifie juste qu’elle passe à travers le reste du contenu que vous créez. En d’autres termes, le rendement est un espace réservé pour votre point de vue qui sera obtenir rendu dedans. Si ce concept est complètement étranger à vous n’oubliez pas de ne pas y toucher pour l’instant ou votre application peut ne pas fonctionner comme prévu. Chaque fois que vous créez vos propres mises en page, vu le rendement là-dedans est essentielle, que sinon ne montrera pas votre contenu. Vous aurez le coup de lui à aucun moment, je vous le promets.

Si vous avez créé différentes mises en page, vous pouvez spécifier via les pages préliminaires quelle présentation vous souhaitez utiliser sur une base de page par page. Disons que vous avez une disposition spéciale pour accueillir les utilisateurs c’est un peu plus salesy. Ici, nous avons welcome.html.erb.

Vous pouvez également spécifier des mises en page dans votre fichier config.rb.

Si vous voulez éviter de faire cela pour chaque page manuellement, vous pouvez les rassembler en un seul endroit. Encore une fois, dans config.rb, vous utilisez un caractère générique (** \ ***) pour collecter un tas de pages qui utilisent la même disposition.

Personnellement, j’aime mettre cette info de mise en page dans les pages préliminaires. C’est très explicite et pas trop répétitif. Si j’avais un tas d'entre eux, cependant, j’utiliserais plutôt l’approche générique.

Prothèses partielles

Partiels vous donnera les moyens pour encapsuler l’afficher le code que vous pouvez réutiliser partout où vous avez besoin. Il vous suffit de dire votre point de vue où insérer une partielle et il obtient droit là-dedans. Prothèses partielles sont une technique très courante pour séchage vers le haut de votre code.

Des exemples très courants comprennent sections navbars, pieds de page et la tête, ce qui vous ne voudriez pas à dupliquer partout. Les fichiers pour les partiels commencent par un trait de soulignement. Pour commencer vous pouvez les placer sous /source. Vos mises en page sont un bon point de départ avec collecte de code pour extraire dans partiels. Chaque fois que vous trouvez quelque chose que vous devez réutiliser, partiels sera un ami très pratique.

Voici un exemple de /source/layouts/layout.erb.

Et la source/_head.html.erb partielle :

Parfois, vous aurez envie d’extraire un partiel non seulement pour éviter les doubles emplois, mais pour rendre votre point de vue plus lisible. Au fil du temps, sections tête sont notoires pour devenir assez chargé, par exemple. En leur sein, vous pouvez avoir autres partiels qui traitent uniquement de style ou les fichiers JS.

Vous vous rendrez compte combien partiels sont une fois que vous pouvez appliquer les modifications que l’ondulation à travers votre application entière — où que vous avez inclus la partielle. Il n’y a pas besoin de passer par un tas de fichiers pour appliquer la modification même encore et encore.

Aides

Programmes d’assistance sont des méthodes que vous pouvez utiliser pour un grand nombre de tâches quotidiennes dans votre point de vue. Je crois que cela a été pionnière dans les terres de Rails et est rapidement devenu omniprésent pour le développement web moderne web. Vous avez déjà vu des assistances que comprennent les feuilles de style et les fichiers JavaScript. Il y a beaucoup plus d'où cela vient bien.

Voici notre /source/_head.html.erb partielle à nouveau :

Ces aides sont destinées à vous aider à écrire du code plus propre et plus concis vue. Dans les aides de la liste ci-dessous, vous trouverez beaucoup de choses utiles qui sort de la boîte. Vous n’êtes pas limité par ces bien. Écrire vos propres méthodes d’assistance dans config.rb ou collectionnez-les séparément dans un module.

Il fonctionne comme ceci : dans votre config.rb, vous créez un bloc d’aides et mettre tous vos méthodes d’assistance à l’intérieur. Voilà. Vos avis ont maintenant accès à eux.

Exemple : /source/_navbar.erb.

Et dans config.rb :

Ces aides pourraient venir dans maniable quand j’ai rapidement veulent quelque chose de prototype et souhaitez éviter la mise en place des textes et des images factices moi-même. Dans l’ensemble, vous devriez regarder dehors pour le code que vous aimeriez être plus concis ou que vous dupliquez maintes et maintes fois. Programmes d’assistance sont souvent une bonne maison pour cela.

À l’intérieur de ces aides personnalisées, j’ai utilisé autres aides intermédiaire pour créer des balises img image_tag ainsi que l’objet lorem pour certains noms d’utilisateur aléatoire et espaces pour images. Ces thingies lorem peut être un peu personnalisées selon vos besoins.

En utilisant le module approche, cependant, il faut un fichier séparé pour votre module. Créer un répertoire « lib » dans votre dossier racine (au même niveau que la « source » et « build ») et créer un fichier pour vos aides.

Ici, nous avons /lib/helpers.rb :

Ensuite, vous devrez informer votre fichier config.rb que vous souhaitez utiliser ces aides :

Boom ! Vous êtes prêt à rouler. En général, j’irais avec le module approche tout de suite. Il se sent beaucoup plus propre à moi, ainsi vous évitez de polluer votre fichier de configuration avec trop de choses.

Je voudrais également se pencher sur les aides de la production et content_for en particulier, puisqu’ils peuvent être un peu déroutants pour les débutants. Cela permet de vous capturer un tas de contenu que vous pouvez donner / réutiliser un autre endroit. C’est une miniature partielle de toutes sortes. Personnellement, j’irais avec a la plupart du temps, mais chaque maintenant et puis lorsque vous souhaitez appliquer les modifications marche plus que chirurgicalement c’est pratique de savoir partielle :

Voici index.html.erb :

Et admin_index.html.erb :

Puis dans layout.erb :

content_for ?

La clé est d’utiliser yield_content qui met votre contenu collectée depuis la page individuelle dans la mise en page — si trouvé. Il n’y a aucun besoin juste les utiliser seulement avec les configurations non plus. Lorsque vous avez besoin d’en faire un peu plus impliqué, utiliser content_for ? pour rechercher un contenu spécifique blocs avant que vous insériez. C’est pratique lorsque vous voulez faire de petites adaptations pour les sections qui diffèrent seulement légèrement. C’est génial que vous pouvez sauvegarder ce contenu un peu comme une configuration sur les pages elles-mêmes et « activer » c’est seulement si nécessaire. Vous probablement ne devrait pas obtenir trop intelligent avec ces choses cependant.

link_to

Un mot au sujet du programme d’assistance link_to que j’ai utilisé ci-dessus. C’est probablement celle que vous rencontrerez plus souvent. Vous nourrissez essentiellement de la méthode, un nom et une url ou un chemin d’accès où ce lien doit pointer vers. J’ai remplacé la dernière partie avec un espace réservé par souci de concision.

Voici une vue d’ensemble dont les aides sont out-of-the-box à votre disposition. Je pense que les noms sont pour la plupart pas appeler d’explication et je ne devrais pas aller sur ce que chacun d'entre eux peut vous aider. Faire un signet mental de ce qui est là-bas et vérifier avec la documentation si on vous donne des problèmes.

Aides de la balise

  • balise
  • link_to
  • input_tag
  • favicon_tag
  • stylesheet_link_tag
  • javascript_include_tag

Aides de sortie

  • content_for
  • content_for ?
  • capture_html
  • yield_content
  • concat_content

Aides de forme

  • form_tag
  • label_tag
  • select_tag
  • submit_tag
  • field_set_tag
  • text_field_tag
  • check_box_tag
  • password_field_tag

Format Helpers

  • tronquer
  • pluraliser
  • word_wrap
  • escape_html
  • simple_format
  • js_escape_html
  • time_ago_in_words
  • distance_of_time_in_words

Lorem Helpers

  • Lorem.date
  • Lorem.Word
  • Lorem.Name
  • Lorem.email
  • Lorem.image
  • Lorem.Words
  • Lorem.sentence
  • Lorem.last_name
  • Lorem.paragraph
  • Lorem.first_name
  • Lorem.paragraphs

Réflexions finales

Selon moi, qu'il s’agit d’une bonne base pour commencer à jouer avec un jouet app. Vous devriez avoir un bon sens de ce qu’offre intermédiaire et comment naviguer dans le cadre. Dans la prochaine partie de cette série, nous allons prendre des choses plus loin et plonge un peu plus profond dans le cadre. L’équipe intermédiaire a vraiment fait un super boulot avec la conception de l’API et garder les choses simples.

J’espère que vous pouvez voir maintenant pourquoi ce cadre a gagné en popularité et pourquoi c’est un bon choix pour toutes sortes de projets statiques.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.