HUGO on kenji.blog

Liste des Commandes Hugo

Fri, 31 May 2024 01:36:00 +0900

Qu’est-ce que Hugo

Hugo est l’un des générateurs de sites statiques. Vous pouvez créer un site Web en convertissant des fichiers Markdown en HTML. Hugo est écrit en langage Go et fonctionne très rapidement.

Ce blog est également créé avec Hugo.

Installation de la CLI Hugo

Pour installer la CLI Hugo, exécutez la commande ci-dessous.

※ Ceci est un exemple pour macOS. Pour les autres systèmes d’exploitation, veuillez vous référer à la documentation officielle.

1

brew install hugo

Vous pouvez l’installer en utilisant Homebrew.

Liste des Commandes Hugo

Hugo propose diverses commandes. Les commandes fréquemment utilisées sont résumées ci-dessous.

Créer un nouveau site

1

hugo new site <nom-du-site>

Commande pour créer un nouveau site. Dans <nom-du-site>, spécifiez le nom du site.

Créer un nouvel article

1

hugo new <nom-de-l'article>.md

Commande pour créer un nouvel article. Dans <nom-de-l'article>, spécifiez le nom de l’article.

Démarrer le serveur

1

hugo server

Commande pour démarrer le serveur local. Il est accessible à l’adresse http://localhost:1313.

Construire (Build)

1

hugo

Commande pour construire le site. Les fichiers HTML seront générés dans le répertoire public.

Déployer

1

hugo deploy

Commande pour déployer le site. Les paramètres de destination du déploiement sont configurés dans le fichier config.toml.

Afficher la liste des articles

1

hugo list all

Commande pour afficher la liste des articles.

Vérifier la configuration

1

hugo config

Commande pour vérifier la configuration.

Afficher l’aide

1

hugo help

Commande pour afficher l’aide.

Afficher la version

1

hugo version

Commande pour afficher la version.

Ceci est la liste des commandes Hugo. Comme il existe de nombreuses autres commandes disponibles, veuillez vous référer à la documentation officielle.

Référence

Documentation Officielle Hugo

Comment obtenir et intégrer un classement des pages populaires depuis Google Analytics

Mon, 10 Apr 2023 20:26:57 +0900

Introduction

En utilisant un service appelé Ranklet, vous pouvez facilement récupérer le classement des pages populaires depuis Google Analytics et l’intégrer sur votre site.

Dans cet article, nous allons vous présenter comment l’intégrer sur un blog HUGO.

Aperçu du fonctionnement

Préparation

Avoir configuré Google Analytics sur votre site

Étapes

Accédez à Ranklet
Cliquez sur Sign in with Google pour vous connecter avec votre compte Google (celui-ci doit être associé à votre compte Google Analytics)

Cliquez sur Autoriser (許可)

Configurez les informations de base

La configuration a été effectuée comme indiqué ci-dessus.

Dans Vue Google Analytics (Google Analytics ビュー), sélectionnez la vue dont vous souhaitez obtenir le classement.

Configurez le remplacement de texte

La configuration a été effectuée comme indiqué ci-dessus. Ce paramètre est défini pour supprimer | kenji.blog du titre de la page.

Configurez le modèle

HTML (les numéros de classement ont été masqués)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


<div class="ranklet ranklet-reset">
 <table class="ranklet-table">
 <tbody class="ranklet-pages">
 {{#context.pages}}
 <tr class="ranklet-page">
 <td class="ranklet-image">
 {{#image}}
 <a href="{{url}}" class="ranklet-link">
 <img class="ranklet-img" src="{{image}}" />
 </a>
 {{/image}}
 </td>
 <td class="ranklet-meta">
 <div class="ranklet-title">
 <a href="{{url}}" class="ranklet-link">
 {{title}}
 </a>
 </div>
 {{#description}}
 <div class="ranklet-description">
 <a href="{{url}}" class="ranklet-link">
 {{description}}
 </a>
 </div>
 {{/description}}
 </td>
 </tr>
 {{/context.pages}}
 </tbody>
 </table>
</div>

CSS (la taille de police a été modifiée et la description s’affiche sur 3 lignes)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55


#ranklet-{{context.id}} {
 .ranklet-reset { // Réinitialisation
 table, tr, td, div, span {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 line-height: 1;
 box-sizing: border-box;
 }
 }

 .ranklet-table {
 border-collapse: separate;
 border-spacing: 8px 24px;
 width: 100%;
 word-break: break-all;

 td {
 vertical-align: middle;
 }

 .ranklet-rank {
 text-align: center;
 font-size: 120%;
 }

 .ranklet-image {
 text-align: center;
 img {
 max-width: 128px;
 max-height: 128px;
 }
 }

 .ranklet-meta {
 .ranklet-title {
 font-size: 20px;
 line-height: 125%;
 }

 .ranklet-description {
 font-size: 16px;
 margin-top: 8px;
 line-height: 125%;
 display: -webkit-box;
 overflow: hidden;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3; /* Nombre de lignes */
 }
 }
 }
}

Aucun changement pour JavaScript

Copiez le code HTML depuis « Publier sur le site »

Copiez le code HTML affiché

Collez-le dans le modèle HUGO

Créez layouts/partials/ranklet.html et collez-y le code HTML copié

1

<div id="ranklet-11958"></div><script src="//widget.ranklet.com/v1/ranklet/s3/widgets/11958/widget.js"></script>

Collez le code suivant sur la ligne précédant </footer> dans layouts/_default/single.html

1

{{- partial "ranklet.html" . }}

C’est tout. Le classement s’affichera désormais comme au bas de cette page.

Comment activer KaTeX (affichage de formules mathématiques de style LaTeX) dans hugo

Fri, 31 Mar 2023 23:11:26 +0900

Qu’est-ce que KaTeX

KaTeX est une bibliothèque javascript permettant d’afficher des formules mathématiques de style LaTeX en HTML.

Plus précisément, vous pouvez afficher des formules comme ci-dessous.

$$f(x) = x^2 + x + 41$$

Il semble y avoir d’autres bibliothèques d’affichage de formules de style LaTeX, mais KaTeX est réputé pour être simple et rapide.

Comment l’intégrer à hugo

Créez un nouveau layouts/partials/math.html dans la hiérarchie des dossiers de hugo.

Le contenu doit être le suivant.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js" integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
 renderMathInElement(
 document.body,
 {
 delimiters: [
 {left: "$$", right: "$$", display: true},
 {left: "\\[", right: "\\]", display: true},
 {left: "$", right: "$", display: false},
 {left: "\\(", right: "\\)", display: false}
 ]
 });
 });
</script>

Ensuite, ajoutez le code ci-dessous au fichier existant layouts/partials/extend_head.html.

1
2
3


{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}

Vous êtes maintenant prêt à utiliser KaTeX.

Vous pouvez activer KaTeX en ajoutant math: true au front matter de la page.

Il ne vous reste plus qu’à écrire la formule dans le style LaTeX dans le corps de l’article de la page.

1

$$ e^{i \pi} = -1 $$

En l’écrivant comme ci-dessus, il s’affichera comme ci-dessous.

$$ e^{i \pi} = -1 $$

Référence

Utiliser des balises HTML dans HUGO

Tue, 17 Jan 2023 19:20:32 +0900

Par défaut, HUGO n’autorise pas l’utilisation de balises HTML dans les articles, mais vous pouvez l’activer en ajoutant la description suivante au config.toml.

1
2


[markup.goldmark.renderer]
 unsafe = true

Référence: Configure Markup

Shortcodes utiles dans HUGO

Sun, 11 Sep 2022 22:59:52 +0900

Shortcodes utiles dans HUGO

YouTube

{{<youtube 123456abc>}}

Twitter

{{<twitter 123456abc>}}

Instagram

{{<instagram 123456abc>}}

Flickr

{{<flickr 123456abc>}}

Vimeo

{{<vimeo 123456abc>}}

Autres

Shortcodes

Remarque supplémentaire

Si vous souhaitez afficher {{< foo >}} sur le site, vous devez écrire {{</* foo */>}}.

Modifier la disposition des images dans PaperMod

Sun, 11 Sep 2022 18:50:40 +0900

La disposition par défaut place l’image au centre avec une largeur de 100 %, mais comme je la trouvais parfois un peu grande, j’ai essayé de faire en sorte que l’image s’enroule sous le titre, et j’ai modifié la largeur à environ 150px.

Les modifications apportées aux fichiers sont les suivantes.

blank.css

Pour modifier les marges, la taille de l’image et les lignes d’affichage du texte, ajoutez la description suivante dans blank.css.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


.entry-content {
 -webkit-line-clamp: 4;
}

.entry-footer {
 text-align: right;
}

.entry-cover {
 margin-bottom: initial;
 text-align: center;
}

.entry-cover img {
 border-radius: 4px;
 display: inline;
 max-width: 100%;
}

.post-meta {
 display: block;
 text-align: right;
}

post-entry.css

Comme je n’ai pas pu supprimer la définition du côté de blank.css, j’ai supprimé 1 ligne à l’emplacement suivant dans post-entry.css.

1
2
3
4
5
6


.entry-cover img {
 border-radius: var(--radius);
 pointer-events: none;
 /* width: 100%; */ ← Supprimer cette ligne
 height: auto;
}

list.html

Pour modifier la disposition de l’image, j’ai modifié l’emplacement suivant dans list.html.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


<article class="{{ $class }}">
 <!-- {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }} --><!-- Déplacé vers le bas -->
 <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- Déplacé vers le bas -->
 <header class="entry-header">
 <h2>
 {{- .Title }}
 {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
 </h2>
 </header>
 <div style="display:flex;"><!-- Ajouté -->
 <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- Ajouté -->
 {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- Déplacé du haut -->
 {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- Déplacé du haut -->
 </div><!-- Ajouté -->
 <div style="width:100%;"><!-- Ajouté -->
 {{- if (ne (.Param "hideSummary") true) }}
 <div class="entry-content">
 <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
 </div>
 {{- end }}
 {{- if not (.Param "hideMeta") }}
 <footer class="entry-footer">
 {{- partial "post_meta.html" . -}}
 </footer>
 {{- end }}
 <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
 </div><!-- Ajouté -->
 </div><!-- Ajouté -->
</article>

Il semble qu’il y ait pas mal de demandes similaires.

https://github.com/adityatelange/hugo-PaperMod/discussions/159#discussioncomment-247844

Ce serait bien si les développeurs officiels pouvaient également le prendre en charge.

Comment configurer Twitter Card avec PaperMod

Sat, 10 Sep 2022 18:41:22 +0900

Introduction

Le thème PaperMod prend en charge Twitter Card. Cependant, les paramètres de Twitter Card doivent être écrits dans le config.toml ou dans les informations d’en-tête du *.md de chaque article. Si vous le configurez à la fois dans chaque article et dans le config.toml, les informations d’en-tête de chaque article seront prioritaires.

Comment configurer

config.toml

Dans config.toml, ajoutez un élément appelé images sous [params]. Dans images, décrivez le chemin de l’image à afficher sur Twitter Card. Si vous placez l’image dans le dossier static, il suffit de spécifier uniquement le nom du fichier.

1
2


[params]
 images = ["twitter_card.jpg"]

Structure des dossiers

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (Écrire ici)
├─content
│ └─posts
│ └─Dossier de l'article
│ │ index.md (Écrire ici)
│ └─images
│ cover.png (Placer ici)
└─static
 twitter_card.jpg (Placer ici)

Informations d’en-tête de chaque article

Dans les informations d’en-tête de chaque article, ajoutez un élément appelé image sous cover. Si vous définissez relative sur true, vous pouvez spécifier avec un chemin relatif à partir du *.md de l’article.

1
2
3


cover:
 image: "images/cover.jpg"
 relative: true

Si vous ne souhaitez pas l’afficher en haut de l’article

Si vous ne souhaitez pas afficher l’image de couverture en haut de l’article, ajoutez un élément appelé hidden sous cover et définissez-le sur true.

1
2
3
4


cover:
 image: "images/cover.jpg"
 relative: true
 hidden: true

À propos de la taille de l’image

Dans les spécifications actuelles de PaperMod, il semble que la taille de Twitter Card ne prenne en charge que summary_large_image. La taille appropriée (résolution) de summary_large_image a plusieurs théories, mais autour de 800 x 418 (ratio d’image 1.91:1) semble être bon.

Site de référence 1 Site de référence 2

Si possible, nous vous recommandons de redimensionner la taille de l’image avant de publier.

Comment vérifier les paramètres

Pour vérifier les paramètres de Twitter Card, utilisez le Twitter Card Validator. Cependant, comme l’aperçu ne s’est pas affiché correctement dans mon environnement, si l’aperçu n’apparaît pas, je vous recommande de vérifier une fois avant de publier en utilisant un compte privé ou similaire.

Modification de la palette de couleurs de PaperMod

Wed, 07 Sep 2022 15:30:21 +0900

J’ai modifié la palette de couleurs du thème PaperMod. Je me suis référé au lien suivant pour la méthode de modification.

https://github.com/adityatelange/hugo-PaperMod/discussions/645

Le chemin du CSS est le suivant.

themes/PaperMod/assets/css/extended/blank.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


:root {
 --entry: #fbf7ef;
 --primary: rgba(113, 103, 91, 1.00);
 --secondary: rgba(113, 103, 91, 0.95);
 --tertiary: rgba(113, 103, 91, 0.50);
 --content: rgba(113, 103, 91, 0.85);
 --hljs-bg: #34231B;
 --code-bg: #ebe4d7;
 --border: #fdfaf5;
 --theme: #fbf7ef;
}
.dark {
}

Aucun changement pour le mode sombre pour le moment.

【HUGO】Aperçu de l'affichage dans l'environnement local

Mon, 05 Sep 2022 12:28:01 +0900

Installation de HUGO

Téléchargement

Téléchargement de HUGO

À partir du site ci-dessus, téléchargez et extrayez le module Windows adapté à votre environnement. Dans mon cas, j’ai téléchargé “hugo_0.102.3_Windows-64bit.zip”.

Extraction

Extrayez le fichier zip téléchargé, et copiez le fichier hugo.exe qui s’y trouve dans un dossier que vous avez créé, par exemple C:\bin.

Enregistrer dans les variables d’environnement

Enregistrez-le dans les variables d’environnement pour pouvoir exécuter hugo.exe de n’importe où. Les opérations ci-dessous concernent Windows 11, mais vous devriez pouvoir l’enregistrer avec une procédure similaire :

Appuyez sur Win+Pause pour ouvrir les informations de version
Cliquez sur Paramètres système avancés
Cliquez sur Variables d’environnement
Sélectionnez Path et cliquez sur Modifier
Cliquez sur Nouveau, entrez “C:\bin” sur une nouvelle ligne, puis cliquez sur OK pour fermer la boîte de dialogue

Prévisualiser le blog

Dans l’invite de commandes, accédez au dossier du blog HUGO et exécutez la commande ci-dessous.

hugo server -D

Le résultat de l’exécution est ci-dessous. (-D est une option pour afficher les articles en brouillon.)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


C:\Users\win11\IdeaProjects\kenji.blog>hugo server -D
Start building sites …
hugo v0.102.3-b76146b129d7caa52417f8e914fc5b9271bf56fc windows/amd64 BuildDate=2022-09-01T10:16:19Z VendorInfo=gohugoio

 | JA
-------------------+-----
 Pages | 39
 Paginator pages | 0
 Non-page files | 7
 Static files | 0
 Processed images | 0
 Aliases | 13
 Sitemaps | 1
 Cleaned | 0

Built in 161 ms
Watching for changes in C:\Users\win11\IdeaProjects\kenji.blog\{archetypes,content,themes}
Watching for config changes in C:\Users\win11\IdeaProjects\kenji.blog\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Puisque l’adresse est affichée lors de l’exécution (dans l’exemple ci-dessus, http://localhost:1313/), copiez cette adresse dans votre navigateur. L’aperçu est mis à jour automatiquement à chaque fois que le fichier est enregistré. Pour terminer l’aperçu, tapez Ctrl+C dans l’invite de commandes.