{{ .TableOfContents }}

{% include logo-hugo.html %}

propósito

• notas sobre Hugo
• un generador de sitios estáticos escrito en go que promete ser rápido, y moderno.
• muevo c:\hugo\sites a C:\nube\MEGA\programacion\HtmlCssEstatico\hugo\Sites

instalación

• instalando hugo 0.31.1
  • version 0.31.1
  • 2017-12-10 17:57:09

Hugo Static Site Generator v0.31.1 windows/amd64 BuildDate: 2017-12-10T17:49:35+01:00

• instalando hugo 0.22.1
• en este directorio
  • C:\Hugo
• versión 0.22.1

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

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 irdicar 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

• [creating website with hugo]# primer hugo

• para crear un sitio con 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"

sitio web con academic

• primera prueba con esta plantilla 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

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 :smile:

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 aeroatic

• 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 :smile:

migrando este sitio (notas-programacion) a hugo

• migrando el blog de jekyll 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 sorprendentemente bueno :+1:
• 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 configuracion con el valor . y ya resuelve los css y los js

galería de imágenes con Hugo

• el final de un tutorial de tustplus sobre Hugo

intento de despliegue con wercker de un sitio simple con Hugo

• creating website with hugo
• 2017-12-08 17:16:19

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

• en localhost:1313 se ve el sitio sin los post

• explorando las utilidades de despliegue con wercker

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

• esta parte parece más sencilla

• el repositorio del tutorial

• un sitio para generar y desplegar sitios

despliegue de Hugo en GitHub Pages

• tutorial de gohugo

• otro tutorial interesante

• primero creo un sitio con hugo

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

tema simple uno dos tres

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

curiosidades

• un portafolio interesante