uberspace und git mit Jekyll und Bundler

“Hello world!” - Traditionen

Einer vielleicht nur empfundenen oder sogar erfundenen Tradition folgend, beschreibt der erste Post der Seite, wie dieselbige erstellt wurde.

Gehosted wird das Ganze auf uberspace

Erstellt wurde die Seite mit Jekyll

Das Theme ist tale

Insgesamt will ich drei Seiten auf einem uberspace hosten. Ich weiß, dass widerspricht der Empfehlung, da aber alle Seiten statisch sind und auch auf keine Datenbank zugreifen, ich auf diesem uberspace auch keinen Mailserver o.ä. betreibe, hoffe ich, dass da keine allzu dumme Idee ist.

Ein späterer Umzug einer Seite auf einen eigenen uberspace sollte, solange alles statisch bleibt (was es soll) kein allzu großes Problem darstellen, sollte es doch mal nötig werden.

Lokal habe ich Jekyll schon installiert und die einzelnen Seiten erstellt und soweit möglich alles vorbereitet. Darauf möchte ich hier jetzt auch nicht weiter eingehen, dazu gibt es glaub ich genügend Anleitungen online.

Die nächsten Schritte:

Uberspace klicken. Passwörter für den Dashboard login und ssh vergeben. Die ssh-keys werden zu einem späteren Zeitpunkt vergeben (siehe auch uberspace manual).

Einmal per ssh auf dem uberspace angemeldet, zunächst ein Verzeichnis für meine Repos anlegen.

$ mkdir repos

In diesem dann Unterverzeichnisse für die einzelnen Seiten als .git repos anlegen:

$ cd repos/
$ mkdir SEITE1.git SEITE2.git SEITE3.git

Jedes Verzeichnis nun als git bare repos initialisieren:

$ cd SEITE1.git 
$ git init --bare

Das gleiche entsprechend für die anderen zwei Seiten.

Bevor nun Jekyll und Bundler installiert werden, sollte die bereits vorinstallierte Ruby-Version zum user PATH zugefügt werden.

Dafür jetzt in der ~/.bash_profile noch folgende Zeilen anhängen:

export PATH=/package/host/localhost/ruby-2.5.0/bin:$PATH
export PATH=$HOME/.gem/ruby/2.5.0/bin:$PATH

und letztlich mit:

$ . ~/.bash_profile

die aktualisierte Kofiguration laden und jetzt können auch schon Jekyll und Bundler installiert werden:

$ gem install jekyll bundler

Die Jekyll-Seiten sind, wie schon gesagt lokal vorbereitet und werden über eine Dropbox synchron gehalten. So kann ich von jedem Laptop und viel wichtiger über jedes Smartphone neue Beiträge schreiben oder bearbeiten.

Im lokalen Jekyll Ordner wird nun git initialisiert und das ganze Verzeichnis in die Versionierung aufgenommen.

$ git init 
$ git add .
$ git commit -m "first commit"

Das Repository auf uberspace muss nun lokal als Remote eingetragen werden.

Im dem lokalen Ordner der Seite:

$ git remote add uberspace NUTZER@mueller.uberspace.de:repos/SEITE.git 

Nun müssen noch die Domains vorbereitet werden:

$ uberspace web domain add DOMAIN.tld
$ uberspace web domain add www.DOMAIN.tld

Nicht vergessen, dass jeweils ein Eintrag für www Version und ohne erfolgen sollte, das heißt bei meinen drei Seiten sind es dann sechs Einträge.

Dann erhält man für jeden Eintrag die entsprechenden A und AAAA records, diese müssen dann beim Domain-Anbieter entsprechend eingetragen werden.

Jetzt noch die Verzeichnisse anlegen in denen die von Jekyll fertig ausgespuckte Seite gehosted wird anlegen:

$ mkdir /var/www/virtual/USER/html/SEITE

Dann müssen noch die entsprechenden Links erzeugt werden:

$ cd /var/www/virtual/USER
$ ln -s html/SEITE DOMAIN.tld
$ ln -s html/SEITE www.DOMAIN.tld

(wieder an die www Versionen denken)

Jetzt kommen wir zum Herzstück des ganzen Systems. Mit git ist es möglich sogenannte post-receive-hooks zu erstellen. Das sind im Endeffekt einfach Scripte, die ausgeführt werden sobald dem git-Repo neue Daten hinzugefügt werden.

In dem bereits erstellten bare-repo Ordner findet sich das Unterverzeichnis /hooks. Hier sind Beispiel-Hooks schon drin, allerdings, zumindest bei mir, kein post-receive hook. Nicht schlimm. Erstellen wir halt eins.

$ cd ~/repos/SEITE.git/hooks
$ touch post-receive
$ vim post-receive

Das folgende Script soll nun jedes Mal ausgeführt werden, wenn ich mittels git Inhalte zu meinen Seiten pushe:

source ~/.bash_profile

GIT_REPO=$HOME/repos/SEITE.git
TMP_GIT_CLONE=$HOME/tmp/git/SEITE
GEMFILE=$TMP_GIT_CLONE/Gemfile
PUBLIC_WWW=/var/www/virtual/$USER/html/SEITE

git clone $GIT_REPO $TMP_GIT_CLONE
BUNDLE_GEMFILE=$GEMFILE bundle install --path ~/repos/vendor/bundle
BUNDLE_GEMFILE=$GEMFILE bundle exec jekyll build -s $TMP_GIT_CLONE -d $PUBLIC_WWW
rm -Rf $TMP_GIT_CLONE
exit

Kleine Anmerkung noch zum Script selber:

Ich möchte es vermeiden, dass bei jedem push alle gems neu installiert werden müssen. Das kostet nicht nur Zeit, sondern auch unnötig Resourcen.

Daher die Zeile bundle install –path ~/repos/vendor/bundle. Beim zweiten erstellen werden die gems dann aus diesem Ordner geladen.

In der _config.yml der Seite sollte dann aber noch ein

exclude: [vendor]

eingefügt werden.

Jetzt muss das Script nur noch ausführbar gemacht werden:

$ chmod +x ~/repos/SEITE/hooks/post-receive

Ein Satz noch zu url: und baseurl: in der _config.yml

Da die Seiten vorerst nur unter NUTZER.uber.space/SEITE/ erreichbar ist, zumindest so lange, bis die Domain draufgeschaltet wird, muss in der _config.yml noch die url und baseurl dementsprechend eingestellt werden.

url                      : "https://NUTZER.uber.space"
baseurl                  : "/SEITE/"

Und wenn alles geklappt hat, kann jetzt mit:

$ git push uberspace master 

die Seite zum Server gepusht werden, dort werden dann Jekyll und Bundler angeschubst und sie spucken mir meine Seite in das richtige Unterverzeichnis im /html Ordner und wir können diese Seite hier lesen.

Und falls du lieber Leser, diese Seite hier lesen kannst, dann hat auch der Domain-Eintrag funktioniert.

Inspirationsquellen

Ich habe mir das natürlich nicht alles selber ausgedacht, hier sind die Seiten, die ich als Inspirationsquellen und als Leitfaden benutzt habe:

https://www.wittistribune.com/blog/post/jekyll-auf-uberspace-mit-git

https://hoeser-medien.de/2018/01/uberspace-domain-setup/

https://flohei.de/blog/jekyll-auto-build

https://hejnoah.com/posts/deploy.html

https://jekyllrb.com/docs/deployment/automated/

https://wiki.uberspace.de

https://manual.uberspace.de

https://bundler.io/docs.html