Beiträge zu “Jekyll”

Mein Atom - Jekyll - Gitlab Blog Workflow

Ich verwende Jekyll seit langem mit dem Markdown Editor Atom. Da ich diese Kombination jetzt einem “Nichtnerd” beibringen soll hier ein Versuch das ganze etwas “geschmeidiger” zu gestalten und verständlich zu dokumentieren.

Meistens erstelle ich ein Dokument in dem ich einfach ein älteres kopiere. Ich weiß, das es in Atom Paket Atom-Jekyll auch ein Tastenkürzel gibt aber bei dem bekomme ich nicht Felder wie “tags, image” mit die ich bei mir brauche.

Was ich erst jetzt gefunden habe ich das Paket Markdown Preview Enhanced durch das man mit dem Tastaturkürzel M eine schöne Preview des Textes bekommt. Leider werden dabei natürlich keine Bilder mit angezeigt die ich über das [Picture Plugin](/2015/09/jekyll-responsive-pictures.html) responsive erstellen lasse.

Bilder müssen einfach in dem Verzeichnis für Bilder im Jekyll Ordner abgelegt werden und können dann über diese Zeichen eingebunden werden

{% picture /2018/201806-jekyll-atom-picture.jpg alt=”” %}

Die Seite wird bei mir auf einem Gitlab Server selbst betrieben. Das bedeutet das ich einen Text wenn er fertig ist über Git Kommandos veröffentlichen muss.

Schön ist: Man kann sich die Änderungen noch mal anschauen (z.b. hier bei einem Dokument das aus einer Wordpress Seite importiert wurde)

Auf dem Gitlab Server gib es eine “Magic” die über MQTT einem anderen Server sagt das er doch mal die aktuelle Version der Site auschecken und bauen soll.

Aktuell bekommt nur der Administrator eine Mail mit den veränderten Dateien als Bestätigung da dieses System bisher nur von mir verwendet worden ist. Vielleicht finde ich auch noch Zeit hier Mails in Abhängigkeit von dem Blogautor zu versenden.

9.6.18
Weitere Beiträge zu: Jekyll   Atom   Gitlab  

Mermaid: Flowcharts aus Textbeschreibungen erstellen

Wenn man mal schnell ein einfaches Flowchart oder ein Gant Diagram in einer Jekyll Site braucht ist es meistens notwendig irgendein Grafikprogramm zu starten um dort ein Bild zu erstellen und dies dann abzuspeichern.

Mit Mermaid und dem Jekyll Plugin geht das für mich einfache in dem man einfach die Grafik durch eine Textbeschreibung darstellt und diese wird dann beim Aufruf durch JavaScript in ein SVG Bild umgewandelt

Der Text sieht z.B. so aus:

gantt
  dateFormat  YYYY-MM-DD
  title Ein Gantdiagramm in Jekyll
  section Einführung
  Abgeschlossene Aufgabe            :done,    des1, 2018-05-06,2018-05-08
  Aktive Aufgabe               :active,  des2, 2018-05-09, 3d
  Zukünftige Aufgabe               :         des3, after des2, 5d
  Nochen eine zukünftige Aufgabe               :         des4, after des3, 5d
  section Rollout
  Abgeschlossene Aufgabe auf kritischem Pfad :crit, done, 2018-05-06,24h
  Implementierung              :crit, done, after des1, 2d
  Testerstellung             :crit, active, 3d
  Zukünftige Aufgabe auf kritischem Pfad        :crit, 5d
  Abschlusstest                      :1d '
gantt dateFormat YYYY-MM-DD title Ein Gantdiagramm in Jekyll section Einführung Abgeschlossene Aufgabe :done, des1, 2018-05-06,2018-05-08 Aktive Aufgabe :active, des2, 2018-05-09, 3d Zukünftige Aufgabe : des3, after des2, 5d Nochen eine zukünftige Aufgabe : des4, after des3, 5d section Rollout Abgeschlossene Aufgabe auf kritischem Pfad :crit, done, 2018-05-06,24h Implementierung :crit, done, after des1, 2d Testerstellung :crit, active, 3d Zukünftige Aufgabe auf kritischem Pfad :crit, 5d Abschlusstest :1d

Oder so

  graph TD
  A[Geschenke kaufen ] -->| Geld besorgen | B(Einkaufen gehen)
  B --> C{Welche Geschenke?}
  C -->|Micheal| D[Laptop]
  C -->|Frida| E[iPhone]
  C -->|Sonja| F[Brettspiel]
  D -->|Gut|G[Lenovo]
  D -->|Billig|H[Aldi]
  D -->|Teuer|I[HP]
graph TD A[Geschenke kaufen ] -->| Geld besorgen | B(Einkaufen gehen) B --> C{Welche Geschenke?} C -->|Micheal| D[Laptop] C -->|Frida| E[iPhone] C -->|Sonja| F[Brettspiel] D -->|Gut|G[Lenovo] D -->|Billig|H[Aldi] D -->|Teuer|I[HP]
24.5.18
Weitere Beiträge zu: Jekyll   Mermaid  

Ansible Informationen zu Jekyll exportieren

Ich verwende Ansible um die Konfiguration von Servern und Desktop Geräten zu automatisieren. Da ich Jekyll für meinen Blog verwende habe ich begonnen auch die Dokumentation der Server mit Hilfe des Dokumentations Templates zu pflegen. Neben der Beschreibung eines Servers ist es natürlich hilfreich auch technische Informationen dort abzulegen.

Und da ich ja schon viele Informationen in Ansible vorliegen habe lag es natürlich nahe ein Playbook zu schreiben das mir diese Daten direkt in das Jekyll Template exportiert.

Die Idee: Ich nutze die Collections und exportiere die gewünschte Informationen als Input für ein Collectionstemplate.

Dazu brauchen wir also zuerst ein Playbook für den Export.

Für alle Hosts die in der etc-host von Ansible in der Gruppe “Doku” enthalten sind wird mit dem Template server.j2 eine Datei in dem Collection Verzeichnis “_server” erstellt das die gewünschten Ansible Informationen enthält.

vi ansible-2-doku.yml 
  ---
  - hosts: doku
    roles:
      - server-doku
  

vi roles/server-doku/defaults/main.yml 
  ---
  hosts: localhost
  connection: local
  path2jekyll: "/home/user/doku/_server/"

vi roles/server-doku/tasks/main.yml 
   ---
   - name: build collection input
     template: src=templates/server.j2 dest={{ path2jekyll }}/{{ ansible_hostname }}.md
     delegate_to: localhost

vi roles/server-doku/templates/server.j2 
   ---
   layout: server
   title: {{ ansible_hostname }}
   ip :  {{ ansible_fqdn }}
   os : {{ ansible_system }}
   permalink: /host-infos-{{ ansible_hostname }}.html
   tags: [Server, {{ ansible_hostname }} ]
   sidebar: mydoc_sidebar
   folder: mydoc
   ---

So jetzt brauchen wir noch die Collection Definition in Jekyll

 vi _config.yml 
   
   collections:
     server:
       output: true

 vi _layouts/server.html 
 
    ---
    layout: page
    ---
    IP Adresse: {{ page.ip }} <br>
    Betriebssystem : {{ page.os }} <br>
    .....

Jetzt bekommen wir bei jedem Lauf von Jekyll für jeden Server eine html Datei erstellt auf die wir aus anderen Seiten verlinken können.

24.9.17
Weitere Beiträge zu: Ansible   Jekyll  

OpenRheinRuhr Konferenz in Oberhausen

Heute war ich zum ersten Mal auf der OpenRheinRuhr in Oberhausen. Grund war vor allem mein eigener Vortrag zu Jekyll und leider konnte ich nur einen der beiden Tage da sein.

Es hat sich auf jeden Fall gelohnt. Gute Vorträge in der interessanten Umgebung eines Industriemuseums. Auch bei den Ausstellern waren wieder gute Gespräche möglich.

Lohnenswert. Auch für kleinere Mädchen und Jungen.

8.11.15
Weitere Beiträge zu: OpenRheinRuhr   Konferenz   Jekyll  

Einen Jekyll Blog auf Github starten

Ich betreibe meinen Blog mit Jekyll auf meinem eigenen Server und synchronisiere meine Daten über eine SVN Versionskontrolle auf meinen Server. Das hat den Vorteil das alle meine Inhalte versioniert sind und ich von mehreren PCs Inhalte erstellen kann. So weit so gut.

In meinen Vortrag auf der Open Rhein Ruhr wollte ich natürlich auch die einfache Möglichkeit über Github vorstellen die ich bis heute noch gar nicht kannte. Sie ist kostenlos und schafft eine tolle Basis um den Blog zu starten und später vielleicht “woanders” hinzugehen.

Ergebnis: es ist wirklich ganz einfach. Die hier vorgestellten Schritte sind natürlich noch nicht das Ende der Arbeit aber man kommt ganz schnell ganz weit.

Step 1 Auf Github anmelden und ein Template forken

Blogging on Github Blogging on Github

Step 2 Template umbenennen

Blogging on Github

Step 3 Erste Anpassungen über den Github Editor

Blogging on Github

Step 4 Staunen

Blogging on Github
26.10.15
Weitere Beiträge zu: Jekyll  

Vortrag zu Jekyll auf der Open Rhein Ruhr

Ich habe meinen ersten Vortragsvorschlag auf einer Open Source Konferenz eingereicht - der Open Rhein Ruhr am 7. und 8. November 2015 . Und er wurde angenommen. Es wird um das “warum” und “wie” von Blogs mit Jekyll gehen.

Open Rhein Ruhr

Auf für die Jüngeren ist was auf der Open Rhein Ruhr. Die Mini Froglabs haben wieder ein spannendes Programm. (Ich weiß das weil ich einen der Tutoren “kenne”).

Es lohnt sich also zu kommen. Und sprecht mit einfach mal an wenn Ihr wollt. Es würde mich freuen wenn meine Session auf dem letzten Slot am Sonntag Abend nicht ganz leer ist.

Froglabs Open Rhein Ruhr
20.10.15
Weitere Beiträge zu: OpenRheinRuhr   Jekyll  

Jekyll: Facebook Images festlegen

Teilt man einen Link auf Facebook so versucht Facebook den Post durch die Darstellung eines Bildes auf zu hübschen. Dafür durchsucht Facebook die Seite und sucht sich ein Bild aus. Wie die Auswahl geschieht ist hier dokumentiert. Im wesentlichen gilt:

  • gibt es ein großes dann wird das auch groß dargestellt
  • gibt es nur kleine dann wir eins links angezeigt und der Text erscheint rechts davon

So weit so gut. Dumm nur wenn überhaupt kein richtiges Bild in dem Beitrag ist. Dann nimmt Facebook sich eins von den Bildern die zum Beispiel in der rechten oder linke Spalte sind. Wenn es ganz schlimm kommt wird das Icon für den RSS Feed verwendet. Das ist natürlich nicht schön.

Für alle die diesen Zufall nicht wollen bietet Facebook die Möglichkeit durch spezielle Meta Tags Facebook auf die richtigen Bilder zu “stupsen”

Für meinen Blog auf Basis von Jekyll habe ich das jetzt so gelöst.

Wenn ich ein Bild dargestellt haben möchte so füge ich folgendes in den YAML Header ein

 image: /pfad/zu/dem/schönen/bild.png

und im Jekyll Template wird der Header so gefüllt:

 {% if page.image  %} 
    <meta property="og:image"  content="{{ site.url }}/{{ page.image}}">
  {% else %}
    <meta property="og:image"  content="{{ site.url }}/assets/default-image.png" />
{% endif %}

Das heißt: Gibt es ein Bild das im Post definiert wird dann wird das genommen ansonsten ein Standardbild.

Testen kann man das ganze hier

5.6.15
Weitere Beiträge zu: Jekyll  

Jekyll: Semiautomatische Postings auf Twitter

Bisher teile ich meine Beiträge selektiv und manuell auf den sozialen Medien wie Facebook, Twitter und Co. Das mache ich vor allem deshalb, weil einige technische Dokumente eher für mich als Referenz dienen und weniger für eine Diskussion gedacht sind. Ich war schon länger auf der Suche nach einer Lösung hier “selektiv automatisch” zu posten und in diesem Beitrag habe ich einen guten Ansatz gefunden.

Im wesentlichen ist die Idee einfach. Es gib einen RSS Feed für jeden Dienst der durch eine Variable in Post gefüllt wird. Dann nehmen wir den bekannten Dienst If-Then-That (IFTTT) für die Postings.

Ich fange erst einmal mit Twitter an. Zuerst bauen wir das Jekyll Layout

cd _layouts
vi social-feed.xml
   ---
    layout: social-feed
    ---
    <?xml version="1.0" encoding="UTF-8"?>
    <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
      <channel>
        <title>{{ site.title | xml_escape }}</title>
        <description>{{ site.description | xml_escape }}</description>
        <link>{{ site.url }}</link>
        <atom:link href="{{"/atom.xml" | prepend: site.url }}" rel="self" type="application/rss+xml"/>
        <pubDate>{{ site.time | date_to_rfc822 }}</pubDate>
        <lastBuildDate>{{ site.time | date_to_rfc822 }}</lastBuildDate>
        <generator>Jekyll v{{ jekyll.version }}</generator>
        {% assign platform = page.title | downcase %}
        {% for post in site.posts limit:10 %}
            {% assign share = post.share | downcase %}
            {% if share contains platform %}
            <item>
                <title>{{ post.title | xml_escape }}</title>
                <pubDate>{{ post.date | date_to_rfc822 }}</pubDate>
                <link>{{ post.url | prepend: site.url }}</link>      
            </item>
            {% endif %}
        {% endfor %}
      </channel>
    </rss>

Dann das Template für den Twitterfeed

    cd ..
    mkdir social-feeds
    cd social-feeds
    vi twitter.xml
        ---
        layout: social-feed
        title: twitter
        ---

Wenn man jetzt in einem Post die Variable “share: twitter” im YAML Header verwendet wird der Post in dem RSS Feed für Twitter aufgenommen der im Verzeichnis social-feeds erstellt wird.

Dann hat man die Basis gelegt. Jetzt kann man unter ifttt ein “Rezept” anlegen bei dem die Quelle der eben generierte RSS Feed ist und als Ziel Twitter angegeben wird.

30.5.15
Weitere Beiträge zu: Jekyll   IFTTT  

Jekyll: Darstellung von GPX Information mit Leaflet

An dieser Stelle hatte ich mal beschrieben wie man GPX Daten mit der Javascriptbibliothek Leaflet in einer HTML Seite darstellen kann.

Mit dem Wechsel auf Jekyll hat die alte Implementierung eh nicht mehr funktioniert und ich wollte es auch erreichen das ich die Karten innerhalb der Jekyll Strukturen darstellen kann. Das ist im Prinzip auch kein Problem, die einzige Frage die sich stellt ist wie man die notwendigen Javascriptaufrufe in der richtigen Reihenfolge einbinden kann ohne sie in allen anderen Seiten, die keine Karten darstellen sollen, mit einzubinden.

Dies habe ich nach dieser Anleitung wie folgt gelöst. Der Header bekommt folgende zusätzliche Abfrage:

{% if page.custom_js %}
  {% for js_file in page.custom_js %}
    <script src='{{ js_file }}' type="text/javascript"></script>
  {% endfor %}
{% endif %}

In den Seiten oder Posts in denen ich weiteres Javascript einbinden möchte kommt die Variable custom-js dazu und dann sind wir eigentlich schon fertig.

---
layout: page
title: Vogesen 2014
permalink: /wanderungen/vogesen-2014.html
date: ' 2015-05-21 14:42:40'
custom_js:
- /assets/leaflet/leaflet.js
- /assets/leaflet/gpx.js
- /assets/leaflet/leaflet-map.js
- /assets/leaflet/leaflet-map-vogesen-2014.js
---
<link rel="stylesheet" href="/assets/leaflet/leaflet.css"/>
<div id="map" style="width: 700px; height: 600px"></div>

So sieht das dann aus wenn es fertig ist. Irgendwann werde ich das auch noch responsive machen.

22.5.15
Weitere Beiträge zu: Jekyll   Leaflet  

Den Jekyll Build Prozess in Sublime starten

Da ich Subĺime verwende um die Blogeinträge für Jekyll in Markdown zu schreiben wäre es natürlich schön wenn ich aus dem Editor direkt den Build Prozess starten könnten.

Zuerst ein

Tools \ Build System \ New Build System 

Dort dann einfach den Befehl eingeben mit dem Ihr Eure Site erstellt und synchronisiert. Bei mir ist das ein Shell Script das Build und Sync zusammenfasst

// This will build your Jekyll site, and print a trace to the console
{
   "cmd": ["/home/hbauer/websites/hb-sync.sh"],
   "shell": true
}

Dies dann abspeichern. Da ich den Build Prozess nur für Jekyll Markdown Dateien verwende habe ich noch unter

\ Tools \ Build System \ Jekyll

diese neue Konfiguration als Default eingestellt. Dann reicht einfach ein CTRL + B und schon geht es los

sublime jekyll

11.5.15
Weitere Beiträge zu: Jekyll   Sublime  

Migration des Blogs auf Jekyll abgeschlossen

Heute war es soweit. Die seit längerer Zeit andauernden Arbeiten an der Migration dieses Blogs von Movabletype auf Jekyll sind abgeschlossen.

Zuerst habe ich eine kleinere Webseite umgestellt und dabei die meisten Anpassungen in der Gestaltung erstellt.

Bei der Umstellung dieses Blogs waren vor allem die “Massagen” in den Blogeinträgen recht aufwendig. Diese inhaltlichen Änderungen betrafen vor allem die Links auf Bilder und die interne Verlinkung auf Seiten.

Die interne Verlinkung hätte man lassen können aber da ich eh schon dran war… (Die URL des Blogs hat sich über die Jahre in verschiedenen Schritten von http://hagen-bauer.de/blog auf https://www.hagen-bauer.de)

Bei den Bildern waren Anpassungen notwendig weil ich zum einen über die Jahre meine Organisation der Bilder geändert habe und zum anderen die Bilder in Verzeichnissen im Root Directory des Blogs abgelegt waren. Bei Jekyll Sites ist es sinnvoller alle Bilder in ein Verzeichnis abzulegen. Diese “Massage” war mit sed recht sinnvoll durchzuführen

  sed -i -f ../sed-mig *

Das Input für sed sah dann so aus (ja, Regex Freaks könnten das noch schöner machen)

s#/blog/assets_c#/images/assets_c#g
s#hagen-bauer.de/assets_c#hagen-bauer.de/images/assets_c#g
s#/blog/201002/201002-#/images/2010/201002-#g
s#/blog/201003/201003-#/images/2010/201003-#g
s#/blog/201004/201004-#/images/2010/201004-#g
s#/blog/201005/201005-#/images/2010/201005-#g
s#/blog/201006/201006-#/images/2010/201006-#g
...
....
s#/2014/201401-#/images/2014/201401-#g
s#/2014/201402-#/images/2014/201402-#g
s#/2014/201410-#/images/2014/201410-#g
s#](/2014/201403-#](/images/2014/201403-#g
s#](/2014/201404-#](/images/2014/201404-#g
s#](/2014/201405-#](/images/2014/201405-#g

Um die Fehler zu finden habe ich mit Jekyll eine Seite erstellt in der alle Einträge dargestellt wurden und mit Firebug konnte man dann in der Console schön die fehlenden Links finden.

Leider habe ich keine Möglichkeit gefunden in Jekyll die URL aus dem exportierten Basename zu bauen. Jekyll hat immer den Dateinahmen verwendet. mit einem

rename 's/_/-/g' _posts/*

konnte man das schnell fixen.

Was hat nicht geklappt?

In meinem alten Blog hatte ich in der rechte Spalte eine Tag Cloud die auf jeder Seite des Blogs angezeigt wurde. Ich konnte diese Tag Cloud zwar erstellen, nur leider hat diese Cloud die Build Zeit von 40 Sekunden auf 45 Minuten !!! hochgeschraubt. Deswegen gibt es die Tag Cloud nur noch auf einer Seite.

Die Jahres und Monatsarchive konnte ich (noch) nicht so schön umsetzen. Es gäbe zwar Möglichkeiten aber am Ende wollte ich mir die Arbeit sparen da ich eh nicht glaube das sie viel genutzt werden.

Was soll noch kommen?

Aktuell wird die Seite lokal gehalten und erstellt und dann mir rsync auf den Webserver gespielt. Später möchte ich den Build Prozess auf den Server verlagern.

Die Suche ist erst mal mit DuckDuckGo erstellt. Hier würde ich gerne einen Suchindex anbinden.

9.5.15
Weitere Beiträge zu: Jekyll   Movabletype  

Ein Jekyll Bootstrap Blog mit DuckDuckGo durchsuchen

Einer der großen Nachteile von Jekyll als statischer Webseite ist die fehlende Volltextsuche. Die meisten Blogs lösen dies über eine Suche mit Google. Dies möchte ich aufgrund der “Privatsphäre” bei Google meinen Nutzern nicht anbieten. DuckDuckGo wird im allgemeine als Suchmaschine mit guten Datenschutzeinstellungen angesehen und bietet auch die Möglichkeit einer Site Search. Mithilfe diese Dokumentes konnte ich eine Sucheingabe in die Topnavigation meines Bootstrap Templates bekommen

<form class="navbar-form pull-right" method="get" action="http://duckduckgo.com/">
    <input type="hidden" name="sites"value="www.deine.site"/>
    <input type="hidden" name="ka" value="h"/>
    <input type="hidden" name="k7" value="#fafafa"/>
    <input type="hidden" name="kj" value="#3f3f3f"/>
    <input type="hidden" name="ky" value="#fafafa"/>
    <input type="hidden" name="kx" value="b"/>
    <input type="hidden" name="kt" value="Helvetica"/>
    <input type="submit" value="DuckDuckGo Search" style="visibility: hidden;" />
    <input class="form-control mac-style" name="q" value="" placeholder="Suchen" type="text">
</form>

Die Farbgebung der Trefferliste kann man noch etwas anpassen.

6.5.15
Weitere Beiträge zu: suchengine   Jekyll  

Jekyll: Erweiterung der Movabletype Importers um Tags

An dieser Stelle hatte ich meine extrem positiven Erfahrungen mit dem Jekyll Importer für Movabletype beschrieben.

Einer der offenen Punkte war der fehlende Support für den Import von Tags. Da diese in meinem Blog viel verwendet werden musste eine Lösung her.

Da meine bisherigen Erfahrungen mit Ruby gleich Null sind hat es etwas gedauert und das Ergebnis entspricht wahrscheinlich nicht den gängigen Programmierstandards. Aber er scheint zu klappen.

Hier meine Erweiterungen.

diff /var/lib/gems/1.9.1/gems/jekyll-import-0.6.0/lib/jekyll-import/importers/mt.rb /root/hb-mt.rb 
70a71
>         post_tags= db[:mt_objecttag].join(:mt_tag, :tag_id => :objecttag_tag_id)
79a81,86
>         tags = post_tags.filter(
>             :mt_objecttag__objecttag_object_id => post[:entry_id]
>           ).map {|ea| encode(ea[:tag_name], options) }
> 
84a92
>           data['tags'] = tags  
172c180
<           'author' => encode(comment[:comment_author], options),

Und so sehen dann die exportierten Markdown Dateien aus.

 layout: post
 title: Volker Pispers - Kurze Geschichte der US-Außenpolitik und des Terrorismus
 date: '2015-03-17 21:14:30 +0100'
 ...
 ...
 tags:
 - USA
 - Geschichte
 ---
 Brillant - deprimierend aber brillant. 
 .....

Diese Tags kann man im Layout verwenden.

2.5.15
Weitere Beiträge zu: Jekyll  

Ruby 2.x auf Ubuntu 12.04 installieren

Leider ist die Performance von Jekyll mit meinem recht umfangreichen Blog aktuell nicht befriedigend.

Ich verwende aktuell noch Ubuntu 12.04 das mit einer alten Ruby Version ausgeliefert wird. Einige Einträge im Web deuteten darauf hin das ein Update von Ruby zu spürbar verbesserten Build Zeiten geführt hätte.

Leider war das bei mir nicht so aber hier trotzdem die Schritte mit denen ich auf Ubuntu 12.04 auf eine aktuelle Ruby installieren konnte. (Quelle)

gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3
curl -L https://get.rvm.io | bash -s stable 
....
....
  * To start using RVM you need to run `source /home/hbauer/.rvm/scripts/rvm`
    in all your open shell windows, in rare cases you need to reopen all shell windows.

sudo .rvm/bin/rvm requirements
Checking requirements for ubuntu.
Installing requirements for ubuntu.
Updating system......................
Installing required packages: libreadline6-dev, libyaml-dev, libsqlite3-dev, sqlite3, autoconf, libgdbm-dev, libncurses5-dev, automake, libtool, libffi-dev........
Requirements installation successful.

sudo .rvm/bin/rvm install ruby
Searching for binary rubies, this might take some time.
Found remote file https://rvm_io.global.ssl.fastly.net/binaries/ubuntu/12.04/i386/ruby-2.2.1.tar.bz2
....
....
ruby-2.2.1 - #generating default wrappers........


/bin/bash --login
hbauer@oelberg2:~$ rvm use ruby --default
Using /home/hbauer/.rvm/gems/ruby-2.2.1

ruby -v
ruby 2.2.1p85 (2015-02-26 revision 49769) [i686-linux]

In meinem Fall hat die neue Ruby Version eine verbesserte Build Time von ca 10% gebracht.

1.5.15
Weitere Beiträge zu: Jekyll  

Jekyll: Blogeinträge importieren

Auf meinem Weg von Movabletype zu Jekyll möchte ich natürlich meine alten Blogeinträge “mitnehmen”. Jekyll bietet hierfür auch einen Importer an.

Eigentlich war ich ja geistig darauf vorbereitet hier noch umfangreiche “Massagen” an Konvertierungsergebnis vollziehen zu müssen aber von dem Ergebnis war ich dann doch sehr beeindruckt.

Ausgangspunkt war eine recht einfache Debian Testumgebung mit Apache/PHP/Mysql und dem hier beschriebenen Jekyll Basissetup. In Mysql gab es ein Backup meiner Movabletype Datenbank

Die “Dokumentation” für den Importer ist recht “schlank”. Zuerst soll er so installiert werden

sudo gem install jekyll-import

Was aber nicht so einfach klappte. Einige Fehler z.b. zlib is missing; necessary for building libxml2

bei der Installation konnte ich durch die Nachinstallation von Paketen

 apt-get install libghc-zlib-dev
 apt-get install libmysqlclient15-dev

fixen. Dann klappte es auch mit der Installation des Importers und einiger Voraussetzungen (die man nur im Quelltext genannt bekommt)

sudo gem install jekyll-import mysql sequel
Building native extensions.  This could take a while...
Fetching: jekyll-import-0.6.0.gem (100%)
Successfully installed nokogiri-1.6.6.2
Successfully installed jekyll-import-0.6.0
2 gems installed

Dann geht es allerdings sehr schnell:

ruby -rubygems -e 'require "jekyll-import";JekyllImport::Importers::MT.run({"dbname"   => "mt_migration","user"     => "root","password" => "geheim","host"     => "localhost","comments"     => false,"blog_id"=> 4})'

Den Parameter “Blog_id” musste ich noch hinzufügen da in meiner Movabletype Installation verschiedene Blogs laufen. Im Verzeichnis _posts findet man dann ein Markdown Dokument pro Blogeintrag und kann dann mit

 jekyll build --source /home/hbauer/blog --destination /var/www/shop

die Site generieren lassen. Vom Ergebnis bin ich extrem beeindruckt. Selbst alte Dokumente, die ich im Html Editor geschrieben haben, wurden einwandfrei importiert.

Damit die URL das gleiche Format wie in meiner alte

Was (noch) nicht geht:

Kleinere inhaltlich Nachbearbeitung sind notwendig:

  • einzelne Dokumente die selbst yaml header enthalten haben wurden nicht importiert (kann ich verstehen)
  • Pages werden als posts importiert (aber davon habe ich nur eine Handvoll)

Technische Anpassungen sind notwendig bei:

  • fehlenden Tags
  • manchen URLs die Kategorien enthalten und ein unterschiedlichem URL Format vorweisen
  • die alten Permalinks werden nicht übernommen

Die URL Formatierungen kann man einfach durch eine Anpassung in der Konfiguration lösen:

sublime _config.yml_
 permalink: /:year/:month/:title.html

Die Permalinks kann man fixen in dem man im Importer ein “encode” um den basename legt

 vi /var/lib/gems/1.9.1/gems/jekyll-import-0.6.0/lib/jekyll-import/importers/mt.rb
     'basename' => encode(post[:entry_basename],options)

Vielleicht bekomme ich es ja auch noch hin in den Importer eine Fußnote einzubauen die darauf hinweist das dies ein Importiertes Dokument ist und der eine oder andere Formatierungsfehler enthalten sein könnte.

Bis hier hin ist es einfach. Hoffentlich klappen die Anpassungen derTags auch so einfach

17.4.15
Weitere Beiträge zu: Jekyll  

Jekyll: Installation auf Debian 7

Die Basis Installation von jekyll auf Debian 7 ist recht einfach. Lediglich die Installation der Voraussetzung von Node.js bedarf einer Zusatzkonfiguration da Node.js aktuell nicht im Repository von Debian enthalten ist.

Zuerst die Voraussetzungen node.js installieren

vi /etc/apt/sources.list
	deb http://http.debian.net/debian wheezy-backports main
 apt-get update
 apt-get install nodejs

Ab hier geht es dann recht einfach weiter.

sudo apt-get install ruby ruby-dev libgsl-ruby rubygems
sudo gem install jekyll 

Jetzt legen wir ein Verzeichnis in unserem Nutzerverzeichnis an in dem wir die Basisstruktur unseres zukünftigen Blogs halten wollen.

mkdir /home/hbauer/blog
cd /home/hbauer/blog

und erstellen das Basisskelett.

 jekyll new .
New jekyll site installed in /home/hbauer/blog. 

Hier finden wir jetzt das Gerüst mit einigen Beispielseiten die wir natürlich später inhaltlich erweitern und von der Gestaltung anpassen müssen.

Im Verzeichnis “_posts” liegen alle unsere Blogeinträge. Aktuell nur ein Willkommenseintrag

   ls _posts
   2015-04-11-welcome-to-jekyll.markdown

Aus diesen in Markdown geschriebenen einzelnen Einträgen baut uns jekyll dann unsere gesamte Website. Die Struktur ist recht simple:

 ---
 layout: post
 title:  "Welcome to Jekyll!"
 date:   2015-04-11 09:17:18
 categories: jekyll update
 ---
 You'll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
 
 To add new posts, simply add a file in the `_posts` directory that follows the 

Auf die schnelle kann man sich das Ergebnis so ansehen

jekyll serve 
Configuration file: /home/hbauer/blog/_config.yml
        Source: /home/hbauer/blog
   Destination: /home/hbauer/blog/_site
  Generating... 
                done.
 Auto-regeneration: enabled for '/home/hbauer/blog'
 Configuration file: /home/hbauer/blog/_config.yml
   Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

Da ich bereits einen Webserver eingerichtet habe erstelle ich die Site in einem Verzeichnis des Apache Servers. Damit wird auch automatisch die Site neu erstellt wenn ein neuer Post eingestellt worden ist.

jekyll build --source /home/hbauer/blog --destination /var/www --watch
Configuration file: /home/hbauer/blog/_config.yml
        Source: /home/hbauer/blog
   Destination: /var/www
  Generating... 
                done.
Auto-regeneration: enabled for '/home/hbauer/blog'
  Regenerating: 1 file(s) changed at 2015-04-11 09:07:41 ...done in 0.31956339 seconds.
  Regenerating: 2 file(s) changed at 2015-04-11 09:07:48 ...done in 0.30905491 seconds.

seinfache jekyll sit

Meine nächsten Schritte sind dann

  1. Export der Blogeinträge aus Movabletype
  2. Erstellen eines neuen Templates
  3. Einbindung einer Volltextsuche
12.4.15
Weitere Beiträge zu: Jekyll  

Auf dem Weg von Movabletype hin zu Jekyll

Dieser Blog wird seit Beginn mit der Software Movabletype verwaltet. Ende 2009 standen für mich im wesentlichen nur Wordpress oder Movabletype zur Auswahl. MT war damals der altgediente Platzhirsch und Wordpress der aufsteigende Stern am Bloggerhimmel. Ich hatte mich damals zu MT entschieden weil Wordpress zum damaligen Zeitpunkt mit ständigen schwer installierbaren Sicherheitsupdates zu kämpfen hatten wohin gegen MT als stabil, robust aber etwas kniffelig bei der Installation galt.

In der Zwischenzeit hat sich Wordpress als Gewinner etabliert, Movabletype hat sich von der freien Bloggergemeinde verabschiedet und versucht sein Glück in der Unternehmenswelt. Die aktuelle Version steht nur noch als entgeltpflichtige Software zur Verfügung. Auch wenn ich bereit wäre für eine Lizenz zu bezahlen stehen die dortigen Preisvorstellung für mich außer Frage. Inzwischen sind auch die Supportforen mehr oder weniger abgeschaltet und die Informationsverbreitung über Sicherheitsupdates ist mehr oder weniger zufällig.

Also Zeit sich nach etwas neuen um zuschauen.

Betrachte ich mein aktuelles Schreibverhalten dann kann ich festhalten, dass ich alle meine Texte mit Markdown in einem Editor vorschreibe und dann nur noch mit Cut&Paste in das CMS einpflege. Die Kommentarfunktion habe ich komplett abgeschaltet da 99% der echten Diskussion in Facebook stattfindet und ich 99,9% der Kommentare als Spamkommentare löschen muss.

Zusätzlich bin ich eh auf der Suche nach Möglichkeiten “Programme” so weit wie möglich zu reduzieren da sich meine Bereitschaft zur Pflege von PHP / Perl / MySQL Anwendungen gegen null bewegt.

Jekyll

Da kam mir ein Hinweis auf Jekyll gerade recht. Jekyll ist einfach gesprochen eine Software die aus leicht strukturierten Markdown Texten einen Blog baut.

Der wesentliche Unterschied zu klassischen CMS Werkzeugen ist folgender. Wordpress und ähnliche Software erstellt das HTML dynamisch zu dem Zeitpunkt wenn der Besucher auf die Seite kommt. Es werden also dynamisch die Seiten erstellt. Der Vorteil ist das man sehr dynamische Seiten bauen kann. Der Nachteil ist das diese Programme auch Fehler und vor allem sicherheitsrelevante Fehler haben können. Jekyll hingegen erstellt die HTML Struktur nur bei Änderungen und erzeugt einen komplett statischen HTML Baum. Der Vorteil - es ist extrem schnell da nur statischer Text ausgeliefert wird und vor allem immer sicher da es kein Programm gibt das von außen angreifbar ist. Als wesentlicher Nachteil ist zu nennen das Dynamik wie Volltextsuche oder Kommentare so einfach nicht möglich sind.

Bei den Nachteilen stört mich momentan nur die Suche etwas. Dafür werde ich zu Beginn einfach die Suchengine DuckDuckGo verwenden.

Neben einigen anderen Gründen (über die man viel lesen kann) erhoffe und erwarte ich aus der Integration von jekyll in github eine hohe Zukunftsicherheit. Und wenn nicht. Statische Html Seiten kann man in Null Komma Nichts überall hin migrieren.

Die nächsten Schritte werden sein

  1. Aufbau eines lokalen Testservers
  2. Migration meiner Blogs die ich auf Movabletype betreibe
11.4.15
Weitere Beiträge zu: Movabletype   Jekyll  

Dies ist ein privater Blog von Hagen Bauer- berufstätiger Vater, Ehemann, Naturliebhaber, Läufer, Zelter, technikverliebt.


Creative Commons License
This blog is licensed under a Creative Commons License