hugo

PROPÓSITO

  • notas sobre Hugo
  • un generador de sitios estáticos escrito en Go que promete ser rápido, y moderno.
  • información en wikipedia
  • los proyectos hechos con Hugo en el directorio C:\proyecto\hugo
  • usa un motor de plantillas propio de Go llamado Go HTML

INSTALACIÓN

WINDOWS

  • la instalación en Windows es realmente simple
  • se descarga la última versión del repositorio de Hugo
  • se descomprime y a funcionar
  • es necesario ponerlo en la variable PATH
Path=C:\windows\system32;C:\windows;C:\windows\System32\Wbem;C:\windows\System32\WindowsPowerShell\v1.0\;C:\windows\System32\OpenSSH\;C:\Program Files\Git\cmd;C:\portables\Hugo;C:\Users\javier\AppData\Local\Microsoft\WindowsApps;;C:\Users\javier\AppData\Local\Programs\Microsoft VS Code\bin
  • es necesario reiniciar

VERSIONES

  • instalado Hugo en C:\portables\Hugo
    • las nuevas versiones la descomprimo en su carpeta y luego pongo el ejecutable en la ruta que tengo establecida en las variables de entorno del sistema PATH
:\proyectos\hugo\javier-programacion>hugo version
Hugo Static Site Generator v0.31.1 windows/amd64 BuildDate: 2017-12-10T17:49:35+01:00
C:\proyectos\hugo\javier-programacion>cd c:\
c:\>dir hu*
08/02/2018  20:50    <DIR>          Hugo
06/12/2017  17:33    <DIR>          Hugo_0-22
27/02/2018  06:50    <DIR>          hugo_036_1
14/08/2016  08:02    <DIR>          Hugo_anterior
               0 archivos              0 bytes
               4 dirs  352.006.930.432 bytes libres
c:\>rename Hugo Hugo_0_31_1
c:\>rename Hugo_036_1 Hugo
Hugo Static Site Generator v0.31.1 windows/amd64 BuildDate: 2017-12-10T17:49:35+01:00
C:\Hugo>D:\portables\Hugo\bin\hugo version
Hugo Static Site Generator v0.22.1 windows/amd64 BuildDate: 2017-06-13T21:11:52+02:00

PUERTOS

  • cuando lanzas más de una instancia de hugo server detecta que el puerto 1313 esta en uso y genera el sitio en otro puerto.

C:\proyectos\hugo\docdock>hugo server --watch
ERROR 2018/02/27 17:45:58 port 1313 already in use, attempting to use an available port
?[K25lBuilding sites … ?[?25h
                   | EN
+------------------+-----+
  Pages            |  36
  Paginator pages  |   0
  Non-page files   |   0
  Static files     | 209
  Processed images |   0
  Aliases          |  19
  Sitemaps         |   1
  Cleaned          |   0

Total in 685 ms
Watching for changes in C:\proyectos\hugo\docdock\{content,data,layouts,static,themes}
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:56240/ (bind address 127.0.0.1)
Press Ctrl+C to stop

VERSIÓN PORTABLE

  • probando desde el portátil SONY VAIO que no tiene ninguna instalación de Hugo ni reconoce el comando hugo y no tiene ninguna referencia a Hugo en la variable PATH

  • uso el portable del pen en E:\portables\hugo

  • desde el directorio c:\proyectos\hugo\pruebaPortable

  • usando una plantilla nueva y simple hugo-initio

C:\proyectos\hugo\pruebaPortable>E:\portables\hugo\bin\hugo new site inicioPortable
cd themes
git clone --depth=1 https://github.com/miguelsimoni/hugo-initio.git
rd /s hugo-initio/.git
C:\proyectos\hugo\pruebaPortable\inicioPortable>E:\portables\hugo\bin\hugo server --theme=hugo-initio --buildDrafts
  • borro la información del repositorio git del tema

  • es necesario copiar los directorios content y data , que es donde están los contenidos, de \themes\hugo-initio\exampleSite

  • también es necesario copiar el config.toml del mismo directorio al raíz del proyecto

  • el comando hugo server sirve el sitio desde memoria tal y como indica la salida del comando

Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
  • para generar el sitio se usa simplemente el comando E:\portables\hugo\bin\hugo o E:\portables\hugo\bin\hugo -t hugo-initio para indicar el tema que queremos usar
  • en el archivo de configuración esta puesto que se genera en el directorio docs
  • si no por defecto genera el sitio en public

PRIMER HUGO

mkdir primerhugo
cd primerhugo
hugo new site .

hugo new post/good-to-great.md
cd themes
git clone https://github.com/dim0627/hugo_theme_robust.git
cd ..
hugo server --theme=hugo_theme_robust --buildDrafts

C:\Hugo\Sites\primerhugo>hugo server --theme=hugo_theme_robust --buildDrafts
Started building sites ...
Built site for language en:
1 of 1 draft rendered
0 future content
0 expired content
1 regular pages created
8 other pages created
0 non-page files copied
2 paginator pages created
0 categories created
0 tags created
total in 55 ms
Watching for changes in C:\Hugo\Sites\primerhugo\{data,content,layouts,static,themes}
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
  • con estos comandos se crea el directorio, luego en ese directorio se crea un sitio sin nombre, se añade contenido y se clona el tema.

  • luego se lanza el servidor indicando que tema se usa y que se generen los borradores

  • en http://localhost:1313/ ves el sitio generado

  • cambio config.toml

baseURL = "http://example.org/"
languageCode = "en-us"
theme = "hugo_theme_robust"
title = "My New Hugo Site"

HugoTemaRobusto

GUÍA SENCILLA

COMENTAR CÓDIGO

  • queda bien explicado en la documentación de hugo
  • este método es correcto
  {{/*  <div class="logo">
    <img class="img-fluid" src="{{ site.Params.logo_light | relURL }}" alt="{{ site.Title }}">
  </div>  */}}
  • lo que me da visual studio code al ser html no es correcto pues aunque no se renderiza Go template evalua el código por lo que puede dar un error en código que creen que esta comentado
  <!-- <div class="logo">
    <img class="img-fluid" src="{{ site.Params.logo_light | relURL }}" alt="{{ site.Title }}">
  </div>  

IMÁGENES

  • para conseguir determinar el tamaño que se muestra
Alina

SITIO WEB CON ACADEMIC

C:\nube\MEGA\programacion\HtmlCssEstatico\hugo>hugo new site olddognewtricks
C:\nube\MEGA\programacion\HtmlCssEstatico\hugo>cd olddognewtricks
C:\nube\MEGA\programacion\HtmlCssEstatico\hugo\olddognewtricks>git clone https://github.com/gcushen/hugo-academic.git themes/academic
C:\nube\MEGA\programacion\HtmlCssEstatico\hugo\olddognewtricks>cp -av themes/academic/exampleSite/* .
C:\nube\MEGA\programacion\HtmlCssEstatico\hugo\olddognewtricks>hugo server --watch
Started building sites 
Built site for language en:
0 draft content
0 future content
0 expired content
18 regular pages created
32 other pages created
0 non-page files copied
8 paginator pages created
0 categories created
2 publication_types created
5 tags created
total in 317 ms
Watching for changes in C:\nube\MEGA\programacion\HtmlCssEstatico\hugo\olddognewtricks\{data,content,layouts,static,themes}
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
  • con estos comandos se genera el sitio, se clona el tema, se copia el contenido del sitio de ejemplo y se llama el servidor
  • luego se ve el proyecto en localhost

la página en marcha

TOC

  • solucionado el problema del TOC con versión superior a 0.45 poniendo esto en config.toml
[markup]
  [markup.tableOfContents]
    endLevel = 6
    startLevel = 1

DESPLIEGUE EN FIREBASE

  • ahora monto el proyecto y configuro firebase como opción de hosting
C:\nube\MEGA\programacion\HtmlCssEstatico\hugo\olddognewtricks>firebase login
Already logged in as javieriranzo3@gmail.com

C:\nube\MEGA\programacion\HtmlCssEstatico\hugo\olddognewtricks>firebase init


┌──────────────────────────────────────────────┐
│ Update available: 3.9.1 (current: 3.2.2)     │
│ Run npm install -g firebase-tools to update. │
└──────────────────────────────────────────────┘


     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  C:\nube\MEGA\programacion\HtmlCssEstatico\hugo\olddognewtricks

Before we get started, keep in mind:

  * You are currently outside your home directory

? Are you ready to proceed? Yes
? What Firebase CLI features do you want to setup for this folder? Database: Deploy Firebase Realtime Database Rules, Hosting: Configure and deploy F
irebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? What Firebase project do you want to associate as default? holajavier (holajavier-6d145)

=== Database Setup

Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.

? What file should be used for Database Rules? database.rules.json
+  Database Rules for holajavier-6d145 have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File public/index.html already exists. Overwrite? No
i  Skipping write of public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

+  Firebase initialization complete!
  • y a desplegar en el dominio https:\\holajavier.xyz
C:\nube\MEGA\programacion\HtmlCssEstatico\hugo\olddognewtricks>firebase deploy

=== Deploying to 'holajavier-6d145'...

i  deploying database, hosting
+  database: rules ready to deploy.
i  hosting: preparing public directory for upload...
Uploading: [                                        ] 0%+  hosting: public folder uploaded successfully
+  hosting: 57 files uploaded successfully
i  starting release process (may take several minutes)...

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/holajavier-6d145/overview
Hosting URL: https://holajavier-6d145.firebaseapp.com
  • se ve bien 😄

STATICMAN

  • de paso miro como se puede usar staticman
    • me gusta sobre todo porque dice que I'm free and open source ... and always will be.

DESPLIEGUE EN AEROBATIC

  • otra opción es usar la opción de crearlo desde aerobatic
  • C:\Hugo\Sites\lively-mask es el que mejor funciona
cd C:\Hugo>cd lively-mask
hugo server
C:\Hugo\lively-mask>hugo server
Started building sites ...
Built site for language en:
0 draft content
0 future content
0 expired content
39 regular pages created
8 other pages created
5 non-page files copied
5 paginator pages created
2 tags created
0 categories created
total in 1490 ms
Watching for changes in C:\Hugo\lively-mask\{content,layouts,static,themes}
Serving pages from memory
Web Server is available at //localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
  • con esto ya esta lista la aplicación en http://localhost:1313/

  • para desplegar en aerobatic

  • el nombre que genera aerobatic se puede cambiar facilmente

aero login
aero deploy
  • da un error pues hace un build que quito
deploy:
  directory: public
  build:
    - >-
      git clone https://github.com/vjeantet/hugo-theme-docdock themes/docdock ||
      true      
    - 'hugo --baseURL https://__baseurl__/ --destination public'
plugins:
  - name: custom-errors
    options:
      errors:
        '404': 404.html
  - name: webpage
id: deb5f4bc-0e3c-4115-8d8e-5acf74ba9eb4
  • se despliega en esta dirección https://doc-hugo.aerobatic.io/

  • es necesario lanzar hugo para construir el sitio en el directorio public

hugo
  • 2017-09-10 22:33:23
    • borro este despliegue en aerobatic para poder usar el limite de proyectos free con otros proyectos

COMANDOS

  • hugo new
    • crea un nuevo sitio, es importante la plantilla en el directorio templates
  • hugo server
    • sirve el sitio desde memoria
  • hugo server -D
    • start the Hugo server with drafts enabled
  • hugo server --theme=hugo_theme_robust
    • es necesario indicar que plantilla se debe usar
  • hugo --verbose
    • genera el sitio en el directorio indicado en config.toml suele ser public pero puede cambiar.
    • la opción verbose da información adicional.

CONCLUSIÓN

  • si que parece más rápido pero da una poca pereza empezar a aprender todo de nuevo y a migrar todo el contenido.
    • aunque parece que no es necesario cambiar el front matter pues soporta yaml
  • te das cuenta de lo que has aprendido del uso de jekyll 😄

MIGRANDO ESTE SITIO (NOTAS-PROGRAMACION) A HUGO

C:\nube\MEGA\programacion\HtmlCssEstatico\hugo\migracionJekyll>mkdir notas-hugo
C:\nube\MEGA\programacion\HtmlCssEstatico\hugo\migracionJekyll>hugo import jekyll C:\nube\MEGA\programacion\HtmlCssEstatico\jekyll\notas-programacion
notas-hugo
Importing...
Congratulations! 464 post(s) imported!
Now, start Hugo by yourself:
$ git clone https://github.com/spf13/herring-cove.git notas-hugo/themes/herring-cove
$ cd notas-hugo
$ hugo server --theme=herring-cove
  • el resultado es bastante bueno 👍

  • usa el tema herring-cove

  • solo pasa los posts en una primera pasada

  • no resuelve TOC

  • cuando se genera no veo html sino xml

  • creo un directorio notas-programacion-hugo para ir pasando solo lo que controlo

  • 2017-12-08 09:24:26 continuación

  • veo html al generar el sitio

  • cambio baseURL: en el archivo de configuración con el valor . y ya resuelve los css y los js

MINIFICANDO

COMENTARIOS

  • se puede añadir comentarios con disqus DE FORMA BASTANTE FÁCIL

GALERÍA DE IMÁGENES CON HUGO

INTENTO DE DESPLIEGUE CON WERCKER DE UN SITIO SIMPLE CON HUGO

C:\nube\MEGA\programacion\HtmlCssEstatico\hugo>hugo new site sitioSimple
Congratulations! Your new Hugo site is created in C:\nube\MEGA\programacion\HtmlCssEstatico\hugo\sitioSimple.

Just a few more steps and youre ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

C:\nube\MEGA\programacion\HtmlCssEstatico\hugo>cd sitioSimple

C:\nube\MEGA\programacion\HtmlCssEstatico\hugo\sitioSimple>tree
Listado de rutas de carpetas para el volumen Acer
El número de serie del volumen es 00000061 22C7:ADBD
C:.
├───archetypes
├───content
├───data
├───layouts
├───static
└───themes

C:\nube\MEGA\programacion\HtmlCssEstatico\hugo\sitioSimple>hugo new post/primer-post.md
C:\nube\MEGA\programacion\HtmlCssEstatico\hugo\sitioSimple\content\post\primer-post.md created

C:\nube\MEGA\programacion\HtmlCssEstatico\hugo\sitioSimple>tree
Listado de rutas de carpetas para el volumen Acer
El número de serie del volumen es 0000003C 22C7:ADBD
C:.
├───archetypes
├───content
│   └───post
├───data
├───layouts
├───static
└───themes
C:\nube\MEGA\programacion\HtmlCssEstatico\hugo\sitioSimple>git clone https://github.com/spf13/herring-cove.git themes/herring-cove
Cloning into 'themes/herring-cove'...
remote: Counting objects: 167, done.
remote: Total 167 (delta 0), reused 0 (delta 0), pack-reused 167
Receiving objects: 100% (167/167), 6.56 MiB | 1.26 MiB/s, done.
Resolving deltas: 100% (67/67), done.
  • el archivo de configuración config.toml
baseURL = "http://example.org/"
languageCode = "es-es"
title = "Mi nuevo Hugo Sitio simple"
  • lanzo el servidor con el tema y la opción para que se vean los Drafts
hugo server --theme=herring-cove --buildDrafts
C:\nube\MEGA\programacion\HtmlCssEstatico\hugo\sitioSimple>git init
Initialized empty Git repository in C:/nube/MEGA/programacion/HtmlCssEstatico/hugo/sitioSimple/.git/

C:\nube\MEGA\programacion\HtmlCssEstatico\hugo\sitioSimple>echo "/public" >> .gitignore
C:\nube\MEGA\programacion\HtmlCssEstatico\hugo\sitioSimple>echo "User-agent: *\nDisallow:" > static/robots.txt
C:\nube\MEGA\programacion\HtmlCssEstatico\hugo\sitioSimple>git commit -a -m "Initial commit"
  • creo un repositorio nuevo https://github.com/pelos6/hugo-sitio-simple
git remote add origin https://github.com/pelos6/hugo-sitio-simple.git
git push -u origin master

DESPLIEGUE CON WERCKER

  • siguiendo la propia documentación de Hugo
    • que tiene un hilo interesante en el blog de Hugo con aportaciones sobre este despliegue y otras posibilidades
  • la cuenta en wercker que ahora parece ser de oracle
  • me doy de alta con la cuenta de github
  • el tutorial no es muy exacto pues ha cambiado el aspecto de la página de wercker
  • pongo en el directorio raíz el archivo wercker.yml con este contenido
box: debian
build:
  steps:
    - arjen/hugo-build:
        version: "0.22"
        theme: herring-cove
        flags: --buildDrafts=true
  • atención pues el ejemplo ponía la versión de hugo 0.17 lo que provocaba este error y con 0.22 hace el build correcto
Running the Hugo command
ERROR: 2017/12/08 17:50:55 hugo.go:421: Current theme does not support Hugo version 0.17. Minimum version required is 0.2
Started building sites ...
  • una vez que el build esta configurado hace falta configurar el despliegue
  • para eso añado más configuración al archivo wercker.yml que queda así
box: debian
build:
  steps:
    - arjen/hugo-build:
        version: "0.22"
        theme: herring-cove
        flags: --buildDrafts=true
deploy:
  steps:
    - install-packages:
        packages: git ssh-client
    - lukevivier/gh-pages@0.2.1:
        token: $GIT_TOKEN
        domain: hugo-wercker.ig.nore.me
        basedir: public
  • pero la parte del despliegue es distinta a como se ve en el tutorial y me pierdo
  • sigo el día siguiente con las instrucciones de gitHub
  • este es el token generado
e1918ac09367352c13fd2baa117f7b28ac185837

DESPLIEGUE DE HUGO EN GITHUB PAGES

c:\nube\MEGA\programacion\HtmlCssEstatico\hugo>hugo new site para-desplegar-en-githubpages
Congratulations! Your new Hugo site is created in c:\nube\MEGA\programacion\HtmlCssEstatico\hugo\para-desplegar-en-githubpages.

Just a few more steps and youre ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

c:\nube\MEGA\programacion\HtmlCssEstatico\hugo\para-desplegar-en-githubpages>git clone https://github.com/spf13/herring-cove.git themes/herring-cove

-- quitando .git del tema
c:\nube\MEGA\programacion\HtmlCssEstatico\hugo\para-desplegar-en-githubpages>rm -rf themes/herring-cove/.git

-- creo el primer post
c:\nube\MEGA\programacion\HtmlCssEstatico\hugo\para-desplegar-en-githubpages>hugo new posts/my-first-post.md
c:\nube\MEGA\programacion\HtmlCssEstatico\hugo\para-desplegar-en-githubpages\content\posts\my-first-post.md created

c:\nube\MEGA\programacion\HtmlCssEstatico\hugo\para-desplegar-en-githubpages>hugo server -t herring-cove --buildDrafts
  • cambio el archivo de configuración config.toml
baseURL = "https://pelos6.github.io/para-desplegar-en-githubpages/"
languageCode = "en-us"
theme = "herring-cove"
title = "Para desplegar en gitHub Pages"
publishDir = "docs"
  • importante la línea donde pone baseURL = "https://pelos6.github.io/para-desplegar-en-githubpages/" con el protocolo https\\ pues ni no es así no se cargan correctamente ni los css ni los js ni el resto de páginas
  • construyo el sitio con Hugo
  • creo el repositorio en GitHub y lo inicio en local
git init
git add -A
git commit -m "first commit"
git remote add origin https://github.com/pelos6/para-desplegar-en-githubpages.git
git push -u origin master
  • en Settings / GitHub Pages seleccionar en Source
  • master branch /docs folder.
  • Si la opción no esta habilitada es que no esta ese directorio creado.
  • en el siguiente push se actualiza el directorio docs y se puede ver el sitio correctamente generado

HugoGitHubPages

HugoGitHubPages1

GRÁFICOS

TEMAS

TEMA SIMPLE UNO DOS TRES

  • uno que parece realmente simple
  • tengo que copiar el js y el css que no eran correctos 👎 pues parece que es una plantilla muy reciente

TEMAS DOCUMENTACIÓN

PLANTILLAS INTERESANTES

PLANTILLAS PARA DOCUMENTACIÓN

HUGO THEME BOOTSTRAP

  • un buen tema para post
  • busqueda con fuse
    • la busqueda tiene estrellas por acierto en la busqueda
  • tags y diferentes clasificaciones
  • para varios idiomas
  • me planteo usarlo para el cuaderno de bitácora

CURIOSIDADES

HUGO-EVANGELISTA

  • Régis Philibert que se autoproclama hugo-evangelista seguro que con alguna buena razón

LINKS

TUTORIALES

HUGO EN GITLAB

VIDEOS

  • una forma super fácil de meter un video en este sitio hecho con hugo

HUGO Y CLOUD CANNON