Zum Hauptinhalt springen
  1. Posts/

Blogumzug von Wordpress zu Jekyll

·1525 W├Ârter·8 min
Christian
selfhosted sonstiges
Christian
Autor
Christian
Macht was mit Computer ­čĺ╗

In den letzten Jahren habe ich immer wieder aus verschiedenen Gr├╝nden die Blogsoftware gewechselt. Dieses Mal bin ich von Wordpress zu Jekyll umgezogen. Mein Vorgehen und Gr├╝nde m├Âchte ich in diesem Beitrag erl├Ąutern.

Was ist Jekyll?
#

Jekyll ist eine Blogsoftware bzw. ein sogenannter Static Site Generator. Prim├Ąr wird Jekyll von GitHub Pages verwendet. Die meisten Tutorials die man so im Internet finden beziehen auch genau darauf. Grundlegend baut die Software Markdown-Dateien zu statischen HTML Dateien um diese mit einem einfachen Webserver ausliefern zu k├Ânnen. Im bequemsten Fall sogar mit dem integriertem.

Gr├╝nde f├╝r meinen Wechsel
#

Gr├╝nde k├Ânnten mannigfaltig sein. Schlussendlich l├Ąuft es aber darauf hinaus, dass Wordpress immer m├Ąchtiger wird. Das hat seine Vor- und Nachteile. Sicherlich ist es sehr praktisch f├╝r jeden Anwendungsfall Wordpress verwenden zu k├Ânnen, denn die verschiedenen Plugins und Themes machen das m├Âglich. Viele gro├čen Webseiten basieren auf Wordpress und mit dem notwendigen Know-How und Ressourcen lassen sich auch sehr Performance Webseiten bauen. Der Nachteil der Erweiterbarkeit liegt entsprechend auch in der Pflege und den Bem├╝hungen einen guten Wert f├╝r den LCP zu erreichen. Mir ist es im Laufe der Zeit nicht gelungen einen guten Wert zu erreichen. Am Hoster Netcup ­čĺ liegt es nicht, da ich hier auch verschiedene ausprobiert habe. Zudem bin ich im Moment dabei mich von verschiedenen gro├čen Softwareprodukten zu trennen und auf freiere Software zu setzen.

In der Webentwicklung steht LCP f├╝r “Largest Contentful Paint”. Es handelt sich um eine wichtige Metrik f├╝r die Ladeleistung einer Webseite. LCP misst die Zeit, die ben├Âtigt wird, um den gr├Â├čten sichtbaren Inhalt im Viewport eines Nutzers w├Ąhrend des Seitenladens zu rendern. Ein guter LCP-Wert ist wichtig, um sicherzustellen, dass Webseiten schnell und reibungslos geladen werden und Benutzer eine bessere Erfahrung haben. {:.note title=“Was ist LCP?”}

Installation von Jekyll
#

Die Installation von Jekyll kann unter verschiedenen Betriebssystemen durchgef├╝hrt werden. Allerdings ist Windows nicht mit dabei. Wenn man allerdings den Umweg ├╝ber WSL2 geht, kann man der regul├Ąren Linux Installation f├╝r die verwendete Linux-Distribution folgen. In dieser Anleitung gehe ich erst mal auf die Installation unter MacOS ein, da ich pers├Ânlich dieses Betriebssystem verwende. Alternative Installationen finden sich nat├╝rlich in der offiziellen Dokumentation. Gern kann dort diese entsprechend verwendet werden.

Installation unter MacOS
#

Installation des Paketmanagers brew
#

MacOS Nutzer haben in der Regel schon den Paketmanager brew installiert. Falls du das noch nicht getan hast, l├Ąsst sich das mittels

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

erledigen. Grunds├Ątzlich sollte aber immer beim Ausf├╝hren von Programmen direkt aus dem Internet vorsichtig sein! Sobald das erledigt ist, brauchen wir jetzt den Ruby Installer denn Jekyll ist in der entsprechenden Programiersprache geschrieben.

Installation von ruby
#

brew install chruby ruby-install xz

Dies kann durchaus ein paar Minuten dauern, das ist nicht ungew├Âhnlich. Nun installieren wir noch ruby selbst.

ruby-install ruby 3.2.2

Beachte, dass die Version 3.2.2 die zum Zeitpunkt des Artikels die aktuellste Version ist, dass kann zum jetzigen Zeitpunkt anders sein. Der n├Ąchste Schritt ist, dass wir ruby und die ganzen Environment Variablen noch aktivieren und in die MacOS Konfiguration speichern

echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc
echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc
echo "chruby ruby-3.2.2" >> ~/.zshrc # run 'chruby' to see actual version

Installation von Jekyll
#

Endlich kommen wir zu dem Punkt, dass wir Jekyll selbst installieren k├Ânnen.

gem install jekyll

Auch der Schritt kann einige Zeit lang brauchen. Anschlie├čend haben wir Jekyll installiert.

Jekyll Webseite anlegen
#

Sobald wir also eine lauff├Ąhige Version von Jekyll haben, k├Ânnen wir nun eine Webseite anlegen. Wir suchen uns also einen entsprechenden Ordner aus in dem die Installation durchgef├╝hrt werden soll. Ich mache sowas immer in einem Unterordner in meinem Homeverzeichnis.

cd ~

Den Namen den wir im install Befehl mitgeben wird auch der Name des Ordners sein. Nat├╝rlich kann der Prozess beliebig oft ausgef├╝hrt werden, falls euch das nicht gef├Ąllt.

jekyll new blog

Es entsteht dann eine ungef├Ąhr solche Ausgabe

Running bundle install in /Users/teqqy/blog...
  Bundler: Fetching gem metadata from https://rubygems.org/............
  Bundler: Resolving dependencies...
  Bundler: Fetching rouge 4.1.3
  Bundler: Installing rouge 4.1.3
  Bundler: Bundle complete! 7 Gemfile dependencies, 33 gems now installed.
  Bundler: Use `bundle info [gemname]` to see where a bundled gem is installed.
New jekyll site installed in /Users/teqqy/blog.
[21:31:33] [cost 3.162s] jekyll new blog

Nun wechseln wir in das Verzeichnis und gucken mal was so f├╝r Dateien und Ordner dort hinterlegt sind.

[21:32:50] [~/blog] ÔŁ▒ÔŁ▒ÔŁ▒ ls -l
total 48
-rw-r--r--  1 teqqy  staff   419 31 Jul 21:31 404.html
-rw-r--r--  1 teqqy  staff  1309 31 Jul 21:31 Gemfile
-rw-r--r--  1 teqqy  staff  2052 31 Jul 21:31 Gemfile.lock
-rw-r--r--  1 teqqy  staff  2079 31 Jul 21:31 _config.yml
drwxr-xr-x  3 teqqy  staff    96 31 Jul 21:31 _posts
-rw-r--r--  1 teqqy  staff   539 31 Jul 21:31 about.markdown
-rw-r--r--  1 teqqy  staff   175 31 Jul 21:31 index.markdown

Wie man sieht, sind das nicht viele Dateien. Nun sollten wir die _config.yml anpassen. Die Begriffe sollten selbsterkl├Ąrend sein. Die Werte sind aber erst mal keine Pflicht. Um jetzt die HTML Dateien bauen zu lassen verwenden wir folgenden Befehl

jekyll serve

Es erscheinen diverse Fehlermeldungen und Warnungen auf Grund von veralteten Abh├Ąngigkeiten. Leider sind diese immer noch nicht sauber gefixt. Die letzte Ausgabe sollte etwas in der Art von

Run in verbose mode to see all warnings.
                    done in 0.401 seconds.
 Auto-regeneration: enabled for '/Users/teqqy/blog'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

Enthalten. Jetzt k├Ânnt ihr euren Browser ├Âffnen und die URL http://127.0.0.1:4000 verwenden.

Wir brechen dann wieder den laufenden Server mit CTRL-C ab. Wenn wir jetzt nochmal die Verzeichnisse auflisten sehen wir, dass dort ein neuer Ordner _site erstellt worden ist.

[21:40:43] [~/blog] ÔŁ▒ÔŁ▒ÔŁ▒ ls -l
total 48
-rw-r--r--  1 teqqy  staff   419 31 Jul 21:31 404.html
-rw-r--r--  1 teqqy  staff  1309 31 Jul 21:31 Gemfile
-rw-r--r--  1 teqqy  staff  2052 31 Jul 21:31 Gemfile.lock
-rw-r--r--  1 teqqy  staff  2079 31 Jul 21:31 _config.yml
drwxr-xr-x  3 teqqy  staff    96 31 Jul 21:31 _posts
drwxr-xr-x  8 teqqy  staff   256 31 Jul 21:35 _site
-rw-r--r--  1 teqqy  staff   539 31 Jul 21:31 about.markdown
-rw-r--r--  1 teqqy  staff   175 31 Jul 21:31 index.markdown

Dieser Ordner ist nun schlussendlich das wichtige. Dieser kann auf einen Webserver kopiert und ausgeliefert werden.

Webseite bereitstellen
#

Viele Tutorials im Internet verwenden den jekyll serve Befehl um die Webseite auszuliefern und richten einen Webserver wie NGINX oder apache2 als reverse proxy ein. Dies ist allerdings nicht der vom Hersteller empfohlene Weg. Ich f├╝r meinen Teil habe das Verzeichnis auf meinen Webserver kopiert und liefere es mit einem Nginx Docker-Container aus. Dieser hat entsprechende Traefik Labels, welches sich um die Zertifikate etc k├╝mmert. Sicherlich kein Setup f├╝r jeden.

Nginx Docker Container
#

Meine verwendete docker-compose.yaml Datei kannst du nat├╝rlich ├╝bernehmen wenn du m├Âchtest. Du m├╝sstest nur die Werte entsprechend anpassen.

---
version: "3.8"

services:
  nginx:
    image: nginx
    container_name: nginx
    volumes:
      - ./_site:/usr/share/nginx/html
      - ./nginx.conf:/etc/nginx/conf.d/www_nginx.conf
    labels:
      - "traefik.enable=true"
      - "traefik.http.middlewares.nginx-https.redirectscheme.scheme=https"
      - "traefik.http.middlewares.nginx-compress.compress=true"
      - "traefik.http.routers.nginx-http.entrypoints=web"
      - "traefik.http.routers.nginx-http.rule=Host(`www.example.com`) || Host(`example.com`)"
      - "traefik.http.routers.nginx-http.middlewares=teqqy-https@docker"
      - "traefik.http.routers.nginx.entrypoints=websecure"
      - "traefik.http.routers.teqqy.rule=Host(`www.example.com``) || Host(`example.com``)"
      - "traefik.http.routers.nginx.tls=true"
      - "traefik.http.routers.nginx.tls.certresolver=default"
      - "traefik.http.routers.nginx.middlewares=secHeaders@file"
      - "traefik.http.routers.nginx.middlewares=teqqy-compress"
      - "traefik.http.services.nginx.loadbalancer.server.port=80"
    networks:
      - teqqywp
      - traefik_proxy

networks:
  traefik_proxy:
    external:
      name: traefik_proxy
  teqqywp:
    driver: bridge

Nginx Konfiguration
#

Ich binde noch eine eigene nginx.conf Datei ein in der ich noch Anpassungen f├╝r Caching und anderes mache.

server {
  listen 80;
  server_name example.com www.example.com

  root /usr/share/nginx/html;
  index index.html index.htm;

  if (!-f "${request_filename}index.html") {
    rewrite ^/(.*)/$ /$1 permanent;
  }

  if ($request_uri ~* "/index.html") {
    rewrite (?i)^(.*)index\.html$ $1 permanent;
  }

  if ($request_uri ~* ".html") {
    rewrite (?i)^(.*)/(.*)\.html $1/$2 permanent;
  }

  error_page 404 /404.html;

  location / {
    try_files $uri $uri.html $uri/ =404;
  }
  location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
    expires 30d;
    add_header Pragma public;
    add_header Cache-Control "public";
  }

  # reduce the data that needs to be sent over network -- for testing environment
  gzip on;
  # gzip_static on;
  gzip_min_length 10240;
  gzip_comp_level 1;
  gzip_vary on;
  gzip_disable msie6;
  gzip_proxied expired no-cache no-store private auth;
  gzip_types
    # text/html is always compressed by HttpGzipModule
    text/css
    text/javascript
    text/xml
    text/plain
    text/x-component
    application/javascript
    application/x-javascript
    application/json
    application/xml
    application/rss+xml
    application/atom+xml
    font/truetype
    font/opentype
    application/vnd.ms-fontobject
    image/svg+xml;

  # allow the server to close connection on non responding client, this will free up memory
  reset_timedout_connection on;

  # request timed out -- default 60
  client_body_timeout 10;

  # if client stop responding, free up memory -- default 60
  send_timeout 2;

  # server will close connection after this time -- default 75
  keepalive_timeout 30;

  # number of requests client can make over keep-alive -- for testing environment
  keepalive_requests 100000;

}

Nun kann der Container gestartet werden und nach kurzer Zeit k├Ânnt ihr die Seite ├╝ber die angegebene URL aufrufen.

Wordpress Daten exportieren
#

F├╝r den Export habe ich das Wordpress Plugin Wordpress to Jekyll Exporter verwendet. Es nicht das beste Plugin aber f├╝r mich hat es gereicht. In Wordpress k├Ânnen wir dann unter Werkzeuge den Export ausf├╝hren und bekommen eine ZIP-Datei zum Download. Die Inhalte k├Ânnen wir direkt in unser Jekyll Verzeichnis kopieren und die Seiten neu genierieren lassen.

jekyll serve

Nun k├Ânnen wir den Ordner _site wieder auf unseren Webserver kopieren. Den Container m├╝ssen wir nicht neu starten, denn nginx liefert die Dateien direkt aus. Ein einfacher reload im Browser reicht daf├╝r aus.

Jekyll anapssen
#

Jetzt liegt es an euch, Jekyll entsprechend den Bed├╝rfnissen anzu passen. Hei├čt ein Theme herunter zu laden oder mit Plugins zu erweitern.

Verwandte Artikel

Plex vs Jellyfin - Ein pers├Ânlicher Vergleich
·1038 W├Ârter·5 min
Christian
sonstiges selfhosted
Du bist genervt von Plex? Hier erf├Ąhrst du wie ich Plex im Vergleich zu Jellyfin sehe. M├Âge das Duell plex vs jellyfin beginnen!
Reverse Proxy mit Traefik unter Docker
·556 W├Ârter·3 min
sonstiges selfhosted docker traefik
Achtung! Dieser Text ist schon ├╝ber zwei Jahre alt und kann veraltet sein! Um mehrere Webseiten unter einer IP und einer Domain zu ver├Âffentlichen, ist es am einfachsten, wenn man sich ein sogenannten reverse proxy einrichtet.
Teslamate - Datenlogger f├╝r Tesla Fahrzeuge
·633 W├Ârter·3 min
Christian
selfhosted Tesla App Reviews
Mit Teslamate kannst du deine Tesla-Fahrzeugdaten abfragen und grafisch auswerten. Ich zeige dir wie das geht.