Bisher habe ich für meinen Blog immer ein fertiges Theme verwendet. Das war meistens ein Kompromiss aus: das Theme ist gut, und ich habe nicht die Zeit und das Wissen um ein Theme selber zu bauen. Wie das immer mit einem Kompomiss ist, es ist eben nicht perfekt. Ich weiß gar nicht mehr genau was der Grund war, jedoch manifestierte sich jetzt der Gedanke, endlich mal ein eigenes Theme zu bauen.
Das Problem an fertigen Themes ist, das sie für mich oftmals zu überladen sind und ich diese Themes erstmal entschlacken muss. Javascript raus, Analytisches Gedöns raus, Socialmedia Links raus, Discourse raus. Ziemlich viel was das so raus muss, also kann ich das auch gleich selber machen.
Mein Blog wird mit Hugo gebaut. Ein Theme für Hugo besteht aus zwei Teilen. Den Template Anweißungen für Hugo um das HTML Gerüst zu bauen, und den CSS Anweißungen für die Formgebung. Wenn man einmal die Logik von Hugo verstanden hat, sind die Templates für ein eigenes Theme schnell gebaut. Wesentlich mehr Zeit habe ich für das CSS gebraucht.
Das Redesign habe ich gleich mal zum Anlass genommen auch meinen Workflow zu ändern. Bisher habe ich das Blog lokal gebaut und nur die statischen Seiten gepusht. Warum nicht das Blog direkt auf dem Server bauen lassen? Das ermöglicht mir meinen Blog auch von unterwegs zu pflegen und ich habe gleich ein Backup meiner Blog Sourcen.
Serverseitig: ein Git Repo anlegen.
$ mkdir blog.git
$ cd blog.git
$ git init --bare
Lokal: die bisherigen Blog Sourcen in Git aufnehmen.
$ git init .
$ git add --all
$ git commit -m "commit msg"
Das lokale Repo initial auf den Server pushen.
$ git remote add origin ssh://user@host.uberspace.de:/home/user/blog.git
$ git push origin master
Damit das Blog auf dem Server gebaut werden kann, benötigt man dort auch Hugo. Das 64Bit Linux Binary findet man auf Github. Das entpackte Binary legt man nach ~/bin/hugo.
#!/bin/sh
$ wget https://github.com/gohugoio/hugo/releases/download/v0.30.2/hugo_0.30.2_Linux-64bit.tar.gz
$ tar -xzf hugo_0.30.2_Linux-64bit.tar.gz
$ mv hugo ~/bin/hugo
Damit beim pushen das Blog automatisch gebaut wird, benötigt man noch Anweisungen in einem serverseitigen Git Hook in der Datei blog.git/hooks/post-receive.
#!/bin/sh
GIT_REPO=$HOME/git/blog.git
TMP_GIT_CLONE=$HOME/tmp/blog
BUILD_WWW=/var/www/virtual/user/domain.tld/blog/
if [ -d $TMP_GIT_CLONE ]; then
cd $TMP_GIT_CLONE
unset GIT_DIR
git pull
else
git clone $GIT_REPO $TMP_GIT_CLONE
cd $TMP_GIT_CLONE
fi
. /home/user/.bash_profile
hugo -t nerd --renderToMemory --quiet
if [ $? -ne 0 ]; then
echo "build failed"
exit
fi
rm -rf $BUILD_WWW
mkdir -p $BUILD_WWW
hugo -t nerd -s $TMP_GIT_CLONE -d $BUILD_WWW
cd $BUILD_WWW
echo "ErrorDocument 404 /blog/404.html" > .htaccess
echo "AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript text/javascript" >> .htaccess
#rm -Rf $TMP_GIT_CLONE
chmod 755 $BUILD_WWW
find $BUILD_WWW -type f -exec chmod 644 {} \;
find $BUILD_WWW -type d -exec chmod 755 {} \;
exit 0
Das Script ist quick & dirty und baut das Blog direkt in das Webserver Verzeichnis. Bevor die finale Version gebaut wird, prüft das Script noch mit hugo -t nerd --renderToMemory --quiet, ob Hugo die aktuelle Version fehlerfrei bauen kann. Dann generiere ich noch eine .htaccess Datei die eine Anweisung für den Webserver baut, um auf die richtige 404 Datei zu verweisen. Zum Schluss werden noch die Datei- und Verzeichnis Berechtigungen gesetzt.