Migration der Website

Ausgangslage

Bereits seit Jahren, eigentlich Jahrzehnten führe ich eine Webseite, primär eine Übersicht all meiner Projekte. Die erste war pures HTML mit Inline-Style (keine Ahnung ob CSS damals schon existierte). Später dann eine auf Drupal-Basis und nun seit Langem ein Wordpress. Mir gefällt zwar die Möglichkeit, immer und überall einfach Content erstellen zu können. Andererseits muss ich jedes Mal mindestens 2 Plugins updaten und gefühlt ein Duzend Aufforderungen für Plugin X ein Premium Abo abzuschliessen wegklicken. So wollte ich nun etwas neues, etwas simples. So entschied ich auf NextJS JAMStack umsteigen und versuchte mich am TailwindCSS JAMStack Template und das hat auch mehr oder weniger geklappt, der Build wirft aber dutzende Deprecation-Warnings ab und es scheint auch nicht mehr sehr aktiv entwickelt zu werden.

Ziel

Ich will nun eine neue Seite. Reproduzierbar, statisch, minimalistisch, dumm. Somit keine Datenbank sondern ein JAMStack. Es wird ein Lern-Projekt, so will ich folgende Tools kennen lernen: TypeScript (Ich kenne nur JS) NextJS ESLint Contentlayer

Initialisierung

Mein erstes Ziel ist es, eine simple statische Seite basierend auf md-Files zu erhalten. Kein Styling, keine Tags/Pages oder gar Suchfunktion, keine Mehrsprachigkeit.

Ich beginne mit der Initialisierung einer basic nextJS-Seite. Hierzu folge ich der Getting-Started Doku von Contentlayer2

> npx create-next-app@latest comstock.ch
Need to install the following packages:
create-next-app@15.3.3
Ok to proceed? (y)

√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like your code inside a `src/` directory? ... No
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to use Turbopack for `next dev`? ... No
√ Would you like to customize the import alias (`@/*` by default)? ... No
Creating a new Next.js app in comstock.ch.

> cd comstock.ch
> npm install contentlayer2 next-contentlayer2 date-fns

> code. //öffnet VSCode
> npm run dev //startet die demo-seite unter localhost:3000

Die restlichen Anpassungen gemäss der Getting Started habe ich ebenfalls so übernommen. Folgende Anpassungen musste ich noch vornehmen:

Ich will die Daten alle im selbem Ordner, und da Früher oder Später noch weitere Dokumententypen dazukommen werden, lege ich alles von beginn an in ein "data"-Verzeichnis. Zudem musste ich Turbopack ausschalten, da sich dieses mit Contentlayer zu beissen scheint.

Erstellung und Abbruch

Das Layout kopierte ich zu grossen Teilen vom Tailwind Blog Template . Dies führe aber zu immer mehr inkonsistentem Verhalten und so brach ich schlussendlich die Migration ab. Insbesondere weil ich dann auch noch den ganzen i18-Teil auch noch umsetzen müsste. Dann fand ich das mehrsprachige Tailwind-template welches aber auf einer vom Entwickler erstellten Library Pliny basierte, welches wiederum auf alten Modulen basierte.

Ich wollte aber verstehen was genau passiert. Sonst hätte ich ja auch auf Wordpress bleiben können.

Somit löschte ich alle dependencies aus dem package.json sowie das ganze package-lock.json. danach einfach mal npm run dev und schauen welche Fehler geworfen werden, das fehlende Modul suchen, Doku lesen und dann installieren. Auser pliny, diese Referenzen habe ich entfernt.

Somit hier nun ein Template ohne Analytics, Newsletter, Comments

Der Export aus Wordpress hat mit diesem Tool gut geklappt.