0:00:00.000,0:00:24.496
<i>rc3-nowhere Vorspannmusik</i>

0:00:24.496,0:00:30.361
Herald: Herzlich willkommen auf der Chaos[br]West stage. Der nächste Talk heißt "make it

0:00:30.361,0:00:35.860
static" und es wird darum gehen, warum man[br]vielleicht nicht ein fancy CMS hernehmen

0:00:35.860,0:00:40.050
sollte, dass eine Menge Abhängigkeiten[br]hat. Und wir wissen ja nicht erst seit

0:00:40.050,0:00:46.042
Log4Shell, dass die auch unerwartet große[br]Probleme machen können. Der Talk wird von

0:00:46.042,0:00:51.760
einem Studenten an der TU Darmstadt, der[br]Avocado heißt, gehalten. Ein herzliches

0:00:51.760,0:00:54.400
Willkommen und ich freue mich schon sehr[br]auf deinen Talk.

0:00:54.400,0:00:59.150
Avocadoom: Hi, ja, vielen Dank erst mal[br]für die nette Begrüßung. Du hast es schon

0:00:59.150,0:01:01.542
angesprochen. Das wird auch so ein[br]bisschen das Thema werden.

0:01:01.542,0:01:04.790
Sicherheitslücken in CMS und wie man das[br]vielleicht mit statischen Seiten umgehen

0:01:04.790,0:01:08.930
kann. Erst einmal herzlich willkommen zu[br]meinem Talk make it static. Ich habe noch

0:01:08.930,0:01:12.210
kurz eine Slide eingebaut in der ihr einen[br]QR-code habt den ich euch ganz kurz mal

0:01:12.210,0:01:14.860
abscannen lasse, wenn ihr den abscannen[br]wollt, da seht ihr die Slides auch noch

0:01:14.860,0:01:17.632
mal, falls ihr was nachlesen wollt, oder[br]nicht ganz hinterherkommt oder zum

0:01:17.632,0:01:23.342
Beispiel euch die vergrößern wollt. So,[br]jetzt zu mir. Ich bin Avocadoom. Ich

0:01:23.342,0:01:28.310
studiere aktuell an der TU Darmstadt bzw.[br]Thilo Billerbeck ist mein richtiger Name

0:01:28.310,0:01:33.250
und genau, ihr findet mich auf[br]verschiedenen Social-Media-Kanälen. Ich

0:01:33.250,0:01:36.056
mache auch nebenbei tatsächlich[br]Webentwicklung und Webdesign. So ein

0:01:36.056,0:01:40.000
bisschen. Deswegen stecke ich in diesem[br]Thema ein bisschen tiefer drin. Und ja,

0:01:40.000,0:01:42.990
ich freue mich jetzt auf jeden Fall schon,[br]euch das Thema ein bisschen präsentieren

0:01:42.990,0:01:49.250
zu können. Aktuelle Situation ist erstmal[br]so ein bisschen der Einstieg, den ich euch

0:01:49.250,0:01:52.200
geben möchte und aktuelle Situation[br]beschreibt es schon ganz gut, weil aktuell

0:01:52.200,0:01:55.890
haben wir ja eine Sicherheitslücke, die[br]schon relativ krass und bekannt ist und

0:01:55.890,0:01:58.509
ich möchte euch erstmal so ein bisschen[br]sagen, warum vielleicht static sites eine

0:01:58.509,0:02:03.700
coole Idee sind. Da habe ich so ein[br]bisschen im Internet etwas rausgesucht.

0:02:03.700,0:02:07.140
Das sind Artikel die tatsächlich vor[br]Log4Shell noch erschienen sind. Als ich

0:02:07.140,0:02:10.600
diese Präsentation angefangen habe zu[br]erstellen, gab es diese Lücke noch gar

0:02:10.600,0:02:16.459
nicht. Und ihr seht jetzt so ein bisschen,[br]die Artikel kommen von Heise oder t3n. Es

0:02:16.459,0:02:20.280
geht hier zum Beispiel um Drupal oder[br]WordPress oder irgendein Plugin. Und in

0:02:20.280,0:02:23.950
der Regel sind das irgendwie immer[br]Sicherheitslücken, die dann irgendwann

0:02:23.950,0:02:30.012
erkannt werden oder entdeckt werden und wo[br]dann zu einem schnellen Update aufgerufen

0:02:30.012,0:02:34.610
wird. Und die Sache ist dann immer so ein[br]bisschen, dass man halt auch schnell

0:02:34.610,0:02:38.720
agieren muss. Und viele setzen sich halt[br]so ein WordPress oder Drupal so dahin und

0:02:38.720,0:02:41.750
richten es einmal ein und pflegen das dann[br]nicht. Und das kann dann halt super

0:02:41.750,0:02:46.140
schnell mal anfällig für irgendwelche[br]Sicherheitslücken werden. Und da ist halt

0:02:46.140,0:02:52.210
eigentlich immer schnelles Handeln[br]gefragt. Zu dem ganzen Backend Sachen so

0:02:52.210,0:02:57.480
ein bisschen bei Content Management[br]Systemen gibt es ja generell immer so zwei

0:02:57.480,0:03:01.743
verschiedene Lösungen oder Arten, wie man[br]das angehen kann. Es gibt ja die fertig

0:03:01.743,0:03:06.200
Lösungen, die bekannten WordPress, Joomla,[br]Drupal oder auch modernere Systeme und die

0:03:06.200,0:03:10.140
brauchen halt in der Regel immer[br]regelmäßig Pflege und Updates, um

0:03:10.140,0:03:15.290
vernünftig funktionieren zu können, keine[br]Sicherheitslücken zu bieten. Und auch drum

0:03:15.290,0:03:20.620
herum muss immer um alles gesorgt sein.[br]Sie benötigen ein sauberes und sicheres

0:03:20.620,0:03:26.569
Setup und das betrifft vor allen Dingen[br]nicht nur das System an sich, sondern vor

0:03:26.569,0:03:30.560
allen Dingen auch alle Systeme drumherum,[br]zum Beispiel Datenbanken oder Server an

0:03:30.560,0:03:35.902
sich. Na, wenn euer System sicher ist und[br]dann auf einmal jemand durch eine

0:03:35.902,0:03:39.170
Datenbank Lücke bei euch reinkommt, dann[br]ist euch halt auch nicht geholfen oder

0:03:39.170,0:03:42.815
Rootzugriff auf euren Server bekommt, dann[br]habt ihr halt auch irgendwie ins Gras

0:03:42.815,0:03:48.500
gebissen. Da gibt es noch so ein bisschen[br]so eine andere Gattung von Systemen, die

0:03:48.500,0:03:51.766
einem immer wieder begegnen. Das sind die[br]sogenannten Eigenbauten. Die haben noch

0:03:51.766,0:03:54.980
mal ein bisschen mehr Pfeffer als die[br]Fertiglösung bei manchen Dingen, wenn man

0:03:54.980,0:03:59.830
sich da nicht ordentlich drum kümmert. Die[br]haben halt auch die ähnlichen Probleme wie

0:03:59.830,0:04:05.319
die Fertiglösungen, das ist ganz klar.[br]Aber vor allen Dingen haben sie auch noch

0:04:05.319,0:04:08.830
den Nachteil, dass man halt ganz viele[br]Dinge, die von den CMS berücksichtigt

0:04:08.830,0:04:13.170
wurden mit bedenken muss, zum Beispiel[br]SQL-Injection oder Cross Site Scripting

0:04:13.170,0:04:16.389
und Ähnliches. Und wenn man sich das halt[br]nicht alles mit anschaut, dann kann einem

0:04:16.389,0:04:19.209
das auch ganz schnell um die Ohren[br]fliegen. Und darum muss man sich halt die

0:04:19.209,0:04:22.840
Frage stellen: braucht man das wirklich?[br]Weil wenn man einmal in das System

0:04:22.840,0:04:25.657
gelangt, über welche Stelle auch immer,[br]hat man meistens relativ schnell Vollzugriff

0:04:25.657,0:04:29.888
und wenn man Vollzugriff hat,[br]dann sieht es eher schwierig aus. Gerade

0:04:29.888,0:04:35.479
wenn man eine größere Seite ist, kann das[br]sehr unangenehm werden. Ein weiterer

0:04:35.479,0:04:39.199
Punkt, den man bei einem Content[br]Management System so ein bisschen beachten

0:04:39.199,0:04:42.590
muss, ist der Wartungsaufwand. Ich hatte[br]es gerade eben schon angesprochen die

0:04:42.590,0:04:46.159
Dinger müssen regelmäßig und teilweise[br]auch sehr akut gepflegt werden. Man muss

0:04:46.159,0:04:52.100
dafür Zeit aufwenden, sie müssen relativ[br]schnell und regelmäßig gepflegt werden und

0:04:52.100,0:04:55.290
auch das Hostsystem drumherum braucht[br]regelmäßig Pflege und Updates, weil wenn

0:04:55.290,0:04:58.490
das out of date ist, dann geht es halt[br]auch nicht. Viele Systeme können das

0:04:58.490,0:05:03.786
inzwischen automatisch übrigens. Aber auch[br]da gibt es zum Beispiel Major Updates, die

0:05:03.786,0:05:07.110
meistens manuell eingespielt werden müssen[br]oder Plugins Updates, die auch gerne mal

0:05:07.110,0:05:12.370
manuelles Einspielen erfordern. Außerdem[br]kann es sein, dass euch zwischendurch mal

0:05:12.370,0:05:16.134
die Features brechen, bei WordPress zum[br]Beispiel oder so im Theming oder Plugin

0:05:16.134,0:05:20.393
Bereich. Das heißt, wenn größere Versionen[br]von WordPress oder Co ausrollen und die

0:05:20.393,0:05:24.835
halt geupdatet werden müssen, weil[br]Sicherheitsupdates benötigt werden, dann

0:05:24.835,0:05:28.430
müsst ihr halt auch entsprechend wieder[br]Zeitaufwand da reinstecken, das alles zu

0:05:28.430,0:05:31.450
portieren und entsprechend anzupassen.[br]Weil ansonsten habt ihr irgendwie nicht

0:05:31.450,0:05:34.150
eine schöne Seite da liegen, sondern nach[br]dem nächsten Major Update auf einmal

0:05:34.150,0:05:42.020
irgendwas, was mehr aussieht wie bekannte[br]Blog Seiten aus dem Internet. Und genau

0:05:42.020,0:05:46.837
außerdem müsst ihr immer da einen großen[br]Invest reinstecken. Und dann gibt es noch

0:05:46.837,0:05:51.150
etwas, was ich als Plugin-Hölle bezeichnen[br]würde. Das kennt man übrigens auch [bei]

0:05:51.150,0:05:54.740
WordPress. Der Begriff fällt heute leider[br]relativ häufig. Es tut mir leid, aber

0:05:54.740,0:05:57.889
gerade da sieht man das sehr häufig, dass[br]da halt super viele Plugins reingesteckt

0:05:57.889,0:06:01.440
werden. Und das klingt erst mal ganz cool.[br]Ich hole mir irgendwie mein System, dann

0:06:01.440,0:06:05.355
hole ich mir lauter Features da rein, pack[br]das alles so in eine Kiste und dann läuft

0:06:05.355,0:06:08.630
es, das Problem ist bloß. Je mehr Plugins[br]man eigentlich da rein packt, desto

0:06:08.630,0:06:12.646
schlimmer wird es eigentlich und desto[br]mehr Abhängigkeiten erzeugt man. Und wenn

0:06:12.646,0:06:16.389
das nächste große Update kommt, kann halt[br]irgendwas kaputt gehen. Und dieser Zustand

0:06:16.389,0:06:20.219
ihr sehts auch unten. Der nimmt halt in[br]der Regel mit dem Alter der Seite zu und

0:06:20.219,0:06:23.730
irgendwann habt ihr mal irgendwas, was zum[br]Beispiel nicht maintained wird oder nicht

0:06:23.730,0:06:27.449
ordentlich mit dem neuen Update[br]funktioniert. Und dann habt ihr plötzlich

0:06:27.449,0:06:32.710
eine Seite, die aussieht wie was auch[br]immer oder einfach komplett offline ist.

0:06:32.710,0:06:37.860
Noch eine weitere Sache, die einem halt[br]auffallen kann sind Skalierungsprobleme.

0:06:37.860,0:06:41.889
Das trifft jetzt kleinere Seiten, die[br]Blogs und Co eher weniger. Aber wenn ihr

0:06:41.889,0:06:46.360
zum Beispiel einen Talk über Kopierer[br]haltet und auf einmal plötzlich die halbe

0:06:46.360,0:06:49.400
Weltkugel auf eurem Blog habt, dann wollt[br]ihr vielleicht gucken, dass das auch

0:06:49.400,0:06:54.240
ordentlich skaliert. So Systeme skalieren[br]meistens an sich sehr gut und auch die

0:06:54.240,0:06:57.540
Webserver an sich, die skalieren halt[br]ordentlich. Aber wenn ihr zum Beispiel

0:06:57.540,0:07:00.930
eine Seite mit einem relativ komplexen[br]Aufbau habt oder halt eine große Datenbank

0:07:00.930,0:07:05.960
dahinter mit Content, viele Queries, also[br]Datenbankaufrufe, die bei einer Seite

0:07:05.960,0:07:10.230
durchgeführt werden müssen, dann kann es[br]euch halt super schnell passieren, dass

0:07:10.230,0:07:14.320
die Last auf dem Server halt auch[br]ordentlich hoch wird und der nächste Punkt

0:07:14.320,0:07:18.449
der noch dabei ist, ist halt eine[br]Datenbank, die skaliert halt auch meistens

0:07:18.449,0:07:21.710
relativ gut mit. Aber wenn ihr anfangt[br]irgendwie die Seite zu expandieren auf

0:07:21.710,0:07:24.680
mehrere Server oder so, dann seid ihr[br]irgendwann auch relativ schnell an dem

0:07:24.680,0:07:29.430
Punkt, wo ihr merkt, dass das gar nicht so[br]einfach ist. Und was ein Problem ist, ist

0:07:29.430,0:07:34.379
halt, wenn so eine große Last auftritt,[br]dann ist halt erst mal die ganze Seite

0:07:34.379,0:07:37.580
offline und das ist halt auch nicht so[br]cool, weil dann seid ihr gar nicht mehr

0:07:37.580,0:07:41.870
erreichbar und nicht nur schlecht, sondern[br]wirklich komplett gar nicht mehr. Und

0:07:41.870,0:07:45.888
jetzt kommt natürlich der große Moment[br]Magic Fairy Dust Static Sites to the

0:07:45.888,0:07:51.045
rescue oder vielleicht auch nicht, weil[br]vielleicht lösen sie jetzt auch nicht alle

0:07:51.045,0:07:55.419
eure Probleme, aber vielleicht einige. Und[br]dazu kommen wir jetzt ein bisschen.

0:07:55.419,0:08:00.240
Erstmal natürlich so ein bisschen der[br]Punkt an sich: Was sind denn überhaupt

0:08:00.240,0:08:06.380
statische Seiten? So eine statische Seite[br]ist im Prinzip, wie der Name schon sagt,

0:08:06.380,0:08:09.642
eine Seite, die halt nicht irgendwie[br]dynamisch generiert wird. Das heißt, da

0:08:09.642,0:08:12.789
ist kein Content Management System im[br]Hintergrund, was das Ding zusammenbaut

0:08:12.789,0:08:19.290
oder ähnliches, sondern die Seite wird "as[br]is" an den Client ausgeliefert. So eine

0:08:19.290,0:08:25.669
Seite besteht dabei meistens aus HTML. Das[br]kennt ihr mit Sicherheit das ist einfach

0:08:25.669,0:08:29.444
Hypertext Markup Language, also wie eure[br]Seite aufgebaut ist. CSS - Cascading Style

0:08:29.444,0:08:35.193
Sheets. Also wie genau eure Seite am Ende[br]aussehen soll. Wie sie sich verhalten

0:08:35.193,0:08:39.789
soll, wenn bestimmte Dinge gehovert werden[br]und so. Und dann gibt es natürlich noch

0:08:39.789,0:08:42.750
JavaScript und Co. Habe ich jetzt das mal[br]genannt, weil es auch heutzutage so was

0:08:42.750,0:08:46.959
Web Assembly gibt. Und das sind[br]Komponenten, die dafür sorgen, dass eurer

0:08:46.959,0:08:51.630
Seite Leben eingehaucht wird und dass sie[br]dynamisch wird. Das habe ich jetzt auch

0:08:51.630,0:08:56.749
bewusst ein bisschen gehighlighted, weil[br]es tatsächlich so ist, dass das bei

0:08:56.749,0:09:00.339
statischen Seiten euer einziger Anker sein[br]wird, wie ihr Dynamik in eure Seite

0:09:00.339,0:09:04.040
reinbringt. Das heißt, ihr macht das nicht[br]mehr serverseitig, sondern ihr macht es

0:09:04.040,0:09:10.220
clientseitig über JavaScript und nutzt[br]Scripts, um halt dort die nötigen

0:09:10.220,0:09:13.999
Komponenten reinzuziehen und so[br]entsprechend das Ganze ein bisschen

0:09:13.999,0:09:20.539
lebhafter zu machen. Um so eine statische[br]Seite zu bauen, habt ihr sogenannte Static

0:09:20.539,0:09:27.410
Site Generators. Das ist im Prinzip euer[br]Toolbelt euer Werkzeuggürtel, um halt

0:09:27.410,0:09:32.260
entsprechend solche Seiten aufzubauen. Und[br]die verschmelzen im Prinzip Templates und

0:09:32.260,0:09:40.470
also Vorlagen und Inhalte zu einem[br]Gesamtkonstrukt. Das Ganze läuft auch

0:09:40.470,0:09:46.695
meistens so, dass Inhalte und das Template[br]an sich relativ strikt getrennt sind. Das

0:09:46.695,0:09:50.639
heißt, ihr schreibt das nicht irgendwie in[br]HTML Code rein, sondern ihr schreibt eure

0:09:50.639,0:09:55.420
Inhalte in einem relativ einfachen Format[br]oder in einem strukturierten Format auf,

0:09:55.420,0:09:59.790
schreibt dann auf der anderen Seite, wie[br]das Ganze aufgebaut sein soll und am Ende

0:09:59.790,0:10:05.149
verschmilzt das Ganze im Prinzip zu einem[br]Gesamtkonglomerat und wird so zu eurer

0:10:05.149,0:10:11.389
statischen Seite. Das heißt aber auch,[br]dass diese Seiten entsprechend schon beim

0:10:11.389,0:10:17.449
Deployment, also wenn ihr die Seite auf[br]den Server schiebt, generiert und

0:10:17.449,0:10:20.629
fertiggestellt werden. Das heißt, sobald[br]die Seite auf dem Server ist, muss die im

0:10:20.629,0:10:22.740
Prinzip gar nicht mehr zusammengebaut[br]werden, sondern einfach nur ausgeliefert

0:10:22.740,0:10:27.720
wie eben schon gesagt. Außerdem gibt es da[br]noch ein paar weitere Punkte, nämlich

0:10:27.720,0:10:33.935
werden Metadaten generiert. Wenn ihr[br]diese statischen Seiten generiert, das

0:10:33.935,0:10:36.100
heißt ihr habt auch entsprechend[br]Zusatzinformationen, die euch der

0:10:36.100,0:10:40.477
Generator automatisch zur Verfügung[br]stellt, wie zum Beispiel Autoren, die

0:10:40.477,0:10:44.439
Textlänge kann man mit Sicherheit auch bei[br]einigen rausziehen. Das Datum, wann das

0:10:44.439,0:10:47.571
ganze erstellt wurde. Irgendwelche Git[br]Informationen. Das sind alles

0:10:47.571,0:10:50.129
Informationen, die euch dann helfen,[br]entsprechend den ganzen Content ein

0:10:50.129,0:10:54.069
bisschen richer zu machen und ihn auch[br]besser, strukturierbar, auffindbar und

0:10:54.069,0:11:00.359
suchbarer zu machen. Und genau das ist[br]auch noch ganz wichtig. Außerdem gibt es

0:11:00.359,0:11:04.919
zusätzliche Features, die auch noch beim[br]static site generator dabei sind, nämlich

0:11:04.919,0:11:12.739
sowas wie das Anlegen und Rendering von[br]JavaScript oder CSS. Das heißt, dass eure

0:11:12.739,0:11:17.519
Stylesheets entsprechend schon minifiziert[br]werden und sowas, was ihr vielleicht auch

0:11:17.519,0:11:22.525
von Webentwicklung an sich kennt, falls[br]ihr da schon mal was gemacht habt. Hash

0:11:22.525,0:11:26.680
Generierung zur Verifizierung, dass die[br]Dateien richtig übertragen wurden, z.B.

0:11:26.680,0:11:30.120
die CSS-Dateien. Dazu komme ich später[br]noch mal. Oder die Bildverarbeitung, um

0:11:30.120,0:11:33.170
dafür zu sorgen, dass die Bilder[br]entsprechend relativ klein sind, die ihr in

0:11:33.170,0:11:37.779
eurer Seite einbaut. Also alles[br]Convenience Tools, die ihr quasi nutzen

0:11:37.779,0:11:42.230
könnt, um in eurer Seite ein entsprechend[br]vernünftiges Erlebnis bieten zu können.

0:11:42.230,0:11:47.160
Jetzt denkt ihr euch mit Sicherheit, das[br]nutzt doch keiner so, das klingt doch

0:11:47.160,0:11:50.658
total kompliziert und das will ich doch[br]überhaupt nicht haben. Und da habe ich

0:11:50.658,0:11:54.119
euch mal ein paar Beispiele mitgebracht.[br]Zum Beispiel seht ihr da oben links

0:11:54.119,0:11:59.079
nationalgeographic.co.uk Das ist[br]tatsächlich ein relativ bekanntes und

0:11:59.079,0:12:02.629
populäres Beispiel. Die haben gatsby als[br]Static Site Generator eingesetzt, dazu

0:12:02.629,0:12:06.959
komme ich auch gleich nochmal. Und ja, da[br]würde man im ersten Moment gar nicht davon

0:12:06.959,0:12:09.790
ausgehen, dass die Seite statisch[br]generiert ist. Ist sie aber komplett und

0:12:09.790,0:12:15.720
das macht sie entsprechend auch für hohe[br]Lasten relativ gut nutzbar und sorgt auch

0:12:15.720,0:12:18.839
dafür, dass die Seite, hohe Anfragen[br]entsprechend gut verarbeiten kann, und

0:12:18.839,0:12:22.130
auch schnell beim Nutzer ist. Da habe ich[br]noch ein paar Seiten aus dem Entwickler

0:12:22.130,0:12:27.371
Bereich mitgebracht, oben rechts seht ihr[br]das Ionic Framework für mobile Apps. Unten

0:12:27.371,0:12:32.189
links, das kann vielleicht auch einige[br]schon. Das ist die 1Password Hilfe für so

0:12:32.189,0:12:36.509
Dokumenten- Dokumentation eignet sich das[br]tatsächlich perfekt, sowas statisch zu

0:12:36.509,0:12:40.459
generieren, weil das ändert sich nicht so[br]oft. Und unten rechts auch relativ

0:12:40.459,0:12:45.620
unbekannt. Nein, Let's Encrypt natürlich[br]auch komplett statisch generiert auch da

0:12:45.620,0:12:49.110
hat die Seite große Nachfragen und[br]profitiert natürlich davon, wenn sowas

0:12:49.110,0:12:55.699
entsprechend schon fertig generiert ist.[br]Es gibt so ein paar Static Site Generators

0:12:55.699,0:13:00.139
die ich hier mal aufgelistet habe. Das[br]sind übrigens, habe noch nicht erwähnt,

0:13:00.139,0:13:03.913
alles in der Regel Command Line Programme,[br]das heißt ihr habt kein User Interface,

0:13:03.913,0:13:07.012
sondern - also -, kein GUI, kein Graphical[br]User Interface, sondern macht das alles

0:13:07.012,0:13:10.529
über die Kommandozeile. Darauf komme ich[br]aber auch gleich noch mal zu sprechen. Ihr

0:13:10.529,0:13:16.429
habt oben links Hugo, das ist ein Static[br]Site Generator, der mit GO funktioniert

0:13:16.429,0:13:20.790
und als Binary ausgeliefert wird und[br]relativ schnell und einfach funktioniert

0:13:20.790,0:13:25.559
und für die meisten Use Cases ausreicht.[br]Daneben Jekyll. Das ist mehr so der

0:13:25.559,0:13:28.974
Platzhirsch, den es eigentlich schon seit[br]Ewigkeiten gibt. Ist in Ruby geschrieben,

0:13:28.974,0:13:32.440
hat Pluginsupport wird glaube ich von[br]GitHub immer noch für statische Seiten

0:13:32.440,0:13:37.293
empfohlen und bietet euch ein bisschen[br]mehr Flexibilität als Hugo, hat aber den

0:13:37.293,0:13:40.399
Nachteil, dass es zum Beispiel auch[br]relativ viel Ruby mit sich schleppt, und

0:13:40.399,0:13:44.540
man sich mit der Ruby Toolchain mal[br]auseinandersetzen sollte. Für Leute, die

0:13:44.540,0:13:48.420
schon mal mit JavaScript gearbeitet haben,[br]gibt es hier zum Beispiel ganz oben rechts

0:13:48.420,0:13:55.180
auch Eleventy, wie gesagt JavaScript als[br]Backendsprache und arbeitet ähnlich wie

0:13:55.180,0:13:58.921
Hugo und wird auch gerne mal in andere[br]Toolchains mit integriert. Unten links

0:13:58.921,0:14:01.860
seht ihr Gatsby das ist ein Static Site[br]Generator der ein bisschen mehr macht als

0:14:01.860,0:14:05.878
die anderen. Der arbeitet mit React und[br]kann entsprechend auch Seiten generieren,

0:14:05.878,0:14:12.632
die ein bisschen mehr interaktiver sind[br]und die ohne viel Aufwand quasi auch dafür

0:14:12.632,0:14:16.269
sorgen, dass bestimmte fortgeschrittene[br]Techniken, die ich euch später noch mal

0:14:16.269,0:14:21.040
zeigen werde, auch direkt mit eingebaut[br]werden können und macht eure Seite noch

0:14:21.040,0:14:24.920
dynamischer und sorgt dafür, dass sie noch[br]weniger unterscheidbar von klassischen CMS

0:14:24.920,0:14:30.699
Seiten ist. Ganz unten rechts habe ich[br]euch noch Astro mal eingefügt. Das ist ein

0:14:30.699,0:14:34.639
relativ neues Tool, wenn ihr zum Beispiel[br]schon mit React oder Vue oder Svelte, das

0:14:34.639,0:14:38.427
sind alles Frontend Frameworks, gearbeitet[br]habt, ist das vielleicht was für euch. Da

0:14:38.427,0:14:41.809
könnte ihr nämlich genau diesen Code[br]schreiben von diesen entsprechenden

0:14:41.809,0:14:45.299
Frameworks und dann wird euch das komplett[br]statisch ohne JavaScript raus gerendert.

0:14:45.299,0:14:49.910
Das heißt, da müsst ihr nichts neu lernen,[br]sondern einfach easy anfangen eure

0:14:49.910,0:14:54.811
statische Seite zu bauen. Genau. Ich[br]trinke mal ganz kurz was und dann erzähle

0:14:54.811,0:15:00.395
ich euch mal ein bisschen, wie das ganze[br]überhaupt funktioniert. Und zwar klingt

0:15:00.395,0:15:01.929
das alles erst mal ein bisschen[br]überfordernd Ich habe euch jetzt

0:15:01.929,0:15:06.660
wahnsinnig viel über Sicherheitslücken und[br]über die Gründe für Static Site Generators

0:15:06.660,0:15:09.199
erzählt, aber ihr denkt euch[br]wahrscheinlich wovon rede ich da

0:15:09.199,0:15:13.899
überhaupt? Dafür habe ich mir ein Beispiel[br]mitgenommen von meinem Home Hackspace,

0:15:13.899,0:15:17.511
weil wir arbeiten tatsächlich mit Static[br]Site Generators, dass ist

0:15:17.511,0:15:22.329
darmstadt.ccc.de. Das wird bisher mit[br]Jekyll gebaut. Das habe ich neulich auf

0:15:22.329,0:15:26.759
Hugo portiert und in den folgenden Folien[br]seht ihr auch so ein bisschen Code daraus,

0:15:26.759,0:15:30.360
deswegen wollte ich euch mal kurz sagen,[br]dass das daher kommt und wir sind damit

0:15:30.360,0:15:35.109
auch sehr zufrieden. Und ich erzähle euch[br]auch so ein bisschen warum. Wenn ihr so

0:15:35.109,0:15:38.480
einen Static Site Generator erst mal euch[br]rausgesucht und installiert habt, dann

0:15:38.480,0:15:41.070
habt ihr meistens so einen[br]Initialisierungsbefehl irgendwann

0:15:41.070,0:15:47.578
eingegeben ins Terminal und dann liegt vor[br]euch eine riesen Ordnerstruktur. Diese

0:15:47.578,0:15:49.779
riesige Ordnerstruktur ist erst mal[br]vielleicht ein bisschen überfordernd,

0:15:49.779,0:15:53.149
gerade wenn man von Content Management[br]Systemen kommt und dann plötzlich damit

0:15:53.149,0:15:57.369
Dateien zu tun hat. Dann kann es einen ein[br]bisschen erschlagen. Ich kann euch das

0:15:57.369,0:16:01.949
aber mal ein bisschen runterbrechen und[br]vereinfachen. Wir haben hier im Prinzip

0:16:01.949,0:16:06.359
vier wichtige Bestandteile in jedem Static[br]Site Generator. Die heißen meistens ein

0:16:06.359,0:16:09.530
bisschen unterschiedlich, sind aber[br]relativ ähnlich zueinander. Wir haben

0:16:09.530,0:16:15.434
einmal die Inhalte und Daten. Das ist[br]quasi das, wo entsprechend dann das Herz

0:16:15.434,0:16:22.109
eurer Seite besteht, so mit Blog-Posts,[br]Seiten. Aber auch strukturierte oder semi-

0:16:22.109,0:16:27.062
strukturierte Daten könnt ihr entsprechend[br]da einpflegen. Und ihr habt da zum

0:16:27.062,0:16:32.109
Beispiel so Formate vorliegen wie[br]Markdown, YAML, JSON, TOML und so weiter.

0:16:32.109,0:16:37.290
Also verschiedene Formattypen. Dann habt[br]ihr Templates und/oder Themes. Das sind

0:16:37.290,0:16:40.922
sozusagen die Blöcke eurer statischen[br]Seite, die vorgeben, wie sie später

0:16:40.922,0:16:44.800
gerendert werden soll. Wenn euer Static[br]Site Generator die Seite zusammenbaut,

0:16:44.800,0:16:48.050
dann nimmt er sich den Content, guckt, wo[br]kommt das ins Template rein und baut das

0:16:48.050,0:16:51.720
alles entsprechend zusammen. Das heißt,[br]dass auch eine gewisse Uniformität erzeugt

0:16:51.720,0:16:55.309
wird. Und diese Templates und Themes habt[br]ihr im Prinzip an bestimmten Stellen in

0:16:55.309,0:17:00.410
diesem Static Site Generator liegen,[br]schreibt sie dort und strukturiert und

0:17:00.410,0:17:04.841
teilt sie auch dort auf. Außerdem habt ihr[br]Konfiguration. Das ist ganz klar. Alles

0:17:04.841,0:17:06.959
was ihr ins Netz stellt, muss auch[br]irgendwo konfiguriert werden und

0:17:06.959,0:17:10.819
entsprechend mit Metadaten versehen[br]werden. Das macht ihr meistens dort. In so

0:17:10.819,0:17:14.192
Konfigurationsdateien stellt ihr zum einen[br]meistens ein, wie so'n Static Site

0:17:14.192,0:17:18.260
Generator arbeiten soll aber auch zum[br]Beispiel Metadaten, euer Seitenname, eine

0:17:18.260,0:17:23.412
Beschreibung für SEO oder so kommt dann[br]meistens auch mit rein und Plugins oder

0:17:23.412,0:17:26.760
ähnliches werden dann meistens auch mit[br]rein konfiguriert, wenn euer Static Site

0:17:26.760,0:17:31.786
Generator das überhaupt unterstützt. Jetzt[br]habt ihr ganz viel Struktur und Text. Eine

0:17:31.786,0:17:37.072
Sache fehlt natürlich noch: Die statischen[br]Assets, wie zum Beispiel Styles, Fonts,

0:17:37.072,0:17:42.442
Bilder und Skripte. Also alles das, was[br]sozusagen dafür sorgt, dass das Ganze auf

0:17:42.442,0:17:46.531
einem Bildschirm ein bisschen mehr Form[br]und Farbe annimmt und auch ein bisschen

0:17:46.531,0:17:52.194
mehr Dynamik. Das ist quasi auch noch eine[br]Sache, die dort mit drinsteckt. Ich habe

0:17:52.194,0:17:56.340
von einem Beispiel gesprochen. Wir haben[br]ja die Darmstadt CCC Seite auf Hugo

0:17:56.340,0:18:01.080
umgebaut. Ist aktuell noch nicht deployed,[br]aber hier seht ihr schon mal ein bisschen

0:18:01.080,0:18:05.190
als Beispiel die Ordnerstruktur von Hugo.[br]Wenn ihr so'n hugo new site-Befehl

0:18:05.190,0:18:08.438
ausführt, dann habt ihr die[br]Konfigurationsdatei ganz oben. Das ist die

0:18:08.438,0:18:14.310
config.toml. Da definiert wie gesagt die[br]entsprechenden Werte für die Seite schon

0:18:14.310,0:18:18.390
drin. Dann habt ihr content. Das ist das[br]für semi- und unstrukturierten Inhalt der

0:18:18.390,0:18:22.486
Seite, zum Beispiel Blogposts. Also semi-[br]und unstrukturiert heißt im Prinzip

0:18:22.486,0:18:25.270
Markdown und Text einfach so als[br]unstrukturiert und semistrukturiert

0:18:25.270,0:18:28.993
könntet ihr auch zum Beispiel HTML-Seiten[br]und so drin schreiben, wenn ihr das

0:18:28.993,0:18:32.740
entsprechend braucht. Wenn ihr zum[br]Beispiel irgendwelche Datenbanken habt,

0:18:32.740,0:18:36.230
Listen oder ähnliches, die sich relativ[br]ähnlich sehen, habt ihr zum Beispiel den

0:18:36.230,0:18:40.750
data-Ordner. Da kommen dann, so YAML-,[br]TOML- und JSON-Dateien rein, die wirklich

0:18:40.750,0:18:44.310
einfach formatierte, strukturierte Inhalte[br]haben, die ihr zum Beispiel auch als

0:18:44.310,0:18:48.780
Listen in den Templates rendern könnt.[br]Statische Assets ist relativ schnell

0:18:48.780,0:18:55.848
erklärt, kommen in static rein. Themes[br]sind komplette Pakete, die ein bestimmtes

0:18:55.848,0:19:01.760
Thema enthalten, inklusive Layout und[br]Styles und Ähnlichem. Und unten habt ihr

0:19:01.760,0:19:06.100
Layouts. Layouts sind ein bisschen[br]spezifischer als Themes. Darauf komme ich

0:19:06.100,0:19:11.290
auch gleich noch mal zu sprechen. Das ist[br]im Prinzip der Teil, wo ihr bestimmt, wie

0:19:11.290,0:19:15.221
spezifische Inhalte auf eurer Seite auch[br]unabhängig vom Theme gerendert werden

0:19:15.221,0:19:18.685
sollen. Das klingt ein bisschen[br]verwirrend. Ich erkläre euch aber gleich

0:19:18.685,0:19:22.603
mal, wo da der Unterschied genau besteht.

0:19:22.603,0:19:25.966
Inhalte. Wenn ihr anfangt, so eine

0:19:25.966,0:19:28.865
statische Seite zu bauen, dann ist das[br]erste, was euch in den Sinn kommt,

0:19:28.865,0:19:32.336
natürlich, dass ihr irgendwo Inhalte[br]reinpacken wollt. Und wie gesagt, kommt

0:19:32.336,0:19:37.690
das bei Hugo zum Beispiel in diesem[br]Content Directory. Und dort habt ihr hier

0:19:37.690,0:19:42.350
zum Beispiel wie auf der linken Seite zu[br]sehen verschiedene Markdown Dateien bei

0:19:42.350,0:19:46.510
darmstadt.ccc.de zum Beispiel. Wir haben[br]das Impressum und so, einen Ordner mit

0:19:46.510,0:19:50.653
Posts, mit Blogposts und dort strukturiert[br]ihr euch den ganzen Inhalt rein. In diesem

0:19:50.653,0:19:56.240
Fall kommen die Inhalte bei uns halt aus[br]Dateien und sie sind halt strukturiert

0:19:56.240,0:20:00.500
oder semistrukturiert und ihr habt[br]verschiedene Formatmöglichkeiten, die ihr

0:20:00.500,0:20:03.360
wählen könnt. Das heißt, wenn ihr nicht[br]Markdown schreiben wollt, könnt ihr auch

0:20:03.360,0:20:08.484
HTML schreiben oder eine andere Form von[br]Markup Sprache, die euch vielleicht ein

0:20:08.484,0:20:15.132
bisschen gelegener ist. Wenn ihr mal so[br]eine Markdown Datei aufmacht, dann fällt

0:20:15.132,0:20:19.550
euch auf, dass da nicht nur Markdown[br]drinsteht, wie hier zum Beispiel ab Zeile

0:20:19.550,0:20:24.754
10, wo es hier um Freifunk geht, sondern[br]da gibt es auch was oben drüber. Das ist

0:20:24.754,0:20:29.900
bei Static Site Generators relativ häufig[br]so. Ihr habt nämlich hier entsprechend ein

0:20:29.900,0:20:33.949
paar Metadaten oder wie es bei Static Site[br]Generators häufig genannt wird, front

0:20:33.949,0:20:39.410
matter. Dieses front matter sorgt dafür,[br]dass Static Site Generator weiß, worum es

0:20:39.410,0:20:42.140
eigentlich in dem Inhalt überhaupt geht[br]und vor allen Dingen auch, wo er genau hin

0:20:42.140,0:20:46.530
soll. In diesem Fall haben wir hier zum[br]Beispiel ein Layout, was festgelegt wird,

0:20:46.530,0:20:50.750
ist hier das page Layout. Wir haben den[br]Titel der Seite. Das ist zum Beispiel, wie

0:20:50.750,0:20:54.010
gesagt, es geht hier um Freifunk, Freifunk[br]und was hier unten ganz cool ist, das ist

0:20:54.010,0:20:57.180
ein bisschen spezifischer für den Static[br]Site Generator: Wir legen hier eine

0:20:57.180,0:21:01.298
Menüposition fest für den entsprechenden[br]Inhalt. Das heißt, ihr geht nicht

0:21:01.298,0:21:04.950
irgendwie, wie im Wordpress, zur Seite,[br]schreibt die, geht ins Menü und zieht das

0:21:04.950,0:21:08.900
dann ins Menü rein, sondern ihr schreibt[br]direkt in den Inhalt rein. So, hier, pack

0:21:08.900,0:21:12.271
das mal bitte da hin und das macht ihr[br]alles schön von einem Ort raus und der

0:21:12.271,0:21:17.350
Static Site Generator übernimmt dann den[br]Rest. Die letzte Variable ist etwas, was

0:21:17.352,0:21:21.733
zum Beispiel auch templatespezifisch oder[br]themespezifisch ist. Wird bei uns zum

0:21:21.733,0:21:26.180
Beispiel verwendet. Hier für das[br]entsprechende Bild in der jeweiligen Seite

0:21:26.180,0:21:30.600
ist hier die Hero-Variable. Die gibt es so[br]im Static Site Generator eigentlich nicht,

0:21:30.600,0:21:34.270
wurde von mir sozusagen hinzugefügt. Und[br]genau sowas könnt ihr auch machen, wenn

0:21:34.270,0:21:40.308
ihr zum Beispiel spezielle Bedürfnisse für[br]Variablen in euren Templates habt. Wenn

0:21:40.308,0:21:45.820
ihr irgendwie mit Markdown und so nicht[br]klarkommt, habt ihr auch andere Optionen,

0:21:45.820,0:21:48.796
z. B. CSV, JSON, YAML und TOML, ich habe[br]es eben schon gesagt, strukturierte

0:21:48.796,0:21:52.210
Inhalte. Das ist zum Beispiel gut für[br]große Datensätze. Wenn ihr zum Beispiel

0:21:52.210,0:21:56.770
ein Team in einer Firma habt, dann wollt[br]ihr das vielleicht nicht alles so in HTML

0:21:56.770,0:22:01.050
manuell runter hacken und euch irgendwann[br]denken, ja, doof, und irgendwo habt ihr

0:22:01.050,0:22:03.952
vielleicht mal einen Formatierungsfehler[br]drin, dann sieht alles aus wie Grütze. Und

0:22:03.952,0:22:06.790
das macht dann eigentlich auch im Prinzip[br]keinen Spaß, weil da macht ihr dann im

0:22:06.790,0:22:10.481
Prinzip das Layouting über die Templates[br]und müsst euch da keine Sorgen machen. Ihr

0:22:10.481,0:22:13.290
schreibt einmal das Layout und ein Static[br]Site Generator macht dann halt keine

0:22:13.290,0:22:17.720
Fehler und bindet euch eure coole[br]Datenbank schön in die Seite rein und dann

0:22:17.720,0:22:22.310
ist die da vernünftig zu sehen. Außerdem[br]vermeidet das wie gesagt Inkonsistenz.

0:22:22.310,0:22:26.860
Wenn ihr jetzt zum Beispiel, worauf ich[br]auch später noch mal zu sprechen komme,

0:22:26.860,0:22:30.850
ein Content Management System habt oder[br]ähnliches, wo ihr Daten rausziehen wollt

0:22:30.850,0:22:34.653
oder eine andere Applikation, dann geht[br]das bei den meisten Static Site Generators

0:22:34.653,0:22:38.980
auch. Dann geht ihr, sucht euch ne[br]entsprechende API raus. REST ist da

0:22:38.980,0:22:42.580
eigentlich der Standard. Viele können auch[br]einen neueren Standard, der sich GraphQL

0:22:42.580,0:22:47.610
nennt, wo ihr festlegen könnt, was genau[br]ihr an Inhalten überhaupt abgerufen haben

0:22:47.610,0:22:53.060
wollt. Und diese Daten werden dann zur[br]Renderingzeit quasi von der API abgerufen

0:22:53.060,0:22:59.159
und in eure statische Seite integriert.[br]Genau, in jedem Content Management System,

0:22:59.159,0:23:01.159
normalen Content Management[br]System, gibt es auch, zum Beispiel headless

0:23:01.159,0:23:04.900
CMS, da komme ich auch noch mal gleich[br]darauf zurück und auch da geht das

0:23:04.900,0:23:08.120
Layouting dann wieder über das Template.[br]Das heißt, ihr zieht euch nur die ganzen

0:23:08.120,0:23:12.461
Daten raus und packt sie in dieses[br]Template rein und vermeidet auch da

0:23:12.461,0:23:18.400
entsprechende Inkonsistenzen. Jetzt habe[br]ich viel über Thema Themes und Templates

0:23:18.400,0:23:23.680
geredet. An dieser Stelle sollte ich[br]vielleicht mal ganz kurz erzählen, was das

0:23:23.680,0:23:28.270
überhaupt ist und wie sich das voneinander[br]unterscheidet, weil das klingt ja schon

0:23:28.270,0:23:33.110
relativ ähnlich. So ein Theme ist, wie[br]gesagt, so ein Gesamtpaket. Wenn ihr jetzt

0:23:33.110,0:23:37.360
kein eigenes Theme in Hugo schreibt, dann[br]ladet ihr euch das irgendwo runter, bei

0:23:37.360,0:23:41.510
GitHub zum Beispiel oder so und da ist[br]dann alles drin, da sind Templates drin,

0:23:41.510,0:23:47.690
da sind entsprechend Styles drin, Skripte[br]und so weiter, Fonts. Das heißt, ihr

0:23:47.690,0:23:50.920
installiert das einmal, startet im Prinzip[br]einen Static Site Generator und seid

0:23:50.920,0:23:54.580
gewaschen, gekämmt und die Seite sieht[br]schön aus. So ein Theme stellt das

0:23:54.580,0:23:59.490
Grundgerüst der Seite entsprechend und[br]auch die meisten Basistemplates. Das heißt

0:23:59.490,0:24:03.300
hier, wie ihr das zum Beispiel links seht,[br]haben wir hier so ein Basistemplate mal

0:24:03.300,0:24:07.410
grafisch abgebildet. Wir haben hier eine[br]Kopfzeile, einen Hauptbereich und einen

0:24:07.410,0:24:10.971
Footer und so beginnen meistens die[br]Templates auch in Hugo. Das ihr ein

0:24:10.971,0:24:16.210
base-of Template habt. Und ab da werden[br]sozusagen die Layouts ineinander immer

0:24:16.210,0:24:22.370
weiter verschachtelt und so setzt sich[br]dann eure Seite zusammen. Eine typische

0:24:22.370,0:24:26.480
Aufteilung, habe ich wie gesagt schon[br]erwähnt, besteht ja meist aus diesen drei

0:24:26.480,0:24:30.120
Blöcken. Ihr habt ein Headertemplate, wo[br]eure ganzen Metadaten das CSS, das

0:24:30.120,0:24:35.220
JavaScript und so reinkommt. Ihr habt den[br]Main-Bereich, wo euer Inhalt dann meistens

0:24:35.220,0:24:38.170
reinkommt, wo auch entsprechend die[br]einzelnen Inhaltstemplates meistens

0:24:38.170,0:24:43.280
eingefügt werden. Und ein vierter Bereich[br]wo euer ganzer JavaScript-Kram und so

0:24:43.280,0:24:47.193
reinkommt, wo ihr vielleicht eure[br]Copyright Notice reinpackt und so. Das ist

0:24:47.193,0:24:50.221
meistens die Grundstruktur und dort kann[br]es halt auch sein, dass die Templates sich

0:24:50.221,0:24:54.660
dann noch weiter verschachteln. Was ist[br]denn so ein mysteriöses Template

0:24:54.660,0:24:59.240
überhaupt? So ein Template ist im Prinzip,[br]es sieht, wenn ihr das jetzt mal auf der

0:24:59.240,0:25:03.642
linken Seite seht, fast aus wie eine HTML-[br]Seite. Das ist es aber nicht ganz. Es ist

0:25:03.642,0:25:07.703
im Prinzip, wie schon der Name verrät,[br]eine Vorlage. Und diese Vorlage sagen dem

0:25:07.703,0:25:12.370
Static Site Generator, was er mit eurem[br]Content machen soll. Hier zum Beispiel

0:25:12.370,0:25:18.890
habe ich mal so schematisch auf der linken[br]Seite ein bisschen skizziert, wie das

0:25:18.890,0:25:22.930
aussehen könnte. Wenn ihr zum Beispiel ein[br]Blogpost rendern wollt, ihr extended hier

0:25:22.930,0:25:26.730
meinetwegen euer Basis Template. Extend[br]heißt im Prinzip, ihr sagt eurem Static

0:25:26.730,0:25:30.990
Site Generator: Wenn du den Blogpost[br]renderst, dann nutz als Basis bitte das

0:25:30.990,0:25:36.230
Template 42, also pack den Rest ins[br]Template 42, damit Template 42 den ganzen

0:25:36.230,0:25:43.070
Rest der Seite enthält. Und ich habe zum[br]Beispiel die article Tags wurden über

0:25:43.070,0:25:46.050
einen Artikel und so entsprechend[br]eingefügt, das ist jetzt ganz normales

0:25:46.050,0:25:48.756
HTML, ist nicht so wichtig und ihr habt[br]hier zwei Variablen, zum Beispiel

0:25:48.756,0:25:55.730
Titelvariable hier in Header 1 und unten[br]in dem Div Element mit "rC3-is-awesome"

0:25:55.730,0:25:59.590
eure Inhaltsvariable, d.h. da wird der[br]Content vom Blogpost entsprechend rein

0:25:59.590,0:26:05.480
gerendert. Und ihr könnt dort nicht nur[br]meistens Textvariablen einbinden, sondern

0:26:05.480,0:26:10.090
dort werden auch eure Assets und Ähnliches[br]eingebunden. Das heißt, alles wie sich die

0:26:10.090,0:26:14.880
Seite am Ende zusammensetzt, regelt ihr in[br]der Regel über die Templates. Ich habe

0:26:14.880,0:26:20.252
euch da mal so ein Beispiel mitgebracht.[br]Ihr seht das hier ganz gut oben. Das ist

0:26:20.252,0:26:24.231
ein Auszug aus einer Single HTML in Hugo.[br]Das sieht ähnlich aus wie mein

0:26:24.231,0:26:28.145
schematisches Beispiel eben. Ihr extended[br]hier das Template "main", habt dann hier

0:26:28.145,0:26:32.881
Titelvariable, zum Beispiel im Header 1[br]und hier die Contentvariable in main. Und

0:26:32.881,0:26:36.090
was Hugo da macht, es ersetzt hier den[br]Titel halt durch den Titel eures

0:26:36.090,0:26:40.090
Blogposts, den Content durch den Inhalt[br]und packt das Ganze in euer Main Template,

0:26:40.090,0:26:45.850
also in das Restgerüst eurer Seite. Ich[br]habe auch gesagt, Hugo fängt meistens mit

0:26:45.850,0:26:50.574
so einem Bassistemplate an, das seht ihr[br]hier unten. Wenn ihr schon HTML

0:26:50.574,0:26:53.460
geschrieben habt, kommt euch das[br]vielleicht bekannt vor. Das ist so ein

0:26:53.460,0:26:57.141
klassisches Grundgerüst und ihr seht auch[br]schon, hier fängt es z.B. an, dass wir die

0:26:57.141,0:27:01.210
lang, also die language der Seite hier[br]schon mit einer Variable festlegen, die

0:27:01.210,0:27:06.080
zum Beispiel in diesem Fall bei Hugo[br]global ist. Wir fügen hier schon direkt

0:27:06.080,0:27:10.779
ein Template ein, das ist das head[br]Template, also das, was im HTML dieses

0:27:10.779,0:27:14.400
head-Element ist, das kommt da mit rein[br]und der Rest kommt hier in den Body rein.

0:27:14.400,0:27:17.106
Ist auch nicht so wichtig. Ihr müsst noch[br]nicht alles verstehen. Nur im Prinzip

0:27:17.106,0:27:19.730
müsst ihr euch vorstellen, alles was in[br]diesen geschweiften Doppelklammern drin

0:27:19.730,0:27:24.670
ist, sind quasi Bausteine, die der Static[br]Site Generator zur Bauzeit quasi einzeln

0:27:24.670,0:27:29.990
in die Seite rein setzt und daraus[br]entsteht dann das Gesamtkonstrukt. Ich

0:27:29.990,0:27:33.608
habe von der head.html gesprochen, so[br]sieht die ja auch im Prinzip aus bzw. ein

0:27:33.608,0:27:36.750
Auszug davon. Ich habe das eingefügt, weil[br]ich euch zwei Dinge mal zeigen wollte,

0:27:36.750,0:27:40.826
nämlich könnt ihr auch ein bisschen[br]advancederes Zeug damit machen. Ihr könnt

0:27:40.826,0:27:44.117
z.B. Conditionals auch schreiben. Meistens[br]haben diese Static Site Generators eine

0:27:44.117,0:27:49.370
Template Language an Bord, die euch viel[br]Dynamik erlaubt und entsprechend euch auch

0:27:49.370,0:27:53.697
die Möglichkeit bietet, auf viele Sachen[br]sehr dynamisch zu reagieren. Zum Beispiel

0:27:53.697,0:27:57.409
sagen wir hier, wenn die Seite nicht die[br]Homeseite ist, dann hängt bitte den

0:27:57.409,0:28:02.681
Seitentitel hinten dran. Oder wir fügen[br]die Description der Seite entsprechend ein

0:28:02.681,0:28:05.890
und hier unten, was ganz cool ist. Ich[br]habe schon gesagt, so ein Template bietet

0:28:05.890,0:28:09.750
euch ein bisschen mehr Möglichkeit, als[br]nur Textvariablen einzubinden. Ihr habt

0:28:09.750,0:28:13.710
hier unten die Möglichkeit, zum Beispiel[br]Ressourcen zu laden. Zum Beispiel haben

0:28:13.710,0:28:19.510
wir eine SASS-File, eine SCSS-File, das[br]ist ein Superset von CSS, was sozusagen

0:28:19.510,0:28:23.360
kompiliert werden muss, damit es dann[br]eingefügt werden kann. Und das macht unser

0:28:23.360,0:28:27.260
Static Site Generator hier mit diesen[br]Befehlen automatisch mit toCSS macht es

0:28:27.260,0:28:32.160
das quasi zu CSS und macht es dann auch[br]gleich minifiziert und fingerprinted das.

0:28:32.160,0:28:35.160
Fingerprinting heißt, einfach für alle die[br]das nicht kennen, dass man quasi so eine

0:28:35.160,0:28:39.300
Prüfsumme generiert. Und dann, wenn wir[br]das alles hier einmal gemacht haben, durch

0:28:39.300,0:28:43.559
so eine Pipeline durchlaufen lassen haben,[br]können wir es hier direkt einfügen und

0:28:43.559,0:28:48.500
haben quasi einen relativ coolen Style-[br]Tag. der auch relativ viel Sicherheit und

0:28:48.500,0:28:51.791
Absicherung, bietet, dass irgendwas schief[br]laufen kann. Und das alles macht ihr hier

0:28:51.791,0:28:55.750
im Template und das ist halt in vielen[br]Content Management System deutlich

0:28:55.750,0:29:01.120
komplizierter und oft auch manchmal nur[br]mit Plugins zu lösen. Kurz umrissen, damit

0:29:01.120,0:29:04.241
ich es nicht ausgelassen habe. Ich habe[br]das meiste ja eigentlich schon erzählt.

0:29:04.241,0:29:07.980
Statische Assets kommen in den eigenen[br]Ordner und neben diesen ganzen CSS- und

0:29:07.980,0:29:11.140
JavaScript-Kram sind es Bilder und[br]Schriftarten, die da auch gerne

0:29:11.140,0:29:16.620
auftauchen. Die könnt ihr meistens dann[br]über absolute Pfade in eure Seite

0:29:16.620,0:29:21.320
einbinden und die meisten Static Site[br]Generators bieten euch auch Preprocessing.

0:29:21.320,0:29:25.860
Ich habe es hier mit CSS gezeigt. Es geht[br]auch mit Bildern und macht auch meistens

0:29:25.860,0:29:27.860
mit Bildern viel Sinn. Das heißt, ihr[br]müsst nicht irgendwie euer

0:29:27.860,0:29:31.800
Bilderminifizierungs-Tool aufrufen und da[br]eure Bilder einzeln reinschieben, sondern

0:29:31.800,0:29:34.830
ihr schiebt eure Bilder einfach cool in[br]den Content-Ordner rein, sagt dem Static

0:29:34.830,0:29:39.570
Site Generator einmal bau das bitte. Und[br]dann fallen am Ende für das Web optimierte

0:29:39.570,0:29:45.280
Bilder raus, die entsprechend schon eine[br]angenehme Größe haben. Wenn ihr jetzt

0:29:45.280,0:29:48.990
diesen ganzen Prozess einmal durchlaufen[br]habt, ihr euch sicher seid okay, jetzt

0:29:48.990,0:29:52.091
möchte ich das schon mal online stellen,[br]dann kommt ihr irgendwann an den Punkt, wo

0:29:52.091,0:29:56.780
ihr das auf den Server hochladen wollt. Es[br]ist im Gegensatz zu Content Management

0:29:56.780,0:30:01.800
Systemen hier super simpel und relativ[br]easy, weil ihr müsst einfach nur ein paar

0:30:01.800,0:30:05.060
Dateien hochladen. Ihr sagt einem Static[br]Site Generator meistens, dass er das

0:30:05.060,0:30:08.940
irgendwie bauen soll mit einem Build-[br]Command. Und wenn ich diesen Build-Command

0:30:08.940,0:30:13.641
ausgeführt habt, dann kommt da ein Haufen[br]statischer Dateien raus. Die schiebt ihr

0:30:13.641,0:30:16.498
dann meistens in ein sogenanntes Content[br]Delivery Network oder auf einen

0:30:16.498,0:30:20.880
statischen, also auf einen normalen[br]Webserver. Das ist beides das gleiche,

0:30:20.880,0:30:24.280
außer dass ein Content Delivery Network[br]halt, meistens auf viele Nodes verteilt

0:30:24.280,0:30:29.540
sind. Stichwort Skalierung. Und die Last[br]ist halt gering, weil es auch keine

0:30:29.540,0:30:32.750
Runtime gibt. Das heißt egal wo ihr das[br]hinschiebt, die Webserver haben damit

0:30:32.750,0:30:37.800
meistens nichts zu tun, weil die müssen im[br]Prinzip einfach nur die Seite auf die User

0:30:37.800,0:30:41.720
werfen, wenn die Seite aufgerufen wird.[br]Das ist halt ein super einfacher Prozess.

0:30:41.720,0:30:45.471
Viele Anbieter von so Content Delivery[br]Networks haben auch die Möglichkeit, eine

0:30:45.471,0:30:48.660
sogenannte Continuous Integration und[br]Continuous Delivery anzubieten. Das heißt,

0:30:48.660,0:30:52.470
da müsst ihr euch nicht mal ums Bauen[br]kümmern, da verknüpft ihr einfach das Git-

0:30:52.470,0:30:56.280
Repository und dann, wenn ihr was pusht,[br]dann kommt es automatisch sozusagen zum

0:30:56.280,0:30:59.650
Anbieter, wird zusammengebaut und deployt.[br]Das heißt es ist für euch super einfach,

0:30:59.650,0:31:04.130
ihr macht eine Änderung, pusht die einfach[br]und dann wird der Rest vom entsprechenden

0:31:04.130,0:31:07.250
Anbieter übernommen. Oder ihr baut euch[br]selbst eine CI oder eine Continuous

0:31:07.250,0:31:10.635
Delivery. Das geht natürlich auch. Das[br]wird dann entsprechend über Webhooks

0:31:10.635,0:31:17.864
getriggert. Kommen wir noch kurz zum[br]Vergleich. Es ist schon ein bisschen her,

0:31:17.864,0:31:21.220
aber ihr erinnert euch vielleicht noch an[br]den Anfang. Ich habe so ein paar Punkte

0:31:21.220,0:31:24.860
gemacht und die möchte ich mal ein[br]bisschen dem Static Site Generator

0:31:24.860,0:31:30.010
gegenüberstellen. Zum ersten waren es[br]Sicherheitsupdates. Ihr habt natürlich

0:31:30.010,0:31:32.850
hier kein Zugriff aufs Backend. Das heißt,[br]es wird natürlich erst mal schwierig, das

0:31:32.850,0:31:35.690
Content Management System, was hier[br]entsprechend nicht vorhanden ist,

0:31:35.690,0:31:39.880
natürlich anzugreifen. Das heißt, ihr[br]müsstet euch an den Webserver oder

0:31:39.880,0:31:43.400
ähnliches machen, um überhaupt Zugriff zu[br]bekommen. Und wenn die Seite einmal online

0:31:43.400,0:31:47.010
ist, dann braucht die auch erst mal keine[br]Sicherheitsupdates. Außer vielleicht, wenn

0:31:47.010,0:31:51.356
mal Frontend-Updates, wenn irgendwelche[br]bestimmten Standards auslaufen. Wenn ihr

0:31:51.356,0:31:54.300
eure Seite mit HTML 1.0 geschrieben habt,[br]dann wird die vielleicht irgendwann nicht

0:31:54.300,0:31:58.750
mehr dargestellt oder wenn ihr die für den[br]Internet Explorer optimiert habt. Das

0:31:58.750,0:32:02.850
Backend benötigt natürlich Wartung, auch[br]die Hosting Hardware und Software benötigt

0:32:02.850,0:32:05.390
Wartung. Das ist natürlich[br]selbstverständlich, aber es ist halt schon

0:32:05.390,0:32:10.370
deutlich geringerer Aufwand. Die Features[br]können überhaupt nicht wirklich kaputt

0:32:10.370,0:32:13.441
gehen, weil die Inhalte meistens über[br]Standards kommen, das heißt HTML ist

0:32:13.441,0:32:17.498
standardisiert, CSS ist standardisiert und[br]auch JavaScript ist standardisiert. Das

0:32:17.498,0:32:19.852
veraltet irgendwann, aber bis das[br]veraltet, habt ihr wahrscheinlich eure

0:32:19.852,0:32:24.890
Seite schon mal umgebaut und die[br]Portierung auf ein anderes System oder

0:32:24.890,0:32:28.120
auch von einem entsprechenden Content[br]Management System ist halt super einfach

0:32:28.120,0:32:32.230
weil diese Standards halt existieren. Die[br]Plugin-Hölle, die gibt es eigentlich so

0:32:32.230,0:32:40.230
nicht mehr wirklich. Es gibt Static Site[br]Generators, die halt entsprechend Plugins

0:32:40.230,0:32:44.351
euch bieten, aber die machen euch erst mal[br]keine Probleme, wenn die outdated sind und

0:32:44.351,0:32:48.600
ihr habt relativ viel Zeit auch[br]entsprechend dort eine eigene Lösung zu

0:32:48.600,0:32:52.630
implementieren oder auf eine andere Lösung[br]zu wechseln, weil diese Plugins halt nicht

0:32:52.630,0:32:55.794
irgendwo online liegen, sondern die sind[br]halt bei euch lokal und bauen nur die

0:32:55.794,0:32:59.880
Seite. Und wenn da mal was kaputt geht[br]oder outdated ist, dann ist das nicht

0:32:59.880,0:33:03.750
direkt für Nutzer sichtbar. Genau. Ich[br]habe eben schon kurz von Skalierung

0:33:03.750,0:33:07.351
gesprochen. Das ist halt bei Static Sites[br]super einfach, natürlich auch nicht

0:33:07.351,0:33:12.710
unendlich erweiterbar. Wenn so ein[br]Webserver irgendwie eine riesen

0:33:12.710,0:33:15.684
Menschenmasse abkriegt, dann geht der[br]irgendwann auch mal in die Knie. Aber dass

0:33:15.684,0:33:19.934
das passiert ist halt wesentlich später.[br]Auch cool ist halt, dass ihr im Content

0:33:19.934,0:33:23.980
Delivery Network die Seite verteilen könnt[br]auf verschiedene Nodes und euch so

0:33:23.980,0:33:29.730
entsprechend ein bisschen[br]Skalierungsaufwand ersparen könnt. Das

0:33:29.730,0:33:33.110
Ausrollen ist außerdem sehr einfach. Das[br]heißt, wenn ihr eine Änderung haben wollt,

0:33:33.110,0:33:36.350
dann müsst ihr nicht anfangen, irgendwie[br]Datenbanken zu migrieren, die PHP-Version

0:33:36.350,0:33:40.040
zu updaten, irgendwelche Plugins zu[br]enabeln, sondern ihr schiebt einfach die

0:33:40.040,0:33:43.780
Dateien auf den Server und es läuft. Eine[br]Datenbank gibt es natürlich in diesem Fall

0:33:43.780,0:33:46.940
dann auch entsprechend nicht. Die muss[br]nicht mit skalieren. Das einzige was es

0:33:46.940,0:33:50.420
geben kann, ich habe es vorhin gesagt,[br]wenn ihr z.B. eine API verwendet und ihr

0:33:50.420,0:33:53.690
wollt zum Beispiel auch die API nicht nur[br]vom Static Site Generator direkt beim

0:33:53.690,0:33:59.440
Rendering aufrufen lassen. Dazu komme ich[br]nämlich gleich, sondern auch über über

0:33:59.440,0:34:03.740
JavaScript z.B. wenn jemand die Seite[br]aufruft, dann muss diese API entsprechend

0:34:03.740,0:34:08.142
auch mit Skalieren und auch entsprechend[br]abgesichert sein. Aber das ist dann ein

0:34:08.142,0:34:11.500
Problem, mit dem man sich dann[br]beschäftigen muss. Und es gibt auch da ein

0:34:11.500,0:34:17.270
paar Vorteile, weswegen man trotzdem einen[br]Static Site Generator verwenden möchte.

0:34:17.270,0:34:20.300
Kommen wir jetzt mal noch ein bisschen zu[br]advancteren Themen. Ich habe gerade eben

0:34:20.300,0:34:23.599
schon gesagt, wie ist das denn, wenn ihr[br]eine API abrufen wollt? Wenn ihr zum

0:34:23.599,0:34:28.510
Beispiel eine statische Seite generiert,[br]aber trotzdem vielleicht Änderungen

0:34:28.510,0:34:32.290
schnell sichtbar haben wollt? Weil das[br]kann häufiger schon mal sein. Da gibt es

0:34:32.290,0:34:37.849
einen Prozess, der sozusagen sich darum[br]kümmert, dass wenn ihr eine Seite aufruft,

0:34:37.849,0:34:40.989
dass sie dann entsprechend mit Inhalt[br]gefüllt wird, dass sie sozusagen mit

0:34:40.989,0:34:44.879
JavaScript Wasser übergossen wird und dann[br]anfängt, auf einmal neue Inhalte

0:34:44.879,0:34:49.057
nachzuladen. Dieser Prozess nennt sich[br]Hydration. Da gibt es zwei verschiedene

0:34:49.057,0:34:53.970
Techniken, da gibt es einmal das partial[br]hydration. Das heißt, bestimmte Inhalte

0:34:53.970,0:34:58.663
der Seite werden einfach nur sozusagen mit[br]Dynamik versehen, mit JavaScript. Das

0:34:58.663,0:35:01.712
heißt, ihr seht es auch unten in der[br]Grafik: Die Seite läd, dann wird die Seite

0:35:01.712,0:35:04.976
aufgerufen, dann hat die ein bisschen[br]Inhalt, der ist hier halt noch orange und

0:35:04.976,0:35:07.819
dann kommt die Hydration in diesem[br]orangenen Bereich und hängt sich da rein,

0:35:07.819,0:35:11.389
sozusagen mit JavaScript und lädt[br]vielleicht Inhalte nach. Und auf einmal

0:35:11.389,0:35:14.050
sind da plötzlich drei Blogposts, weil[br]vielleicht der Rendering Prozess noch

0:35:14.050,0:35:18.300
nicht hinterher gekommen ist, weil die den[br]halt gerade just veröffentlicht ist. Oder

0:35:18.300,0:35:23.319
ihr habt eine ganz hitzige Kommentarspalte[br]und viel zu rendern, das lohnt sich jetzt

0:35:23.319,0:35:27.114
einfach mal gerade nicht. Ihr könnt es[br]auch mit lazy Hydration machen. Das hat

0:35:27.114,0:35:32.099
sogar noch den Vorteil, dass ihr[br]entsprechende Inhalte nur hydrated, wenn

0:35:32.099,0:35:35.130
sie überhaupt in den Sichtbereich kommen.[br]Das ist, wenn ihr viel Hydration nutzen

0:35:35.130,0:35:38.839
wollt, sinnvoll, weil ihr dann nicht[br]anfangt, dem Client irgendwie mit ganz

0:35:38.839,0:35:43.411
viel JavaScript um die Ohren zu werfen.[br]So, wir kommen auch langsam Richtung Ende,

0:35:43.411,0:35:48.695
keine Sorge. Wir haben hier noch die[br]deferred Static Site Generation. Das ist

0:35:48.695,0:35:55.011
ein cooler Mittelweg, wenn ihr zum[br]Beispiel sagen wollt: Okay, ich hätte gern

0:35:55.011,0:35:57.739
trotzdem noch den Server und ich hätte[br]gerne schnelles Rendering und es soll

0:35:57.739,0:36:02.190
alles schnell bereitgestellt werden. Ist[br]das hier ein cooler Weg. Ihr habt einen

0:36:02.190,0:36:05.690
Server im Hintergrund, der quasi wie ein[br]CMS läuft. Hier ist es zum Beispiel unten

0:36:05.690,0:36:08.766
in der Grafik von Gatsby, und ich sehe,[br]die Quelle ist abgeschnitten. Das sollte

0:36:08.766,0:36:12.609
vielleicht mal fixen danach ist auch egal.[br]Ich habe jetzt gesagt von gatsby.org ist

0:36:12.609,0:36:18.165
das gerade und dieser Server, der läuft im[br]Hintergrund und liefert die Seite aus. Und

0:36:18.165,0:36:20.764
jedes Mal, wenn diese Seite ausgeliefert[br]wird und es gab eine Inhalts-Änderung,

0:36:20.764,0:36:24.579
dann wird ein Abbild automatisch[br]generiert. Das wird im Cache abgelegt und

0:36:24.579,0:36:27.866
wenn die nächste Person kommt, kriegt die[br]nur den Cache zurück geworfen. Das heißt

0:36:27.866,0:36:33.349
im Prinzip habt ihr immer ein Abbild, was[br]sozusagen inkrementell mitgeneriert wird

0:36:33.349,0:36:36.627
und es fühlt sich an wie eine statische[br]Seite, skaliert auch ähnlich. Aber ihr

0:36:36.627,0:36:38.749
habt eben immer noch die Dynamik des[br]Servers hinten dran und könnt schnell auf

0:36:38.749,0:36:43.710
Änderungen reagieren. Wenn ihr sagt, okay,[br]ich will mein Content Management System

0:36:43.710,0:36:48.930
nicht komplett aufgeben, dann gibt es auch[br]so coole hybride Ansätze und auch Plugins

0:36:48.930,0:36:52.440
für viele Content Management Systeme. Seid[br]gewarnt, ihr nehmt natürlich die vielen

0:36:52.440,0:36:55.809
Nachteile des Backend-Servers dann mit[br]euch. Aber wenn ihr sagt, ihr wollt nur

0:36:55.809,0:36:58.599
skalieren und Sicherheitsupdates sind für[br]euch kein Problem, ist das vielleicht für

0:36:58.599,0:37:05.720
euch ein Ansatz. Ihr habt auch dort die[br]Möglichkeit, entsprechend dafür zu sorgen,

0:37:05.720,0:37:11.590
dass auch die Leute weiterhin die Seite[br]pflegen können. Mir fällt auch auf, dass

0:37:11.590,0:37:15.930
da eine Slide irgendwie fehlt mit dem mit[br]dem Workflowwechsel, deswegen baue ich das

0:37:15.930,0:37:19.859
hier schnell ein. Die Leute können halt[br]weiterhin sozusagen über eure Seite

0:37:19.859,0:37:23.854
entsprechend den Content pflegen für eure[br]Redakteure. Wenn ihr ein größeres Team

0:37:23.854,0:37:29.210
habt, ändert sich nichts. Und so habt ihr[br]weiterhin alles im Griff und habt trotzdem

0:37:29.210,0:37:32.640
die Möglichkeit, die Dinge statisch zu[br]skalieren und teilweise bieten auch die

0:37:32.640,0:37:35.180
Content Management Systeme die[br]Möglichkeit, das in ein Content Delivery

0:37:35.180,0:37:38.880
Network zu schieben. Das heißt noch nicht[br]mal euer Server hat eine wirkliche Last

0:37:38.880,0:37:42.834
und der Server, auf dem die Seite liegt,[br]ist kein Angriffsvektor für euer Content

0:37:42.834,0:37:47.489
Management System. Kurz als Ergänzung,[br]weil das vorhin gefehlt hat aus

0:37:47.489,0:37:52.708
irgendeinem Grund: Wenn ihr ein Content[br]Management System habt, bietet es meistens

0:37:52.708,0:37:57.589
auch eine API um dort Inhalte abzurufen.[br]Das heißt, wenn ihr entsprechend WordPress

0:37:57.589,0:38:00.770
oder ähnliches habt, hat es meistens eine[br]Rest API und ihr könnt auch die natürlich

0:38:00.770,0:38:06.009
mit dem Static Site Generator anzapfen, um[br]entsprechend Inhalte abzurufen und sie

0:38:06.009,0:38:09.759
dann rein zu generieren. Das heißt, es ist[br]für euren Workflow eigentlich ganz cool,

0:38:09.759,0:38:12.420
weil ihr da nicht viel ändern müsst. Also[br]für eure Redakteure oder ähnliches ändert

0:38:12.420,0:38:15.319
sich nichts, sondern es generiert sich[br]einfach eine Seite hintendran mit und das

0:38:15.319,0:38:20.170
Editing Frontend bleibt quasi gleich. NEOS[br]ist übrigens auch ein bekanntes Beispiel.

0:38:20.170,0:38:24.559
Ist ein bisschen anders. Das generiert[br]komplett statische Seiten, ist aber auch

0:38:24.559,0:38:28.230
TYPO3 ähnlich. Das heißt für kleinere[br]Installationen vielleicht nicht so ganz

0:38:28.230,0:38:33.660
geeignet. So, das war jetzt viel Inhalt.[br]Kommen wir zum Fazit. Sind Static Site

0:38:33.660,0:38:39.089
Generators die Lösung für alles? Ist das[br]irgendwie das, was man einfach die Magie,

0:38:39.089,0:38:42.059
die man über alles drüber gießen kann und[br]dann funktioniert alles? Nein, das sind

0:38:42.059,0:38:44.579
sie eigentlich nicht. Ich will ja auch[br]nicht Content Management Systeme

0:38:44.579,0:38:49.089
runtermachen, aber sie sind eine coole[br]Möglichkeit, um euch hohe Flexibilität zu

0:38:49.089,0:38:52.089
bieten, um euch hohe Skalierbarkeit zu[br]bieten und euch zum Beispiel auch die

0:38:52.089,0:38:56.753
Wartung zu nehmen. Wenn ihr sagt, ihr baut[br]ein kleines Blog zum Beispiel, da habt ihr

0:38:56.753,0:39:00.160
ja keine große Instanz von WordPress,[br]sondern ihr schreibt euer Blog, ihr postet

0:39:00.160,0:39:03.842
den Eintrag, dann geht er online und dann[br]müsst ihr euch da keinen Kopf drum machen.

0:39:03.842,0:39:08.630
Der liegt irgendwo. Und wenn ihr[br]Aufmerksamkeit mit eurem Inhalt generiert,

0:39:08.630,0:39:15.290
dann ist das für euch kein Problem, weil[br]der Blog skaliert dann ordentlich mit. Und

0:39:15.290,0:39:17.743
ihr habt auch hohe[br]Aufrufgeschwindigkeiten. Was ich übrigens

0:39:17.743,0:39:21.289
vorhin noch nicht erwähnt habe, was auch[br]sehr cool ist, ist, dass ihr natürlich

0:39:21.289,0:39:24.109
sofort mit dem Inhalt da seid. Das heißt,[br]ihr müsst es nicht dynamisch nach

0:39:24.109,0:39:27.702
generieren. Und wenn ihr zum Beispiel[br]jemanden oder eine Suchmaschine habt, die

0:39:27.702,0:39:30.935
Inhalte in der Seite sucht, dann sind die[br]Inhalte auch sofort da. Oder zum Beispiel

0:39:30.935,0:39:34.669
eine Person mit Screenreader. Dann hat sie[br]auch sofort ein statisches Abbild der

0:39:34.669,0:39:37.580
Seite, wo nichts irgendwie noch komisch[br]mit Magie nachgeneriert wird und die

0:39:37.580,0:39:42.319
Person kann die Seite auch sehr schnell[br]und ordentlich durchsuchen. In diesem

0:39:42.319,0:39:47.150
Sinne vielen Dank fürs Zuschauen oder[br]Zuhören oder wie auch immer und ich bin es

0:39:47.150,0:39:49.869
auf jeden Fall mal gespannt auf eure[br]Fragen und hoffe, ich habe euch nicht

0:39:49.869,0:39:54.109
allzu sehr mit dem ganzen Inhalt[br]erschlagen. Und ja, cool.

0:39:54.109,0:39:59.940
Herald: Ja, danke für diesen super[br]Vortrag. Wenn ihr jetzt noch Fragen habt,

0:39:59.940,0:40:05.690
könnt ihr die gerne auf Twitter und[br]Mastodon stellen unter dem Hashtag

0:40:05.690,0:40:13.945
#rC3cwtv, also rC3 Chaos West TV. Unser[br]Signal Angel wird sie dann mir schicken,

0:40:13.945,0:40:18.859
damit ich sie stellen kann. Gleich am[br]Anfang ist die Frage gestellt worden,

0:40:18.859,0:40:23.529
können auch Videos eingebettet werden?[br]Vielleicht kann man noch darstellen, was

0:40:23.529,0:40:28.669
mit Static Sites geht und was nicht?[br]Avocadoom: Du schneidest bei mir manchmal

0:40:28.669,0:40:30.999
mit dem Audio ein bisschen ab, aber ich[br]glaube, ich habe das meiste von der Frage

0:40:30.999,0:40:37.159
tatsächlich verstanden. Die Videos können[br]tatsächlich eingebettet werden. Ich glaube

0:40:37.159,0:40:40.524
Tooling, um Videos zu optimieren, gibt es[br]meistens nicht. Aber natürlich habt ihr

0:40:40.524,0:40:43.890
die Möglichkeit, wie bei allen anderen[br]statischen Assets auch, dass ihr einfach

0:40:43.890,0:40:47.319
die Videos auf dem Webserver mit[br]hochladet. Meistens in diese Static

0:40:47.319,0:40:51.880
Directory sozusagen, wenn euch das lieb[br]ist und sie da entsprechend einbettet und

0:40:51.880,0:40:57.809
dann dort sozusagen mit Video Elementen im[br]HTML oder mit einem Video Player Library

0:40:57.809,0:41:01.930
in JavaScript entsprechend diese Dinge[br]einbettet. Es gibt natürlich auch die

0:41:01.930,0:41:04.569
Möglichkeit, dass ihr anfangt irgendwie[br]YouTube oder Vimeo oder was auch immer mit

0:41:04.569,0:41:08.439
der API anzuzapfen und so entsprechend[br]Videos einbettet. Also da sind euch die

0:41:08.439,0:41:13.009
Möglichkeiten relativ offen. Ihr müsst nur[br]ein bisschen darauf gefasst sein, dass

0:41:13.009,0:41:16.729
natürlich Videos eine hohe Last für den[br]Webserver bieten. Das heißt, da fließen

0:41:16.729,0:41:22.029
relativ viele Daten, aber in der Regel ist[br]es auch kein großes Problem.

0:41:22.029,0:41:26.329
Herald: Danke! Könntest du noch ein[br]Beispiel bringen, was man nicht mit einer

0:41:26.329,0:41:31.380
statischen Seite realisieren kann.[br]Avocadoom: Nicht mit einer statischen

0:41:31.380,0:41:36.249
Seite realisieren? Im Prinzip kann man[br]sehr viel mit einer statischen Seite

0:41:36.249,0:41:40.144
realisieren. Was man natürlich nicht[br]realisieren sollte oder könnte ist

0:41:40.144,0:41:44.396
natürlich, sind Seiten mit sehr viel[br]dynamischen Inhalt, sage ich mal so. Also

0:41:44.396,0:41:47.079
wenn ihr zum Beispiel jetzt anfangt, ich[br]habe es vorhin mit der hitzigen

0:41:47.079,0:41:50.483
Kommentarspalte gesagt, wenn ihr jetzt[br]irgendwas habt, wo ihr viele Kommentare

0:41:50.483,0:41:55.299
drin habt und ihr wollt da nicht viel mit[br]JavaScript oder so arbeiten, sondern das

0:41:55.299,0:41:58.700
relativ statisch lassen, dann werdet ihr[br]schnell auf das Problem stoßen, dass

0:41:58.700,0:42:02.029
nicht, wenn jemand alle 10 Sekunden[br]kommentiert, dass ihr dann anfangen könnt,

0:42:02.029,0:42:06.989
die Seite neu zu rendern, weil das queued[br]dann ewig ab und irgendwann zieht eure

0:42:06.989,0:42:09.759
Seite nur noch so hinterher mit dem[br]Rendering oder das Rendering wird dauernd

0:42:09.759,0:42:14.119
abgebrochen. Das heißt, wenn ihr sehr,[br]sehr, sehr viele dynamische Inhalte habt,

0:42:14.119,0:42:17.196
dann könnte es tatsächlich irgendwann ein[br]Problem werden, das zu realisieren. Aber

0:42:17.196,0:42:20.059
ansonsten kann man eigentlich relativ viel[br]mit statischen Seiten realisieren.

0:42:20.059,0:42:25.269
Herald: Dann noch eine Frage zur[br]Geschwindigkeit. Es kommt dann öfter vor,

0:42:25.269,0:42:30.564
dass man Kilobytes an Frameworkcode[br]preloaden muss, bevor die Seite überhaupt

0:42:30.564,0:42:35.210
reagiert. Gibt es da Tipps, wie man die[br]Ladezeit bei static sites gering hält?

0:42:35.210,0:42:38.587
Avocadoom: Da gibt es tatsächlich Tipps,[br]also wenn man zum Beispiel mit einem

0:42:38.587,0:42:42.310
JavaScript Static Site Generator arbeitet,[br]wie Gatsby oder so, gibt es dort die

0:42:42.310,0:42:46.989
Möglichkeiten, dass man, wenn man dort ein[br]Framework wie React einbindet, das sie

0:42:46.989,0:42:51.049
sogenannte Tree shaking mit sich bringen.[br]Das heißt im Prinzip, dass sie sozusagen

0:42:51.049,0:42:55.217
an dem Dependency-Baum, den man aufbaut,[br]um es mal bildlich zu beschreiben,

0:42:55.217,0:42:57.880
schütteln, d.h. sie schütteln da so lange[br]dran, bis nur noch das Notwendigste

0:42:57.880,0:43:02.440
dranhängt und werfen den Rest des[br]Frameworkcodes weg. Das heißt, ihr habt am

0:43:02.440,0:43:07.628
Ende ein gebündeltes JavaScript, was quasi[br]relativ minimal ist. Natürlich ist es

0:43:07.628,0:43:10.891
trotzdem immer noch ein bisschen[br]Frameworkcode. Viele bieten auch

0:43:10.891,0:43:15.300
sogenanntes Code Splitting an, das heißt[br]im Prinzip, dass ihr nur den für die Seite

0:43:15.300,0:43:19.220
notwendigen Code ladet. Und wenn ihr eine[br]neue Seite ladet, dann ladet ihr den

0:43:19.220,0:43:23.109
restlichen notwendigen Code. Das kann man[br]auch manuell machen. Ich habe es ja von

0:43:23.109,0:43:27.849
darmstadt.ccc.de genannt gehabt. Da haben[br]wir es tatsächlich so gemacht, dass wir

0:43:27.849,0:43:31.780
den Kalender mit JavaScript realisiert[br]haben, weil wir dort iCal parsen und das

0:43:31.780,0:43:35.754
ist auch relativ dynamisch. Und dort ist[br]es tatsächlich so, dass wir diesen Code

0:43:35.754,0:43:39.575
nur laden, wenn die entsprechende Seite[br]aufgerufen wird mit einer entsprechenden

0:43:39.575,0:43:42.846
Templatevariable, die dann sozusagen auf[br]wahr gesetzt wird. Und dann wird dieses

0:43:42.846,0:43:46.607
JavaScript eingebunden. Das heißt im[br]Prinzip die Dinge, die man dann da

0:43:46.631,0:43:49.690
mitnehmen kann, ist zum einen halt es[br]manuell aufzuteilen, nicht einfach nur die

0:43:49.690,0:43:55.010
Binaries irgendwie aus den Release Renders[br]oder aus den Release Builds quasi einfach

0:43:55.010,0:43:57.900
in den Header einzubinden, sondern Bundler[br]zu verwenden, auch wenn es ein bisschen

0:43:57.900,0:44:03.069
schmerzhaft ist oder halt auch einfach das[br]Ganze manuell aufzuteilen.

0:44:03.069,0:44:06.920
Herald: Danke! Dann noch eine Frage, was[br]du von verschiedenen Frameworks...

0:44:06.920,0:44:11.710
Avocadoom: Du bist gerade super leise,[br]kannst du gerade mal gucken ob du...

0:44:11.710,0:44:14.770
Herald: Geht es besser?[br]Avocadoom: Ähh ja, naja, es geht.

0:44:14.770,0:44:19.500
Herald: Okay, was ist deine Meinung zu[br]headless CMS für static site generator?

0:44:19.500,0:44:25.069
Avocadoom: Tatsächlich eine sehr gute.[br]Headless CMS ist tatsächlich was, wo ich

0:44:25.069,0:44:29.859
auch in gewisser Weise die Zukunft sehe[br]und viele etablierte CMS Lösungen arbeiten

0:44:29.859,0:44:33.139
natürlich auch auf diesen Punkt hin, dass[br]sie zum headless CMS werden können oder

0:44:33.139,0:44:37.960
zumindest zum teilweise headless CMS. Wenn[br]ihr nur 'ne static site habt, ist es

0:44:37.960,0:44:42.229
natürlich erst mal nur so die halbe Miete,[br]aber da ist es halt auch schon ganz cool.

0:44:42.229,0:44:46.059
Aber was halt vor allem der Vorteil ist,[br]wenn ihr anfangt, die Inhalte noch auf

0:44:46.059,0:44:49.738
weitere Endgeräte zu bringen. Das heißt[br]zum Beispiel, wenn ihr jetzt eine

0:44:49.738,0:44:52.920
Newsseite seid und ihr baut euch jetzt[br]eine mobile App, dann müsst ihr nicht noch

0:44:52.920,0:44:57.476
eine API dafür schreiben, sondern die API[br]liegt halt einfach schon da. Und das

0:44:57.476,0:45:02.230
bietet euch natürlich viele Vorteile. Das[br]heißt, wenn ihr verschiedene Zielgeräte

0:45:02.230,0:45:04.960
damit ansprechen wollt, habt ihr halt[br]sofort eine API und die API ist halt auch

0:45:04.960,0:45:08.839
unsere einzige source of truth. Das heißt,[br]die könnt ihr pflegen, da könnt ihr dafür

0:45:08.839,0:45:13.066
sorgen, dass sie ordentlich läuft und habt[br]so die Möglichkeit halt auch das

0:45:13.066,0:45:16.399
entsprechend in andere Services mit[br]einzubinden. Oder auch, weiß ich nicht,

0:45:16.399,0:45:19.799
ein Sprachassistentenskill, was weiß ich.[br]Es läuft halt alles auf die selbe source

0:45:19.799,0:45:24.499
hinaus und ich finde das sehr gut. Das ist[br]eine sehr gute Lösung. Auf jeden Fall.

0:45:24.499,0:45:28.880
Herald: Cool. Was ist deine Einschätzung[br]zu Graph?

0:45:28.880,0:45:31.869
Avocadoom: Du bist wieder super leise,[br]sorry.

0:45:31.869,0:45:36.399
Herald: Was ist deine Einschätzung zu[br]Graph, du hast es ja vorher einmal kurz

0:45:36.399,0:45:40.220
erwähnt.[br]Avocadoom: Meine Meinung zu, jetzt warst

0:45:40.220,0:45:43.366
du wieder laut noch mal..[br]Herald: Was ist deine Einschätzung zu

0:45:43.366,0:45:47.289
Graph?[br]Avocadoom: Zu Graph? Meine Einschätzung zu

0:45:47.289,0:45:52.720
Graph ist tatsächlich auch eine relativ[br]gute. Graph arbeitet ja an sich nicht

0:45:52.720,0:45:56.239
unbedingt direkt mit static site[br]generation, sondern cached das ganze, ja,

0:45:56.239,0:46:00.849
in so Blöcken quasi, also im Prinzip[br]werden keine Seiten raus gerendert,

0:46:00.849,0:46:05.770
sondern die Seite speichert sich oder das[br]CMS speichert sich quasi so Blöcke der

0:46:05.770,0:46:09.604
Seite ab und fügt die am Ende nochmal kurz[br]mit PHP zusammen. Es gibt aber auch die

0:46:09.604,0:46:13.882
Möglichkeit, das statisch zu machen, aber[br]so oder so ist es ganz sinnvoll. Graph

0:46:13.882,0:46:17.119
legt damit ja so ein bisschen so eine[br]Mitte, weil es ja aus diesem Bereich der

0:46:17.119,0:46:20.070
flat file Content Management Systeme[br]bekommt. Das heißt, für alle, die das

0:46:20.070,0:46:23.640
nicht kennen. Das sind Content Management[br]Systeme, die über das Dateisystem arbeiten

0:46:23.640,0:46:28.039
und nicht über eine Datenbank. Und ja, es[br]ist auf jeden Fall ein cooler Mittelweg.

0:46:28.039,0:46:32.960
Es ist halt trotzdem ein System, was[br]Sicherheitsrisiken bieten kann und wo man

0:46:32.960,0:46:36.109
natürlich immer ein Backend mit schleppt.[br]Aber es bietet halt auch hohe Flexibilität

0:46:36.109,0:46:39.509
und Performance halt gerade dadurch, weil[br]es mit diesem Cachingmechanismus arbeitet

0:46:39.509,0:46:45.235
oder über ein Plugin sogar mit static site[br]rendering. Und ja, es ist auch eine sehr

0:46:45.235,0:46:48.232
positive Meinung, die ich dazu habe und es[br]auf jeden Fall ein cooler Einstieg, wenn

0:46:48.232,0:46:52.499
man mal so ein bisschen in diese Richtung[br]gehen will von: Wie sieht das alles aus,

0:46:52.499,0:46:57.060
wenn ich was sozusagen einfach statisch[br]mache und nicht so krass hoch dynamisch

0:46:57.060,0:47:00.150
und vor allem wenn ich mal eine große[br]Datenbank wegwerfen will.

0:47:00.150,0:47:05.270
Herald: Die nächste Frage wär: Ist aus[br]deiner Sicht PHP noch zeitgemäß?

0:47:05.270,0:47:10.940
Avocadoom: Ja, PHP ist zeitgemäß.[br]Tatsächlich weiß ich, dass viele PHP total

0:47:10.940,0:47:17.072
abhaten, aber ich finde der PHP-Entwickler[br]oder der PHP-Schöpfer, ich weiß seinen

0:47:17.072,0:47:20.640
Namen gerade nicht. Ich habe mal einen[br]Talk von dem gesehen, vor einem Jahr

0:47:20.646,0:47:24.030
glaube ich ungefähr. Und er gibt sich halt[br]große Mühe bzw. sein Team gibt sich große

0:47:24.030,0:47:30.412
Mühe, dass die Sprache immer moderner[br]wird, immer aktueller. Klar ist es nicht

0:47:30.412,0:47:35.077
die schönste Sprache, mit Sicherheit, aber[br]PHP ist halt immer noch in seiner

0:47:35.077,0:47:40.680
Möglichkeit, dass man es einfach relativ[br]easy in HTML z.B. einbauen kann oder

0:47:40.680,0:47:45.450
dadurch, dass es fast auf jedem Webserver[br]läuft, eigentlich fast ungeschlagen. Und

0:47:45.450,0:47:49.569
ja, ich weiß, es ist wirklich von der[br]reinen Theorieperspektive mit Sicherheit

0:47:49.569,0:47:54.140
nicht die schönste Sprache, aber es ist[br]definitiv immer noch zeitgemäß.

0:47:54.140,0:48:09.928
Herald: So, im Chat, wie IRC, der... Okay,[br]geht besser?

0:48:09.928,0:48:14.413
Avocadoom: Von wem jetzt, von mir schon?[br]Ah, okay, das erklärt auch, warum er immer

0:48:14.413,0:48:20.151
wieder leise ist. Aber ja, gerade[br]übrigens, ich überbrück' das mal ein

0:48:20.151,0:48:23.687
bisschen, gerade mit dieser ganzen[br]Geschichte, mit PHP 7 und PHP 8 sind ja

0:48:23.687,0:48:27.079
viele Änderungen reingekommen, die der[br]Sprache einen ordentlich modernen Anstrich

0:48:27.079,0:48:32.240
verleihen. Und es gibt auch immer wieder[br]neue Frameworks und Ansätze, die PHP-

0:48:32.240,0:48:38.480
Entwicklung immer leichter machen und[br]immer moderner. Und ich denke schon, dass

0:48:38.480,0:48:44.002
das auch Zukunft hat.[br]Herald: So, ich hoffe, man hört mich?

0:48:44.002,0:48:46.532
Avocadoom: Ja, man hört dich.[br]Herald: Wie sieht es mit der

0:48:46.532,0:48:50.529
Kompatibilität für Smartphones bei[br]statischen Seiten aus?

0:48:50.529,0:48:54.099
Avocadoom: Da ändert sich eigentlich[br]nichts, also es ändert sich ja quasi nur

0:48:54.099,0:48:59.680
was wie die Seite ausliefert. Aber wie die[br]Seite dargestellt wird, ist quasi ja für

0:48:59.680,0:49:05.329
euer Smartphone das gleiche. Das heißt[br]nur, wie die Seite quasi vorher

0:49:05.329,0:49:09.533
zusammengebaut wird und so, das ist quasi[br]das wichtige, was sich ändert. Aber wie

0:49:09.533,0:49:13.047
die Seite dann dargestellt wird also mit[br]JavaScript und CSS und so. Das bleibt ja

0:49:13.047,0:49:18.119
das gleiche. Wenn ihr jetzt noch ein[br]Content Management System habt, wo ihr so

0:49:18.119,0:49:21.973
eine spezielle mobile Seite habt, was man[br]in der Regel heute nicht mehr haben

0:49:21.973,0:49:25.910
sollte, weil man das inzwischen gut mit[br]CSS und Co lösen kann, dann habt ihr

0:49:25.910,0:49:29.130
vielleicht ein Problem, dass ihr zwei[br]Seiten bauen müsst, aber ansonsten ist

0:49:29.130,0:49:34.660
eigentlich die Kompatibilität mit[br]Smartphones ziemlich super und die meisten

0:49:34.660,0:49:38.660
Smartphones können auch, also da können[br]die eigentlich alle auch JavaScript

0:49:38.660,0:49:41.940
vollständig ausführen, die haben ja mit[br]Safari oder Chrome oder was auch immer

0:49:41.940,0:49:46.720
eine vollständige JavaScript-Engine mit[br]drinnen, also die Kompatibilität ist

0:49:46.720,0:49:49.880
eigentlich komplett gegeben und viele[br]Newsportale und so arbeiten ja schon mit

0:49:49.880,0:49:54.509
diesen Techniken, das heißt dass ist[br]eigentlich auch schon etabliert und

0:49:54.509,0:50:00.278
getestet, dass das läuft.[br]Herald: Noch eine Frage, so einem Chat wie

0:50:00.278,0:50:05.038
der IRC. Wäre es da eine gute Idee, eine[br]statische Seite daraus zu machen, wenn der

0:50:05.038,0:50:09.039
Chat dass einzige ist, was man machen[br]will? Weil so wie ich das verstehe, wäre

0:50:09.039,0:50:12.539
es dafür ja eher mehr Last für den Server,[br]oder?

0:50:12.539,0:50:17.275
Avocadoom: Ja, das ist wie gesagt das[br]gleiche Beispiel mit der Kommentarspalte.

0:50:17.275,0:50:20.200
Wenn ihr dynamischen Inhalte wie ein Chat[br]habt, dann wollte ihr die nicht immer

0:50:20.200,0:50:25.725
statisch rendern, weil die ändern sich ja[br]ständig. Also das sind ja Inhalte, die

0:50:25.725,0:50:29.504
immer immer wieder sozusagen entsprechend[br]sich ändern. Das heißt, was ihr da machen

0:50:29.504,0:50:34.478
könnt, wäre zum Beispiel ihr baut so eine[br]Frontend Anwendung und macht es nur mit

0:50:34.478,0:50:37.300
JavaScript und zieht euch das darüber.[br]Aber das ist nicht das, was ich unter

0:50:37.300,0:50:40.739
einer statischen Seite sozusagen verstehe,[br]weil eine statische Seite ist für mich

0:50:40.739,0:50:44.831
was, wo der Inhalt quasi schon generiert[br]ist und in HTML vorliegt, wenn ihr die

0:50:44.831,0:50:48.450
Seite aufruft. Also da gibt es eigentlich[br]nur die zwei Wege: Entweder man macht das

0:50:48.450,0:50:52.719
komplett über eine Backend Anwendung oder[br]man macht es komplett im Frontend, aber

0:50:52.719,0:50:57.660
man kann halt sozusagen also das halt[br]vorher auszuliefern in gegossenes HTML,

0:50:57.660,0:51:02.109
was sozusagen Accessibility Tools oder[br]eine Suchmaschine lesen können, dass ist

0:51:02.109,0:51:05.763
eigentlich eher unvorteilhaft, weil dann[br]müsste man alle paar Sekunden die Seite

0:51:05.763,0:51:10.440
neu rendern und das ist ja viel zu viel[br]Last.

0:51:10.440,0:51:15.492
Herald: Ja, braucht man dann für eine[br]statische Seite mehr Leistung beim Client?

0:51:15.492,0:51:20.787
Avocadoom: Nein, in der Regel eigentlich[br]nicht. Also viele Seiten setzen

0:51:20.787,0:51:23.959
heutzutage, also das Einzige was halt viel[br]Leistung braucht ist JavaScript. Aber

0:51:23.959,0:51:29.989
viele Seiten setzen ja heutzutage schon[br]auf JavaScript, auch wenn sie vom

0:51:29.989,0:51:33.140
Conten tManagement System kommen. Und das[br]JavaScript, was zum Beispiel verwendet

0:51:33.140,0:51:37.849
wird, um Hydration zu betreiben, ist nicht[br]unbedingt etwas, was die Leistung zieht.

0:51:37.849,0:51:41.929
Also der Leistungsunterschiede ist[br]eigentlich quasi gleich Null. Und wenn du

0:51:41.929,0:51:44.609
zum Beispiel komplett auf JavaScript[br]verzichtet, dann habt ihr sogar noch einen

0:51:44.609,0:51:49.330
Leistungsboost eigentlich in der Regel.[br]Außer ihr schreibt jetzt komplett

0:51:49.330,0:51:52.003
verrücktes CSS, aber das ist dann auch[br]wieder eine Sache die euch auch mit

0:51:52.003,0:51:54.369
Content Management Systemen passieren[br]kann. Also eigentlich ist der

0:51:54.369,0:51:59.749
Leistungsunterschiede der gleiche bzw.[br]vielleicht habt ihr sogar mehr Leistung

0:51:59.749,0:52:04.029
wenn in eine statische Seite baut. Je[br]nachdem wie viel JavaScript ihr sozusagen

0:52:04.029,0:52:08.009
in eure Seite einfügt. Wenn ihr da jetzt[br]natürlich das große 3D Rendering, ich zieh

0:52:08.009,0:52:11.050
mir ständig Content rein JavaScript baut,[br]dann hat sie natürlich mehr

0:52:11.050,0:52:13.759
Leistungsverbrauch, aber das ist nicht[br]zwingend ein Problem einer statischen

0:52:13.759,0:52:17.296
Seite.[br]Herald: Du hast ja zum Ende von deinem

0:52:17.296,0:52:20.940
Vortrag noch Barrierefreiheit[br]angesprochen. Muss man da auf irgendwas

0:52:20.940,0:52:25.969
achten, dass es dann für Screenreader und[br]so gut lesbar ist?

0:52:25.969,0:52:30.411
Avocadoom: Also was ich mir dabei gedacht[br]habe, ist im Prinzip, dass so ein

0:52:30.411,0:52:34.440
Screenreader natürlich einfach glaube ich[br]besser damit klarkommt, wenn er schon

0:52:34.440,0:52:40.077
vorher das ganze HTML vorliegen hat. Was[br]ich halt prinzipiell beachten würde, das

0:52:40.077,0:52:45.230
einfach die generellen Accessability-[br]Guidelines zu beachten sind, von der W3C

0:52:45.230,0:52:49.029
und ähnlichen, das ist sowieso immer klar.[br]Das sollte man auch generell, wenn man

0:52:49.029,0:52:53.031
eine Seite mit was auch immer baut machen.[br]Aber was ich sehr gut finde ist halt, dass

0:52:53.031,0:52:57.069
wenn man zum Beispiel jetzt kein[br]JavaScript enabed hat, weil man damit

0:52:57.069,0:53:02.630
vielleicht nicht klarkommt, wenn man[br]Accessability Tools hat und nur die Seite

0:53:02.630,0:53:05.869
statisch rausgerendert sehen möchte, ohne[br]irgendwelche Hydration oder ähnliches,

0:53:05.869,0:53:10.769
dann kann man halt mit den Accessability[br]Tools quasi relativ easy darüber gehen.

0:53:10.769,0:53:13.359
Und beachten muss man dabei eigentlich[br]nichts Spezielles. Ich sehe es einfach nur

0:53:13.359,0:53:20.170
als Vorteil, wenn das HTML quasi direkt[br]vorliegt und so ein Tool sich nicht darum

0:53:20.170,0:53:23.607
kümmern muss, dass irgendwo noch was[br]dynamisch hinzugefügt wird, sondern

0:53:23.607,0:53:26.900
Screenreader direkt anfangen kann, das[br]einmal von oben nach unten abzuarbeiten.

0:53:26.900,0:53:29.920
Also beachten muss man dabei nichts. Ich[br]habe das mehr erwähnt, weil ich das

0:53:29.920,0:53:35.450
einfach sehr sinnvoll finde, dass man[br]damit mehr Leute sozusagen auch targeten

0:53:35.450,0:53:40.259
kann und dass man dafür sorgen kann, dass[br]man nicht darauf achten muss, dass die

0:53:40.259,0:53:44.280
jetzt vielleicht irgendein Tool verwenden,[br]was mit ich "füge hier mal mit Dynamik

0:53:44.280,0:53:47.420
ganz viel Spaß hinzu" irgendwie nicht klar[br]kommen kann.

0:53:47.420,0:53:52.369
Herald: Ah ja, cool. Welches Backend[br]würdest du für Nutzer empfehlen, die kein

0:53:52.369,0:53:57.490
Markdown schreiben wollen?[br]Avocadoom: Hmmm, das kommt drauf an, was

0:53:57.490,0:54:05.275
man machen will. Wenn man einen Blog hat[br]würde ich tatsächlich entweder auf ein

0:54:05.275,0:54:11.809
Blog Service setzen, also so was wie[br]Medium oderso und mich da an der an die

0:54:11.809,0:54:18.269
API anschließen, weil das einfach relativ[br]gute editing experience bietet oder auch

0:54:18.269,0:54:21.410
an anderen Hosting Service oder z.B. auch[br]einfach ein klassisches Content Management

0:54:21.410,0:54:25.829
System wie WordPress oder ähnliches[br]verwenden. Es gibt tatsächlich auch so

0:54:25.829,0:54:31.010
Frontends für einige Static Site[br]Generators, die euch das sozusagen

0:54:31.010,0:54:36.920
ermöglichen, dass man dann so einen Editor[br]davor hat, der dann Markdown am Ende

0:54:36.920,0:54:40.769
hinten raus rendert, aber die haben[br]meistens den Nachteil, dass die oft auf

0:54:40.769,0:54:44.819
dem Client laufen und dann bei euch[br]laufen, auf dem Desktop quasi, und dass

0:54:44.819,0:54:47.769
man dann trotzdem sich immer noch darum[br]kümmern muss, dass das dann irgendwo in

0:54:47.769,0:54:52.849
git gepusht wird und ähnliches und dann[br]irgendwo hoch kommt. Und daher würde ich

0:54:52.849,0:54:58.650
eher sagen Notfalls, wenn man zum Beispiel[br]mit Wordpress schon mal gearbeitet hat

0:54:58.650,0:55:03.170
oder mit einem ähnlichen System gucken ob[br]das erst mal eine Rest-API anbietet und

0:55:03.170,0:55:09.569
sich darüber versuchen mit dem Static Site[br]Generator zu verständigen.

0:55:09.569,0:55:16.259
Herald: Es kommt noch viel: "Danke für[br]deinen coolen Talk" rein.

0:55:16.259,0:55:20.202
Avocadoom: Gerne. Ich hoffe euch hat es[br]Spaß gemacht.

0:55:20.202,0:55:26.190
Herald: Genau. Vielleicht noch eine letzte[br]Verständnisfrage. Der Nutzer fragt / oder

0:55:26.190,0:55:31.430
die Nutzerin: Ich verstehe jetzt noch[br]nicht zu 100 Prozent was genau man mit

0:55:31.430,0:55:35.421
statischen Sites verhindern will? Ist es,[br]dass der Client nicht direkt mit dem

0:55:35.421,0:55:39.959
Server interagiert oder dass es keine User[br]Eingaben gibt, die an einen Server

0:55:39.965,0:55:44.719
weitergegeben werden?[br]Avocadoom: Beides will man nicht unbedingt

0:55:44.719,0:55:49.818
verhindern. Was man vor allem verhindern[br]will ist, dass man sich, dass man zum

0:55:49.818,0:55:54.400
Beispiel ein System auf dem Server liegen[br]hat, wie zum Beispiel ein, also wenn ihr

0:55:54.400,0:55:57.029
ein klassisches Content Management System[br]habt, ich erkläre es mal so, so ein

0:55:57.029,0:56:01.440
WordPress oder so, oder ein Joomla oder[br]ein Drupal oder was auch immer dann

0:56:01.440,0:56:06.684
generiert euch das beim Aufruf der Seite[br]das HTML, was dann an den Client

0:56:06.684,0:56:12.299
ausgeliefert wird. Dass heißt das System,[br]wenn so ein Client das aufruft, dann

0:56:12.299,0:56:15.880
interagiert das System damit. Oder habt[br]ihr zum Beispiel eine Suche drin und so

0:56:15.880,0:56:19.059
eine Suche die sucht natürlich in der[br]Datenbank. Das heißt, wenn ihr diese Suche

0:56:19.059,0:56:22.980
entsprechend manipulieren würdet und es[br]wäre jetzt bekannt, dass in eurem Content

0:56:22.980,0:56:27.565
Management System eine SQL-Injection[br]möglich wäre, dann können Sie so rüber ins

0:56:27.565,0:56:31.116
System kommen. Das heißt, wenn das System[br]nicht vernünftig wartet und ihr dieses

0:56:31.116,0:56:36.390
SQL-Injection Problem Update nicht[br]installiert, dann ist diese Lücke

0:56:36.390,0:56:40.819
sozusagen da, dann stehen da sozusagen die[br]Tore offen. Das heißt, das ist zum

0:56:40.819,0:56:44.739
Beispiel der Punkt, dass ihr da sagen[br]könnt diese statische Seite bietet einfach

0:56:44.739,0:56:49.799
kein direktes Einfallstor in euer System,[br]weil sie quasi keine direkte Interaktion

0:56:49.799,0:56:54.150
mit dem Backend ermöglicht. Das bietet[br]halt auch den zweiten Vorteil, dass ihr

0:56:54.150,0:56:59.021
Performance habt, weil ihr quasi nicht bei[br]jedem Aufruf anfangt, die Seite neu zu

0:56:59.021,0:57:04.229
generieren, sondern ihr habt einfach die[br]fertig generierte Seite und liefert sie

0:57:04.229,0:57:08.069
nur noch an das Endgerät aus. Das heißt[br]ihr interagiert immer noch mit einer Art

0:57:08.069,0:57:10.719
Server, aber ihr interagiert nicht mit dem[br]Content Management System und habt nicht

0:57:10.719,0:57:14.829
die Möglichkeit, dass sie zum Beispiel in[br]eurer Datenbank einfallen. Und das sind

0:57:14.829,0:57:17.922
eigentlich die zwei hauptsächlichen[br]Gründe, weswegen man Static Site

0:57:17.922,0:57:21.759
Generation vorziehen möchte. Außerdem hat[br]es halt den großen Vorteil, dass dadurch,

0:57:21.759,0:57:33.440
dass alles vorgerendert ist, dass diese[br]entsprechende Last, also diese

0:57:33.440,0:57:39.101
Performance, ich habe es ja schon erwähnt,[br]dass quasi einfach das passiert, ihr

0:57:39.101,0:57:42.020
schiebt die Seite einfach einmal hoch und[br]dann ist sie da und dann wird sie

0:57:42.020,0:57:45.130
abgerufen und ihr müsst nicht gucken, dass[br]irgendwo was kaputt gehen kann.

0:57:45.130,0:57:51.009
Herald: Ja, danke für das Beantworten der[br]Fragen und auch für diesen super coolen

0:57:51.009,0:57:53.629
Vortrag hier bei Chaos West.

0:57:53.629,0:57:58.319
<i>rc3-nowhere Abspannmusik</i>

0:57:58.319,0:58:17.000
Untertitel erstellt von c3subtitles.de[br]im Jahr 2021. Mach mit und hilf uns!