Dans l'article Connecter VS Code et Webflow, nous avons fait fonctionner notre code depuis un serveur local. Il n'est donc disponible que sur notre ordinateur.
Aujourd'hui nous réglons ce problème en rendant notre script disponible sur le web, et ainsi le faire marcher avec le site Webflow en toutes circonstances.
Comme toujours, il y a de nombreuses manières de le faire, ici, nous allons utiliser GitHub et jsDelivr.
Je te conseille d'avoir déjà fait fonctionné ton script en local avant de le déployer.
1 - Publier son code sur Github
Github est une plateforme d'hébergement de code utilisant Git, le logiciel de gestion de version le plus populaire au monde.
Il existe de nombreuses méthodes pour publier son code sur GitHub et je te conseille vivement de te former à Git et Github.
Ici on va utiliser la méthode la plus simple et rapide, accessible à tous.
Elle n'est possible que si tu utilises VS Code, car on va utiliser un de ses meilleurs outils : le Source Control.
D'abord va sur https://github.com/ et crée un compte.
Ensuite, dans VS Code, clique sur l'onglet Source Control (le 3eme à gauche), puis "Publish to GitHub"
Suis le processus d'authentification, ensuite tout se passe dans la barre du haut :
Pour vérifier que tout à bien fonctionné, sur GitHub va dans tes repositories, tu devrais à présent en trouver un qui ressemble à ça :
2 - Publier une release
On reste sur GitHub, clique sur Create a new release (à droite)
Remplis le Tag, le titre et la description :
Ensuite clique sur Publish release et cette étape est déjà finie !
3 - Lier la release et Webflow
Pour cette étape, je te conseille d'attendre au moins 10 minutes, après que tu aies publié ta release, pour être sûre qu'elle soit publiée.
Pour cette étape, on va utiliser jsDelivr.
On va juste copier une ligne dans Webflow
https://cdn.jsdelivr.net/gh/user/repo@version/file
À partir de user on va tout modifier :
user : nom du user Github
repo : nom du repository
version : tag que tu as utilisé pour ta release
file : le fichier de ton script (le même que celui qui fonctionne en local)
Avec ma configuration ça donne
https://cdn.jsdelivr.net/gh/tidurand/script-webflow@v1/script.js
Tu peux copier l'url dans le navigateur et vérifier que le code apparaît.
Et si ça marche, on va juste mettre ce script dans le custom code de Webflow :
<script src="https://cdn.jsdelivr.net/gh/tidurand/script-webflow@v1/script.js"></script>
Si tu avais un localhost, tu peux l'enlever.
Et c'est fini !
À présent le code est exécuté par Webflow pour toute personne se rendant sur le site.