HUGO on kenji.blog

Lista de comandos de Hugo

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

¿Qué es Hugo?

Hugo es un generador de sitios estáticos. Puedes crear sitios web convirtiendo archivos Markdown a HTML. Hugo está escrito en el lenguaje Go y funciona a gran velocidad.

Este blog también fue creado con Hugo.

Instalación del CLI de Hugo

Para instalar el CLI de Hugo, ejecuta el siguiente comando:

※ Ejemplo para macOS. Para otros sistemas operativos, consulta la documentación oficial.

1

brew install hugo

Se puede instalar usando Homebrew.

Lista de comandos de Hugo

Hugo ofrece varios comandos. A continuación, se resumen los comandos más utilizados.

Crear un nuevo sitio

1

hugo new site <nombre del sitio>

Comando para crear un nuevo sitio. Especifica el nombre del sitio en <nombre del sitio>.

Crear un nuevo artículo

1

hugo new <nombre del artículo>.md

Comando para crear un nuevo artículo. Especifica el nombre del artículo en <nombre del artículo>.

Iniciar el servidor

1

hugo server

Comando para iniciar un servidor local. Se puede acceder en http://localhost:1313.

Construir (Build)

1

hugo

Comando para construir el sitio. Los archivos HTML se generan en el directorio public.

Desplegar (Deploy)

1

hugo deploy

Comando para desplegar el sitio. La configuración del destino de despliegue se realiza en el archivo config.toml.

Mostrar la lista de artículos

1

hugo list all

Comando para mostrar la lista de artículos.

Confirmar la configuración

1

hugo config

Comando para confirmar la configuración.

Mostrar la ayuda

1

hugo help

Comando para mostrar la ayuda.

Mostrar la versión

1

hugo version

Comando para mostrar la versión.

Esta ha sido la lista de comandos de Hugo. Hay muchos otros comandos disponibles, así que consulta la documentación oficial.

Referencia

Documentación oficial de Hugo

Cómo obtener y colocar una clasificación de páginas populares desde Google Analytics

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

Introducción

Usando un servicio llamado Ranklet, puedes obtener fácilmente una clasificación de páginas populares desde Google Analytics y colocarla en tu sitio.

En este artículo, te mostraremos cómo colocarlo en un blog HUGO.

Imagen de funcionamiento

Preparación

Asegúrate de haber configurado Google Analytics en tu sitio.

Pasos

Accede a Ranklet
Haz clic en Sign in with Google e inicia sesión con tu cuenta de Google (asegúrate de que esté vinculada a tu cuenta de Google Analytics)

Haz clic en Permitir (許可)

Configura la información básica

Lo he configurado como se muestra arriba.

En Vista de Google Analytics (Google Analytics ビュー), selecciona la vista de la que deseas obtener la clasificación.

Configura el reemplazo de texto

Lo he configurado como se muestra arriba. Se configura para eliminar | kenji.blog del título de la página.

Configura la plantilla

HTML (Se ocultaron los números de clasificación)

 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 (Se cambió el tamaño de la fuente y se configuró la descripción para que se muestre en 3 líneas)

 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 { // リセット
 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; /* 行数 */
 }
 }
 }
}

JavaScript sin cambios

Copia el HTML de “Publicación en el sitio” (サイトへの掲載)

Copia el HTML que se muestra.

Pégalo en la plantilla de HUGO

Crea layouts/partials/ranklet.html y pega el HTML copiado.

1

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

Pega el siguiente código en la línea anterior a </footer> en layouts/_default/single.html.

1

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

Eso es todo. Ahora la clasificación se mostrará en la parte inferior de esta página como se muestra a continuación.

Cómo habilitar KaTeX (fórmulas matemáticas estilo LaTeX) en hugo

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

Qué es KaTeX

KaTeX es una biblioteca de JavaScript para mostrar fórmulas matemáticas estilo LaTeX en HTML.

Específicamente, puedes mostrar fórmulas como la siguiente.

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

Aunque parece haber otras bibliotecas para mostrar fórmulas matemáticas estilo LaTeX, KaTeX tiene la reputación de ser simple y rápida.

Cómo introducirlo en hugo

Crea un nuevo archivo layouts/partials/math.html en la jerarquía de carpetas de hugo.

El contenido debe ser el siguiente.

 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>

A continuación, añade el siguiente código al archivo existente layouts/partials/extend_head.html.

1
2
3


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

Ahora estás listo para usar KaTeX.

Al añadir math: true al front matter de la página, puedes habilitar KaTeX.

Todo lo que tienes que hacer es escribir las fórmulas matemáticas al estilo LaTeX en el cuerpo del artículo de la página.

1

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

Si lo escribes como arriba, se mostrará de la siguiente manera.

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

Referencias

Usar etiquetas HTML en HUGO

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

De manera predeterminada, el uso de etiquetas HTML en los artículos está deshabilitado en HUGO, pero puedes habilitarlo agregando la siguiente configuración en config.toml.

1
2


[markup.goldmark.renderer]
 unsafe = true

Referencia: Configure Markup

Códigos cortos que se pueden usar en HUGO

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

Códigos cortos que se pueden usar en HUGO

YouTube

{{<youtube 123456abc>}}

Twitter

{{<twitter 123456abc>}}

Instagram

{{<instagram 123456abc>}}

Flickr

{{<flickr 123456abc>}}

Vimeo

{{<vimeo 123456abc>}}

Otros

Shortcodes

Aparte

Si desea expresar {{< foo >}} en el sitio, debe escribir {{</* foo */>}}.

'Cambio de disposición de imágenes en PaperMod'

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

El diseño por defecto coloca las imágenes en el centro con un 100% de ancho, pero como a veces sentía que eran demasiado grandes, intenté hacer que la imagen se acomodara debajo del título y cambiar el ancho a unos 150px.

Los cambios en los archivos son los siguientes.

blank.css

Para cambiar los márgenes, el tamaño de la imagen y las líneas de visualización de texto, agregamos el siguiente código a 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

Como no se pudo eliminar la definición en el lado de blank.css, eliminamos una línea de post-entry.css en la siguiente ubicación.

1
2
3
4
5
6


.entry-cover img {
 border-radius: var(--radius);
 pointer-events: none;
 /* width: 100%; */ ← Eliminar esta línea
 height: auto;
}

list.html

Para cambiar la disposición de las imágenes, modificamos las siguientes partes de 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) }} --><!-- Mover abajo -->
 <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- Mover abajo -->
 <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;"><!-- Añadido -->
 <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- Añadido -->
 {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- Movido desde arriba -->
 {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- Movido desde arriba -->
 </div><!-- Añadido -->
 <div style="width:100%;"><!-- Añadido -->
 {{- 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><!-- Añadido -->
 </div><!-- Añadido -->
</article>

Parece que hay bastantes peticiones similares.

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

Sería de agradecer que lo soportaran en la versión original.

Cómo configurar Twitter Card en PaperMod

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

Introducción

El tema PaperMod soporta Twitter Cards. Sin embargo, la configuración de Twitter Card debe escribirse en config.toml o en la información de cabecera de los archivos *.md de cada artículo. Si se configura tanto en cada artículo como en config.toml, la información de cabecera de cada artículo tendrá prioridad.

Método de configuración

config.toml

En config.toml, agrega un elemento llamado images bajo [params]. En images, escribe la ruta de la imagen que se mostrará en la Twitter Card. Si colocas la imagen en la carpeta static, solo necesitas especificar el nombre del archivo.

1
2


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

Estructura de carpetas

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (Escribir aquí)
├─content
│ └─posts
│ └─carpeta del artículo
│ │ index.md (Escribir aquí)
│ └─images
│ cover.png (Colocar aquí)
└─static
 twitter_card.jpg (Colocar aquí)

Información de cabecera de cada artículo

En la información de cabecera de cada artículo, agrega un elemento llamado image bajo cover. Si configuras relative como true, puedes especificarlo con una ruta relativa desde el archivo *.md del artículo.

1
2
3


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

Si no deseas que se muestre en la parte superior del artículo

Si no deseas mostrar la imagen de portada en la parte superior del artículo, agrega un elemento llamado hidden bajo cover y configúralo como true.

1
2
3
4


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

Sobre el tamaño de la imagen

En la especificación actual de PaperMod, parece que el tamaño de Twitter Card solo soporta summary_large_image. El tamaño adecuado (resolución) para summary_large_image tiene varias opiniones, pero parece que alrededor de 800 x 418 (proporción de imagen 1.91:1) es una buena opción.

Sitio de referencia 1 Sitio de referencia 2

Si es posible, se recomienda redimensionar la imagen antes de publicarla.

Método de confirmación de la configuración

Para confirmar la configuración de Twitter Card, utiliza el Twitter Card Validator. Sin embargo, en mi entorno la vista previa no se mostraba correctamente, por lo que si no se muestra la vista previa, se recomienda verificarlo una vez antes de publicar usando una cuenta privada, etc.

Cambio de paleta de colores de PaperMod

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

He cambiado la paleta de colores del tema PaperMod. Me referí al siguiente enlace para saber cómo hacerlo:

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

La ruta del CSS es la siguiente:

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 {
}

Por ahora, no hay cambios en el modo oscuro.

【HUGO】Vista previa en entorno local

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

Instalación de HUGO

Descargar

Descarga de HUGO

Descarga el módulo de Windows que se adapte a tu entorno desde el sitio anterior y extráelo. En mi caso, descargué “hugo_0.102.3_Windows-64bit.zip”.

Extraer

Extrae el archivo zip descargado y copia el archivo hugo.exe que contiene en una carpeta, por ejemplo, C:\bin.

Registrar en variables de entorno

Regístralo en las variables de entorno para poder ejecutar hugo.exe desde cualquier lugar. La operación es para Windows 11, pero creo que puedes registrarlo siguiendo estos pasos.

Presiona las teclas Win+Pause para abrir la información de la versión
Haz clic en Configuración avanzada del sistema
Haz clic en Variables de entorno
Selecciona Path y haz clic en Editar
Haz clic en Nuevo, ingresa “C:\bin” en una nueva línea y cierra el cuadro de diálogo con Aceptar

Previsualizar el blog

Ve a la carpeta del blog de HUGO en el símbolo del sistema y ejecuta el siguiente comando.

hugo server -D

El resultado de la ejecución es el siguiente. (La opción -D muestra los artículos en borrador).

 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

La dirección se muestra al ejecutar el comando (en el ejemplo anterior http://localhost:1313/), cópiala en el navegador. La vista previa se actualiza automáticamente cada vez que se guarda el archivo. Para finalizar la vista previa, presiona Ctrl+C en el símbolo del sistema.