Catégories
Astuces et Design

An Eleventy Starter avec Tailwind CSS et Alpine.js

Quand j'ai décidé d'essayer de baser mon site personnel actuel sur Eleventy, je ne voulais pas réinventer la roue: j'ai testé tous les démarreurs Eleventy construits avec Tailwind CSS que je pouvais trouver dans Starter Projects à partir de la documentation.

Beaucoup de débutants semblaient intégrer Tailwind CSS de manière artificielle. De plus, certains d'entre eux semblaient supposer que personne ne mettait à jour la configuration de Tailwind à la volée en travaillant sur un site Web. C’est pourquoi j’ai intégré Eleventy avec Tailwind CSS et Alpine.js moi-même. J'ai des raisons de croire que vous aimerez la simplicité de ma solution.

Un bon design est aussi petit que possible.

—Dieter Rams, 10 principes pour une bonne conception

Si vous n'êtes pas intéressé par les détails, n'hésitez pas à attraper mon démarreur et à sauter directement.

Commencer

Je vais supposer que vous avez une compréhension générale de Tailwind CSS, HTML, JavaScript, Nunjucks, la ligne de commande et npm.

Commençons par un nouveau dossier, puis cd dans la ligne de commande et l'initialiser avec un package.json fichier:

npm init -y

Nous pouvons maintenant installer Eleventy et Tailwind CSS. Nous ajouterons également PostCSS:

npm install --save-dev @11ty/eleventy tailwindcss postcss-cli

Nous devons créer une page pour tester si nous avons réussi à configurer les choses. Dans un cas d'utilisation réel, nos pages utiliseront des modèles, nous allons donc le faire ici également. C'est là que Nunjucks s'intègre dans le mélange, servant de moteur de modélisation.

Créons un nouveau fichier appelé index.njk dans le dossier du projet. Nous allons le désigner comme page d'accueil:

{% extends "_includes/default.njk" %}


{% block title %}It does work{% endblock %}


{% block content %}
  
   
      Good design
      is
as little design
as possible
   
 
{% endblock %}

Modèles de base

Créons maintenant un nouveau dossier dans le dossier du projet appelé _includes (et oui, le nom du dossier est important). Dans ce nouveau dossier, nous allons créer un fichier appelé default.njk que nous utiliserons comme modèle par défaut pour notre mise en page. Nous allons simplifier les choses avec un passe-partout HTML de base:



  
    
      {% block title %}Does it work?{% endblock %}
    
    
    {% if description %}
      
    {% endif %}
    
    
    
    {% block head %}{% endblock %}
  
  
    {% block content %}
      {{ content | safe }}
    {% endblock %}
  

Configuration de Tailwind CSS

Prenons soin d'un test pour Tailwind CSS en aussi peu de mouvements que possible. Créez d'abord un nouveau sous-dossier appelé styles et un fichier appelé tailwind.config.js:

module.exports = {
  theme: {
    colors: {
      change: "transparent"
    }
  },
  variants: {},
  plugins: (),
}

Ensuite, créez un fichier appelé tailwind.css dans ce même styles dossier:

/* purgecss start ignore */
@tailwind base;
/* purgecss end ignore */


.change {
  color: transparent;
}


/* purgecss start ignore */
@tailwind components;
/* purgecss end ignore */


@tailwind utilities;

Nous avons fini avec le dossier des styles pour l'instant. Nous avons besoin d'un fichier de configuration qui indique à PostCSS d'utiliser Tailwind CSS, que nous pouvons obtenir en créant un nouveau fichier dans le répertoire racine du dossier du projet appelé postcss.config.js. Voici comment nous avons besoin du CSS Tailwind et de son fichier de configuration avec PostCSS:

module.exports = {
  plugins: (
    require(`tailwindcss`)(`./styles/tailwind.config.js`)
  ),
};

Démarrage et construction du projet

Créons maintenant un autre nouveau fichier dans le même répertoire racine appelé .gitignore. Cela nous permettra de définir les fichiers à ignorer lors de la validation du projet dans un référentiel, comme sur GitHub:

_site/
_tmp/
.DS_Store
node_modules/
package-lock.json

Ensuite, est un autre nouveau fichier, cette fois qui dit à Eleventy ce qu'il peut ignorer, appelé .eleventyignore. Il n'a besoin que d'une ligne:

node_modules

OK, nous allons maintenant créer un fichier appelé .eleventy.js (notez le premier point!) qui configure fondamentalement Eleventy, en lui indiquant quels fichiers regarder et où enregistrer son travail:

module.exports = function (eleventyConfig) {
  eleventyConfig.setUseGitIgnore(false);


  eleventyConfig.addWatchTarget("./_tmp/style.css");


  eleventyConfig.addPassthroughCopy({ "./_tmp/style.css": "./style.css" });


  eleventyConfig.addShortcode("version", function () {
    return String(Date.now());
  });
};

Nous pouvons maintenant mettre à jour le package.json fichier avec tous les scripts dont nous avons besoin pour démarrer et construire le site pendant le développement. Les dépendances doivent déjà exister depuis la configuration initiale.

{
  "scripts": {
    "start": "eleventy --serve & postcss styles/tailwind.css --o _tmp/style.css --watch",
    "build": "ELEVENTY_PRODUCTION=true eleventy & ELEVENTY_PRODUCTION=true postcss styles/tailwind.css --o _site/style.css"
  },
  "devDependencies": {
    "@11ty/eleventy": "^0.11.0",
    "postcss-cli": "^7.1.0",
    "tailwindcss": "^1.4.6"
  }
}

Hé, super boulot! On l'a fait. Générez le projet pour générer le CSS initial – cette étape n'est requise que lors de la première configuration. Depuis la ligne de commande:

npm run build

Et – drumroll, s'il vous plaît – commençons officiellement le site:

npm run start

Ouvrir la page http://localhost:8080 dans votre navigateur. Ça ne va pas ressembler beaucoup, mais vérifiez le titre de la page dans l'onglet du navigateur:

Ça marche!

Nous pouvons encore vérifier un peu plus pour nous assurer que tout va bien. S'ouvrir /styles/tailwind.config.js et changer le transparent valeur de couleur à autre chose, disons black. La configuration de Tailwind devrait se recharger, ainsi que la page de votre navigateur.

Ne perdez pas de vue votre navigateur et modifiez /styles/tailwind.css en changeant transparent à black encore. Votre fichier CSS devrait recharger et actualiser dans votre navigateur.

Maintenant, nous pouvons très bien travailler avec Eleventy et Tailwind CSS!

Optimiser la sortie

À ce stade, Tailwind CSS fonctionne avec Eleventy, mais le fichier CSS est énorme. Le code HTML généré n'est pas parfait non plus, car il contient des éléments comme des caractères de nouvelle ligne redondants. Nettoyons-le:

npm install --save-dev @fullhuman/postcss-purgecss postcss-clean html-minifier

S'ouvrir postcss.config.js et remplacez ce qui s'y trouve par ceci:

module.exports = {
  plugins: (
    require(`tailwindcss`)(`./styles/tailwind.config.js`),
    require(`autoprefixer`),
    ...(process.env.ELEVENTY_PRODUCTION
      ? (
          require(`postcss-clean`),
          require(`@fullhuman/postcss-purgecss`)({
            content: ("_site/**/*.html"),
            defaultExtractor: (content) =>
              content.match(/(w-/:)+(?

À l'avenir, dans le processus de création de votre site Web, si quelque chose ne va pas après avoir construit le projet et que vous avez l'impression que des fragments de CSS sont manquants, ajoutez des noms de classe «ignorés» à la liste blanche dans le fichier ci-dessus.

Ajoutez la ligne suivante au début de la .eleventy.js fichier:

const htmlmin = require("html-minifier");

Nous devons également configurer htmlmin dans .eleventy.js ainsi que:

eleventyConfig.addTransform("htmlmin", function (content, outputPath) {
    if (
      process.env.ELEVENTY_PRODUCTION &&
      outputPath &&
      outputPath.endsWith(".html")
    ) {
      let minified = htmlmin.minify(content, {
        useShortDoctype: true,
        removeComments: true,
        collapseWhitespace: true,
      });
      return minified;
    }


    return content;
});

Nous utilisons ici une transformation qui est une chose Eleventy. Les transformations peuvent modifier la sortie d'un modèle. À ce point, .eleventy.js devrait ressembler à ceci:

const htmlmin = require("html-minifier");


module.exports = function (eleventyConfig) {
  eleventyConfig.setUseGitIgnore(false);


  eleventyConfig.addWatchTarget("./_tmp/style.css");


  eleventyConfig.addPassthroughCopy({ "./_tmp/style.css": "./style.css" });


  eleventyConfig.addShortcode("version", function () {
    return String(Date.now());
  });


  eleventyConfig.addTransform("htmlmin", function (content, outputPath) {
    if (
      process.env.ELEVENTY_PRODUCTION &&
      outputPath &&
      outputPath.endsWith(".html")
    ) {
      let minified = htmlmin.minify(content, {
        useShortDoctype: true,
        removeComments: true,
        collapseWhitespace: true,
      });
      return minified;
    }


    return content;
  });
};

D'accord, courons npm run start encore une fois. Vous verrez que rien n'a changé et c'est parce que l'optimisation ne se produit que pendant la génération. Alors, essayons plutôt npm run build puis regardez le _site folder. Il ne devrait pas y avoir un seul caractère inutile dans le index.html fichier. Il en va de même pour le style.csfichier s.

Un projet construit comme celui-ci est maintenant prêt à être déployé. Bon travail! 🏆

Intégration d'Alpine.js

J'ai décidé de passer à Eleventy de Gatsby.js parce que cela me semblait trop JavaScript. Je préfère la dose raisonnable de JavaScript vanille mélangé à Alpine.js. Nous n'entrerons pas dans les spécificités d'Alpine.js ici, mais cela vaut la peine de vérifier l'amorce de Hugo DiFrancesco parce que c'est un point de départ parfait.

Voici comment nous pouvons l'installer sur notre projet à partir de la ligne de commande:

npm install --save-dev alpinejs

Maintenant, nous devons mettre à jour .eleventy.js avec ceci à la fonction qui passe les choses à travers Alpine.js:

eleventyConfig.addPassthroughCopy({
  "./node_modules/alpinejs/dist/alpine.js": "./js/alpine.js",
});

Enfin, nous allons ouvrir _includes/default.njk et ajoutez Alpine.js juste avant la fermeture marque:

Nous pouvons vérifier si Alpine fonctionne en l'ajoutant à index.njk:

{% extends "_includes/default.njk" %}


{% block title %}It does work{% endblock %}


{% block content %}
  
   
      Good design
      is
as little design
as possible

         
 
{% endblock %}

Lancez le projet:

npm run start

Si Alpine.js fonctionne, vous verrez «Hello World» dans votre navigateur. Félicitations, deux fois! 🏆🏆


J'espère que vous pouvez voir à quel point il peut être rapide de mettre en place un projet Eleventy, y compris des intégrations avec Nunjucks pour les modèles, Tailwind pour les styles et Alpine.js pour les scripts. Je sais que travailler avec de nouvelles technologies peut être écrasant et même déroutant, alors n'hésitez pas à m'envoyer un e-mail à (email protected) si vous avez des problèmes de démarrage ou si vous avez une idée de comment simplifier encore plus.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *