jekyll

{% include logo-jekyll.html %}

{% include toc.html %}

propósito

notas sobre jekyll.
versión: jekyll 3.2.1

enlaces propios

jekyll

Jekyll es un generador se sitios estáticos simples y orientado a blogs muy interesante.
Tiene una buena colección de tutoriales y consejos y ejemplos para iniciarse desde cero.
chuletas y cheat-sheet
un buen tutorial paso a paso bien explicado de JONATHAN MCGLONE
otra chuleta
y otra mas
descripcion de funcionamiento de jekyll
gem para saber el entorno

gem env

lo que da C:\tools\ruby23\lib\ruby\gems\2.3.0\gems

jekyll admin

jekyll-admin
en este blog hay un tutorial sobre como usarlo
solo se puede editar cuando lanzas localhost para hacer lo mismo en el sitio desplegado recomiendan usar Siteleaf que reconocen ha sido su inspiración.

jekyll autenticación

jekyll calendarios

notas sobre la implementación del calendario que uso en este sitio

busco un calendario para mostrar los post despues de leer en el correo de jekyll-talk esta entrada donde se recomienda esta versión de un calendario en javascript.
encuentro este blog de raymondcamden con enlace a este repositorio
el blog es muy interesante
- _post es una collection mas.
- SSG para static site generator
me decido a probar este último en http://localhost:4001/calendar/
- tiene buena pinta aunque hay que configurarlo.
- al final usa el código javascript
- se pinta el calendario pero no los eventos …
- clono el proyecto en C:\nube\MEGA\programacion\HtmlCssEstatico\jekyll\Static-Site-Examples>
- son dos ejemplos
veo diferencia entre como se genera calendar-data en mi ejemplo y en el del autor
el archivo _site/calendar-data/index.htm del autor

[

    {
        "title":"Carol's Birthday",
        "start": "2017-3-07",
        "allDay":true,
        "url":"/events/carol_bday/"
    }
    ,

    {
        "title":"Ray's Birthday",
        "start": "2017-4-8",
        "allDay":true,
        "url":"/events/ray_bday/"
    }


]

y el que genero

<p>[</p>

<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="w">
    </span><span class="nt">"title"</span><span class="p">:</span><span class="s2">"Carol's Birthday"</span><span class="p">,</span><span class="w">
    </span><span class="nt">"start"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2017-3-07"</span><span class="p">,</span><span class="w">
    </span><span class="nt">"allDay"</span><span class="p">:</span><span class="kc">true</span><span class="p">,</span><span class="w">
    </span><span class="nt">"url"</span><span class="p">:</span><span class="s2">"/events/carol_bday/"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="err">,</span><span class="w">

</span><span class="p">{</span><span class="w">
    </span><span class="nt">"title"</span><span class="p">:</span><span class="s2">"Carol's Birthday"</span><span class="p">,</span><span class="w">
    </span><span class="nt">"start"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2017-04-27"</span><span class="p">,</span><span class="w">
    </span><span class="nt">"allDay"</span><span class="p">:</span><span class="kc">true</span><span class="p">,</span><span class="w">
    </span><span class="nt">"url"</span><span class="p">:</span><span class="s2">"/events/carolbd/"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="err">,</span><span class="w">

</span><span class="p">{</span><span class="w">
    </span><span class="nt">"title"</span><span class="p">:</span><span class="s2">"Mi cumple"</span><span class="p">,</span><span class="w">
    </span><span class="nt">"start"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2017-01-12"</span><span class="p">,</span><span class="w">
    </span><span class="nt">"allDay"</span><span class="p">:</span><span class="kc">true</span><span class="p">,</span><span class="w">
    </span><span class="nt">"url"</span><span class="p">:</span><span class="s2">"/events/javierbd/"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="err">,</span><span class="w">

</span><span class="p">{</span><span class="w">
    </span><span class="nt">"title"</span><span class="p">:</span><span class="s2">"Ray's Birthday"</span><span class="p">,</span><span class="w">
    </span><span class="nt">"start"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2017-4-8"</span><span class="p">,</span><span class="w">
    </span><span class="nt">"allDay"</span><span class="p">:</span><span class="kc">true</span><span class="p">,</span><span class="w">
    </span><span class="nt">"url"</span><span class="p">:</span><span class="s2">"/events/ray_bday/"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre>
</div>

<p>]</p>

mi archivo se llama calendar-date.md y el del autor calendar.date.html
era eso lo que provocaba la generación de la salida erronea
consigo poner en el calendario los post y a producción

jekyll comandos

jekyll serve

bundle exec jekyll serve --help
jekyll serve -- Serve your site locally

Usage:

  jekyll serve [options]

Options:
            --config CONFIG_FILE[,CONFIG_FILE2,...]  Custom configuration file
        -d, --destination DESTINATION  The current folder will be generated into DESTINATION
        -s, --source SOURCE  Custom source directory
            --future       Publishes posts with a future date
            --limit_posts MAX_POSTS  Limits the number of posts to parse and publish
        -w, --[no-]watch   Watch for changes and rebuild
        -b, --baseurl URL  Serve the website from the given base URL
            --force_polling  Force watch to use polling
            --lsi          Use LSI for improved related posts
        -D, --drafts       Render posts in the _drafts folder
            --unpublished  Render posts that were marked as unpublished
        -q, --quiet        Silence output.
        -V, --verbose      Print verbose output.
        -I, --incremental  Enable incremental rebuild.
            --ssl-cert [CERT]  X.509 (SSL) certificate.
        -H, --host [HOST]  Host to bind to
        -o, --open-url     Launch your site in a browser
        -B, --detach       Run the server in the background
            --ssl-key [KEY]  X.509 (SSL) Private Key.
        -P, --port [PORT]  Port to listen on
            --show-dir-listing  Show a directory listing instead of loading your index file.
            --skip-initial-build  Skips the initial site build which occurs before the server is started.
        -h, --help         Show this message
        -v, --version      Print the name and version
        -t, --trace        Show the full backtrace when an error occurs
        -s, --source [DIR]  Source directory (defaults to ./)
        -d, --destination [DIR]  Destination directory (defaults to ./_site)
            --safe         Safe mode (defaults to false)
        -p, --plugins PLUGINS_DIR1[,PLUGINS_DIR2[,...]]  Plugins directory (defaults to ./_plugins)
            --layouts DIR  Layouts directory (defaults to ./_layouts)
            --profile      Generate a Liquid rendering profile
        -h, --help         Show this message
        -v, --version      Print the name and version
        -t, --trace        Show the full backtrace when an error occurs

jekyll serve sin build

para no tener que esperar la construcción del sitio

bundle exec jekyll serve --skip-initial-build

`jekyll serve -h`

muestra la ayuda para el comando serve

`jekyll serve --profile`

muestra información del tiempo de generacion
Jekyll 3.0 also introduces a liquid profiler. By adding –profile to the build or serve command, Jekyll will analyze your site’s build time, so you can see exactly where things can be sped up, ensuring you spend more time authoring content, and less time waiting for your site to build.

jekyllProfile

viene con los recientes cambios que describen en github

jekyll custom domain

para poner un dominio personal diferente al que te da gitHub pages

jekyll directorio de pc-Acer

el contenido del directorio C:\nube\MEGA\programacion\HtmlCssEstatico\jekyll

jekyll disqus

para gestionar los comentarios en los blogs y sitios creados con jekyll se puede usar disqus.

jekyll firebase

goyllo

jekyll funcionamiento en profundidad

un post explicando como funciona en profundidad jekyll por bytesandwich

jekyll graficos

jekyll_date_chart para visualizar datos en graficos
- sacado de la pagina de jekyllrb

jekyll galeria de imágenes

en la pagina

jekyll githubPages

jekyll se despliega con facilidad en githubPages
es necesario saber con que plugins y versiones se despliega en esas pages.

jekyll liquid

jekyll usa un sistema de plantillas basado en liquid
- buena chuleta de liquid con ejemplos
- tutorial sobre liquid
- otra chuleta de liquid
- una wiki en castellano

menu que se marca cuando se usa

jekyll weekly

noticias semanales sobre jekyll

enlaces interesantes

en un blog con mas informacion interesante
el blog de son-link
- en castellano con tutorial sobre como personalizarlo con css y js usando MUI (css) y Zepto.js(http://zeptojs.com/)
blog con jekyll desde cero en castellano
How We Build CMS-Free Websites — Development Seed
como hice mi blog por raul avila
GUÍA SOBRE JEKYLL tutorial interesante
para clarificar el tema de la la propiedad baseurl

otros generadores de web estática interesantes

C:\nube\MEGA\programacion\HtmlCssEstatico\punch\mysite>punch s
Running Punch server on localhost:9009
connect deprecated utils.conditionalGET: use fresh module directly ..\..\..\..\..\..\Users\javie\AppData\Roaming\npm\node_modules\punch\lib\page_server.js:158:20
connect deprecated utils.etag: this private api moved with serve-static ..\..\..\..\..\..\Users\javie\AppData\Roaming\npm\node_modules\punch\lib\page_server.js:160:38
connect deprecated utils.notModified: this private api moved with serve-static ..\..\..\..\..\..\Users\javie\AppData\Roaming\npm\node_modules\punch\lib\page_server.js:167:25
connect deprecated utils.removeContentHeaders: this private api moved with serve-static ..\..\..\..\..\..\Users\javie\AppData\Roaming\npm\node_modules\punch\node_modules\connect\lib\utils.js:303:11
127.0.0.1 - GET / HTTP/1.1 304 - - 140.864 ms
127.0.0.1 - GET /favicon.ico HTTP/1.1 200 - - 31.102 ms

middleman
metalsmith recomendada por Daniel Perez Alvarez
jekyllbootstrap/
- sobre jekyll
- ya no esta mantenido
ruhoh
- de uno de los creadores del anterior
para crear portafolio de fotos y videos en linux
yst
- yst - static websites from YAML and string templates
- usado por el creador de pandoc johnmacfarlane
- repositorio
http://awestruct.org/

plugins

de la página oficial
jekyll-plugins
breadcumbs
vscode-jekyll-snippets

vscode-jekyll-snippets

plantillas para jekyll

en pagina aparte

Frameworks para jekyll

pygments

lenguajes soportados

jekyll portable

en github
parece interesante.
- a probar

otro intento de instalación portable

de tibel
- lo descargo todo en el pen de la margarita.
- portables\jekyll

D:\portables\jekyll>gem install activesupport
ERROR:  Could not find a valid gem 'activesupport' (>= 0), here is why:
          Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://api.rubygems.org/latest_specs.4.8.gz)

tengo que lanzar D:\portables\jekyll>update_rubygems
Download rubygems-update-2.6.7.gem

C:\herramientas\>gem install --local C:\rubygems-update-2.6.7.gem
C:\herramientas\>update_rubygems --no-ri --no-rdoc

pero lanzando setpath.bat la versión de gem es la vieja así que sustituyo la descarga de ruby a la actual hasta que consigo que gem --version de la version 2.6.7
asi consigo sortear el problema de los certificados
resumen
- execute setpath.cmd
- execute gem install github-pages
- execute gem install wdm
- y ahora jekyll new myblogportable
- cd myblogportable
- jekyll serve
- y funciona

jekyll portable windows

PortableJekyll
lo instalo en el portatil viejo
da un error que creo que se puede tratar así bundle exec jekyll serve

forestry

un servicio para generar un sitio estático
- plan free para uso personal una sola persona

siteleaf

siteleaf * tiene un plan free para desarrolladores * despliegua jekyll desde github pero solo repos publicos para la opción free

Jekyll Quick Reference (Cheat Sheet)

Jekyll Quick Reference (Cheat Sheet)

YAML Quick Reference (Cheat Sheet) for Jekyll Data Files, Front Matter and Collections

consejos y ejemplos para archivos de datos, collectios y front matter en jekyll

problemas

con version de jekyll

C:/tools/ruby23/lib/ruby/gems/2.3.0/gems/bundler-1.12.5/lib/bundler/runtime.rb:35:in `block in setup':
You have already activated jekyll 3.3.1, but your Gemfile requires jekyll 3.2.1
Prepending `bundle exec` to your command may solve this. (Gem::LoadError)

en esta dirección explican el caso y la solución
lo soluciono cambiando la llamada a jekyll
- jekyll serve --port 4001 --watch
por
- bundle exec jekyll serve --port 4001 --watch
uso bundle (lote, fardo) que gestiona las gems que necesita cada proyecto ruby.
en sus palabras es una salida para el infierno de las dependencias

problemas al generar post

jekyll parece indexar todo lo que esta en sus directorios por eso no es buena idea tener archivos repetidos sobre todo con lo post del blog
ejemplo directorio baseDatos donde genero los post desde mySql y que hasta que no saco fuera de busqueda da un error

{% raw %}
 '' is not a valid datetime.
  Liquid Exception: exit in _layouts/post.html
{% endraw %}

problemas al generar algunos md

si ya existe en el repositorio un archivo .html con el mismo nombre del .md para jekyll tiene prioridad el que tiene como extensión html ya existente

problemas con liquid

en ubuntu daba un Warning muy molesto :angry:

{% raw %}
<!-- {% if page.secondary-column-content %}{% assign secondary-column-content = {{ page.secondary-column-content }} %}{% else %}{% assign secondary-column-content = 'secondary-column.html' %}{% endif %} -->
{% endraw %}

y este otro

{% raw %}
 Liquid Warning: Liquid syntax error (line 41): Unexpected character { in "{{{{ page.secondary-column-content }} }}" in /home/javier/proyectos/notas-programacion/_posts/2017-07-25-bitacora.md
{% endraw %}

importante como comentar liquid

los comentarios sobre liquid deben ir encerrados con la etiqueta {% raw %} {% endraw %}

problemas con la `ñ` con `notas-personal.about.md`

  Liquid Exception: incompatible character encodings: UTF-8 and Windows-1252 in abo
ut.md
jekyll 3.2.1 | Error:  incompatible character encodings: UTF-8 and Windows-1252

el siguiente path en pages de problemas de Liquid Exception: incompatible character encodings: UTF-8 and Windows-1252 in about.md

{% raw %}
{% for p in site.pages %}
  {{ p.path }}
{% endfor %}
{% endraw %}

es por la página cumpleañosMaria el tema de la ñ

Error: incompatible character encodings: UTF-8 and Windows-1252
Error: Run jekyll build --trace for more information.

problemas con yaml

Con YAML no podemos usar tabulaciones. Así que hay que utilizar los espacios normales.

propósito

enlaces propios

jekyll

jekyll admin

jekyll autenticación

jekyll calendarios

notas sobre la implementación del calendario que uso en este sitio

jekyll comandos

jekyll serve

jekyll serve sin build

jekyll serve -h

jekyll serve --profile

jekyll custom domain

jekyll directorio de pc-Acer

jekyll disqus

jekyll firebase

jekyll funcionamiento en profundidad

jekyll graficos

jekyll galeria de imágenes

jekyll githubPages

jekyll liquid

jekyll menu

jekyll weekly

enlaces interesantes

otros generadores de web estática interesantes

plugins

plantillas para jekyll

Frameworks para jekyll

pygments

jekyll portable

otro intento de instalación portable

jekyll portable windows

forestry

siteleaf

Jekyll Quick Reference (Cheat Sheet)

YAML Quick Reference (Cheat Sheet) for Jekyll Data Files, Front Matter and Collections

problemas

problemas al generar post

problemas al generar algunos md

problemas con liquid

en ubuntu daba un Warning muy molesto :angry:

y este otro

importante como comentar liquid

problemas con la ñ con notas-personal.about.md

problemas con yaml

`jekyll serve -h`

`jekyll serve --profile`

problemas con la `ñ` con `notas-personal.about.md`