Vous êtes artisan et vous souhaitez enfin avoir un site web professionnel sans dépenser une fortune ? Les générateurs de sites statiques comme Hugo et Jekyll sont des solutions idéales. Rapides, sécurisés et gratuits, ils permettent de créer un site vitrine ou un portfolio en toute simplicité. Dans ce guide complet, nous allons voir comment créer un site web pour un artisan avec Hugo ou Jekyll, étape par étape, en comparant les deux outils, en détaillant les bonnes pratiques SEO, et en vous donnant des astuces concrètes.
Table des matières:
Pourquoi un site statique pour un artisan ?
Les artisans ont besoin d’un site simple, rapide à charger, facile à mettre à jour et économique. Un site statique généré par Hugo ou Jekyll coche toutes ces cases. Contrairement à WordPress, il n’y a pas de base de données, pas de mises à jour de sécurité complexes, et l’hébergement peut être gratuit (Netlify, Vercel, GitHub Pages). De plus, ces sites sont très rapides, ce qui est un atout pour le référencement local.
Hugo vs Jekyll : lequel choisir pour votre site artisanal ?
Hugo et Jekyll sont les deux générateurs statiques les plus populaires. Voici un comparatif pour vous aider à choisir.
| Critère | Hugo | Jekyll |
|---|---|---|
| Langage | Go | Ruby |
| Installation | Binaire unique, très simple | Nécessite Ruby, plus complexe |
| Vitesse de génération | Très rapide | Plus lent pour gros sites |
| Thèmes disponibles | Moins de thèmes, mais de qualité | Grande bibliothèque de thèmes |
| Courbe d’apprentissage | Modérée | Douce pour les débutants |
| Documentation | Excellente | Très bonne |
Pour un artisan débutant, Jekyll peut être plus accessible grâce à sa communauté et ses nombreux thèmes. Hugo est plus performant et plus simple à installer si vous n’êtes pas à l’aise avec Ruby.
Étapes pour créer un site avec Hugo
1. Installer Hugo
Rendez-vous sur le site officiel de Hugo et téléchargez le binaire correspondant à votre système. Sous Windows, utilisez Chocolatey ou le fichier .exe. Sous macOS, via Homebrew : brew install hugo. Sous Linux, via Snap : snap install hugo. Vérifiez avec hugo version.
2. Créer un nouveau site
Dans votre terminal, tapez : hugo new site mon-site-artisan. Cela crée un dossier avec la structure de base.
3. Choisir et installer un thème
Parcourez les thèmes sur themes.gohugo.io. Pour un artisan, un thème sobre et orienté portfolio est idéal. Téléchargez-le dans le dossier themes/ et configurez-le dans config.toml.
4. Ajouter du contenu
Créez des pages comme « Accueil », « Prestations », « Galerie », « Contact ». Utilisez hugo new content/prestations.md. Rédigez en Markdown.
5. Personnaliser le design
Modifiez les fichiers HTML du thème si nécessaire. Hugo utilise le templating Go, mais vous pouvez simplement surcharger des parties.
6. Tester en local
Lancez hugo server -D pour voir le site en local avec rechargement automatique.
7. Déployer en ligne
Générez les fichiers statiques avec hugo, puis uploadez le dossier public/ sur Netlify, Vercel ou GitHub Pages.
Étapes pour créer un site avec Jekyll
1. Installer Ruby et Jekyll
Jekyll nécessite Ruby. Installez Ruby (version 2.5+), puis exécutez gem install jekyll bundler.
2. Créer un nouveau site
jekyll new mon-site-artisan crée un site prêt à l’emploi.
3. Choisir un thème
Jekyll a une galerie de thèmes sur jekyllthemes.io. Pour un artisan, cherchez des thèmes avec portfolio.
4. Ajouter du contenu
Les pages sont dans le dossier _pages/ ou directement à la racine. Utilisez le front matter pour définir le titre, la date, etc.
5. Personnaliser
Jekyll utilise Liquid pour le templating. Modifiez les layouts et les includes.
6. Tester en local
bundle exec jekyll serve lance le serveur local.
7. Déployer
Générez avec bundle exec jekyll build et déployez le dossier _site/.
Optimiser le SEO de votre site d’artisan
Un site statique est déjà rapide, ce qui est bon pour le SEO. Mais voici des actions supplémentaires :
- Utilisez des URLs propres : configurez des permaliens personnalisés (ex:
/prestations/). - Ajoutez un sitemap XML : Hugo et Jekyll le génèrent automatiquement.
- Rédigez des balises title et meta descriptions uniques pour chaque page.
- Utilisez des headings hiérarchiques (H1, H2, H3) avec des mots-clés pertinents.
- Optimisez les images : compressez-les et ajoutez des attributs alt descriptifs.
- Intégrez Google Analytics et Search Console pour suivre les performances.
- Ajoutez des balises Open Graph pour les réseaux sociaux.
Checklist pour lancer votre site artisanal
- Choisir un nom de domaine professionnel (ex: votre-nom-artisan.fr)
- Installer Hugo ou Jekyll
- Choisir un thème adapté à votre métier
- Créer les pages essentielles : Accueil, À propos, Prestations, Galerie, Contact
- Rédiger un contenu original et optimisé SEO
- Ajouter un formulaire de contact (via Netlify Forms ou Formspree)
- Tester le site sur mobile et desktop
- Déployer sur un hébergeur gratuit ou payant
- Soumettre le sitemap à Google Search Console
- Ajouter un blog pour publier régulièrement du contenu
Erreurs à éviter
- Négliger le responsive design : beaucoup d’artisans consultent leur site sur mobile.
- Oublier les mentions légales : obligatoires en France.
- Utiliser des images trop lourdes : cela ralentit le site.
- Ne pas faire de sauvegarde : versionnez votre code avec Git.
- Ignorer le SEO local : inscrivez votre entreprise sur Google My Business.
FAQ : Questions fréquentes
Puis-je créer un site e-commerce avec Hugo ou Jekyll ?
Oui, mais c’est plus limité. Vous pouvez intégrer un panier via des solutions tierces comme Snipcart ou Shopify Buy Button. Pour une boutique complète, préférez WooCommerce ou Shopify.
Est-ce que Hugo ou Jekyll sont adaptés aux débutants ?
Jekyll est plus simple pour les débutants grâce à sa documentation et ses thèmes. Hugo nécessite un peu plus de technique, mais reste accessible.
Quel hébergement choisir pour un site statique ?
Netlify est le plus populaire : déploiement automatique depuis GitHub, formulaire de contact intégré, HTTPS gratuit. Vercel et GitHub Pages sont aussi d’excellentes options.
Puis-je mettre à jour mon site facilement ?
Oui, vous modifiez les fichiers Markdown et vous redéployez. Avec Netlify, une simple synchronisation Git suffit. Certains utilisent un CMS headless comme Forestry ou Netlify CMS pour une interface graphique.
Quel est le coût d’un site statique pour artisan ?
Le générateur est gratuit. L’hébergement peut être gratuit (Netlify). Le nom de domaine coûte environ 10-15 € par an. Les thèmes premium sont parfois payants (20-50 €).
Comment ajouter un blog à mon site d’artisan ?
Hugo et Jekyll gèrent nativement les blogs. Créez des articles dans le dossier content/post/ (Hugo) ou _posts/ (Jekyll).
Recommandations pour aller plus loin
Maintenant que vous savez comment créer un site web pour un artisan avec Hugo ou Jekyll, passez à l’action ! Commencez par installer l’outil de votre choix et choisissez un thème qui reflète votre métier. N’oubliez pas de soigner votre contenu : des textes authentiques, des photos de qualité, et une présentation claire de vos services. Pour le référencement local, ajoutez votre adresse et numéro de téléphone sur le site, et créez des pages dédiées à chaque service. Enfin, lancez-vous et ajustez au fil du temps. Un site statique est un excellent investissement pour développer votre activité artisanale en ligne.
Photo by fancycrave1 on Pixabay
Merci pour ce guide très complet ! Je suis artisan et je commence à me renseigner sur la création d’un site. Je n’ai jamais utilisé Hugo ni Jekyll. Lequel me conseillez-vous si je ne suis pas très à l’aise avec la ligne de commande ?
Bonjour, ravi que le guide vous plaise ! Si vous débutez avec la ligne de commande, Jekyll peut être plus accessible grâce à sa communauté et ses nombreux thèmes. Cependant, Hugo est aussi simple à installer (un binaire unique) et sa documentation est excellente. Je vous conseillerais de commencer par Jekyll, mais si vous êtes prêt à apprendre un peu, Hugo est très performant. N’hésitez pas à consulter la section comparatif pour plus de détails.
J’ai suivi les étapes pour Hugo mais je bloque sur le déploiement sur Netlify. J’ai généré le dossier public, mais Netlify ne trouve pas le site. Une idée ?
Bonjour, vérifiez que vous avez bien configuré le répertoire de publication (public/) dans les paramètres de déploiement de Netlify. Assurez-vous aussi que votre fichier de configuration Hugo (config.toml) a la bonne baseURL. Par exemple : baseURL = « https://monsite.netlify.app/ ». Si le problème persiste, consultez la documentation de Hugo sur le déploiement Netlify. Bon courage !
Super article ! J’utilise déjà Hugo pour mon site d’artisan et je confirme que c’est rapide et sécurisé. Par contre, j’ai un peu de mal à personnaliser le thème. Auriez-vous des astuces pour modifier le CSS sans toucher au HTML ?
Merci pour votre retour ! Pour personnaliser le CSS sans modifier le HTML, vous pouvez ajouter un fichier CSS personnalisé dans le dossier static/ de votre site Hugo, puis le référencer dans votre fichier de configuration (config.toml) ou dans le partial head du thème. Sinon, certains thèmes permettent de surcharger les fichiers CSS dans assets/. Vérifiez la documentation de votre thème. Bonne continuation !
Article très utile, merci. Une petite remarque : pour Jekyll, l’installation de Ruby peut être un frein pour les débutants. Peut-être préciser qu’il existe des versions pré-packagées comme RubyInstaller sur Windows ?
Excellente remarque ! En effet, RubyInstaller simplifie grandement l’installation sur Windows. Je le mentionnerai dans une future mise à jour. Sous macOS, Ruby est préinstallé, mais il est conseillé d’utiliser rbenv pour gérer les versions. Merci d’avoir souligné ce point pratique !
Je suis ébéniste et j’aimerais un site avec une galerie photo. Est-ce que Hugo ou Jekyll gèrent bien les images ? Faut-il un plugin particulier ?
Bonjour, les deux gèrent très bien les images. Vous pouvez les inclure directement en Markdown avec la syntaxe . Pour des galeries plus avancées, vous pouvez utiliser des shortcodes (Hugo) ou des plugins (Jekyll). Par exemple, Hugo a un shortcode figure intégré, et vous pouvez créer des galeries avec des thèmes comme Gallery. Pas besoin de plugin supplémentaire pour une utilisation basique. Pensez à optimiser le poids des images pour la rapidité du site.
Je me demandais : est-ce que ces sites statiques sont vraiment bons pour le référencement local ? Je suis plombier et j’ai besoin d’apparaître dans Google Maps.
Oui, tout à fait ! Les sites statiques sont très rapides, ce qui est un facteur important pour le SEO. Pour le référencement local, vous pouvez ajouter vos coordonnées, un plan d’accès, et utiliser les balises schema.org (adresse, téléphone). Hugo et Jekyll permettent d’intégrer facilement ces données structurées. De plus, vous pouvez créer une page dédiée à votre ville. N’oubliez pas de référencer votre site sur Google My Business.