Wechsel von WordPress zu Hugo

Veröffentlicht am von
Antworten

Seit 9 Jahren blogge ich mit WordPress auf diesem Blog. Auf meinem zweiten Blog, christoph.miksche.org blogge ich seit 7 Jahren mit WordPress. Zudem habe ich seit 2013 ebenfalls immer wieder eine Plattform (WebPage4.me) zum Erstellen eines eigenen WordPress-Blog betrieben und auch beruflich habe ich immer wieder WordPress Websites verwaltet.

Ich habe also eine ziemlich tiefe Beziehung mit WordPress. Allerdings habe ich in den letzten Jahren seit 2017 unter blog.m5e.de einen Blog ausschließlich mit statischen Generatoren betrieben. Hierbei war ich mit Jekyll zwar nicht so super zufrieden aber Hugo ist dafür wunderbar.

Nun will ich meinen zweiten Blog auf Hugo migrieren. Meine Hauptgründe dafür sind:

  • WordPress ist langsamer als Hugo
  • WordPress ist unsicherer als Hugo
  • WordPress benötigt mehr Aufwand (z.B. Aktualisierungen, …)
  • WordPress Hosting ist teurer und aufwändiger (da PHP und eine Datenbank benötigt wird)
  • Gerade bei Shared-Hosting kommt es öfter zu Problemen mit WordPress

Der letzte Punkt ist der heftigste. Denn ich habe mir z.B. für automatische Updates bei Shared-Hosting Anbietern, die keine automatischen Updates via JS möglich machen, ein Skript geschrieben: https://github.com/CMiksche/wp-remote-updater

Auch für automatische Backups habe ich ein Skript geschrieben: https://git.kernel.fun/cmiksche/php-sharedhost-backup

Trotz dieser beiden Skripte bleiben aber bei Shared-Hosting-Anbietern weitere Probleme. Aktuell funktioniert z.B. der Gutenberg-Editor bei meinem zweiten Blog nicht. Auch Updates von Plugins usw. müssen dort manuell gemacht werden, weil der Hosting-Anbieter anscheinend keine JS-Verbindungen zu WordPress zulässt.

Es gibt sogar einige Anbieter wie HelioHost, welche aktiv von dem Betreiben eines WordPress-Blogs auf der eigenen Plattform abraten. (Dieser Anbieter deaktiviert anscheinend sogar Kundenaccounts, deren WordPress-Instanz zu hohe Auslastungen haben)

Bei diesem Blog (blog.wronnay.net) und auch bei WebPage4.Me habe ich dieses Problem zwar nicht, weil ich die beiden Seiten auf eigenen Servern betreibe, allerdings will ich auch noch Online-Präsenzen haben, wenn mein Server mal ausfällt und deshalb setze ich bei meinem zweiten Blog auf einen anderen Anbieter.

Diese ganzen Probleme habe ich mit einer statischen Website aber nicht. Für statische Websites gibt es unzählige kostenlose Anbieter, statische Websites sind viel schneller und leichter umzuziehen. Typischerweise ist der größte Vorteil von WordPress zwar, dass man online von überall seine Beiträge schreiben kann und auch mehrere Autoren möglich sind aber alle meine aktuellen Blogs werden nur von mir geschrieben und es gibt auch Lösungen für statische Blogs, die das gleiche möglich machen.

Bei mir kommt dann noch hinzu, das ich als Softwareentwickler seit Jahren sehr gerne Markdown schreibe und meine Projekte in Git verwalte. Dies gibt es bei statischen Generatoren „out of the Box“ und ich fühle mich in so einer Umgebung richtig wohl.

Deshalb möchte ich nun versuchen, meinen persönlichen Blog (christoph.miksche.org) auf Hugo umzuziehen. Dieser Umzug wird vermutlich etwas aufwendig sein, da ich z.B. dort auch ein custom Theme verwende, allerdings werde ich danach unabhängiger von Hosting-Anbieter sein und muss mir keine Sorgen mehr machen, dass ein Update irgendwas kaputt macht.

Das Exportieren der Daten von WordPress

Bevor man irgendwas mit Hugo macht, sollte man die Daten von WordPress exportieren.

Für Hugo gibt es z.B. WordPress Plugins wie wordpress-to-hugo-exporter, dieses hat bei meinem Hoster aber leider wegen einer Zeitüberschreitung bzw. Netzwerkfehlers nicht geklappt.

Es gibt auch den wordpress-to-jekyll-exporter, den man nach dem Export dann mit dem Jekyll Importer von Hugo importieren könnte, allerdings war ich mit dem Export von dem Plugin nicht zufrieden. Oft war in den Posts z.B. noch HTML vorhanden…

Deshalb habe ich eine andere Methode gewählt: Man kann man einfach via “Werkzeuge“ > „Daten exportieren“ > „Alle Inhalte“ > „Export-Datei herunterladen“ eine XML-Datei mit den WordPress-Daten herunterladen, die man anschließend konvertieren kann.

Das Exportieren

Konvertieren in Hugo Format

Es gibt verschiedene Tools zum Konvertieren. Von WordPress-Plugins bis zu CLI-Tools. Wie schon beschrieben, habe ich keine guten Erfahrungen mit den WordPress-Plugins gemacht.

Die Ausgabe von blog2md war jedoch besser, auch wenn dort keine Bilder exportiert werden und es bei manchen Posts z.B. an Absätzen fehlt.

D.h. jetzt gehen wir jeden Beitrag durch und prüfen, ob alles passt. Wir fügen Absätze hinzu, korrigieren evtl. URLs und Bilder usw…

Erstellen des Hugo-Projekts

Mit dem folgenden Befehl legt man eine neue Website mit Hugo an:

hugo new site mein-toller-blog

Nun kann man die konvertierten Dateien in den /content Ordner verschieben. Die Bilder habe ich nach /static verschoben.

Erstellen / Anpassen des Theme

Unter /themes legen wir einen neuen Ordner für unser Theme an. Als Vorlage kann man so einfache Themes wie https://github.com/J-Siu/hugo-theme-sk1 oder https://github.com/yanlinlin82/simple-style verwenden.

Anschließend musste ich mühsam mein WordPress-Theme auf die Hugo Syntax anpassen…

Fazit

Trotz der Mühe hat sich das gelohnt! Meine Seite lädt nun viel schneller und hat weniger Wartungsaufwand. In Zukunft werde ich wohl eher Hugo-Seiten als WordPress-Instanzen aufsetzen.

Royal Kludge RK61 gegen Ajazz AK33

Veröffentlicht am von
Antworten

Seit einiger Zeit faszinieren mich mechanische Tastaturen. Das laute Klicken von blauen Switches hat einfach etwas, was an Schreibmaschinen und Qualität erinnert.

Ich habe mir also zwei mechanische Tastaturen aus China bestellt. Einmal die sehr bekannte RK61 von Royal Kludge mit Bluetooth im 60% Layout und einmal die Ajazz AK33 im 75% Layout ohne Bluetooth.

Weiß die RK61, Schwarz die AK33

Bevor ich die beiden Tastaturen bestellt habe, habe ich mich ausführlich informiert. Soweit ich erfahren konnte, verwendet die RK61 teilweise verschiedene Schalter (Entweder die eigenen Switches von RK oder Gaterons?, Outemu?). Die AK33 verwendet dagegen Zorro Switches, die wohl „Ajazz“ gebrandet sein sollen.

Normalerweise sollten wohl die Schalter von RK eine bessere Qualität haben. Allerdings hat die RK61 auch Nachteile: wegen dem 60% Layout sind z.B. die Pfeiltasten doppelt belegt und die Tastatur hat weniger Funktionen im Schnellzugriff als die AK33.

Dafür hat die RK61 aber auch Vorteile gegen die AK33, denn die AK33 verwendet zwar ein 75% Layout, allerdings haben viele Tasten am Rand keine Standardgröße. Deshalb lassen sich die Tasten an der RK61 besser austauschen. Zudem kann man bei der RK61 auch Bluetooth verwenden, während die AK33 nur mit Kabelbetrieb funktioniert.

Preislich gab es bei mir nur ca. 10 Euro Preisunterschied bei direkter Bestellung aus China. Hierbei war die RK61 10 Euro teurer, was ich auch als fair erachte. Zwar ist die RK61 kleiner, allerdings verwendet diese hochwertigere Switches und Bluetooth, was sie in den Herstellungskosten bestimmt teurer als die AK33 macht.

Ich habe übrigens die RK61-Version mit einem USB-C-Anschluss bekommen. Die Tastatur soll aber wohl auch noch früher mit einem USB-Micro-Anschluss produziert worden sein.

Die RK61 mit Hintergrundbeleuchtung
Klang der RK61

Die AK33 kam ebenfalls mit einem USB-C-Anschluss, was mich überrascht hat, da ich dachte es gäbe die Tastatur nur mit einem USB-Mini-Anschluss. Ich habe aber die AK33 mit schwarzen Switches bestellt, es wird also etwas schwierig die Qualität der Switches zu vergleichen, da blaue Switches nun mal z.B. lauter als schwarze Switche sind.

Bei der AK33 kann man die Metallplatte am Boden sehen
Klang der AK33
Vergleich zwischen RK61 und AK33

Ich mag den Klang der blauen Switche, die bei der RK61 montiert sind. Schön laut und erinnert an alte Schreibmaschinen.

Blaue Switche der RK61

An den Klang der schwarzen Switche, welche ich bei der AK33 ausgewählt habe, musste ich mich erstmal etwas gewöhnen. Ich kann mir die schwarzen Switche sehr gut in einem Büro mit mehreren Kollegen vorstellen, die von lauten blauen Switches bestimmt mehr genervt werden.

Schwarze Switche der AK33

Zusammenfassend kann ich sagen, dass die Verarbeitungsqualität der RK61 spürbar besser ist. Einziges Manko der RK61 ist die doppelte Tastenbelegung. Zudem ist trotz der schlechteren Qualität die AK33 nicht so weit von der Verarbeitung entfernt und gerade die separaten Pfeiltasten machten mir ein Arbeiten mit ihr anfangs einfacher.

Das Bluetooth der RK61 gibt ihr einen weiteren Pluspunkt. Das liefert ein schönes minimalistisches Design ohne nervige Kabel auf dem Schreibtisch. Übrigens kann man bei beiden Tastaturen auch die USB-C-Kabel entfernen. D.h. ein Austausch der Kabel ist super einfach.

Anmerkung zum US-Layout: Wer die Bilder genauer angesehen hat, wird festgestellt haben, dass ich beide Tastaturen mit US-Layout bestellt habe. Das war Absicht. Man kann in jedem Betriebssystem das Tastaturlayout umstellen und so auch mit US-Layout auf Deutsch schreiben.

Außerdem will ich in Zukunft mehr auf Englisch schreiben und als Softwareentwickler dokumentiere ich meinen Code sowieso schon auf Englisch und für das Programmieren eignen sich US-Layouts ebenfalls besser. Die Seite us-keyboards.de gibt eine gute Übersicht, warum eine US Tastatur besser zum Programmmieren ist.

Ich habe an mir selbst gemerkt, dass man sich an das US-Layout schneller gewöhnt, als man denkt. Zum Eingewöhnen eignen sich dann Seiten wie typelit.io

Ich hoffe, ich konnte einen guten Einblick in die Unterschiede zwischen diesen beiden Tastaturen geben und falls jemand Fragen hat, kann dieser gerne kommentieren oder auf meinen Tweet zu diesen Artikel antworten.

PC Engines APU2 coreboot / BIOS aktualisieren

Veröffentlicht am von
Antworten

Wer meinen englischsprachigen Blog liest, weiß, dass ich eine APU2C4 besitze und darauf pfSense als Router verwende.

Gestern habe ich festgestellt, dass darauf eine relativ alte Version von coreboot installiert war und habe daraufhin das BIOS aktualisiert. In diesem Artikel möchte ich möglichst generisch erklären, wie man die Firmware eines dieser PC Engines Boards richtig aktualisiert.

Herunterladen der aktuellen Rom

Unter https://pcengines.github.io/ kann man die aktuelle Firmware für die Boards (APU1 – APU5) herunterladen. Auf der Seite steht auch, was sich geändert hat und welche Probleme es aktuell bei welchen Boards gibt.

Nach einem Download der Binary sollte man den SHA256 Wert checken und kann dann den Upload der File zur APU starten.

Wenn man eine pfSense hat, sollte man die Binary auf seinen Rechner herunterladen und dann unter Windows z.B. mit Powershell den SHA256-Wert checken:

CertUtil -hashfile apu2_v4.11.0.6.rom SHA256

Unter Linux kann der Download und sha256 Überprüfung z.B. so ausgeführt werden:

wget https://3mdeb.com/open-source-firmware/pcengines/apu2/apu2_v4.11.0.6.rom
sha256sum apu2_v4.11.0.6.rom

Den Hashwert kann man dann mit dem Hash von der Download-Seite vergleichen. Er sollte übereinstimmen.

Upload der Rom-File unter pfSense

Hat man den beschriebenen Linux-Weg ausgeführt, hat man jetzt wahrscheinlich die File schon direkt auf die APU heruntergeladen. Über den pfSense Weg muss man die Datei jetzt aber erst auf das Gerät hochladen.

Das kann man über die Weboberfläche von pfSense mit dem Menüpunkt „Diagnostics“, „Command Prompt“ und dann „Upload File“ machen.

Flashen des neuen BIOS / coreboot

Dieser Schritt ist nun wieder weitgehend gleich – egal, ob man eine pfSense oder Linux verwendet.

Zuerst installiert man mit seinem Paketmanager „flashrom“. Unter pfSense kann man über „Diagnostics“, „Command Prompt“ und dann „Execute Shell Command“ die Befehle auch alle in der Web-UI eingeben.

Unter pfSense verwendet man dazu den folgenden Befehl und klickt danach auf „Execute“

pkg install -y flashrom

Anschließend führt man das eigentliche Flashen aus:

flashrom -w /tmp/apu2_v4.11.0.6.rom -p internal:boardmismatch=force

Wenn der Flash am Ende „VERIFIED“ wurde, passt alles und man sollte das System Neustarten. Den Reboot kann man unter pfSense über den Menüpunkt „Diagnostics“ und dann „Reboot“ durchführen.

Weil dieser Prozess meiner Meinung nach automatisiert werden könnte und ich schon viele Programme erstellt habe, die ähnliche Prozesse automatisieren, überlege ich hier auch ein Programm für automatische coreboot Updates auf PC Engines APUs zu erstellen…

WordPress: Kann Kategorie nicht bearbeiten bzw. setzen

Veröffentlicht am von
Antworten

Vor Kurzem hatte ich das Problem, das ich auf einem WordPress Blog eine bestimmte Kategorie nicht setzen konnte. Nach eine Suche bin ich auf https://stackoverflow.com/questions/41880458/wordpress-sorry-you-are-not-allowed-to-edit-this-item gestoßen und ein Post konnte mir wirklich helfen.

Anscheinend trat der Fehler bei mir auf, weil ein Begriff für eine Kategorie gleichzeitig auch als Schlagwort gesetzt war. Das ist wohl nicht möglich / erlaubt. Daher war die Lösung, sich entweder für die Kategorie oder dem Schlagwort zu entscheiden.

Zuerst sollte man in der Datenbank nach den doppelten Einträgen suchen:

SELECT term_id, COUNT(term_id) FROM wp_term_taxonomy GROUP BY term_id HAVING COUNT(term_id) > 1;

Anschließend habe ich die Einträge mit der term_id in der Tabelle anschaut und den Eintrag für den Tag gelöscht.

Arch Linux: Paket- und Journal-Cache leeren

Veröffentlicht am von
Antworten

Ich habe heute festgestellt, das Arch Linux sehr viel Speicherplatz für Paketcache verwendet. Nur alleine das Leeren diesen Caches konnte mir auf meinen Server ca. 10 GB und auf meinem Laptop ca. 20 GB freien Speicherplatz mehr verschaffen.

Es lohnt sich also, diesen Speicherplatz freizugeben, wenn man eine kleine Festplatte hat. Zum Löschen des Paketcaches verwendet man am besten „paccache“.

Installation von paccache:

pacman -S pacman-contrib

Einmaliges Ausführen von paccache:

paccache -r

Regelmäßiges Ausführen von paccache – jede Woche:

systemctl enable paccache.timer
systemctl start paccache.timer

Zudem kann man übrigens auch das Journal begrenzen:

journalctl --vacuum-size=500M

Android: Annäherungssensor neu kalibrieren

Veröffentlicht am von
Antworten

Ich habe schon länger, vermutlich seit ich das Display meines Xiaomi Mi A2 Lite ausgetauscht habe, das Problem, das der Bildschirm bei einem Anruf oder einer WhatsApp Sprachnachricht gleich schwarz wird – auch, wenn ich den Bildschirm gerade nicht abdecke.

Nach einer kurzen Recherche bin ich darauf gestoßen, das das Problem wohl am Annäherungssensor (Proximity sensor) liegt, welchen man (zumindest bei meinem Handy und anscheinend auch bei mehreren anderen Modellen von Xiaomi wie dem Mi 9) über den „Engineering Modus“ bzw. „hardware test“ über den folgenden Weg neu kalibrieren kann:

Wähle *#*#64663#*#* in der Telefon-App.

Dann kann man im Menü den Punkt „3. Entfernungssensor“ auswählen.

Anschließend auf „Calibration“ klicken und dabei nicht das Display verdecken.

Nun sollte es einen höheren Wert als 0 wie in meinen Fall 5 geben, wenn der Sensor nicht verdeckt wird.

Wenn der Sensor verdeckt ist (meistens ist der Sensor oben bei der zum Gesicht zeigenden Kamera), sollte der Wert bei 0 liegen.

Über diesen Weg konnte ich das Problem beheben 😀

Vue.js für Angular Entwickler

Veröffentlicht am von
Antworten

Ich habe bisher mehr mit Angular als mit Vue.js gearbeitet. Für ein kleines Projekt wollte ich aber lieber Vue.js (aufgrund der geringeren Größe) verwenden.

Dabei sind mir ein paar Fragen in den Sinn gekommen, die ich hier in Form von einem kleinen Cheatsheet auch für andere Angular Entwickler festhalten möchte.

Grundsätzlicher Aufbau

Vue.js und Angular sind vom grundsätzlichen Aufbau nicht so verschieden. Vue.js hat sich ja auch bei der Erstellung von Angular.js (welches grundsätzlich anders als Angular v2+ aufgebaut ist) inspirieren lassen und wurde von einem ehemaligen Google-Entwicker gestartet.

Bei beiden Projekten gibt es Components, welche aus einem HTML, CSS und JavaScript (oder TypeScript) bestehen. Diese Components kann man entweder in einer Datei (HTML und CSS inline) oder in getrennten Dateien erstellen.

TypeScript und class-style Components

Der gemeine Angular-Entwickler ist TypeScript mit schönen Decorators gewohnt. Wenn er also das Standard-Vue.js einrichtet (JavaScript ohne Decorators) ist er erst mal geschockt. Das muss aber nicht sein!

Vue.js unterstützt auch TypeScript: https://vuejs.org/v2/guide/typescript.html und mit der https://github.com/vuejs/vue-class-component sieht eine Vue.js Component fast wie eine Angular-Component aus!

Dependency Injection

Gibt es in Vue.js auch: https://vuejs.org/v2/guide/components-edge-cases.html#Dependency-Injection

RxJS

Auch hier muss der gewohnte Angular-Liebhaber auf nichts Neues setzten: https://github.com/vuejs/vue-rx

Material Design

https://vuetifyjs.com/en/ ist quasi das äquivalent für Angular Material.

Fazit

Gerade über die letzten Jahre sind viele Standard-Features von Angular auch zu Vue.js gekommen und man muss sich nicht einmal großartig umgewöhnen, wenn man mal statt Angular Vue.js in einem neuen Projekt verwenden will.

Xbox 360: Lade öffnet sich nicht

Veröffentlicht am von
Antworten

In letzter Zeit habe ich einige defekte Xbox 360 gekauft. Viele davon hatten das Problem, dass sich die Lade / das Laufwerk einfach nicht öffnet. Bei manchen ging es sporadisch, bei anderen ging es überhaupt nicht.

Ein typisches Zeichen für das Problem ist, dass das Laufwerk Geräusche von sich gibt und grün blinkt, sonst aber nichts Weiteres passiert.

In dem folgenden Video zeige ich, wie man das Problem behebt:

Für alle, die den Lösungsweg gerne in Textform sehen möchten, habe ich meinen Weg hier auch aufgeschrieben:

  1. Es gibt für jedes Xbox Modell ein passendes Netzteil – es sollte also sichergestellt werden, dass das richtige Netzteil verwendet wird.
  2. Um zu testen, ob das Laufwerk überhaupt funktioniert und Spiele lesen kann, kann man mit der Hilfe einer Kreditkarte an der rechten Seite der Lade beim Öffnen mithelfen, indem man die Karte hineinsteckt und etwas nach vorne drückt.
    • In meinen Fall konnte ich anschließend ein Spiel einlegen und dieses wurde auch abgespielt.
  3. Um das Problem zu beheben, sollte man am Besten die Xbox 360 auseinandernehmen. Hierfür kann man entweder ein spezielles Xbox 360 Opener Tool verwenden oder man verwendet einen Schlitzschraubenzieher.
    1. Für die untere und obere Abdeckungen (dunkelgrau) muss man die Plastiklaschen lösen, hierfür kann man mit einem stumpfen Gegenstand in die Löcher stechen.
    2. Bei der oberen Abdeckung sollte man zudem einen Standfuß lösen, da darunter das benötigte Loch zum Lösen der Lasche ist.
    3. Die Frontplatte (mit dem Startbutton) kann man am unteren Ende vorsichtig loslösen.
    4. Auf der Rückseite sind viele schlitzgroße Löcher, die man entweder vorsichtig mit einem Schlitzschraubenzieher und dem erwähnten Tool eindrücken kann.
    5. Auf der Vorderseite sind mehrere Laschen, die man mit einem Schlitzschraubenzieher auch leichter öffnen kann.
  4. Nun sollte man alle Torx-Schrauben entfernen. Diese sind lang und silberfarben und können mit einem T10 Schraubenzieher entfernt werden.
  5. Anschließend dreht man die Xbox um und entfernt das übrige Plastikgehäuse.
  6. Evtl. muss man nun noch das silbrige Siegel am DVD Laufwerk brechen.
  7. Darauf sollte man die zwei Anschlüsse am Ende des DVD Laufwerks entfernen.
  8. Das DVD Laufwerk kann man nun einfach hochheben und entfernen.
  9. Um das DVD Laufwerk zu öffnen, reicht ein einfacher Kreuzschraubenzieher
    1. Man kann anschließend leicht die beiden Gehäusehälften entfernen.
    2. Anschließend sollte man mit einem Schraubenzieher vorne das Rad unter der Lade leicht drehen und an der Lade ziehen, um diese zu öffnen.
    3. Danach kann man das Band am Zahnrad aus der Lade entfernen.
  10. Ich konnte gute Erfolge erzielen, indem ich das Band in einen Wasserkocher erhitzt habe und anschließend in IPA (Isopropanol) getaucht habe.
  11. Danach habe ich das Band wieder befestigt und die Xbox wieder zusammengebaut.

Hoffentlich kann jemand mit dieser Anleitung auch seine Xboxen reparieren. Bei Fragen freue ich mich auf Kommentare unter diesem Blog Post oder unter dem YouTube-Video.

Windows: Start-Skript einrichten

Veröffentlicht am von
Antworten

Wer unter Windows ein Start-Skript einrichtet, kann Aufgaben wie das Pullen von Git-Repositorys und das Starten von Programmen schön automatisieren.

Aufgaben kann man mit der Windows Aufgabenplanung planen. Diese wird über Start -> Suche nach „Aufgabenplanung“ auch schnell gefunden.

Eine neue Aufgabe kann über „Einfache Aufgabe erstellen …“ ganz einfach angelegt werden.

Zur besseren Übersicht sollte man der neuen Aufgabe natürlich einen Namen geben. „Startup“ wäre eine Option …

Anschließend gibt es verschiedene Optionen, wann die Aufgabe ausgeführt werden soll. „Beim Anmelden“ führt die Aufgabe nach der Anmeldung eines Benutzers aus.

Natürlich muss man angeben, was genau durchgeführt werden soll. „Programm starten“ ist hier allerdings die einzige Möglichkeit, welche nicht veraltet ist.

Da ich ein Batch-Skript geschrieben habe (eine Anleitung, wie man ein Batch-Skript schreibt, kann man mit einer gezielten Suche schnell finden), wähle ich dieses natürlich aus.

Kurz vor dem Ende können wir unsere Auswahl noch einmal begutachten.

Fertig. Die Aufgabe wurde erstellt und sollte bei allen zukünftigen Anmeldungen ausgeführt werden können.