Share
Dans la troisième partie de cette série, nous allons nous salir les mains et commencer à créer un site pour un site de podcast fictif: «Matcha Nerdz». Nous utiliserons Middleman, Bourbon, Neat et Bitters. Allons-y!
Commençons par un bref aperçu de la situation. Dans les prochains articles, je vais créer un petit site statique pour un podcast fictif appelé «Matcha Nerdz», un podcast destiné aux personnes qui souhaitent se plonger dans le thé vert en poudre. Il aura les pages suivantes:
Nous utiliserons Middleman pour générer le site statique et la suite Bourbon pour tous les styles. J'espère que vous avez jeté un coup d'œil à mes précédents tutoriels sur Bourbon, Neat et Middleman avant votre arrivée. Sinon, je vous recommande d'aller les lire, à moins que vous ne vous sentiez déjà suffisamment à l'aise avec les bases.
Pour tout ce qui a trait au style, je fais beaucoup confiance à Bourbon depuis un bon moment. En outre, je creuse vraiment la syntaxe Sass en retrait-je le préfère de loin à la .scss syntaxe. le .toupet la syntaxe est le seul (probablement) inconnu peu que je voudrais jeter aux débutants, parce que je pense que cela vaut vraiment la peine de connaître.
Initions une nouvelle application pour notre site de podcast, en entrant dans le terminal:
intermédiaire bash init matcha_nerdz puis en passant à notre répertoire de projet:
bash cd matcha_nerdz
Maintenant, nous allons commencer Git:
"bash git init
# => pour initier un nouveau repo Git
git add -all # => ajoute tous les fichiers pour le transfert
git commit -m 'Commit Initital' # => valide les modifications "
Ensuite, nous ajoutons le modèle de blog au mélange. C'est une bonne base pour notre site de podcast. Plus tard, nous ajusterons les articles pour afficher les pistes audio de podcast de SoundCloud. Pour l'instant, cependant, ce n'est qu'un blog.
Dans le Gemfile, ajoutez:
rubis bijou "intermédiaire-blog"
Puis via le terminal:
bash bundle # ou intermédiaire bundle exec
bash intermédiaire init --template = blog
Cela mettra à jour votre dossier «matcha_nerdz». “.Config.rb” et votre modèle d'index reçoivent également une petite mise à jour. En plus de cela, vous obtenez de nouveaux modèles pour votre flux, une page de balises, une page de calendrier, un exemple d'article et une nouvelle présentation. Vérifiez la sortie du terminal:
bash identique .gitignore update config.rb existe source créer source / 2012-01-01-exemple-article.html.markdown créer source / calendar.html.erb créer source / feed.xml.builder mise à jour source / index.html.erb créer source / layout.erb créer source / tag.html.erb existe source / stylesheets existe source / javascripts existe source / images
Git:
bash git add --all git commit -m "Ajoute un modèle de blog"
Vous pouvez maintenant créer de nouveaux articles via la ligne de commande:
article d'intermédiaire bash 'Mon nouveau deuxième article original' # => create source / 2015-11-22-my-wonderful-second-article.html.markdown
Cela crée un nouvel article de démarque sous “/ source”. Ce n'est pas optimal en termes de stockage mais nous y arriverons. Lancez votre serveur pour voir votre premier exemple d'article de blog:
bash intermédiaire # ou intermédiaire serveur
Nous devons ensuite faire un peu de ménage. Le modèle de blog a créé une nouvelle présentation sous «source / layout.erb». Nous devons supprimer l’original dans “source / layouts / layout.erb” et déplacer le nouveau. Donc, via le terminal:
bash rm source / layouts / layout.erb mv source / layout.erb source / layouts /
Nous devons également mettre à jour le nouveau "layout.erb" avec des éléments supprimés dans le fichier de mise en page. Ajoutez ce qui suit à votre balise dans “source / layouts / layout.erb”:
"html
<%= stylesheet_link_tag “normalize”, “all” %> <%= javascript_include_tag “all” %>"
Plus important encore, cela garantit que vos ressources JS et style sont disponibles..
Git
bash git source / layout.erb git add --all git commit -m 'Déplace une nouvelle présentation dans / layouts Ajoute des liens d'actif Supprime l'ancienne présentation'
Pour rendre nos vies un peu plus pratiques, nous ajouterons LiveReload au mélange. Nous devons récupérer la gemme puis l'activer dans notre fichier «config.rb».
Dans notre Gemfile:
gemme rubis 'intermédiaire-foie'
Dans le terminal:
bash bundle
Puis dans config.rb:
ruby #uncomment activate: foieeload
Et enfin nos commandes Git:
bash git add --all git commit -m 'Active LiveReload'
Lorsque cela est activé, redémarrez votre serveur et votre page s'actualisera automatiquement chaque fois que vous modifierez le contenu, les styles ou le comportement de la page. Sauveteur de vie, croyez-moi!
Attention! Attention: si un autre serveur local est en cours d'exécution, LiveReload risque de ne pas jouer au ballon. Vous aurez besoin de tuer cet autre serveur pour l'instant.
Lorsque vous regardez où les articles sont stockés maintenant, vous réaliserez rapidement que cette organisation directement sous «/ source» devient très fastidieuse. Publiez quelques articles et vous vous noierez dans des publications. Pas besoin d'être aussi désordonné, créons plutôt un répertoire sous “/ source” pour tous nos articles. Déplacez votre ou vos articles et laissez Middleman savoir où les trouver..
bash mkdir source / posts mv source / 2012-01-01-example-article.html.markdown source / posts / Ensuite, nous ajoutons «/ posts» comme source pour les articles de blog. Dans config.rb:
ruby blog.sources = "posts /: year-: title.html"
Puis nos commandes Git:
"bash git rm source / 2012-01-01-example-article.html.markdown # Supprime le fichier déplacé du référentiel
git add -all gco -m 'Ajoute un nouveau dossier pour les publications et ajoute la source dans config.rb "
Et c'est tout. Rien n'aurait dû changer et vous devriez voir l'exemple de l'article comme avant. Le stockage des messages, cependant, est beaucoup plus sain. Ce qui est également intéressant, c'est que si vous créez de nouveaux articles via la ligne de commande, vos nouveaux messages seront automatiquement stockés dans «/ post»:
article d'intermédiaire bash 'Mon superbe 3ème article' # => créer une source / posts / 2015-my-awesome-3rd-article.html.markdown
Pour moi, le transfert de sites statiques vers GitHub Pages est une solution tellement pratique que je ne souhaite pas vous laisser déployer par le biais de Heroku ou du service S3 d'Amazon. Restons simples!
Dans le Gemfile:
gemme rubis "intermédiaire-déployer"
Puis dans le terminal:
bash bundle
Nous devons ajouter un bloc de déploiement à «config.rb»:
ruby activer: déployer faire | déployer | deploy.method =: git deploy.branch = 'gh-pages' deploy.build_before = true fin
Pour que GitHub Pages puisse trouver vos ressources CSS et JS, nous devons également activer les éléments suivants dans config.rb:
ruby configure: build active: fin_assets
Ensuite, créez un dépôt sur GitHub, ajoutez la télécommande et déployez:
"bash git remote add origine https://github.com/yourusername/repositoryname.git
intermédiaire se déployer "
Boom! Votre site est sous "yourusername.github.io/projectname" et vos actifs doivent être triés. J'aime ce processus, il ne pourrait pas être plus facile et plus convivial. Excellent travail GitHub!
bash git add --all gco -m 'Ajoute la configuration pour le déploiement de GitHub Pages'
Avant de passer à la configuration de Bourbon, j'aimerais supprimer les styles fournis avec Middleman et optimiser nos actifs pour une meilleure performance en matière de minification et de concaténation des actifs de navigateur. Allez dans «source / stylesheets / all.css» et supprimez son contenu. Il suffit de garder la première ligne:
css @charset "utf-8";
Commandes Git:
bash git add --all git commit -m "Supprime les styles de Middleman inutiles"
Ensuite, nous souhaitons activer quelques options pour optimiser les performances dans «config.rb»:
ruby configurer: construire activer: asset_hash activer: minify_javascript activer: css activer: gzip fin
Puis, encore une fois, Git commande:
bash git add --all git commit -m 'Active les optimisations de performance'
Permettez-moi d'expliquer rapidement ce que nous avons fait ici:
Pour le moment, gzip est la méthode de compression la plus populaire et la plus efficace. Son algorithme de compression trouve des chaînes similaires dans un fichier et les compresse. Pour HTML, qui est plein d'espaces blancs et de balises correspondantes, cela est très efficace et réduit généralement la taille de la réponse HTTP de 70%. Activer ceci non seulement gzips votre HTML, mais également les fichiers CSS et JS. Au cours d'une compilation, Middleman crée vos fichiers comme d'habitude, mais les duplique également avec une version «.gz». Lorsqu'un navigateur entre en contact avec vos fichiers, il peut choisir s’il préfère traiter les fichiers compressés gzip ou normaux. gzipping est largement supporté par les navigateurs web et mobiles.
Ce processus supprime tous les fichiers inutiles de vos styles et réduit considérablement la taille de leurs fichiers. En bref, votre CSS devient un gros blob optimisé pour être lu par une machine. Certainement pas amical aux yeux.
C'est pareil que minify_css, mais un peu plus impliqué et sophistiqué.
Cela active le hachage de vos actifs. Cela signifie que les noms de fichiers de vos ressources changent et reçoivent des informations supplémentaires (pendant le processus de construction) qui informent les navigateurs sur le besoin de télécharger à nouveau des ressources ou non. Maintenant, le nom d'un fichier dépend du contenu de ce fichier. Les ressources hachées sont mises en cache par les navigateurs et vos sites sont rendus plus rapidement. Le terme «empreinte digitale» est un autre mot, car il fournit une solution simple pour indiquer aux navigateurs si deux versions d’un fichier sont identiques ou non. La date de déploiement n'a pas d'importance, seulement le contenu. Jetez un oeil ci-dessous à quoi ressemblent les fichiers d'actifs hachés:
Captures d'écran
Cela a l'air méchant, mais vos images, feuilles de style et fichiers JavaScript ont maintenant un nom unique grâce à ce code «aléatoire» ajouté: un hachage (unique). Chaque fois que vous modifiez un actif et recommencez le processus de construction, le hachage change, ce qui indique aux navigateurs qu'ils doivent alors, et seulement ensuite, télécharger à nouveau ce fichier. Le fichier a ensuite expiré, un processus appelé «contournement du cache»..
A noter également: vous pouvez faire référence à vos fichiers de la même manière qu'auparavant, mais lors de la construction, les références de votre code HTML sont mises à jour pour utiliser ces noms hachés. Regarde:
"/Build/index.html(.gz)":
"html
Accentsconagua