Il existe de nombreuses façons de déployer votre site web Hugo construit avec Blowfish. Le thème est conçu pour être flexible dans presque tous les scénarios de déploiement.
Blowfish utilise des URLs relatives tout au long du thème. Cela permet aux sites d’être facilement déployés dans des sous-dossiers et sur des hôtes comme GitHub Pages. Il n’y a généralement pas de configuration spéciale requise tant que le paramètre baseURL a été configuré dans le fichier hugo.toml.
La documentation officielle Hugo Hébergement et Déploiement est le meilleur endroit pour apprendre à déployer votre site. Les sections ci-dessous contiennent quelques détails de configuration spécifiques au thème qui peuvent vous aider à déployer sans problème avec certains fournisseurs.
Choisissez votre fournisseur :
GitHub Pages#
GitHub permet l’hébergement sur GitHub Pages en utilisant Actions. Pour activer cette fonctionnalité, activez Pages sur votre dépôt et créez un nouveau workflow Actions pour construire et déployer votre site.
Le fichier doit être au format YAML, placé dans le répertoire .github/workflows/ de votre dépôt GitHub et nommé avec une extension .yml.
branches et dans le paramètre if de l’étape de déploiement vers la branche source utilisée dans votre projet.# .github/workflows/gh-pages.yml
name: GitHub Pages
on:
push:
branches:
- main
jobs:
build-deploy:
runs-on: ubuntu-24.04
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:
- name: Checkout
uses: actions/checkout@v3
with:
submodules: true
fetch-depth: 0
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: "latest"
- name: Build
run: hugo --minify
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
if: ${{ github.ref == 'refs/heads/main' }}
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_branch: gh-pages
publish_dir: ./publicPoussez le fichier de configuration vers GitHub et l’action devrait s’exécuter automatiquement. Elle peut échouer la première fois et vous devrez visiter la section Settings > Pages de votre dépôt GitHub pour vérifier que la source est correcte. Elle devrait être configurée pour utiliser la branche gh-pages.
Une fois les paramètres configurés, relancez l’action et le site devrait se construire et se déployer correctement. Vous pouvez consulter les logs d’actions pour vérifier que tout s’est déployé avec succès.
Netlify#
Pour déployer sur Netlify, créez un nouveau site de déploiement continu et liez-le à votre code source. Les paramètres de construction peuvent être laissés vides dans l’interface Netlify. Vous n’aurez qu’à configurer le domaine que vous utiliserez.
Puis dans la racine du dépôt de votre site, créez un fichier netlify.toml :
# netlify.toml
[build]
command = "hugo mod get -u && hugo --gc --minify -b $URL"
publish = "public"
[build.environment]
NODE_ENV = "production"
GO_VERSION = "1.16"
TZ = "UTC" # Définir selon le fuseau horaire préféré
[context.production.environment]
HUGO_VERSION = "0.104.1"
HUGO_ENV = "production"
[context.deploy-preview.environment]
HUGO_VERSION = "0.104.1"Cette configuration suppose que vous déployez Blowfish en tant que module Hugo. Si vous avez installé le thème en utilisant une autre méthode, changez la commande de construction simplement en hugo --gc --minify -b $URL.
Lorsque vous poussez le fichier de configuration vers votre dépôt, Netlify devrait déployer automatiquement votre site. Vous pouvez vérifier les logs de déploiement dans l’interface Netlify pour toute erreur.
Render#
Le déploiement sur Render est très simple et toute la configuration se fait via l’interface Render.
Créez un nouveau Static Site et liez-le au dépôt de code de votre projet. Puis configurez simplement la commande de construction comme hugo --gc --minify et le répertoire de publication comme public.
Le site se construira et se déploiera automatiquement chaque fois que vous pousserez un changement vers votre dépôt.
Cloudflare Pages#
Cloudflare offre le service Pages qui peut héberger des blogs Hugo. Il construit le site à partir d’un dépôt git et l’héberge ensuite sur le CDN de Cloudflare. Suivez leur guide de déploiement Hugo pour commencer.
La fonctionnalité Rocket Loader™ offerte par Cloudflare essaie d’accélérer le rendu des pages web avec JavaScript, mais elle casse le sélecteur d’apparence dans le thème. Elle peut également causer un flash d’écran clair/sombre ennuyeux lors de la navigation sur votre site en raison du chargement des scripts dans le mauvais ordre.
Ce problème peut être résolu en le désactivant :
- Allez sur le tableau de bord Cloudflare
- Cliquez sur votre nom de domaine dans la liste
- Cliquez sur Optimization dans la section Speed
- Faites défiler jusqu’à Rocket Loader™ et désactivez-le
Les sites Hugo construits avec Blowfish chargent toujours très rapidement, même avec cette fonctionnalité désactivée.
Hébergement partagé, VPS ou serveur web privé#
Utiliser un hébergement web traditionnel, ou déployer sur votre propre serveur web, est aussi simple que de construire votre site Hugo et de transférer les fichiers vers votre hôte.
Assurez-vous que le paramètre baseURL dans hugo.toml est défini sur l’URL complète vers la racine de votre site web (y compris les sous-domaines ou sous-dossiers).
Puis construisez votre site en utilisant hugo et copiez le contenu du répertoire de sortie vers la racine de votre serveur web et vous serez prêt. Par défaut, le répertoire de sortie est nommé public.
Si vous avez besoin d’un fournisseur d’hébergement, consultez Vultr ou DigitalOcean. L’inscription via ces liens d’affiliation vous donnera jusqu’à 100$ de crédit gratuit pour essayer le service.
