Aujourd’hui je vous propose un article sur la création de votre propre raccourcisseur d’url simplement et sans frais grâce à Netlify.

Petit rappel sur ce qu’est un raccourcisseur d’url bien que je pense qu’un bon nombre d’entre vous sachent de quoi on parle. Alors le principe de fonctionnement est le suivant, imaginons que vous possédez une url relativement longue comme celle-ci :

https://www.dwastudio.fr/blog/analysez-les-donnees-de-votre-site-simplement-avec-fathom/

Et bien vous copiez cette url et vous vous rendez sur un site comme Bitly.com par exemple et vous obtenez une url de ce type :

https://bit.ly/gGofX

Si des services qui permettent de faire çà existe déjà alors pourquoi créer notre propre service ?

Je pars du principe que dès lors que je peux me passer de services d’intermédiaires et que cela ne représente pas un temps considérable à mettre en place alors je m’en passe. Une autre raison est que lorsque vous centralisez vos liens sur ces plateformes vous n’êtes pas l’abri que les conditions d’utilisations changent et que demain une partie de vos liens soit bloquées pour X ou Y raisons.

Fonctionnement

Comment notre raccourcisseur url va fonctionner ? Comme je l’est indiqué dans l’introduction nous allons utiliser Netlify. Pour ceux qui ne connaissent pas Netlify, c’est un service qui vous permet d’héberger vos sites statiques simplement et gratuitement. Vous pouvez les relier à votre compte Github et ensuite faire en sorte que dès lorsqu’une mise à jour est faite sur une branche particulière de votre repo alors Netlify va redéployer votre site avec les nouvelles mises à jour.

Netlify permet aussi de gérer les redirections grâce un fichier _redirects. Par exemple vous avez un site exemple.com sur WordPress qui liste l’ensemble de vos articles sur la route /mes-articles. Vous décidez de migrer de WordPress vers Gatsby et d’utiliser Netlify pour héberger votre site Gatsby. Au passage vous renommez votre route /mes-articles en /articles. Les anciens utilisateurs qui ont en favoris la route /mes-articles ne sont pas au courant qu’elle a changée et ils vont essayer d’accéder à cette page et recevoir une erreur 404.

Avec le fichier _redirects vous pouvez éviter ça :

/mes-article /articles

Cette règle va venir indiquer que les utilisateurs qui demandent la page /mes-article doivent être redirigés vers la page /articles

Pour notre raccourcisseur d’url nous allons donc nous servir de ce fichier. Le principe est le suivant nous allons créer un site complètement vide qui ne contiendra que le fichier _redirects avec les redirections.

Configuration

Pour vous montrer comment mettre en place ce système je vais prendre l’exemple de ce site.

La première étape consiste à acheter un nom de domaine assez court si vous n’en possédez pas déjà un. Dans mon cas j’ai choisi dwa.li.

Ensuite nous allons créer un nouveau dossier nommé my-shortener et ajouter le fichier _redirects :

mkdir my-shortener && cd my-shortener
touch _redirects

Dans le fichier _redirects ajoutez le code suivant :

/* /[URL]

Remplacez [URL] par l’url de votre choix, cette règle permet de rediriger toutes les urls de votre domaine qui ne seront pas présentes dans ce fichier vers l’url de votre choix. Dans mon cas j’ai mis l’adresse https://dwastudio.fr.

Maintenant créez un repo sur Github ou Gitlab et poussez le code dessus. Ensuite rendez-vous sur Netlify et connectez-vous. Puis cliquez sur le bouton ”New site from Git” :

Sélectionnez votre plateforme (Github,Gitlab,Bitbucket) :

Ensuite sélectionnez le repo que vous venez de créer :

Et enfin déployez le site :

Une fois que votre site est déployé vous devriez avoir une url du type https://frosty-feynman-45dfEx.netlify.com. Si vous cliquez sur votre url alors vous devriez être rediriger vers l’url que nous avons ajouté précédement.

Maintenant nous allons lier notre domaine. Sur Netlify au niveau de la page overview de votre site sur cliquez sur “Add Custom Domain”.

Ensuite vous allez configurer le DNS Netlify en cliquant sur “Set up Netlify DNS” :

Suivez les insctructions jusqu’à obtenir la liste des serveurs Netlify :

Enfin la dernière étapes est de venir modifier la configuration DNS de votre domaine sur le site ou vous l’avez acheté. Dans mon cas je l’ai pris sur OVH mais le fonctionnement est sensiblement le même chez tous les revendeurs.

Sur OVH rendez-vous sur votre espaces client puis sélectionnez votre domaine. Une fois sur la page d’administration de votre domaine cliquez sur ”Serveur DNS” puis sur ”Modifier les serveurs DNS”. Ensuite modifiez la liste avec les noms des serveurs fournis par Netlify :

Une fois votre configuration enregistrée vous devrez patienter un moment(24 à 48h) le temps que la propagation de la configuration ce fasse. Une fois la propagation terminée vous pourrez activer le https simplement.

Utilisation de netlify-shortener

Maintenant que nous avons la base de notre système nous allons aller un peu plus loin pour que ce soit plus simple d’utilisation et plus pratique. Car pour le moment à chaque fois que l’on souhaite ajouter une url il faut ouvrir le fichier _redirects ajouter notre nouvelle url et enfin pousser les modifications sur git afin de relancer un déploiement sur Netlify.

Pour simplifier tous ça nous allons utiliser un package npm nommé netlify-shortener. Une fois installé ce package s’utilise avec la commande :

npm run shorten

Cette commande permet trois choses :

1. npm run shorten : Formater le fichier _redirects.
2. npm run shorten https://yahoo.com : Créer une url courte pour https://yahoo.com avec le format suivant : monurl/iO2qb.
3. npm run shorten https://github.com gh : Créer une url courte pour https://github.com avec le format suivant : monurl/gh.

Lorsque la commande est exécutée le package effectue plusieurs actions:

1. Générer un code si aucun n’est fourni.
2. Vérifier que notre url est valide.
3. Ajouter l’url dans le fichier _redirects.
4. Exécuter un commit et pousser les modifications sur git (ce qui déclenche le déploiement sur Netlify).
5. Copier l’url générée.

Pour installer le package placez-vous dans le dossier my-shortener et executez cette commande :

yarn add netlify-shortener --dev

Ensuite ouvrez le fichier package.json créé et remplacez le code par :

{
  "name": "my-shortener",
  "baseUrl": "votre-url" /* dans mon cas https://dwa.li */,
  "scripts": {
    "shorten": "netlify-shortener"
  }
}

Ensuite ajoutez un fichier .gitignore avec ce contenu pour ne pas ajouter les node_modules à votre repo :

node_modules

Poussez vos modifications et ensuite vous pourrez utiliser la commande :

yarn shorten votre-url

ou

npm run shorten votre-url

Utilisation globale

La seul contrainte restante est que vous devez être situé dans le dossier de votre projet pour pouvoir lancer la commande. Heureusement il est possible de lancer cette commande depuis n’importe où en effectuant les modifications suivantes :

1. Ajoutez le code suivant au fichier package.json :

{ "bin": { "shorten": "cli.js" } }

2. Ensuite ajoutez un fichier nommé cli.js avec le code suivant :

#!/usr/bin/env node
require('netlify-shortener');

3. Depuis le dossier my-shortener lancez la commande :

npm link

Et voilà vous possédez maintenant votre propre raccourisseur d’url.

Partagez cet article si vous le souhaitez et si vous avez des questions vous pouvez me contacter par le chat.