Les jolies URL, alias les URL personnalisées, alias les URL minuscules, sont idéales pour améliorer le référencement et l’UX. Ce sont des versions plus courtes d’un domaine, ce qui les rend utiles pour le copier-coller et l’impression. Il existe déjà de nombreux services de raccourcissement de domaine. Mais avec Jekyll et Netlify, je peux configurer de jolies URL tout seul !
Ce que je veux réaliser est le suivant.
Chaque article de ce site Web a un number dans son Front Matter. Je souhaite utiliser ces numéros de séquence pour rediriger vers le message principal. L’utilisation de chiffres comme de jolies URL permettra aux utilisateurs de les saisir plus facilement dans la barre d’adresse.
Le plan
Mon article sur Premiers pas avec ArgoCD est l’article 94. Donc je veux https://<my-pretty-domain>/94 pour rediriger vers l’article complet. Tout autre lien pour https://<my-pretty-domain> qui ne contient pas de numéro d’article valide doit rediriger vers le domaine principal, ayushsharma.in.
En décomposant le plan en tâches individuelles, j’obtiens la liste suivante :
- Enregistrez un joli domaine et pointez-le vers Netlify.
- Redirigez les jolies URL des articles vers l’URL complète.
- Redirigez toutes les autres jolies URL vers le domaine principal,
ayushsharma.in.
Enregistrez un joli domaine et pointez-le vers Netlify
La première tâche est d’obtenir un joli domaine. J’ai enregistré ayush.to comme ma jolie URL et l’ai pointée vers Netlify. Il existe plusieurs options pour pointer un domaine vers les équilibreurs de charge de Netlify. je pointe ayush.to‘s A record à Netlify que vous pouvez vérifier avec nslookup.
> nslookup ayush.to
Server: 10.1.0.1
Address: 10.1.0.1#53
Non-authoritative answer:
Name: ayush.to
Address: 75.2.60.5
De plus, j’ai également ajouté ayush.to comme alias de domaine afin que Netlify puisse émettre les certificats SSL.
Rediriger les jolies URL des articles vers l’URL correcte
Netlify propose deux manières de gérer les redirections pour les sites Web statiques : le fichier _redirects et Netlify.toml. Les deux options utilisent une syntaxe différente pour la redirection et offrent des fonctionnalités différentes.
Les deux options ont également un ordre de traitement spécifique. Netlify traite le _redirects fichier avant Netlify.toml. Donc mon plan est d’utiliser _redirects pour les redirections réelles et Netlify.toml pour le fourre-tout.
Pour créer le _redirects fichier, je vais utiliser le code suivant :
---
---
{% assign posts = site.posts | sort: 'number' %}
{% for post in posts %}{{ post.number | prepend: "https://ayush.to/" }} {{ post.url | prepend: site.baseurl | prepend: site.url }}
{% endfor %}
Jekyll ignore les fichiers commençant par un trait de soulignement (_) par défaut. Nous devrons donc l’inclure dans le _config.yml.
include:
- _redirects
Une fois le processus de génération terminé, le _redirects fichier dans le dossier de destination ressemble à ceci :
https://ayush.to/0 https://www.ayushsharma.in/2016/08/hello-world
https://ayush.to/1 https://www.ayushsharma.in/2016/08/douglas-noel-adams
https://ayush.to/2 https://www.ayushsharma.in/2021/08/introduction-to-ansible
https://ayush.to/3 https://www.ayushsharma.in/2016/08/json-web-tokens
https://ayush.to/4 https://www.ayushsharma.in/2016/08/nano-keyboard-shortcuts
https://ayush.to/5 https://www.ayushsharma.in/2016/08/introduction-to-fluentd
...
S’il n’y avait pas d’erreurs de syntaxe dans le _redirects fichier, Netlify devrait le confirmer en vous indiquant le nombre de règles de redirection qu’il a traitées.
Je suis presque là! j’ai généré le _redirects déposer. Maintenant, pour gérer le fourre-tout.
Rediriger toutes les autres URL jolies vers le domaine principal
Mon _redirects peut gérer des redirections spécifiques. Mais je dois aussi définir un fourre-tout.
C’est ici que Netlify.toml entre. Dans Netlify.toml, je vais dire à Netlify de tout rediriger vers mon domaine principal. Netlify.toml vient après _redirects dans l’ordre de traitement. Cela signifie que mon fourre-tout n’intervient que si aucune règle de redirection spécifique ne correspond. Joli!
Mon Netlify.toml contient maintenant le code suivant :
## ayush.to
[[redirects]]
from = "https://ayush.to/*"
to = "https://www.ayushsharma.in"
status = 301
force = true
[redirects.headers]
X-From = "Netlify"
[[redirects]]
from = "https://www.ayush.to/*"
to = "https://www.ayushsharma.in"
status = 301
force = true
[redirects.headers]
X-From = "Netlify"
L’essai routier !
Voyons maintenant si tout cela fonctionne.
J’ai poussé le code ci-dessus vers Netlify et les robots ont terminé leur tâche.
Donc. Si je vais sur ayush.to/94, je devrais voir l’article sur « Commencer avec ArgoCD ».
Et…
> curl https://ayush.to/94
Redirecting to https://www.ayushsharma.in/2021/07/getting-started-with-argocd
… Ça marche!
Conclusion
Les jolies URL sont une fonctionnalité puissante dans un petit paquet. Et j’ai pu le configurer proprement et rapidement grâce à Jekyll et Netlify.
La possibilité de configurer les robots de Netlify à l’aide de scripts simples est la raison pour laquelle j’aime tant le service. Nous pouvons bien sûr apporter de nombreuses améliorations. Nous pourrions améliorer la gestion des www et non-www versions de domaines. Au lieu d’utiliser des nombres comme dans cet exemple, nous pourrions également utiliser des slugs plus petits ou des balises et des catégories de publication. Nous pouvons définir des redirections ponctuelles pour des occasions spéciales comme des soldes ou des lancements de livres. La liste se rallonge de plus en plus.
J’espère que les roues dans ta tête ont commencé à tourner. Faites-moi savoir si vous proposez une nouvelle utilisation folle pour les robots de redirection Netlify. Bonne chance et bon codage 🙂