Dans ce guide, je vais vous expliquer étape par étape comment exporter correctement un site webflow afin de l'héberger sur Infomaniak.

Pourquoi importer webflow sur Infomaniak ?

Cela fait depuis quelques temps que j'ai découverts Webflow et je suis fan de la façon de moduler son site web sans coder. Cela permet plus de libertés qu'un CMS comme Wix et évite d'être une usine à gaz comme les pages builders sur Wordpress. Cependant, Webflow est plus complexe à prendre en main, car il nécessite des connaissances en HTML et CSS pour l'utiliser correctement.

Malheureusement, avec webflow il est nécessaire de payer un abonnement pour pouvoir créer son site web ainsi que de payer un hébergeur en plus pour pouvoir mettre son site web en ligne. C'est pourquoi il m'arrive de créer seulement un site web sur Webflow et d'exporter le code sur un autre hébergeur.

Je suis depuis longtemps familier avec l'hébergeur Infomaniak, car ils proposent d'excellents services, notamment au niveau support, ils prônent la protection des données et cerise sur le gâteau, ils sont suisses.

Quand ne pas utiliser l'exportation Webflow :

• Si vous avez un client qui désire utiliser par la suite le site web
• Si vous souhaitez avoir un CMS intégré (il n'est pas possible d'exporter les collections)
• Si vous pensez faire régulièrement des changements, cela vous prendra plus de temps

1re étape : créez votre site web sur webflow.

Si vous ne savez pas comment utiliser webflow correctement  Webflow propose également de nombreuses ressources : https://university.webflow.com/

2e étape : préparez votre site web avant d'exporter.

Avant d'exporter votre site web, vous devez préparer quelques éléments pour que votre site fonctionne correctement sur un autre hébergeur :

1. Créez une page erreur 404

La page 404 permet de guider l'utilisateur sur cette page s'il se retrouve sur une page qui n'exsite pas ou plus.

Pour ce faire, vous pouvez créer une page 404 directement sur Webflow.

2. Configurez la langue de votre site web

Il est important pour Google de connaître la langue de votre site afin de mieux le référencer.

Allez sur "Project settings" de votre site > "custom code" > "advanced settings" et mettre le "language code" (fr, en, de, ...)

3. Configurez le Favicon et le web clip

Vous pouvez ajouter votre favicon (32px x 32px) et votre webcllip (256px x 256px x) sous "project settings" > "general" > "settings"

4. Vérifiez la rapidité du site web

Faites un test avec l'outil PageSpeed de Google afin d'avoir des retours pour optimiser votre site web avant de le mettre en ligne.

5. Ajoutez toutes les meta-data

Afin d'optimiser le SEO, n'oubliez pas d'ajouter les meta-data de vos pages et images. Webflow vous permet d'ajouter la meta description, le meta titre ainsi que la partie open graph dans les options de pages. Ajoutez aussi une description à vos images.

6. Créez un fichier robot.txt et un site map XML

Grâce à ces fichiers, Google pourra comprendre la structure de votre site web. Il est possible de les générer automatiquement avec Webflow.

Exemple classique fichier robot.txt :

User-Agent: *
Disallow: /
SiteMap: https://www.example.com/sitemap.xml

‍

Pour plus d'informations, lisez ce très bon article

Ajoutez toutes les URL de vos pages comme ceci :

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="<http://www.sitemaps.org/schemas/sitemap/0.9>">
<url>
<loc><https://example.com/></loc>
</url>
<url>
<loc><https://example.com/contact></loc>
</url>
<url>
<loc><https://example.com/portfolio></loc>
</url>
</urlset>

Vous pouvez utiliser un sitemap generator https://www.xml-sitemaps.com/

7. Supprimez les classes inutiles

Il est possible grâce à l'outil style manager de Webflow, de voir les classes inutilisées et de les supprimer.

Toutes les classes sans l'icone "liste" sont inutilisées. Webflow nous donne la possibilité de supprimer toutes les classes non utilisées automatiquement avec le bouton "clean up".

8. Créez un back up du site web

Avant chaque exportation de votre site web sur l'hébergeur, faites un back up de votre site web afin de garder chaque version de votre site web.

Vous pouvez retrouver une checklist d'étapes à faire plus complète sur cet article Webflow.

La redirection et la gestion des erreurs (404 error) sont gérés avec le fichier .htaccess généré par Infomaniak.

3e étape : exportez le code

Sous webflow, cliquez sur l'icône "<>" et sur "prepare zip". Vous téléchargerez ainsi un document zip avec vos fichiers html, css, js et vos assets (images, vidéos, ...)

4e étape : importez le code dans Infomaniak

Pour cette étape vous aurez besoin d'un logiciel FTP pour vous connecter à votre hébergeur Infomaniak. Je vous conseille Cyberduck ou WinSCP.

Connectez-vous à votre compte Infomaniak, allez sur votre hébergeur et cliquez sur l'onglet "FTP / SSH"Ajoutez vous un compte. Notez bien votre nom d'utilisateur, votre mot de passe et l'URL du serveur hôte.Avec votre logiciel FTP, entrez vos informations.

Dézippez les documents et exportez-les sur votre hébergeur.

Ajoutez également les fichiers créés à l'étape précédente (sitemap.xml et robot.txt) à la racine de votre site web .

5e étape : lancez le site web

Voilà ! Votre site est prêt. Testez bien si tout fonctionne.Il peut arriver que lors de l'export certaines classes entrent en conflit et que certaines animations ou design ne fonctionnent pas.

Bonus : Comment importer des modifications ?

Si vous voulez modifier votre site web, vous pouvez faire les changements sur Webflow, exportez à nouveau et remplacez tous les fichiers par les nouveaux. Attention à bien changer le sitemap si vous ajoutez ou supprimez des pages.

‍