Espacio web en Sindominio

Como amiga de sindominio puedes tener una web estática. Para abrir ese espacio tendrás que solicitarlo a la asamblea de sd. Lo más sencillo es que lo comentes en nuestra sala de matrix ‘La colmena’.

Una vez que hayamos habilitado tu espacio, puedes optar por volcar una web estática ya creada o generar y gestionar una a través de nuestro automatismmo git/hugo. Una tercera opción sería gestionar una web estática ya generada con nuestro.

Web estática simple

Puedes usar ssh, sftp, o filezilla para conectarte a él. Usa tus credenciales y la siguiente dirección de conexión.

sftp://user@sh.sindominio.net:2222

Ahí verás (en la parte derecha si usas filezilla) tu carpeta de usuario, y dentro de ella una carpeta public_html/ donde puedes subir tu página (html, css, js, imágenes…). La podrás visualizar en:

https://sindominio.net/user/

Si sólo quieres tener una portada fija con algunas subpáginas puedes construirlas a pelo, editar tus ficheros html y subirlos a la carpeta mencionada. Pero si tu idea es tener un blog, o en general un sitio con más posibilidades, puedes usar un generador de páginas estáticas.

Gestión de web a través de Gitea (con hugo)

Sindominio usa Hugo como generador de web estáticas. Se ejecuta desde la línea de comandos, creando primero un sitio hugo, y generando después la web resultante.

Un sitio hugo es un conjunto de carpetas y ficheros que contienen el estilo, el contenido, y la configuración de tu web.

Pero no necesitas saber de hugo ni ejecutar comandos en la terminal, esa pantalla negra de los techies raros. Basta con que edites tus contenidos en nuestro servicio web de repositorios git, Gitea, y serán publicados.

Así, para gestionar tu web desde gitea, debes tener un repositorio git cuyo contenido sea un sitio hugo. Para crearlo accede a nuestra página de gestión de contraseñas:
https://lowry.sindominio.net

Logueate y accede a la opción Gestionar repositorios web. Elige el nombre del repositorio a crear, y confirma su creación.Tendrás en él una copia funcional de un sitio hugo, donde entre otras cosas se encuentra el contenido de tu web, en ficheros con sintáxis markdown (extensión .md).

Ahora puedes acceder con tus credenciales al gestor de repositorios y ver el repo:
https://git.sindominio.net/

Para acceder directamente al repo:
https://git.sindominio.net/user/reponame.git

El repositorio contiene una carpeta llamada content, donde se sitúa tu contenido. Edita por ejemplo el fichero hola_mundo.md que está allí. Al guardar por primera vez se machacará el contenido existente previamente en tu carpeta de usuario public_html/, y tu web se hará visible en: <https://sindominio.net/user/

Nota: si has activado la opción de multiweb en Lowry la dirección pública será: https://sindominio.net/user/nombre_del_repo/

Cada creación o modificación de un fichero en el repo generará una actualización del contenido en public_html, y por tanto de la web. Y recuerda que si activas de nuevo un repo en lowry.sindominio.net, se sobrescribirá la web (public_html), volviendo a su estado original.

Multiweb

A la hora de crear el repo desde Lowry, puedes elegir multiweb. Esta opción te permitirá tener bajo tu public_html subcarpetas que alojen diferentes webs estáticas, que se servirán bajo las urls:
https://sindominio.net/user/mis_fotos https://sindominio.net/user/mis_pensamientos https://sindominio.net/user/campaña_por_

Static con git y hugo

También puedes usar el repo web sin sitio hugo, machacando el contenido del repo creado y volcando sobre él una web estática ya generada (html, css, imágenes…). Si el repositorio contiene un fichero index.html en la raíz, no se intentará ejecutar hugo contra el repositorio (construir la web), sino que se desplegará la web estática (html, css, imágenes) tal cual en tu carpeta public_html/. Así podrás llevar un control de versiones de los cambios que vas haciendo en tu web.

Configuración de hugo

En la raíz de la estructura de carpetas de tu repo está el fichero de configuración de tu web hugo, config.toml. Repasemos su contenido.

Algunos de los parámetros que allí ves cuando acabas de desplegar tu repo son genéricos para cualquier sitio hugo, pero la mayoría son parámetros para personalizar el tema que se esté usando, y existirán o no si el tema ha habilitado su funcionalidad. En la carpeta del tema suele existir una carpeta llamada exampleSite con los parámetros activables en nuestro fichero de configuración.

Para empezar vamos a cambiar algunos parámetros generales.

baseURL = ""
languageCode = "es-ES"
defaultContentLanguage = "es"
title = "Mi Web"

No es necesario tocar el primero, baseURL. Pero puedes cambiar el idioma y sobre todo el título.

En los parámetros del tema vemos algunos interesantes:

description = "Textos de ayer y hoy"  
customDateFormat = "Jan 2, 2006"  
showPostSummary = false  

description: será el lema, o subtítilo del sitio.
customDateFormat: El formato de fecha. Otro ejemplo es “01 jun 2006”.
showPostSummary: Mostrar el contenido completo o una entradilla en la vista blog (la lista de artículos).

El tema por defecto (en sindominio) incluye otras variables para cambiar colores, anchos, y otros aspectos del tema. Cada tema tendrá sus opciones.

En el fichero también es habitual definir los menús que aparecen en la web. Para nuestro tema los hemos definido por defecto así:

[menu]
    [[menu.nav]]
        name = "Posts"
        url = "/"
        weight = 1
    [[menu.nav]]
        name = "Tags"
        url = "/tags/"
        weight = 2
    [[menu.nav]]
        name = "About"
        url = "/about/"
        weight = 3
    ...

Cambia y añade nuevas entradas al menú editando este bloque.

Con cada edición que hagamos de este fichero, como de cualquier otro del repositorio, se regenerará la web con la nueva configuración, contenido, o estilo.

Mi primer artículo con hugo.

En hugo por defecto el contenido se guarda en la carpeta content/. Y dentro de esa carpeta encontrarás una carpeta post/, en la cual vamos a incluir como fichero nuestro primer artículo. Los artículos o páginas son ficheros de texto plano con extensión .md. Dentro de ellos escribiremos nuestros textos en lenguaje natural, e incluiremos las marcas de formato que ofrece markdown para dar estilo.

En esa carpeta, seleccionamos New File, arriba a la izquierda. Se abre la página con el espacio para escribir nuestro artículo, y en la parte superior escribimos el nombre de nuestro artículo con la extensión markdown: mi_primer_post.md.

Los ficheros deben tener una pequeña cabecera (frontmatter) para indicar al menos el título, title:. Podemos incluir otros campos, como date: fecha, draft: true/false (borrador), y otros campos que podemos crear si estamos desarrollando una web y los vamos a utilizar luego en las plantillas.

Pero no vayamos tan lejos de momento. Un ejemplo habitual será algo así:

---
title: "Mi primer post"
date: May 12, 2012
---

En este primer artículo voy a escribir en **negrita**, como ejemplo de sintáxis de estilo markdown.
...
..
.

Guardamos el fichero y vamos a nuestra web a visualizar los cambios. Quizás haya que esperar unos segundos.

Cambiando el tema por defecto (avanzado).

Cuando editas el repo y despliegas la web por primera vez usas el tema mainroad. Pero si consideras que esto es para usuarios avanzados puedes cambiar el tema.

El tema del sitio web se define en el fichero config.toml que hemos visto antes:

theme = "mainroad"

Los archivos del tema los encuentras en la carpeta themes/nombre_del_tema. Así, para cambiar de tema tendrás que descargas los ficheros en esa carpeta y editar el fichero config.toml.

Vamos a ello. Localizamos el tema en internet. Tienes muchos con licencias abiertas en: https://themes.gohugo.io/

Antes de elegir un tema comprueba que sea compatible con la versión de hugo que usamos en sindominio. Es probable que nuestra máquina esté actualizadas y nuestra versión de hugo será por tanto la que ofrezca el repositorio oficial de debian en su rama estable: https://packages.debian.org/buster/hugo

Pasos:

  • Descargamos el tema elegido en nuestro sistema. Y lo desempaquetamos.
  • Nos clonamos -también en local- nuestro repo hugo, para lo cual vamos a usar nuestras credenciales en sindominio.
  • Copiamos la carpeta del tema en la carpeta themes/ del repositorio.
  • Cambiamos el tema en el fichero config.toml.
  • Hacemos push a nuestro repo, de nuevo con nuestras credenciales.

En la terminal

Para cambiar el tema desde la terminal podemos seguir los siguientes pasos. Por ejemplo para el tema Binario:

Primero clonaremos el repositorio a nuestra máquina local del siguiente modo y accederemos a la carpeta:

git clone https://github.com/Vimux/Binario.git
git clone https://git.sindominio.net/user/repo.git
cp -rp Binario/ repo/themes/.

Accedemos con nuestro editor de texto al archivo config.toml, modificamos el parámetro theme y guardamos. Para comprobar los diferentes cambios en nuestro fichero tenemos los siguientes comandos:

git diff [te muestra las modificaciones que has hecho en el archivo]
git status [te muestra en rojo las modificaciones que NO están añadidas y en verde las modificaciones que SÍ están añadidas]

Una vez guardado el archivo y comprobadas las modificaciones añadiremos el fichero modificado con add y le haremos un commit.

git add --all
git commit -m "descripción del cambio"

Ahora con log podemos ver el historial del repo para ver que nuestro commit se haya guardado correctamente. Entonces si está todo bien lo subiremos al repositorio remoto.

git log
git push 

Con Git-Cola

Pero si esto te suena a mandarín vamos a ver cómo hacerlo con un gestor gráfico de repositorios git. Esta solución es útil si (no quieres a aprender a usar la terminal y) vas a subir varias imágenes, o artículos (ficheros.md), ya que el desde https://git.sindominio.net no puedes subir más de 4 ó 5 ficheros a la vez.

Usaremos git-cola. Si no usas linux existen otras posibilidades, busca en la web.

apt-install git-cola

O lo instalas a tu manera.

En la ventana de apertura seleccionamos clonar, en la parte inferior. Introducimos la dirección de nuestro repo hugo, https://git.sindominio.net/user/repo.git, elegimos el directorio de descarga, y le damos la password de nuestra usuaria en sd. Se abre la ventana de git-cola, con sus secciones. Podemos ver los ficheros del repo en Ver > Navegador de archivos. Allí podemos explorar la carpeta themes/, y vemos los temas que hasta ahora tenemos.

Dejamos de lado un momento git-cola, y con nuestro explorador de carpetas copiamos la carpeta descargada y descomprimida del tema en la carpeta themes/ del repo descargado con git-cola. Y añadimos o cambiamos los ficheros que nos apetezca, y cambiamos el theme dentro del fichero config.toml

Al volver ahora a git-cola, vemos en la sección izquierda los cambios que hemos realizado, que incluyen ficheros nuevos, borrados y modificados (al seleccionarlo veríamos las diferencias con el fichero original en la parte inferior).

Confirmamos cambios y hacemos commit y push de los mismos. Pasos:

  • Hacemos stage de los ficheros cambiados; seleccionamos todo y clic derecho ‘stage selected’)
  • En la sección central escribimos un texto para el cambio y clic a commit. (Vemos que en la parte derecha se añade una flecha con el número de cambios realizados en local)
  • Push (abajo derecha) (Ctrl + P)
  • Elegimos origin - master - origin/master
  • Confirmamos y credenciales.

Ya está, podemos cerrar el programa, tenemos nuestra carpeta del tema subida al repo. O los 5 artículos que hemos escrito este mes sin internet, o las 20 imágenes de mi galería.

Voilà!


Uso avanzado de Hugo

Dejamos aquí algunos manuales de hugo, git y markdown para vuestro disfrute. En la web los hay a cientos.


---

Si necesitas ayuda puedes encontrarnos en: