Aller au contenu

Utiliser OINK Starter

Un guide court et séquentiel, du clonage à la publication.

Utiliser OINK Starter

Un guide court et séquentiel, du clonage à la publication.

Ce petit livre présente le modèle lui-même. Lisez-le une fois du début à la fin, puis remplacez-le par le guide détaillé dont votre projet a besoin.

Sommaire

1 Prévisualiser le site

Cloner le dépôt et ouvrir l’accueil local en trois commandes.

OINK Starter est un site Hugo Module. Git télécharge les sources, Go résout la version épinglée du thème et Hugo construit l’ensemble.

Prérequis

Installez Git, Go 1.27 ou plus récent et Hugo Extended 0.165.0 ou plus récent. Le mot extended doit apparaître dans hugo version.

Trois commandes

git clone https://github.com/pgsty/oink-starter.git
cd oink-starter
hugo server

Ouvrez http://localhost:1313/. Le chinois se trouve sous /zh/ et le français sous /fr/.

Première preuve

Modifiez une phrase dans data/home/en.yaml et vérifiez que le navigateur se recharge. Votre boucle d’édition fonctionne.

2 Comprendre la structure

Identifier les quelques fichiers qui gèrent configuration, contenu et déploiement.

Le modèle place chaque responsabilité dans un endroit évident.

La carte

hugo.yaml          identité, langues et intégrations facultatives
data/home/         une page d’accueil compacte par langue
content/blog/      articles, conception et versions
content/docs/      l’arborescence documentaire en quatre parties
content/book/      ce tutoriel séquentiel
.github/workflows/ déploiement GitHub Pages et Cloudflare Pages

La navigation suit le contenu

Le front matter menus.main de chaque racine crée la navigation supérieure et ses menus. L’arborescence sous Docs et Livre crée leurs barres latérales.

Les traductions restent côte à côte

L’anglais utilise .md, le chinois .zh.md et le français .fr.md. Conservez-les ensemble avec les mêmes identifiants explicites de titres.

3 Personnaliser le modèle

Remplacer l’identité et les exemples sans reconstruire le thème.

La plupart des projets n’exigent que du contenu et deux modifications de configuration.

Modifier l’identité une seule fois

En haut de hugo.yaml, remplacez Project Name et https://example.org/. L’ancre YAML du titre propage le nom aux trois langues.

Ne remplacez assets/icons/logo.svg et static/favicon.svg que lorsque vous disposez d’une véritable identité visuelle.

Remplacer l’accueil

Modifiez data/home/en.yaml, zh.yaml et fr.yaml. La liste sections fixe l’ordre ; les blocs nommés fournissent le texte.

Remplacer les exemples

Gardez la structure des dossiers, puis réécrivez ou supprimez les pages d’exemple. Pour renommer une entrée principale, modifiez les fichiers _index traduits correspondants.

Activer les intégrations volontairement

hugo.yaml propose des exemples commentés pour les liens du dépôt, Giscus, Google Analytics, les couleurs, la typographie, le partage et les retours. Ne décommentez qu’une configuration complète que vous comptez exploiter.

4 Publier le site

Utiliser l’un des workflows fournis et vérifier les routes réellement déployées.

Le dossier public/ généré est un site statique. Le dépôt fournit deux chemins de déploiement indépendants.

GitHub Pages

Dans les paramètres du dépôt, choisissez Pages → Source → GitHub Actions. Un envoi sur main exécute .github/workflows/github-pages.yaml et calcule automatiquement le bon sous-chemin du dépôt.

Cloudflare Pages

Créez un projet Pages en Direct Upload, puis ajoutez CLOUDFLARE_ACCOUNT_ID et CLOUDFLARE_API_TOKEN comme secrets. Définissez la variable CLOUDFLARE_PAGES_ENABLED à true pour les déploiements automatiques. Le nom du projet reprend celui du dépôt, sauf surcharge par CLOUDFLARE_PROJECT_NAME.

Vérifier la production

Ouvrez /, /zh/ et /fr/, puis une route Blog, Docs et Livre dans chaque langue. Vérifiez la recherche, le changement de langue, le mode sombre et une largeur mobile étroite.

Important

Une construction locale réussie, un commit envoyé, un workflow vert et un site public correct sont quatre contrôles distincts.