Plantilla de sitio Hugo para desplegar web estáticas en el espacio web de usuarias que lo activen a través de Lowry.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
pebles bc67cb2f43 Update 'README.md' 2 months ago
archetypes Template limpio de hugo 3 months ago
content Original. 2 months ago
data Template limpio de hugo 3 months ago
layouts Template limpio de hugo 3 months ago
static Template limpio de hugo 3 months ago
themes Original. 2 months ago
README.md Update 'README.md' 2 months ago
config.toml Original. 2 months ago

README.md

MI WEB

Aquí se aloja el sitio Hugo que genera el sitio estático que se publica en tu espacio web.

Un sitio de hugo es un árbol de directorios con ficheros de contenido (con sintáxis markdown, no hay base de datos), imágenes, css, js, plantillas (escritas en go), configuración…

Así, este repositorio git https://git.sindominio.net/sindominio/nombre_del_repo/ es el sitio hugo para tu usuario en:

https://sindominio.net/mi_usuario/



Gestión de la web desde el panel web de gitea

En nuestro sitio hugo (repo) tenemos una carpeta content/ donde crearemos nuestros ficheros .md, que contienen nuestros textos para el contenido.

Encabezando los ficheros tenemos el ‘frontmatter’, un bloque donde podemos definir algunos metadatos del contenido. Si bien no es necesario que exista ningún campo, conviene definir como mínimo el título. Si nuestro sitio web va a mostrar fechas deberemos definir también la fecha.

Dentro de content/ podemos organizar el contenido en carpetas con el nombre que queramos. Formarán parte de la url en la que se accede a los contenidos de la carpeta. Por ejemplo un fichero content/hola_marte.md se accederá en https://sindominio.net/usuario/hola_marte.

Estas carpetas serán nuestras secciones. Si en la raíz de cada sección creamos un fichero index.md, dicha sección tendrá su página propia, desde donde podremos por ejemplo enlazar el resto de páginas.

Para crear una página principal de llegada a tu web puedes crear /layout/index.html y content/_index.md, plantilla y contenido respectivamente.

Basta con que modifiques, añadas o borres un fichero y le des a guargar en el panel web de gitea para que se reconstruya y publique automágicamente el blog.


Trabajando en la terminal

Si usas la terminal puedes trabajar con tu web desde allí. Dado que nuestro sitio web está en un repositorio git lo primero que haremos para empezar a trabajar será clonarlo a nuestra máquina local.

git clone https://git.sindominio.net/sindominio/portada.git

Lo primero que hay que hacer al abrir un sitio hugo es instalar un tema. En este caso ya tienes un tema incorporado y definido en el fichero config.toml (en la raíz del sitio).

En nuestro caso en el fichero tenemos:

theme = "minimal-bootstrap-hugo-theme"

y el tema está descargado en themes/minimal-bootstrap-hugo-theme.

Cuando tocamos algún fichero podemos regenerar el html a partir de nuestro árbol de directorios:

  hugo -s ruta_al_árbol -d ~/static_ouput_dir -b baseURL'

-s source, nuestro sitio hugo.
-d destination, salida html más assets (img, css, js, …); lo que se publica. -b baseURL, el dominio (y en su saco carpeta) que se usará para escribir las direcciones de los assets.

Por ejemplo:

hugo -s ~/.hugo/mi_sitio -d ~/public_html -b https://sinddominio.net/mi_usuario/

Por comodidad podemos arrancar directamente el servidor web que trae hugo en local.

hugo -D server

Esto genera el resultado estático, lo sirve en http://localhost:1313 y observa modificaciones en el sitio. Así, al guardar/modificar cualquier fichero se regenera automáticamente el estático y se actualiza nuestra página en el navegador sin que sea necesario refrescar.

Para crear un nuevo contenido basta con ejecutar:

hugo new post/hola_mundo.md

Hugo creará el fichero y escribirá una cabecera básica con el título, la fecha, y el campo ‘draft’ como true; creará un borrador. Tendremos que cambiar el campo a false para que se incorpore al resultado estático.

Avanzado: Los campos que añade hugo al nuevo contenido se pueden modificar definiendo su estructura en la carpeta ‘archetypes’

Tocamos el tema, añadimos nuevas páginas, las enlazamos en otras, creamos una nueva sección de contenido, añadimos nuestro media …

Y cuando creamos que hemos avanzado lo suficiente como para actualizar el sitio usamos comandos git para subir el contenido.

git add --all
git commit -S -m 'Comentario a la actualización'
git push

Atención: -S firma los commit, las subidas que hacemos al repo. Para hacerlo tenemos que tener una clave gpg en nuestra máquina y haber subido nuestra parte pública a nuestro perfil en gitea. Si no tienes, es tiempo de tenerla. Puedes quitar ‘-S’ en cualquier caso.


MODIFICAR EL TEMA - CSS y PLANTILLAS

La carpeta static/ alberga las imágenes, estilos y demás ficheros que se servirán en nuestra web. Podemos crear carpetas para ordenar estos ficheros, como css/ o img/. El html resultante, por medio de las plantillas, podrá incluir estos recursos como https://sindominio/mi_usuario/css/style.css y http://sindominio.net/mi_usuario/img/myimage.png.

En la carpeta css podemos sobreescribir el css del tema.

Las plantillas del tema las sobreescribimos en la carpeta layouts/. Allí replicamos la estructura de carpetas necesaria para copiar la plantilla a modificar y la modificamos.

Por ejemplo, tenemos en layouts/partial/head.html sobreescrito el mismo fichero del tema con el siguiente añadido:

{{ range .Site.Params.custom_css -}}
    <link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}
  • range en go es equivalente a ‘Para cada elemento’, un bucle for en otros lenguajes.
  • .Stite.Params.customs_css es un campo que hemos definido en nuestro config.toml con custom_css = ["css/style.css"].
  • El punto ., en href, hace mención al elemento de la lista que range itera, en nuestro caso con sólo un elemento: css/style.css.

Por último | absURL es el valor en caso de que no haya elementos en la variable. Sería nuestra url a pelo, lo que no tiene mucha utilidad en este caso seguramente.



Más documentación en la trastienda