re:claim your blog engine
$(blogging the nerd way)
re:claim your blog engine
Einfach Bloggen mit:
lesbar formatierte Text-Dateien
Generator für statische Websites
verteilte Versionsverwaltung
…soll in seiner Grundform veröffentlicht werden können, ohne den Anschein zu erwecken, es sei mit Formatierungsbefehlen versehen.
Markdown ist eine vereinfachte Auszeichnungssprache, die von John Gruber und Aaron Swartz entworfen wurde. Ein Ziel von Markdown ist, dass schon die Ausgangsform ohne weitere Konvertierung leicht lesbar ist.
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
hat Entwicklung von Markdown beeinflusst
noch einfacher, weniger Potential
älteste der Markdown-ähnlichen Sprachen
gute Alternative
Wiki-ähnlich
nicht weiterentwickelt
…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:
$ 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)
Jekyll verknüpft jede einzelne Datei mit der Vorlage und speichert die HTML-Seiten unterhalb von _site
unter demselben relativen Pfad wie die Originalinhalt mit der Endung .html
ab. Allen anderen Dateien wie CSS-, JavaScript- oder Bilddateien werden relativ kopiert. Sämtliche Dateien und Verzeichnisse, die mit einem Punkt oder Unterstrich anfangen (_site, _layouts …) werden ignoriert.
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
.
Liquid is the templating engine, developed for and used by Shopify.
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>
…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-Unterverzeichnis 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
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)
()
Vorlage für diese Presentation: reveal-jekyll