re:claim your blog engine

$(blogging the nerd way)

Erstellt mit reveal.js, Markdown und Jekyll von:

Thomas Friese

()
Audio-Mitschnitt bei Voice Republic 

re:claim your blog engine

Einfach Bloggen mit:

Markdown

lesbar formatierte Text-Dateien

Jekyll

Generator für statische Websites

Git

verteilte Versionsverwaltung

Markdown

…soll in seiner Grundform veröffentlicht werden können, ohne den Anschein zu erwecken, es sei mit Formatierungs­befehlen versehen.

Markdown – die Sprache

Vorteile

  • Werkzeug ist der Texteditor der Wahl
  • einfach zu lesen
  • einfacher Syntax (wenige Formatierungs-Regeln)
  • weite Verbreitung

Nachteile

  • weniger vielseitig als HTML
  • muss noch zu HTML gewandelt werden

Einfaches Beispiel in Markdown

# [Markdown](http://markdown.de/)

## Formatierte Texte so einfach wie möglich:

Damit sie jede(r) *schnell*

1. lesen und
3. schreiben

kann.

Ähnliche Sprachen

reStructuredText

  • hat Entwicklung von Markdown beeinflusst
  • noch einfacher, weniger Potential

Textile

  • älteste der Markdown-ähnlichen Sprachen
  • gute Alternative

Creole (Markup)

  • Wiki-ähnlich
  • nicht weiterentwickelt

Jekyll

…ist ein in Ruby geschriebener Generator für statische Websiten.

Was macht Jekyll?

Jekyll ist ein Kommandozeilen-Programm.

Es generiert mittels der Ruby-Umgebung aus Text-Dateien statische Webseiten.

Dafür nutzt es die Liquid-Sprache für Templates. So können in Jekyll eigene Filter und Tags für kleine Aufgaben eingesetzt werden.

Einstellungen werden in der zentralen Datei _config.yml gespeichert.

Jekyll ist

einfach

  • Texte werden mit Markdown (oder Textile) formatiert
  • Textdateien mit individueller Ordnung
  • keine anfälligen PHP-Scripte
  • kein Passwort (mit Git und SSH-Key)

resourcenschonend

  • statische Seiten werden beim Anlegen generiert
    • läuft auch auf schwachen Servern
  • keine Datenbank

ein vollständiges Blog-System

  • Permalinks, Kategorien, Tags, Seiten, Übersichten
  • Aussehen vollständig anpassbar
  • mit Plugins erweiterbar

Willkommen in Nerdistan!

Nachteile von Jekyll

  • kein grafisches Admin-Interface
  • keine Echtzeit-Plugins für Chat, Kalender oder Kommentare o.ä.
  • keine zentrale Gallerie für Themes
  • viele Sprachen:
    • Markdown
    • Ruby
    • Liquid
    • YAML
    • Shell, SSH, Git
    • HTML, CSS, Javascript

Installation von Jekyll

Linux Debian-like (z.B. Ubuntu™):

$ sudo apt-get install ruby ruby-dev jekyll

Mac:

mit Homebrew:

$ ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)" # installiert den Homebrew Paketmanager
$ brew install brew-gem # installiert den Ruky-Paketmanager
$ brew gem jekyll       # installiert Jekyll

mit OS-X-Paketmanager:

Ruby-Paket herunterladen und installieren:

$ gem install jekyll

Das erste Jekyll-Projekt

Struktur anlegen und in den Ordner wechseln

$ jekyll new jekyll-demo && cd jekyll-demo

Seite generieren

$ jekyll build # (--destination _testsite)

Testseite starten

$ jekyll serve # (--port 8000) (--watch)

Die Dateistruktur

.
├── _drafts (Entwürfe / bei Bedarf anlegen)
|   ├── eine-Idee-zur-Rettung-der-Welt.textile
|   └── noch-eine-Idee.markdown
├── _includes (HTML-Fragmente, die eingebunden werden können)
|   ├── footer.html
|   ├── head.html
|   └── header.html
├── _layouts (die Templates)
|   ├── default.html
|   ├── page.html (für einzelne Seiten)
|   └── post.html (für Blog-Posts)
├── _posts (hier kommen alles Blogeinträge hinein)
|   └── 2014-05-06-welcome-to-jekyll.markdown
├── _site (hier generiert Jekyll die Seiten hinein)
├── css
|   └── main.css (das Style-Sheet des Blogs)
├── .gitignore (für git)
├── _config.yml (Konfiguration)
├── about.md (Beispiel einer einzelnen Seite)
├── feed.xml (RSS-Feed)
└── index.html (das Template für die Index-Seite)

Die Konfigurationsdatei

_config.yml

name:        Bloggen wie ein Nerd # Platz für Kreativität
highlighter: rouge                # für farbige Anzeige von Code
markdown:    kramdown             # seit Jekyll 2.0 default

# zusätzliche, optionale Parameter:
timezone:    Europe/Berlin
future:      false                # für vorbereitete Posts
url:         # wenn nicht sicher, dann frei lassen
permalink:   /:categories/:year/:month/:title.html
paginate:    10                   # n Posts auf der Index-Seite

author:      Thomas Friese
description: Presentation für die rp14
disqus_shortname:

include: [".htaccess"]            # für Dateien mit "." oder "_"
exclude: ["_ORDNER_", "_DATEI_"]

Mein erster Post

Datei 2014-05-07-toller-titel.md in _posts oder _drafts anlegen.

---
layout:     post                # Template für Blogpost oder Seite
title:      "Mein erster Post"
date:       2014-05-07 15:15:00
categories: jekyll update
tags:       [eins, zwei]
---
 
MARKDOWN_INHALT

Der Kopf zwischen den ----Zeilen heißt “Front-matter”.

Die Parameter im Front-matter werden vom Liquid-Template abgerufen.

layout: bestimmt die Art der HTML-Seite aus dem Ordner _layouts.

Templating mit Liquid

Im Template wird der Parameter title mit {{ page.title }} abgerufen.

title:      "Mein erster Post"

wird zu HTML gewandelt

<title>Mein erster Post</title>

und aus

title:      "Mein erster Post"
date:       2014-05-07 15:15:00
categories: jekyll update

wird die URL
/jekyll/update/2014/05/07/mein-erster-post.html.

Tags im Template

Die Parameter

tags: [eins, zwei]

werden mit

{% for tag in page.tags %}
<a href="/tag/{{ tag | escape }}.html">{{ tag }}</a><br />
{% endfor %}

in _layouts/default.html zu folgendem HTML

<a href="/tag/eins.html">eins</a>
<a href="/tag/zwei.html">zwei</a>

Links für Jekyll

da geht noch mehr

Alternativen zu Jekyll

Git

…ist ein schnelles, dezentrales System zum Verwalten verschiedener Versionen von Projekten.

Git

Vorteile:

  • Versionsverwaltung – wenn mal was schief geht
  • sicher – Übertragung mit SSH
  • OpenSource – frei, kostenlos, Quellcode einsehbar
  • mehrere Benutzerinnen an verschiedenen Rechnern
  • Community und Anleitungen im Netz

Nachteile:

  • erfordert Lernbereitschaft
  • (zu) viele Möglichkeiten

git init

Neues git-Hauptverzeichnis auf dem Server anlegen (remote repository):

$ mkdir PROJEKT.git # Projekt-Ordner namens "PROJEKT.git" anlegen
$ cd PROJEKT.git    # in den Ordner wechseln
$ git init -bare    # leeres git repository anlegen

Am eigenen Rechner den Arbeitsordner anlegen und initialisieren:

$ cd PROKEKT    # in den Arbeitsordner namens "PROJEKT" wechseln
$ git init      # Verzeichnis an git anmelden
$ git remote add -f MASTER NAME@SERVER:/PFAD/PROKEKT.git
                # Verzeichnisse verbinden

Co-Working

Änderungen an Server übertragen (commit):

$ git add -A # alle Änderungen lokal mitteilen
$ git commit # die Änderungen mit Server abgleichen
$ git push   # alles zum Server übertragen

Mit weiteren Computern arbeiten:

$ git clone NAME@SERVER:/PFAD/PROKEKT.git PROJEKT # download

Änderungen vom Server abholen:

$ git pull

SSH-Key anstatt Passwort

Einen privaten und einen öffentlichen Schlüssel generieren

[erna@Heimrechner ~]$ ssh-keygen -t rsa
# ...
# Your identification has been saved in /home/erna/.ssh/id_rsa.
# Your public key has been saved in /home/erna/.ssh/id_rsa.pub.
# ...

Dem Server den öffentlichen Key übergeben

$ rsync -v -e ssh --archive ~/.ssh/id_rsa.pub _SERVER_:new_key.pub
$ ssh _SERVER_ "test -d .ssh || mkdir .ssh && chmod 700 .ssh"
$ ssh _SERVER_ "cat new_key.pub >> .ssh/authorized_keys"
$ ssh _SERVER_ "shred -u new_key.pub"
$ ssh-add ~/.ssh/id_rsa.pub

Alles von selbst

Git-Hooks lösen bei Git-Aktionen andere Aktionen aus.

Ein Hook ist ein Skript, dass sich im Git-Unter­verzeichnis hooks befindet. Die Skriptsprache wird am Anfang des Skriptes festgelegt (z.B. #!/bin/bash).

#!/bin/sh
GIT_WORK_TREE=/PFAD_HTML_ORDNER git checkout -f
LC_ALL="en_US.UTF-8" /.../bin/jekyll build -s \
/PFAD_HTML_ORDNER -d /PFAD_HTML_ORDNER/_site
exit

GIT_PROJEKT/hooks/post-receive löst auf dem Server den Shell-Befehl jekyll build aus

Links für Git

Wenn nicht Git, was dann?

Run, Jekyll, run

Zum Testen auf dem Computer überwacht Jekyll veränderungen und generiert sie neu mit dem Befehl

$ jekyll serve --watch

Und damit Jekyll auf dem Server im Hintergrund läuft

$ jekyll serve -B # (--detach)

Jekyll mit Apache braucht eine .htaccess-Datei

<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
    RewriteBase /
    RewriteRule (.*) http://localhost:4000/$1 [QSA,P]
</IfModule>

and this is…

the end

(an dieser Stelle ertönt das große Finale)

re:claim your blog engine

$(blogging the nerd way)

Thomas Friese

()

Vorlage für diese Presentation: reveal-jekyll