Guide étape par étape pour déployer Hugo sur Vercel

Ce guide vous guidera dans le déploiement d'un site Web Hugo sur Vercel.
Je veillerai à ce que vous évitiez au moins une erreur courante.

1. Créez votre site Hugo localement

En supposant qu'Hugo soit déjà installé :

nouveau site Hugo

---

2. Poussez votre site Hugo vers GitHub

Ensuite, configurez un référentiel git pour le site.

git init

Ajoutez un commit et poussez vos fichiers de projet :

git ajouter.
git commit
git push -u maître d'origine

---

3.Ajoutez un thème pour votre site Hugo.

Par exemple, vous pouvez utiliser un thème super rapide Nno jQuery, no Bootstrap comme hugo-blog-awesome :

En tant que module github :
sous-module git ajouter https://github.com/hugo-sid/hugo-blog-awesome.git

Ou un module Hugo
Le mod Hugo est disponible sur github.com/hugo-sid/hugo-blog-awesome

---

4. Ajouter la configuration Vercel (vercel.json)

Dans le répertoire racine, ajoutez vercel.json où nous allons définir la version Hugo Go et la buildCommand, après avoir défini Hugo comme Framework Preset dans Vercel, ces configurations seront automatiquement détectées.


vercel.json

{
  "build": {
    "env": {
      "HUGO_VERSION": "0.135.0",
      "GO_VERSION": "1.19.5"
    }
  },
 "buildCommand": "hugo --gc --minify"
}

- utilisez hugo env pour afficher les versions de Go et Hugo que vous utilisez

Puis envoyez la mise à jour vers Github :
git ajouter .
git commit -m "vercel déployer"
git push -u maître d'origine

---

5 . Déployez votre site sur Vercel

Pendant le processus d'importation, assurez-vous que le projet est correctement connecté à votre référentiel Hugo.

Vercel détecte l'environnement et la construction de commandes :

Ou vous pouvez le définir manuellement dans les variables d'environnement Vercel ici

Journaux de déploiement :

Après une construction réussie ??, Vercel fournira un lien d'aperçu où vous pourrez consulter votre site Web Hugo en direct. Vous pouvez également configurer un domaine personnalisé via les paramètres de Vercel pour votre projet.

---

6. Ajouter un domaine

Si vous avez un nom de domaine, vous pouvez ajouter le nom de domaine à la section vercel dans les domaines des paramètres du projet. Ajoutez ensuite un CNAME à votre fournisseur de domaine pour pointer vers le domaine vercel.

---

?️ Résoudre les problèmes de déploiement courants

Le principal problème est que le support de Hugo n'est pas très bon même si Vercel a déjà mis à jour son image Node pour avoir Hugo et avec les paramètres par défaut, j'ai rencontré l'erreur de mise en page Hugo introuvable et mon déploiement mène à un XML page.
En effet, le paramètre env des versions Hugo et Go doit être défini avec dans le fichier json vercel.json

Créer un site personnel avec Hugo et Vercel est vraiment simple, malgré quelques petits soucis. J'espère que cet article pourra vous aider à créer votre propre site. Pour plus de détails sur les modifications que j'ai apportées au site, consultez l'historique des commits de mon site.

---

Quelques sources :
https://vercel.com/guides/deploying-hugo-with-vercel
https://vercel.com/docs/projects/project-configuration
https://blog.gusibi.site/article/Best-Practices-for-Deploying-Hugo-on-Vercel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!