Les sites web statiques fournissent du contenu par le biais d’une collection prédéfinie de fichiers HTML, CSS et JavaScript, ce qui en fait un choix simple et économique pour beaucoup.

Malgré leur nature fixe, les sites statiques peuvent être enrichis d’éléments de contenu dynamique pour favoriser l’interaction avec les utilisateurs. L’intégration d’une section de commentaires permet aux visiteurs d’exprimer leur opinion, de donner leur avis ou de poser des questions sur votre contenu ou vos services.

Cet ajout favorise l’engagement de la communauté et vous permet de vous rapprocher de votre public et d’affiner vos offres en fonction de leurs commentaires. Ce tutoriel présente l’ajout d’une section de commentaires à un site statique hébergé sur l’hébergement de sites statiques de Kinsta.

Configurer un site statique de base sur Kinsta

Ce tutoriel utilise le modèle Docusaurus créé sur le compte GitHub de Kinsta. Docusaurus est un générateur de site statique populaire qui utilise React, l’une des principales bibliothèques JavaScript, comme bibliothèque d’interface utilisateur pour la création de pages.

Suivez les étapes ci-dessous pour configurer ce site sur Kinsta :

  1. Pour utiliser le modèle Docusaurus, cliquez sur Utiliser ce modèle > Créer un nouveau dépôt.
  2. Clonez le dépôt sur votre machine locale en exécutant la commande suivante : 
    https://github.com/kinsta/hello-world-docusaurus.git

  3. Connectez-vous ou créez un compte pour afficher votre tableau de bord MyKinsta.
  4. Autorisez Kinsta avec votre fournisseur Git.
  5. Cliquez sur Sites statiques dans la colonne latérale de gauche, puis sur Ajouter un site.
  6. Sélectionnez le dépôt et la branche à partir desquels vous souhaitez effectuer le déploiement.
  7. Attribuez un nom unique à votre site.
    1. Ajoutez les réglges de construction dans le format suivant :
    2. Commande de construction : npm run build
    3. Version Node : 18.16.20
    4. Répertoire de publication : build
  8. Enfin, cliquez sur Créer un site.

Après avoir déployé votre site, vous pouvez visiter l’URL répertoriée comme domaine dans l’onglet Vue d’ensemble de votre site déployé.

Déploiement réussi du site statique.
Déploiement réussi du site statique.

Créer un compte Disqus

Disqus offre des outils pour augmenter l’engagement grâce à l’intégration sociale, des outils de modération et des analyses. Il prend en charge les discussions en ligne par le biais de commentaires. Suivez ces étapes pour utiliser Disqus :

  1. Créez un compte Disqus.
  2. Remplissez les informations requises pour la procédure d’inscription.
  3. Après l’inscription, sélectionnez Je veux installer Disqus sur mon site.
  4. Enregistrez votre site auprès de Disqus. Lors de l’enregistrement, choisissez un nom court et une catégorie pour votre site. Une organisation génère automatiquement une liste contenant votre nouveau site et tous les sites supplémentaires que vous créerez à l’avenir.
  5. Sélectionnez un plan Disqus pour votre organisation. Disqus propose différents plans d’abonnement, notamment Plus, Pro et Business. Pour cette démo, vous pouvez sélectionner le plan Basic, qui comprend des fonctionnalités de base telles que l’extension de commentaires, le filtrage avancé des spams, les outils de modération et les analyses de base.

Intégrer Disqus à votre site statique sur Kinsta

L’étape suivante consiste à intégrer l’extrait de code Disqus dans votre générateur de site statique.

  1. Après avoir enregistré votre site, cliquez sur Je ne vois pas ma plateforme listée, installez manuellement avec Universal Code.
    Intégrer le code Disqus manuellement avec Universal Code.
    Intégrer le code Disqus manuellement avec Universal Code.

    La page affichée contient un extrait de code JavaScript dans la section intitulée Place the following code where you’d like Disqus to load. Comme le site statique est une application React, vous devez modifier cet extrait de code pour qu’il fonctionne avec React.

  2. Créez un dossier appelé Disqus dans le dossier src/components .
  3. Utilisez le code suivant dans votre fichier index.js. Veillez à remplacer https://your_shortname_placeholder.disqus.com/embed.js par l’URL que vous avez reçue dans le code universel : 
    import React, { useEffect } from 'react';

const DisqusComments = () => {
    useEffect(() => {

    const disqus_config = function () {
        this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's 
canonical URL variable
        this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with   
your page's unique identifier variable
    };

    // Load Disqus script dynamically
    (function () {
        const d = document;
        const s = d.createElement('script');
        s.src = 'https://your_shortname_placeholder.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();

    // Cleanup Disqus on component unmount
    return () => {
        const disqusThread = document.getElementById('disqus_thread');
        if (disqusThread) {
        disqusThread.innerHTML = ''; // Clear the Disqus thread to avoid  
interference with other components
        }
    };
    }, []); // Run this effect only once on component mount

    return (
    <div>
        <div> id="disqus_thread"></div>
        <noscript>Please enable JavaScript to view the <a>  
href="https://disqus.com/?ref_noscript">comments powered by  
Disqus.</a></noscript>
    </div>
    );
};

export default DisqusComments;

    La fonction disqus_config définit deux variables :

    • this.page.url – Cette variable est définie à PAGE_URL, que vous devez remplacer par l’URL canonique de la page. Disqus utilise cette URL pour identifier la page spécifique à laquelle appartiennent les commentaires.
    • this.page.identifier – Cette variable est définie à PAGE_IDENTIFIER, que vous devez remplacer par un identifiant unique pour la page. Cet identifiant permet à Disqus de différencier les pages ayant la même URL et d’associer les commentaires à la bonne page.
  4. Vous pouvez importer ce composant sur la page où vous souhaitez afficher la section des commentaires Disqus. 
    import DisqusComments from '@site/src/components/Disqus';
  5. Ensuite, ajoutez la section de commentaires Disqus à la page d’atterrissage, incluez l’instruction d’importation suivante dans le fichier index.js du répertoire src/pages et utilisez DisqusComments en conséquence : 
    export default function Home() {
    const {siteConfig} = useDocusaurusContext();
    return (
    <Layout
        title={`Hello from ${siteConfig.title}`}
        description="Description will go into a meta tag in <head />">
        <HomepageHeader />
        <main>
        <HomepageFeatures />
        <DisqusComments/>
        </main>
    </Layout>
    );
}
  6. Validez ces modifications dans votre dépôt pour qu’elles soient prises en compte sur votre site statique hébergé par Kinsta : 
    git add .
git commit -m "Adding Disqus Comments"
git push -u origin master

Si vous avez cliqué sur Déploiement automatique lors de la validation lors du déploiement de votre site statique, la validation de nouveaux changements lancera automatiquement un déploiement sur MyKinsta. Sinon, déployez les changements manuellement.

Le site statique avec les commentaires Disqus intégrés.
Le site statique avec les commentaires Disqus intégrés.

Félicitations – vous avez créé un site statique en utilisant Kinsta Static Site Hosting et intégré une section de commentaires en utilisant Disqus !

Il se peut que vous souhaitiez modifier le composant DisqusComments pour vous assurer que la section de commentaires se charge comme prévu.

Comment personnaliser la section des commentaires

Vous pouvez personnaliser la section des commentaires sur votre site statique en modifiant son apparence, en implémentant des réactions, en effectuant la modération des commentaires, et plus encore. Voici quelques options de personnalisation disponibles sur Disqus.

Personnaliser le thème

Pour personnaliser le thème de vos commentaires Disqus, accédez au tableau de bord Disqus, cliquez sur Général dans l’onglet Réglages et sélectionnez les options appropriées dans les menus déroulants Schéma de couleurs et Police de caractères.

Personnalisez le thème de vos commentaires Disqus.
Personnalisez le thème de vos commentaires Disqus.

Activer les réactions sur votre site

Vous pouvez accroitre l’engagement de votre public en activant les réactions sur votre site. Personnalisez ces réactions selon vos préférences.

Pour activer cette fonctionnalité, accédez à l’onglet Réglages du tableau de bord Disqus. Sélectionnez Réactions. Cliquez ensuite sur Activer les réactions sur votre site.

Configuration et activation de Reactions via le tableau de bord Disqus.
Configuration et activation de Reactions via le tableau de bord Disqus.

Actualisez votre site. L’option pour les réactions apparait.

Le site statique affiche l'intégration des réactions.
Le site statique affiche l’intégration des réactions.

Avatars de commentaires

Vous pouvez téléverser un avatar de commentateur par défaut pour les utilisateurs, afin qu’ils aient l’impression de faire partie de la communauté.

Pour activer cette fonctionnalité, accédez au tableau de bord Disqus, cliquez sur Général dans l’onglet Réglages et téléversez une image à partir de Avatar de commentateur par défaut.

La fonction Avatar par défaut du commentateur.
La fonction Avatar par défaut du commentateur.

Trier les commentaires

Ajoutez une personnalisation pour permettre aux utilisateurs de trier les commentaires en fonction des critères suivants : le plus ancien d’abord, le plus récent d’abord ou le meilleur d’abord. Cliquez sur Communauté dans l’onglet Réglages du tableau de bord Disqus et sélectionnez l’ordre dans le menu déroulant Tri par défaut.

Trier les commentaires en fonction de l'ordre fourni.
Trier les commentaires en fonction de l’ordre fourni.

Comment modérer les commentaires

Pour modérer des commentaires sur Disqus, utilisez le panneau de modération Disqus situé dans la barre de navigation supérieure de votre tableau de bord Disqus. Cet outil offre une vue rapide des commentaires de votre forum et de leur statut (approuvé, en attente, etc.).

Vous pouvez également configurer les règles de modération à partir du menu Modération, disponible dans le volet de navigation gauche sous l’onglet Réglages du tableau de bord Disqus.

Accès au panneau de modération à partir du tableau de bord Disqus.
Accès au panneau de modération à partir du tableau de bord Disqus.

Ensuite, consultez la documentation de Disqus pour connaître les principales étapes et fonctionnalités qui vous aideront à gérer et à modérer les commentaires sur Disqus.

Autoriser les visiteurs à commenter

Pour permettre aux utilisateurs invités de commenter sur votre site, cochez la case Commentaires d’invités, puis cliquez sur Enregistrer. Ces commentaires restent en attente jusqu’à ce qu’un modérateur les approuve à partir du tableau de bord de modération Disqus.

Permettre aux invités de commenter sur votre site.
Permettre aux invités de commenter sur votre site.

Approuver, supprimer et marquer les commentaires comme spam

Le panneau de modération vous permet d’effectuer des actions en masse (approuver, supprimer et marquer les commentaires comme spam) en vérifiant plusieurs commentaires. Vous pouvez également les modérer individuellement dans la vue élargie des commentaires.

Une fois ce réglage activé, un modérateur doit approuver les commentaires avant qu’ils ne soient affichés.

Modération de vos commentaires Disqus à l'aide d'actions groupées.
Modération de vos commentaires Disqus à l’aide d’actions groupées.

Résumé

Ce tutoriel vous a appris comment ajouter une section de commentaires à votre site statique. En dehors de Docusaurus, vous pouvez implémenter Disqus dans n’importe quel autre SSG comme VuePress, Gatsby, et plus encore.

L’hébergement de sites statiques de Kinsta vous permet de déployer facilement vos fichiers non dynamiques pré-construits. Pour explorer les avantages de l’hébergement de votre site statique sur Kinsta et de l’intégration de fonctionnalités telles qu’une section de commentaires, consultez l’hébergement de site statique Kinsta.

Avez-vous déjà mis en place Disqus ou tout autre service de commentaires sur votre site statique ? Partagez vos expériences dans la section des commentaires ci-dessous.

Jeremy Holcombe Kinsta

Rédacteur en chef du contenu et du marketing chez Kinsta, développeur web WordPress et rédacteur de contenu. En dehors de WordPress, j'aime la plage, le golf et le cinéma. J'ai aussi des problèmes avec les personnes de grande taille ;).