Ajouts recommandés pour pimenter vos sites Web statiques

Si vous êtes un développeur front-end comme moi, je suis sûr que vous vous êtes déjà retrouvé dans cette situation auparavant. Vous avez soit construit un simple site statique, soit téléchargé un beau modèle statique, puis vous vous êtes dit: «Si seulement je pouvais mettre un formulaire de contact sur cette page» ou «Je veux simplement ajouter un bouton de paiement». Ce sont le genre de questions qui transforment un petit projet en une bête beaucoup plus grande.

Mais ça ne doit pas forcément être comme ça. Il existe de nombreux outils et fonctionnalités que vous pouvez ajouter à un site statique sans avoir à introduire PHP, Ruby ou toute autre forme de développement backend. Dans cet article, j'ai énuméré des ressources qui rendront votre site un peu moins statique..

Hébergement

Oui, je réalise que ce n'est pas vraiment une ressource ou un outil en amont, mais si vous voulez que quelqu'un voie votre site, vous devrez le mettre sur le Web.. 

Pages GitHub

Pour les sites statiques, l’un de mes deux favoris est certainement GitHub Pages. GitHub Pages est conçu pour permettre aux utilisateurs de créer des sites Web qui coïncident avec leurs projets Web sur GitHub.com. Cela fait également un excellent travail, à tel point que les gens l’utilisent pour héberger leur portefeuille principal ou leurs sites Web personnels. Consultez les didacticiels suivants pour en savoir plus:

  • Apprendre à connaître les pages GitHub: pages de projet statiques, rapide
  • Création de pages GitHub (partie de «Introduction à Git et GitHub» de Dan Wellman)

Remarque: Si vous avez téléchargé un modèle sur Envato Market ou souhaitez héberger du matériel sensible sur des pages GitHub, vous devrez payer pour un repo privé. Dans ces situations, il est important que les utilisateurs ne puissent pas télécharger librement le code directement à partir de GitHub.com.

Poussée

Surge est un autre de mes préférés et est génial pour l'hébergement statique, surtout si vous aimez pousser des sites en direct via la ligne de commande. Le processus d'installation est simple et agréable.

Surge's Morse

Surge plus, qui offre des fonctionnalités plus robustes que le plan tarifaire gratuit, telles que la protection par mot de passe et HTTPS, vous coûtera (au moment de la rédaction) 13 $ par mois.

Formulaires et commentaires

Les formulaires, pour moi, étaient le point de basculement où je concédais que «je vais avoir besoin de PHP ici». Eh bien, plus maintenant, grâce à des outils tels que Formspree, Disqus et même Google Forms. 

Formspree

Formspree vous permet de transformer un formulaire HTML statique en un formulaire de contact entièrement fonctionnel. Si vous voulez l'essayer vous-même, j'ai écrit un article sur la façon d'ajouter des formulaires Formspree à un site statique.. 

Disqus

Si je devais ajouter un système de commentaires à n’importe quel site, je passerais directement à Disqus; il a fière allure et fonctionne parfaitement (traitement extrêmement efficace du spam). De plus, il ajoute aux commentaires des dynamiques sociales et de ludification, recommande des discussions, rassemble les tendances du Web et permet aux utilisateurs de gagner des points grâce au vote de la communauté..

Il propose même une monétisation en permettant aux éditeurs de puiser dans la propre plate-forme publicitaire de Disqus..

Google Forms

D'autre part, bien que Google Forms soit sans doute un outil moins connu, il est plutôt performant pour la gestion des commentaires et la compilation des données de sondage. Je vous recommande également de consulter les nouveaux formulaires Google car ils ont mis à jour l'interface utilisateur et les formulaires afin de suivre le nouveau système de conception de matériel..

Mmmm… des guimauves

Gestion de domaine et de serveur

CloudFlare

Depuis que j'ai découvert CloudFlare, je l'utilise pour configurer tout mes domaines. La configuration de votre domaine avec CloudFlare déverrouille de nombreuses fonctionnalités que vous pouvez activer à partir de l'interface d'administration. SSL flexible, recherche de site, compression HTML et plus. Si vous envisagez d'inclure des widgets et des plug-ins tiers dans votre site Web statique, les outils d'optimisation de CloudFlare garantissent que votre site fonctionne aussi bien que possible. Voici une liste complète des applications disponibles.

Paiements

Vous payez sur un site statique? T'es en colère!? Eh bien en fait non, tant que vous avez le bon certificat SSL et que tout est configuré de manière sécurisée, vous pouvez effectuer des paiements sur un site statique aussi facilement que tout autre type..

Envato Market propose des centaines de modèles statiques axés sur le commerce de détail, parfaits pour la vente en ligne, sans être liés à une plate-forme dynamique..

Bande

Si vous souhaitez accepter des paiements uniques pour un produit, je vous recommande vivement d’utiliser Stripe Checkout. La conception de la fenêtre de dialogue est de qualité supérieure, ce qui permet une expérience utilisateur plus nette, plutôt que de diriger l'utilisateur vers un site Web totalement différent.. 

En outre, comme il est lié à votre compte Stripe, vous pouvez utiliser leur application officielle pour suivre les paiements.. 

Gumroad

Vous cherchez quelque chose d'un peu plus puissant? Quelque chose qui peut permettre plusieurs produits, un panier et un processus de paiement complet? Aucun problème, Gumroad vous soutient avec son widget Achats en ligne.. 

En ajoutant cela à chaque produit de votre site statique, l'utilisateur pourra ajouter plusieurs produits à son panier et les payer via le système de paiement Gumroad, que vous pourrez gérer à partir de votre compte Gumroad. Apprendre encore plus:

  • Super Simple eCommerce avec Gumroad

Autres outils

Il existe quelques autres outils qui pourraient vous être utiles si vous créez un site Web à l'aide de pages statiques.. 

MapBuildr

Si vous souhaitez ajouter une carte sur votre site, je vous recommande MapBuildr, qui offre une interface relativement simple pour créer votre propre carte intégrée à l'aide de l'API Google Maps..

Moyen

Une autre fonctionnalité que vous voudrez peut-être ajouter est un blog. Sans utiliser un générateur tel que Jekyll, vous ne pouvez pas facilement implémenter un blog dans un site statique, mais vous pouvez utiliser un service spécialement conçu pour les blogs. Medium est devenu extrêmement populaire auprès des particuliers et des entreprises pour bloguer, et il existe en fait un moyen d'intégrer des articles de Medium sur une page statique.. 

La présentation de l'embed est élégante et propre, elle ne devrait donc pas entrer en conflit avec la conception de votre site..

Conclusion

Comme vous pouvez le constater, un site statique ne doit pas nécessairement être statique. Il existe de nombreux outils puissants pour donner vie à vos modèles statiques, dont la plupart sont entièrement libres de les configurer. Tous les outils mentionnés ci-dessus ont été construits et conçus avec soin et attention, et si vous avez la chance d’en utiliser un, je vous recommande vivement de les essayer..