[Docker] Créez un site avec Hugo et publiez-le sur GitHub
Aperçu
Je vais résumer la procédure pour créer un site Hugo sur Docker et le publier sur GitHub.
supposition
- Connaissance de base de Git --J'ai un compte GitHub
- Connaissance de base de Docker
- Le terminal est disponible
environnement
Le nom du dossier de travail est "Docker Hugo". Pour docker-compose.yml pour démarrer l'environnement virtuel d'Hugo, reportez-vous à [Docker] Construire un environnement pour utiliser Hugo.
DockerHugo
├── docker-compose.yml
Vue d'ensemble
La figure ci-dessous montre le flux effectué localement avec le conteneur.
Créer un nouveau site Hugo
Entrez la commande suivante dans le conteneur
récipient
hugo new site hoge
Un dossier hoge est créé dans le dossier racine (ici, le dossier «Docker Hugo»). Le contenu du dossier hoge est le suivant
hoge
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
6 directories, 2 files
Téléchargez le thème que vous souhaitez utiliser
De nombreux modèles sont fournis par hugo. Trouvez le modèle que vous souhaitez utiliser sur themes.gohugo.io Référence: Site de classement des thèmes Hugo
Ici, sélectionnez Learn. Cliquez sur [Démo] pour voir les sites qui utilisent le thème.
Cliquez sur [Télécharger] pour afficher la page github.
Copiez le lien fourni dans [Code]
Lancez un terminal sur votre PC local et dans le dossier «DockerHugo», exécutez:
PC local
git init
git submodule add https://github.com/matcornic/hugo-theme-learn.git hoge/themes/learn
Le contenu des thèmes / dossier d'apprentissage est le suivant
learn
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── archetypes
│ └── default.md
├── data
│ └── webpack_assets.json
├── exampleSite
│ ├── config.toml
│ ├── content
│ │ ├── _index.md
│ │ ├── about
│ │ │ └── _index.md
│ │ ├── contact.md
│ │ └── post
│ │ ├── _index.md
│ │ ├── chapter-1.md
・
・
・
26 directories, 101 files
Vous pouvez confirmer que les fichiers requis pour la configuration du site tels que html et css ont été téléchargés.
Ajouté à config.toml
Exécutez ce qui suit dans le dossier hoge de votre terminal PC local
PC local
echo 'theme = "learn"' >> config.toml
Ajouté au fichier config.toml
config.toml
baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "learn"
Ajouter un fichier de contenu
Lorsque vous exécutez la commande hugo new, les fichiers de contenu sont stockés ci-dessous
contenu / nom de dossier spécifié / nom de fichier
Exécutez ce qui suit dans le dossier hoge du terminal du conteneur
récipient
hugo new posts/my-first-post.md
Si vous vérifiez le fichier créé, les éléments suivants sont ajoutés
my-first-post.md
---
title: "My First Post"
date: 2020-09-16T13:53:14Z
draft: true
---
La valeur par défaut est "draft: true" et les brouillons ne sont pas compilés (commande "hugo"). Assurez-vous de définir "brouillon: faux" si vous souhaitez créer
Étant donné que ce fichier est un fichier qui décrit le contenu du fichier Web, ajoutez-le comme suit
#Titre
Essayez de créer un site hoge
Démarrer le serveur Hugo
Démarrez le serveur Hugo pour vérifier dans le navigateur avant de construire
Exécutez ce qui suit dans le dossier hugo du terminal du conteneur
récipient
hugo server -D
Si vous ajoutez "-D", le brouillon sera également affiché.
Vérifiez le site Web créé
Ouvrez http: // localhost: 1313 / dans votre navigateur
La personnalisation de la page sera décrite dans un article séparé
Modifiez le fichier config.toml
La configuration globale du site se fait dans le fichier config.toml.
Modifié comme suit
config.toml
baseURL = "" #Non requis si le chemin relatif est défini sur true
languageCode = "ja" #Pas nécessaire car il ne prend pas en charge plusieurs langues,"ja"Changer pour
title = "My New Hugo Site"
theme = "learn"
publishDir = "../docs" #Stockage de fichiers stocké lorsque la commande hugo est exécutée
relativeURLs = true #Changer pour enregistrer en tant que chemin relatif (chemin absolu par défaut (URL relatives)=false）)
Voir Configurer Hugo pour plus de détails sur les paramètres.
Explication supplémentaire sur la raison du passage à publishDir =" docs "
Cette fois, nous publierons le site Web sur les pages GitHub. Dans les pages Github, vous ne pouvez spécifier que le dossier [(roots)] ou [docs] comme dossier qui stocke les fichiers qui créent la page Web. Alors je l'ai changé en publishDir =" ../ docs "
Par défaut, le dossier "public" est spécifié.
L'image suivante est l'écran de configuration des pages GitHub
Explication supplémentaire sur la raison de la définition de relativeURLs =" true "
En passant d'un chemin absolu à un chemin relatif, il est désormais possible de gérer les dossiers même lors d'un déplacement.
Créer un site statique
Exécutez ce qui suit dans le dossier "Docker Hugo" (dossier racine) du conteneur
récipient
hugo
Puisque "publishDir =" docs "" a été décrit dans config.toml, les fichiers html et css ont été générés dans le dossier docs.
docs $ tree
.
├── 404.html
├── categories
│ ├── index.html
│ └── index.xml
├── css
│ ├── atom-one-dark-reasonable.css
│ ├── auto-complete.css
│ ├── featherlight.min.css
・
・
・
8 directories, 82 files
Publié sur les pages GitHub
Publier sur des pages GitHub à l'aide de la commande git ou de SourceTree Voir l'article ci-dessous pour plus de détails ・ [Terminal] Comment gérer git / github