Comment héberger un statique WordPress Site gratuit (sur les pages GitHub, Vercel, Netlify)

WordPress est un système de gestion de contenu puissant et populaire, mais hébergeant un WordPress le site peut être coûteux et nécessiter un entretien continu. Pour de nombreux sites Web ou blogs simples, une version statique d'un WordPress le site peut être une excellente alternative. Les sites statiques sont plus rapides, plus sécurisés et peuvent être hébergés gratuitement sur des plateformes comme GitHub Pages, Netlify ou Vercel.

Dans ce didacticiel, je vais vous expliquer le processus de création d'une version statique de votre WordPress site et l'héberger gratuitement. Cette approche est parfaite pour les débutants qui souhaitent tirer parti de la convivialité WordPress interface pour la création de contenu tout en bénéficiant des avantages d'un site statique.

Outils dont vous avez besoin

Avant de plonger dans le processus, assurons-nous que vous disposez de tous les outils nécessaires. Voici une liste de tout ce dont vous aurez besoin pour héberger votre statique WordPress site gratuit :

Avant de poursuivre le didacticiel, assurez-vous que ces outils sont installés et que vos comptes sont configurés. Avoir tout prêt rendra le processus fluide et simple.

Étape 1 : Développez votre WordPress Site sur LocalWP

Avant de commencer, vous devrez avoir votre WordPress site prêt. Si vous n'avez pas encore créé votre site, ou s'il est actuellement hébergé ailleurs, je vous recommande d'utiliser LocalWP (anciennement Local by Flywheel) pour développer et tester votre site localement.

1. Téléchargez et installez LocalWP gratuitement depuis localwp.com.
2. Créer un nouveau WordPress site dans LocalWP.
3. Concevez votre site, ajoutez du contenu et installez les plugins nécessaires.
4. Assurez-vous que votre site ressemble et fonctionne exactement comme vous le souhaitez dans sa forme statique.

Comprendre les limites du site statique

En statique WordPress Les sites offrent des avantages tels qu'une vitesse améliorée, une sécurité et des options d'hébergement gratuites, il est important d'être conscient de leurs limites. Quelques fonctionnalités dynamiques de WordPress ne fonctionnera pas dans un environnement statique :

1. WordPress Formulaires: Traditionnel WordPress les formulaires qui reposent sur un traitement côté serveur ne fonctionneront pas. Cela inclut les formulaires de contact, les formulaires d’abonnement et autres formulaires interactifs.
2. WordPress Commentaires: Les systèmes de commentaires dynamiques qui permettent des interactions utilisateur en temps réel ne sont pas pris en charge dans les sites statiques.
3. Accès à la zone d'administration : Tous les liens vers /wp-admin ou similaire interne WordPress les routes ne fonctionneront pas, car elles nécessitent un traitement côté serveur.
4. Mises à jour du contenu en temps réel: Les sites statiques nécessitent une régénération et un redéploiement pour que toute modification de contenu apparaisse, contrairement aux sites dynamiques. WordPress des sites où les changements sont immédiats.
5. Authentification d'utilisateur: Les fonctionnalités nécessitant des connexions ou des adhésions d'utilisateurs ne sont pas prises en charge dans une configuration de site statique de base.
6. Fonctionnalité de commerce électronique: Les paniers d'achat dynamiques et le traitement des paiements ne fonctionneront généralement pas dans un environnement statique.
7. Fonctionnalité de recherche: WordPressLa fonction de recherche intégrée de ne fonctionnera pas, bien que des alternatives puissent être implémentées (comme mentionné dans les fonctionnalités de Simply Static Pro).
8. Barres latérales et widgets dynamiques: Les widgets qui extraient des données en temps réel ou nécessitent un traitement côté serveur ne fonctionneront pas comme prévu.

Solutions de contournement possibles

Bien que ces limitations existent, il existe des moyens d’en atténuer certaines :

• Pour les formulaires, vous pouvez utiliser des services tiers comme Formspree ou Netlify Forms.
• Les commentaires peuvent être traités via des services tels que Disqus ou Facebook Comments.
• La fonctionnalité de recherche peut être implémentée à l'aide de solutions côté client telles que Lunr.js ou Algolia (telles que proposées dans Simply Static Pro).
• Pour le e-commerce, pensez à utiliser des services externes comme Snipcart ou Gumroad.

Lorsque vous développez votre WordPress site, gardez ces limitations à l’esprit et planifiez la structure et les fonctionnalités de votre site en conséquence. Concentrez-vous sur les pages axées sur le contenu et minimisez le recours aux fonctionnalités dynamiques qui ne se traduiront pas dans un environnement statique.

Étape 2 : Installer et configurer Simply Static

Simply Static est un logiciel gratuit WordPress plug-in qui génère une version statique de votre WordPress site. Voici comment le configurer :

1. Dans votre WordPress tableau de bord, accédez à Plugins > Ajouter un nouveau.
2. Recherchez « Simply Static », installez le plugin et activez le plugin.
3. Accédez à Simply Static > Paramètres dans votre WordPress tableau de bord.
4. Sous l'onglet « Général », définissez les éléments suivants :
   • URL de destination : choisissez « Enregistrer pour une utilisation hors ligne ». Si vous disposez déjà d'un domaine personnalisé, choisissez « URL absolues », comme indiqué dans la capture d'écran ci-dessous :

5. Répertoire local : définissez-le sur un répertoire en dehors de votre WordPress installation, par exemple, /Users/yourusername/Documents/StaticSite

6. Sous l'onglet « Inclure/Exclure », assurez-vous que toutes les URL nécessaires sont incluses.
   • Dans la plupart des cas, utilisez /wp-content/ et /wp-includes/

7. Enregistrez vos paramètres.

Il y a aussi version professionnelle de SimplyStatic, Voici un résumé des fonctionnalités pro du plugin Simply Static :

1. Déploiement avancé :
   • Déployez des sites statiques sur plusieurs plates-formes, notamment SimplyCDN, GitHub, Amazon AWS S3, Digital Ocean Spaces et BunnyCDN.
2. Mises à jour faciles du site :
   • Gérez efficacement les mises à jour de contenu, qu'il s'agisse de publications uniques, de mises à jour groupées ou d'URL spécifiques.
3. Intégration des formulaires et des commentaires :
   • Intégrez de manière transparente des formulaires de plugins populaires tels que Contact Form 7, Gravity Forms et Elementor Forms dans votre site statique.
4. Fonctionnalité de recherche:
   • Implémentez la recherche de base à l'aide de Fuse.js ou passez à une expérience de recherche plus complète avec Algolia.
5. Prise en charge de WP-CLI :
   • Utilisez WP-CLI pour configurer, exporter et gérer les fonctionnalités Simply Static directement à partir de la ligne de commande.
6. Support multilingue:
   • Proposez du contenu dans plusieurs langues avec des intégrations pour WPML, Polylang et TranslatePress.
7. Minification :
   • Optimisez les performances du site en réduisant les fichiers CSS, JavaScript et HTML statiques.
8. WordPress Dissimulation:
   • Remplacer la valeur par défaut WordPress des chemins pour cacher le fait que WordPress est utilisé comme système de gestion de contenu.

Ces fonctionnalités professionnelles améliorent considérablement la fonctionnalité et la flexibilité des applications statiques. WordPress sites, permettant des déploiements plus avancés, de meilleures performances et une expérience utilisateur améliorée.

Étape 3 : initialiser le référentiel Git

Maintenant que notre générateur de site statique est configuré, préparons notre répertoire local pour le contrôle de version :

1. Ouvrez un terminal ou une invite de commande.
2. Accédez au répertoire que vous avez spécifié dans Simply Static (par exemple, cd /Users/yourusername/Documents/StaticSite).
3. Initialisez un nouveau dépôt Git en exécutant :

   git init

Étape 4 : Créer un référentiel GitHub

Nous utiliserons GitHub Desktop pour créer et gérer notre référentiel :

1. Téléchargez et installez GitHub Desktop à partir de bureau.github.com si tu ne l'as pas déjà fait.
2. Ouvrez GitHub Desktop et connectez-vous à votre compte GitHub.
3. Cliquez sur « Fichier » > « Nouveau référentiel » ou utilisez le bouton « Créer un nouveau référentiel sur votre disque dur ».
4. Définissez les éléments suivants:
   • Nom : Choisissez un nom pour votre référentiel (par exemple, « mon-static-wordpress »)
   • Chemin local : définissez-le sur le même répertoire que vous avez spécifié dans Simply Static
   • Initialisez ce dépôt avec un README : laissez décoché
   • Git ignore : choisissez « Aucun » (nous avons créé le nôtre à l'étape 3)
   • Licence : choisissez une licence appropriée ou laissez « Aucune »
5. Cliquez sur « Créer un référentiel »

Étape 5 : valider le référentiel

Maintenant que notre référentiel est configuré, effectuons notre premier commit :

1. Dans GitHub Desktop, vous devriez voir tous les fichiers de votre site statique répertoriés comme modifications.
2. Entrez un résumé de votre validation (par exemple, « Validation initiale des fichiers de site statiques »).
3. Cliquez sur « Commit to main » (ou « Commit to master » dans les anciennes versions).
4. Cliquez sur « Publier le référentiel » pour transférer votre référentiel local vers GitHub.

Étape 6 : Exécutez une exportation simplement statique

Il est maintenant temps de générer notre site statique :

1. Retournez à votre WordPress tableau de bord.
2. Accédez à Simply Static > Générer. (Vous pouvez ignorer l'alerte d'erreur de diagnostic, car vous effectuez uniquement un déploiement vers un répertoire local).
3. Cliquez sur « Générer des fichiers statiques ».
4. Attendez la fin du processus. Cela peut prendre quelques minutes selon la taille de votre site.
5. Une fois terminé, revenez à GitHub Desktop.
6. Vous devriez voir les fichiers nouvellement générés ou mis à jour répertoriés comme modifications.
7. Validez ces modifications avec un message du type « Mettre à jour les fichiers statiques du site ».
8. Transférez les modifications vers GitHub en cliquant sur « Push origin ».

Étape 7 : connecter le référentiel à une plate-forme d'hébergement

Maintenant que notre site statique est sur GitHub, nous pouvons facilement le connecter à une plateforme d'hébergement gratuite. Je fournirai des instructions pour les pages GitHub, Netlify et Vercel :

Pages GitHub

1. Accédez à votre référentiel sur GitHub.com.
2. Cliquez sur « Paramètres » > « Pages » dans la barre latérale gauche.
3. Sous « Source », sélectionnez « Déployer à partir d'une branche ».
4. Choisissez la branche que vous souhaitez déployer (généralement « principale » ou « maître »).
5. Sélectionnez le dossier racine (/) et cliquez sur « Enregistrer ».
6. Votre site sera en ligne à https://yourusername.github.io/repository-name/.

Netlify

1. Ouvrez un compte gratuit sur netlify.com.
2. Cliquez sur « Nouveau site depuis Git » sur votre tableau de bord Netlify.
3. Choisissez GitHub comme fournisseur Git et autorisez Netlify.
4. Sélectionnez votre référentiel dans la liste.
5. Laissez la commande build et le répertoire de publication vides.
6. Cliquez sur « Déployer le site ».
7. Votre site sera en ligne sur un sous-domaine Netlify, que vous pourrez personnaliser dans les paramètres du site.

Vercel

1. Ouvrez un compte gratuit sur vercel.com.
2. Cliquez sur « Nouveau projet » sur votre tableau de bord Vercel.
3. Importez votre référentiel GitHub.
4. Laissez les paramètres de construction tels quels (Vercel devrait détecter automatiquement qu'il s'agit d'un site statique).
5. Cliquez sur "Déployer".
6. Votre site sera en ligne sur un sous-domaine Vercel, que vous pourrez personnaliser dans les paramètres du projet.

Résumé

Félicitations! Vous disposez désormais d'une version statique de votre WordPress site hébergé gratuitement. N'oubliez pas de régénérer et de transférer vos fichiers statiques chaque fois que vous apportez des modifications à votre WordPress site. Ce flux de travail vous permet de profiter de la facilité de WordPress pour la création de contenu tout en bénéficiant de la rapidité, de la sécurité et de l'hébergement gratuit d'un site statique.

Quelques astuces supplémentaires:

• Pensez à créer un domaine personnalisé pour un look plus professionnel.
• Mettez régulièrement à jour votre WordPress installation et plugins pour vous assurer que vous travaillez avec les dernières fonctionnalités et mises à jour de sécurité.
• Explorez les fonctionnalités avancées du Version professionnelle de Simply Static, comme se cacher WordPress et la configuration de formulaires ou de fonctionnalités de recherche pour votre site statique.