[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:24.50,Default,,0000,0000,0000,,{\i1}rc3-nowhere Vorspannmusik{\i0}
Dialogue: 0,0:00:24.50,0:00:30.36,Default,,0000,0000,0000,,Herald: Herzlich willkommen auf der Chaos\NWest stage. Der nächste Talk heißt "make it
Dialogue: 0,0:00:30.36,0:00:35.86,Default,,0000,0000,0000,,static" und es wird darum gehen, warum man\Nvielleicht nicht ein fancy CMS hernehmen
Dialogue: 0,0:00:35.86,0:00:40.05,Default,,0000,0000,0000,,sollte, dass eine Menge Abhängigkeiten\Nhat. Und wir wissen ja nicht erst seit
Dialogue: 0,0:00:40.05,0:00:46.04,Default,,0000,0000,0000,,Log4Shell, dass die auch unerwartet große\NProbleme machen können. Der Talk wird von
Dialogue: 0,0:00:46.04,0:00:51.76,Default,,0000,0000,0000,,einem Studenten an der TU Darmstadt, der\NAvocado heißt, gehalten. Ein herzliches
Dialogue: 0,0:00:51.76,0:00:54.40,Default,,0000,0000,0000,,Willkommen und ich freue mich schon sehr\Nauf deinen Talk.
Dialogue: 0,0:00:54.40,0:00:59.15,Default,,0000,0000,0000,,Avocadoom: Hi, ja, vielen Dank erst mal\Nfür die nette Begrüßung. Du hast es schon
Dialogue: 0,0:00:59.15,0:01:01.54,Default,,0000,0000,0000,,angesprochen. Das wird auch so ein\Nbisschen das Thema werden.
Dialogue: 0,0:01:01.54,0:01:04.79,Default,,0000,0000,0000,,Sicherheitslücken in CMS und wie man das\Nvielleicht mit statischen Seiten umgehen
Dialogue: 0,0:01:04.79,0:01:08.93,Default,,0000,0000,0000,,kann. Erst einmal herzlich willkommen zu\Nmeinem Talk make it static. Ich habe noch
Dialogue: 0,0:01:08.93,0:01:12.21,Default,,0000,0000,0000,,kurz eine Slide eingebaut in der ihr einen\NQR-code habt den ich euch ganz kurz mal
Dialogue: 0,0:01:12.21,0:01:14.86,Default,,0000,0000,0000,,abscannen lasse, wenn ihr den abscannen\Nwollt, da seht ihr die Slides auch noch
Dialogue: 0,0:01:14.86,0:01:17.63,Default,,0000,0000,0000,,mal, falls ihr was nachlesen wollt, oder\Nnicht ganz hinterherkommt oder zum
Dialogue: 0,0:01:17.63,0:01:23.34,Default,,0000,0000,0000,,Beispiel euch die vergrößern wollt. So,\Njetzt zu mir. Ich bin Avocadoom. Ich
Dialogue: 0,0:01:23.34,0:01:28.31,Default,,0000,0000,0000,,studiere aktuell an der TU Darmstadt bzw.\NThilo Billerbeck ist mein richtiger Name
Dialogue: 0,0:01:28.31,0:01:33.25,Default,,0000,0000,0000,,und genau, ihr findet mich auf\Nverschiedenen Social-Media-Kanälen. Ich
Dialogue: 0,0:01:33.25,0:01:36.06,Default,,0000,0000,0000,,mache auch nebenbei tatsächlich\NWebentwicklung und Webdesign. So ein
Dialogue: 0,0:01:36.06,0:01:40.00,Default,,0000,0000,0000,,bisschen. Deswegen stecke ich in diesem\NThema ein bisschen tiefer drin. Und ja,
Dialogue: 0,0:01:40.00,0:01:42.99,Default,,0000,0000,0000,,ich freue mich jetzt auf jeden Fall schon,\Neuch das Thema ein bisschen präsentieren
Dialogue: 0,0:01:42.99,0:01:49.25,Default,,0000,0000,0000,,zu können. Aktuelle Situation ist erstmal\Nso ein bisschen der Einstieg, den ich euch
Dialogue: 0,0:01:49.25,0:01:52.20,Default,,0000,0000,0000,,geben möchte und aktuelle Situation\Nbeschreibt es schon ganz gut, weil aktuell
Dialogue: 0,0:01:52.20,0:01:55.89,Default,,0000,0000,0000,,haben wir ja eine Sicherheitslücke, die\Nschon relativ krass und bekannt ist und
Dialogue: 0,0:01:55.89,0:01:58.51,Default,,0000,0000,0000,,ich möchte euch erstmal so ein bisschen\Nsagen, warum vielleicht static sites eine
Dialogue: 0,0:01:58.51,0:02:03.70,Default,,0000,0000,0000,,coole Idee sind. Da habe ich so ein\Nbisschen im Internet etwas rausgesucht.
Dialogue: 0,0:02:03.70,0:02:07.14,Default,,0000,0000,0000,,Das sind Artikel die tatsächlich vor\NLog4Shell noch erschienen sind. Als ich
Dialogue: 0,0:02:07.14,0:02:10.60,Default,,0000,0000,0000,,diese Präsentation angefangen habe zu\Nerstellen, gab es diese Lücke noch gar
Dialogue: 0,0:02:10.60,0:02:16.46,Default,,0000,0000,0000,,nicht. Und ihr seht jetzt so ein bisschen,\Ndie Artikel kommen von Heise oder t3n. Es
Dialogue: 0,0:02:16.46,0:02:20.28,Default,,0000,0000,0000,,geht hier zum Beispiel um Drupal oder\NWordPress oder irgendein Plugin. Und in
Dialogue: 0,0:02:20.28,0:02:23.95,Default,,0000,0000,0000,,der Regel sind das irgendwie immer\NSicherheitslücken, die dann irgendwann
Dialogue: 0,0:02:23.95,0:02:30.01,Default,,0000,0000,0000,,erkannt werden oder entdeckt werden und wo\Ndann zu einem schnellen Update aufgerufen
Dialogue: 0,0:02:30.01,0:02:34.61,Default,,0000,0000,0000,,wird. Und die Sache ist dann immer so ein\Nbisschen, dass man halt auch schnell
Dialogue: 0,0:02:34.61,0:02:38.72,Default,,0000,0000,0000,,agieren muss. Und viele setzen sich halt\Nso ein WordPress oder Drupal so dahin und
Dialogue: 0,0:02:38.72,0:02:41.75,Default,,0000,0000,0000,,richten es einmal ein und pflegen das dann\Nnicht. Und das kann dann halt super
Dialogue: 0,0:02:41.75,0:02:46.14,Default,,0000,0000,0000,,schnell mal anfällig für irgendwelche\NSicherheitslücken werden. Und da ist halt
Dialogue: 0,0:02:46.14,0:02:52.21,Default,,0000,0000,0000,,eigentlich immer schnelles Handeln\Ngefragt. Zu dem ganzen Backend Sachen so
Dialogue: 0,0:02:52.21,0:02:57.48,Default,,0000,0000,0000,,ein bisschen bei Content Management\NSystemen gibt es ja generell immer so zwei
Dialogue: 0,0:02:57.48,0:03:01.74,Default,,0000,0000,0000,,verschiedene Lösungen oder Arten, wie man\Ndas angehen kann. Es gibt ja die fertig
Dialogue: 0,0:03:01.74,0:03:06.20,Default,,0000,0000,0000,,Lösungen, die bekannten WordPress, Joomla,\NDrupal oder auch modernere Systeme und die
Dialogue: 0,0:03:06.20,0:03:10.14,Default,,0000,0000,0000,,brauchen halt in der Regel immer\Nregelmäßig Pflege und Updates, um
Dialogue: 0,0:03:10.14,0:03:15.29,Default,,0000,0000,0000,,vernünftig funktionieren zu können, keine\NSicherheitslücken zu bieten. Und auch drum
Dialogue: 0,0:03:15.29,0:03:20.62,Default,,0000,0000,0000,,herum muss immer um alles gesorgt sein.\NSie benötigen ein sauberes und sicheres
Dialogue: 0,0:03:20.62,0:03:26.57,Default,,0000,0000,0000,,Setup und das betrifft vor allen Dingen\Nnicht nur das System an sich, sondern vor
Dialogue: 0,0:03:26.57,0:03:30.56,Default,,0000,0000,0000,,allen Dingen auch alle Systeme drumherum,\Nzum Beispiel Datenbanken oder Server an
Dialogue: 0,0:03:30.56,0:03:35.90,Default,,0000,0000,0000,,sich. Na, wenn euer System sicher ist und\Ndann auf einmal jemand durch eine
Dialogue: 0,0:03:35.90,0:03:39.17,Default,,0000,0000,0000,,Datenbank Lücke bei euch reinkommt, dann\Nist euch halt auch nicht geholfen oder
Dialogue: 0,0:03:39.17,0:03:42.82,Default,,0000,0000,0000,,Rootzugriff auf euren Server bekommt, dann\Nhabt ihr halt auch irgendwie ins Gras
Dialogue: 0,0:03:42.82,0:03:48.50,Default,,0000,0000,0000,,gebissen. Da gibt es noch so ein bisschen\Nso eine andere Gattung von Systemen, die
Dialogue: 0,0:03:48.50,0:03:51.77,Default,,0000,0000,0000,,einem immer wieder begegnen. Das sind die\Nsogenannten Eigenbauten. Die haben noch
Dialogue: 0,0:03:51.77,0:03:54.98,Default,,0000,0000,0000,,mal ein bisschen mehr Pfeffer als die\NFertiglösung bei manchen Dingen, wenn man
Dialogue: 0,0:03:54.98,0:03:59.83,Default,,0000,0000,0000,,sich da nicht ordentlich drum kümmert. Die\Nhaben halt auch die ähnlichen Probleme wie
Dialogue: 0,0:03:59.83,0:04:05.32,Default,,0000,0000,0000,,die Fertiglösungen, das ist ganz klar.\NAber vor allen Dingen haben sie auch noch
Dialogue: 0,0:04:05.32,0:04:08.83,Default,,0000,0000,0000,,den Nachteil, dass man halt ganz viele\NDinge, die von den CMS berücksichtigt
Dialogue: 0,0:04:08.83,0:04:13.17,Default,,0000,0000,0000,,wurden mit bedenken muss, zum Beispiel\NSQL-Injection oder Cross Site Scripting
Dialogue: 0,0:04:13.17,0:04:16.39,Default,,0000,0000,0000,,und Ähnliches. Und wenn man sich das halt\Nnicht alles mit anschaut, dann kann einem
Dialogue: 0,0:04:16.39,0:04:19.21,Default,,0000,0000,0000,,das auch ganz schnell um die Ohren\Nfliegen. Und darum muss man sich halt die
Dialogue: 0,0:04:19.21,0:04:22.84,Default,,0000,0000,0000,,Frage stellen: braucht man das wirklich?\NWeil wenn man einmal in das System
Dialogue: 0,0:04:22.84,0:04:25.66,Default,,0000,0000,0000,,gelangt, über welche Stelle auch immer,\Nhat man meistens relativ schnell Vollzugriff
Dialogue: 0,0:04:25.66,0:04:29.89,Default,,0000,0000,0000,,und wenn man Vollzugriff hat,\Ndann sieht es eher schwierig aus. Gerade
Dialogue: 0,0:04:29.89,0:04:35.48,Default,,0000,0000,0000,,wenn man eine größere Seite ist, kann das\Nsehr unangenehm werden. Ein weiterer
Dialogue: 0,0:04:35.48,0:04:39.20,Default,,0000,0000,0000,,Punkt, den man bei einem Content\NManagement System so ein bisschen beachten
Dialogue: 0,0:04:39.20,0:04:42.59,Default,,0000,0000,0000,,muss, ist der Wartungsaufwand. Ich hatte\Nes gerade eben schon angesprochen die
Dialogue: 0,0:04:42.59,0:04:46.16,Default,,0000,0000,0000,,Dinger müssen regelmäßig und teilweise\Nauch sehr akut gepflegt werden. Man muss
Dialogue: 0,0:04:46.16,0:04:52.10,Default,,0000,0000,0000,,dafür Zeit aufwenden, sie müssen relativ\Nschnell und regelmäßig gepflegt werden und
Dialogue: 0,0:04:52.10,0:04:55.29,Default,,0000,0000,0000,,auch das Hostsystem drumherum braucht\Nregelmäßig Pflege und Updates, weil wenn
Dialogue: 0,0:04:55.29,0:04:58.49,Default,,0000,0000,0000,,das out of date ist, dann geht es halt\Nauch nicht. Viele Systeme können das
Dialogue: 0,0:04:58.49,0:05:03.79,Default,,0000,0000,0000,,inzwischen automatisch übrigens. Aber auch\Nda gibt es zum Beispiel Major Updates, die
Dialogue: 0,0:05:03.79,0:05:07.11,Default,,0000,0000,0000,,meistens manuell eingespielt werden müssen\Noder Plugins Updates, die auch gerne mal
Dialogue: 0,0:05:07.11,0:05:12.37,Default,,0000,0000,0000,,manuelles Einspielen erfordern. Außerdem\Nkann es sein, dass euch zwischendurch mal
Dialogue: 0,0:05:12.37,0:05:16.13,Default,,0000,0000,0000,,die Features brechen, bei WordPress zum\NBeispiel oder so im Theming oder Plugin
Dialogue: 0,0:05:16.13,0:05:20.39,Default,,0000,0000,0000,,Bereich. Das heißt, wenn größere Versionen\Nvon WordPress oder Co ausrollen und die
Dialogue: 0,0:05:20.39,0:05:24.84,Default,,0000,0000,0000,,halt geupdatet werden müssen, weil\NSicherheitsupdates benötigt werden, dann
Dialogue: 0,0:05:24.84,0:05:28.43,Default,,0000,0000,0000,,müsst ihr halt auch entsprechend wieder\NZeitaufwand da reinstecken, das alles zu
Dialogue: 0,0:05:28.43,0:05:31.45,Default,,0000,0000,0000,,portieren und entsprechend anzupassen.\NWeil ansonsten habt ihr irgendwie nicht
Dialogue: 0,0:05:31.45,0:05:34.15,Default,,0000,0000,0000,,eine schöne Seite da liegen, sondern nach\Ndem nächsten Major Update auf einmal
Dialogue: 0,0:05:34.15,0:05:42.02,Default,,0000,0000,0000,,irgendwas, was mehr aussieht wie bekannte\NBlog Seiten aus dem Internet. Und genau
Dialogue: 0,0:05:42.02,0:05:46.84,Default,,0000,0000,0000,,außerdem müsst ihr immer da einen großen\NInvest reinstecken. Und dann gibt es noch
Dialogue: 0,0:05:46.84,0:05:51.15,Default,,0000,0000,0000,,etwas, was ich als Plugin-Hölle bezeichnen\Nwürde. Das kennt man übrigens auch [bei]
Dialogue: 0,0:05:51.15,0:05:54.74,Default,,0000,0000,0000,,WordPress. Der Begriff fällt heute leider\Nrelativ häufig. Es tut mir leid, aber
Dialogue: 0,0:05:54.74,0:05:57.89,Default,,0000,0000,0000,,gerade da sieht man das sehr häufig, dass\Nda halt super viele Plugins reingesteckt
Dialogue: 0,0:05:57.89,0:06:01.44,Default,,0000,0000,0000,,werden. Und das klingt erst mal ganz cool.\NIch hole mir irgendwie mein System, dann
Dialogue: 0,0:06:01.44,0:06:05.36,Default,,0000,0000,0000,,hole ich mir lauter Features da rein, pack\Ndas alles so in eine Kiste und dann läuft
Dialogue: 0,0:06:05.36,0:06:08.63,Default,,0000,0000,0000,,es, das Problem ist bloß. Je mehr Plugins\Nman eigentlich da rein packt, desto
Dialogue: 0,0:06:08.63,0:06:12.65,Default,,0000,0000,0000,,schlimmer wird es eigentlich und desto\Nmehr Abhängigkeiten erzeugt man. Und wenn
Dialogue: 0,0:06:12.65,0:06:16.39,Default,,0000,0000,0000,,das nächste große Update kommt, kann halt\Nirgendwas kaputt gehen. Und dieser Zustand
Dialogue: 0,0:06:16.39,0:06:20.22,Default,,0000,0000,0000,,ihr sehts auch unten. Der nimmt halt in\Nder Regel mit dem Alter der Seite zu und
Dialogue: 0,0:06:20.22,0:06:23.73,Default,,0000,0000,0000,,irgendwann habt ihr mal irgendwas, was zum\NBeispiel nicht maintained wird oder nicht
Dialogue: 0,0:06:23.73,0:06:27.45,Default,,0000,0000,0000,,ordentlich mit dem neuen Update\Nfunktioniert. Und dann habt ihr plötzlich
Dialogue: 0,0:06:27.45,0:06:32.71,Default,,0000,0000,0000,,eine Seite, die aussieht wie was auch\Nimmer oder einfach komplett offline ist.
Dialogue: 0,0:06:32.71,0:06:37.86,Default,,0000,0000,0000,,Noch eine weitere Sache, die einem halt\Nauffallen kann sind Skalierungsprobleme.
Dialogue: 0,0:06:37.86,0:06:41.89,Default,,0000,0000,0000,,Das trifft jetzt kleinere Seiten, die\NBlogs und Co eher weniger. Aber wenn ihr
Dialogue: 0,0:06:41.89,0:06:46.36,Default,,0000,0000,0000,,zum Beispiel einen Talk über Kopierer\Nhaltet und auf einmal plötzlich die halbe
Dialogue: 0,0:06:46.36,0:06:49.40,Default,,0000,0000,0000,,Weltkugel auf eurem Blog habt, dann wollt\Nihr vielleicht gucken, dass das auch
Dialogue: 0,0:06:49.40,0:06:54.24,Default,,0000,0000,0000,,ordentlich skaliert. So Systeme skalieren\Nmeistens an sich sehr gut und auch die
Dialogue: 0,0:06:54.24,0:06:57.54,Default,,0000,0000,0000,,Webserver an sich, die skalieren halt\Nordentlich. Aber wenn ihr zum Beispiel
Dialogue: 0,0:06:57.54,0:07:00.93,Default,,0000,0000,0000,,eine Seite mit einem relativ komplexen\NAufbau habt oder halt eine große Datenbank
Dialogue: 0,0:07:00.93,0:07:05.96,Default,,0000,0000,0000,,dahinter mit Content, viele Queries, also\NDatenbankaufrufe, die bei einer Seite
Dialogue: 0,0:07:05.96,0:07:10.23,Default,,0000,0000,0000,,durchgeführt werden müssen, dann kann es\Neuch halt super schnell passieren, dass
Dialogue: 0,0:07:10.23,0:07:14.32,Default,,0000,0000,0000,,die Last auf dem Server halt auch\Nordentlich hoch wird und der nächste Punkt
Dialogue: 0,0:07:14.32,0:07:18.45,Default,,0000,0000,0000,,der noch dabei ist, ist halt eine\NDatenbank, die skaliert halt auch meistens
Dialogue: 0,0:07:18.45,0:07:21.71,Default,,0000,0000,0000,,relativ gut mit. Aber wenn ihr anfangt\Nirgendwie die Seite zu expandieren auf
Dialogue: 0,0:07:21.71,0:07:24.68,Default,,0000,0000,0000,,mehrere Server oder so, dann seid ihr\Nirgendwann auch relativ schnell an dem
Dialogue: 0,0:07:24.68,0:07:29.43,Default,,0000,0000,0000,,Punkt, wo ihr merkt, dass das gar nicht so\Neinfach ist. Und was ein Problem ist, ist
Dialogue: 0,0:07:29.43,0:07:34.38,Default,,0000,0000,0000,,halt, wenn so eine große Last auftritt,\Ndann ist halt erst mal die ganze Seite
Dialogue: 0,0:07:34.38,0:07:37.58,Default,,0000,0000,0000,,offline und das ist halt auch nicht so\Ncool, weil dann seid ihr gar nicht mehr
Dialogue: 0,0:07:37.58,0:07:41.87,Default,,0000,0000,0000,,erreichbar und nicht nur schlecht, sondern\Nwirklich komplett gar nicht mehr. Und
Dialogue: 0,0:07:41.87,0:07:45.89,Default,,0000,0000,0000,,jetzt kommt natürlich der große Moment\NMagic Fairy Dust Static Sites to the
Dialogue: 0,0:07:45.89,0:07:51.04,Default,,0000,0000,0000,,rescue oder vielleicht auch nicht, weil\Nvielleicht lösen sie jetzt auch nicht alle
Dialogue: 0,0:07:51.04,0:07:55.42,Default,,0000,0000,0000,,eure Probleme, aber vielleicht einige. Und\Ndazu kommen wir jetzt ein bisschen.
Dialogue: 0,0:07:55.42,0:08:00.24,Default,,0000,0000,0000,,Erstmal natürlich so ein bisschen der\NPunkt an sich: Was sind denn überhaupt
Dialogue: 0,0:08:00.24,0:08:06.38,Default,,0000,0000,0000,,statische Seiten? So eine statische Seite\Nist im Prinzip, wie der Name schon sagt,
Dialogue: 0,0:08:06.38,0:08:09.64,Default,,0000,0000,0000,,eine Seite, die halt nicht irgendwie\Ndynamisch generiert wird. Das heißt, da
Dialogue: 0,0:08:09.64,0:08:12.79,Default,,0000,0000,0000,,ist kein Content Management System im\NHintergrund, was das Ding zusammenbaut
Dialogue: 0,0:08:12.79,0:08:19.29,Default,,0000,0000,0000,,oder ähnliches, sondern die Seite wird "as\Nis" an den Client ausgeliefert. So eine
Dialogue: 0,0:08:19.29,0:08:25.67,Default,,0000,0000,0000,,Seite besteht dabei meistens aus HTML. Das\Nkennt ihr mit Sicherheit das ist einfach
Dialogue: 0,0:08:25.67,0:08:29.44,Default,,0000,0000,0000,,Hypertext Markup Language, also wie eure\NSeite aufgebaut ist. CSS - Cascading Style
Dialogue: 0,0:08:29.44,0:08:35.19,Default,,0000,0000,0000,,Sheets. Also wie genau eure Seite am Ende\Naussehen soll. Wie sie sich verhalten
Dialogue: 0,0:08:35.19,0:08:39.79,Default,,0000,0000,0000,,soll, wenn bestimmte Dinge gehovert werden\Nund so. Und dann gibt es natürlich noch
Dialogue: 0,0:08:39.79,0:08:42.75,Default,,0000,0000,0000,,JavaScript und Co. Habe ich jetzt das mal\Ngenannt, weil es auch heutzutage so was
Dialogue: 0,0:08:42.75,0:08:46.96,Default,,0000,0000,0000,,Web Assembly gibt. Und das sind\NKomponenten, die dafür sorgen, dass eurer
Dialogue: 0,0:08:46.96,0:08:51.63,Default,,0000,0000,0000,,Seite Leben eingehaucht wird und dass sie\Ndynamisch wird. Das habe ich jetzt auch
Dialogue: 0,0:08:51.63,0:08:56.75,Default,,0000,0000,0000,,bewusst ein bisschen gehighlighted, weil\Nes tatsächlich so ist, dass das bei
Dialogue: 0,0:08:56.75,0:09:00.34,Default,,0000,0000,0000,,statischen Seiten euer einziger Anker sein\Nwird, wie ihr Dynamik in eure Seite
Dialogue: 0,0:09:00.34,0:09:04.04,Default,,0000,0000,0000,,reinbringt. Das heißt, ihr macht das nicht\Nmehr serverseitig, sondern ihr macht es
Dialogue: 0,0:09:04.04,0:09:10.22,Default,,0000,0000,0000,,clientseitig über JavaScript und nutzt\NScripts, um halt dort die nötigen
Dialogue: 0,0:09:10.22,0:09:13.100,Default,,0000,0000,0000,,Komponenten reinzuziehen und so\Nentsprechend das Ganze ein bisschen
Dialogue: 0,0:09:13.100,0:09:20.54,Default,,0000,0000,0000,,lebhafter zu machen. Um so eine statische\NSeite zu bauen, habt ihr sogenannte Static
Dialogue: 0,0:09:20.54,0:09:27.41,Default,,0000,0000,0000,,Site Generators. Das ist im Prinzip euer\NToolbelt euer Werkzeuggürtel, um halt
Dialogue: 0,0:09:27.41,0:09:32.26,Default,,0000,0000,0000,,entsprechend solche Seiten aufzubauen. Und\Ndie verschmelzen im Prinzip Templates und
Dialogue: 0,0:09:32.26,0:09:40.47,Default,,0000,0000,0000,,also Vorlagen und Inhalte zu einem\NGesamtkonstrukt. Das Ganze läuft auch
Dialogue: 0,0:09:40.47,0:09:46.70,Default,,0000,0000,0000,,meistens so, dass Inhalte und das Template\Nan sich relativ strikt getrennt sind. Das
Dialogue: 0,0:09:46.70,0:09:50.64,Default,,0000,0000,0000,,heißt, ihr schreibt das nicht irgendwie in\NHTML Code rein, sondern ihr schreibt eure
Dialogue: 0,0:09:50.64,0:09:55.42,Default,,0000,0000,0000,,Inhalte in einem relativ einfachen Format\Noder in einem strukturierten Format auf,
Dialogue: 0,0:09:55.42,0:09:59.79,Default,,0000,0000,0000,,schreibt dann auf der anderen Seite, wie\Ndas Ganze aufgebaut sein soll und am Ende
Dialogue: 0,0:09:59.79,0:10:05.15,Default,,0000,0000,0000,,verschmilzt das Ganze im Prinzip zu einem\NGesamtkonglomerat und wird so zu eurer
Dialogue: 0,0:10:05.15,0:10:11.39,Default,,0000,0000,0000,,statischen Seite. Das heißt aber auch,\Ndass diese Seiten entsprechend schon beim
Dialogue: 0,0:10:11.39,0:10:17.45,Default,,0000,0000,0000,,Deployment, also wenn ihr die Seite auf\Nden Server schiebt, generiert und
Dialogue: 0,0:10:17.45,0:10:20.63,Default,,0000,0000,0000,,fertiggestellt werden. Das heißt, sobald\Ndie Seite auf dem Server ist, muss die im
Dialogue: 0,0:10:20.63,0:10:22.74,Default,,0000,0000,0000,,Prinzip gar nicht mehr zusammengebaut\Nwerden, sondern einfach nur ausgeliefert
Dialogue: 0,0:10:22.74,0:10:27.72,Default,,0000,0000,0000,,wie eben schon gesagt. Außerdem gibt es da\Nnoch ein paar weitere Punkte, nämlich
Dialogue: 0,0:10:27.72,0:10:33.94,Default,,0000,0000,0000,,werden Metadaten generiert. Wenn ihr\Ndiese statischen Seiten generiert, das
Dialogue: 0,0:10:33.94,0:10:36.10,Default,,0000,0000,0000,,heißt ihr habt auch entsprechend\NZusatzinformationen, die euch der
Dialogue: 0,0:10:36.10,0:10:40.48,Default,,0000,0000,0000,,Generator automatisch zur Verfügung\Nstellt, wie zum Beispiel Autoren, die
Dialogue: 0,0:10:40.48,0:10:44.44,Default,,0000,0000,0000,,Textlänge kann man mit Sicherheit auch bei\Neinigen rausziehen. Das Datum, wann das
Dialogue: 0,0:10:44.44,0:10:47.57,Default,,0000,0000,0000,,ganze erstellt wurde. Irgendwelche Git\NInformationen. Das sind alles
Dialogue: 0,0:10:47.57,0:10:50.13,Default,,0000,0000,0000,,Informationen, die euch dann helfen,\Nentsprechend den ganzen Content ein
Dialogue: 0,0:10:50.13,0:10:54.07,Default,,0000,0000,0000,,bisschen richer zu machen und ihn auch\Nbesser, strukturierbar, auffindbar und
Dialogue: 0,0:10:54.07,0:11:00.36,Default,,0000,0000,0000,,suchbarer zu machen. Und genau das ist\Nauch noch ganz wichtig. Außerdem gibt es
Dialogue: 0,0:11:00.36,0:11:04.92,Default,,0000,0000,0000,,zusätzliche Features, die auch noch beim\Nstatic site generator dabei sind, nämlich
Dialogue: 0,0:11:04.92,0:11:12.74,Default,,0000,0000,0000,,sowas wie das Anlegen und Rendering von\NJavaScript oder CSS. Das heißt, dass eure
Dialogue: 0,0:11:12.74,0:11:17.52,Default,,0000,0000,0000,,Stylesheets entsprechend schon minifiziert\Nwerden und sowas, was ihr vielleicht auch
Dialogue: 0,0:11:17.52,0:11:22.52,Default,,0000,0000,0000,,von Webentwicklung an sich kennt, falls\Nihr da schon mal was gemacht habt. Hash
Dialogue: 0,0:11:22.52,0:11:26.68,Default,,0000,0000,0000,,Generierung zur Verifizierung, dass die\NDateien richtig übertragen wurden, z.B.
Dialogue: 0,0:11:26.68,0:11:30.12,Default,,0000,0000,0000,,die CSS-Dateien. Dazu komme ich später\Nnoch mal. Oder die Bildverarbeitung, um
Dialogue: 0,0:11:30.12,0:11:33.17,Default,,0000,0000,0000,,dafür zu sorgen, dass die Bilder\Nentsprechend relativ klein sind, die ihr in
Dialogue: 0,0:11:33.17,0:11:37.78,Default,,0000,0000,0000,,eurer Seite einbaut. Also alles\NConvenience Tools, die ihr quasi nutzen
Dialogue: 0,0:11:37.78,0:11:42.23,Default,,0000,0000,0000,,könnt, um in eurer Seite ein entsprechend\Nvernünftiges Erlebnis bieten zu können.
Dialogue: 0,0:11:42.23,0:11:47.16,Default,,0000,0000,0000,,Jetzt denkt ihr euch mit Sicherheit, das\Nnutzt doch keiner so, das klingt doch
Dialogue: 0,0:11:47.16,0:11:50.66,Default,,0000,0000,0000,,total kompliziert und das will ich doch\Nüberhaupt nicht haben. Und da habe ich
Dialogue: 0,0:11:50.66,0:11:54.12,Default,,0000,0000,0000,,euch mal ein paar Beispiele mitgebracht.\NZum Beispiel seht ihr da oben links
Dialogue: 0,0:11:54.12,0:11:59.08,Default,,0000,0000,0000,,nationalgeographic.co.uk Das ist\Ntatsächlich ein relativ bekanntes und
Dialogue: 0,0:11:59.08,0:12:02.63,Default,,0000,0000,0000,,populäres Beispiel. Die haben gatsby als\NStatic Site Generator eingesetzt, dazu
Dialogue: 0,0:12:02.63,0:12:06.96,Default,,0000,0000,0000,,komme ich auch gleich nochmal. Und ja, da\Nwürde man im ersten Moment gar nicht davon
Dialogue: 0,0:12:06.96,0:12:09.79,Default,,0000,0000,0000,,ausgehen, dass die Seite statisch\Ngeneriert ist. Ist sie aber komplett und
Dialogue: 0,0:12:09.79,0:12:15.72,Default,,0000,0000,0000,,das macht sie entsprechend auch für hohe\NLasten relativ gut nutzbar und sorgt auch
Dialogue: 0,0:12:15.72,0:12:18.84,Default,,0000,0000,0000,,dafür, dass die Seite, hohe Anfragen\Nentsprechend gut verarbeiten kann, und
Dialogue: 0,0:12:18.84,0:12:22.13,Default,,0000,0000,0000,,auch schnell beim Nutzer ist. Da habe ich\Nnoch ein paar Seiten aus dem Entwickler
Dialogue: 0,0:12:22.13,0:12:27.37,Default,,0000,0000,0000,,Bereich mitgebracht, oben rechts seht ihr\Ndas Ionic Framework für mobile Apps. Unten
Dialogue: 0,0:12:27.37,0:12:32.19,Default,,0000,0000,0000,,links, das kann vielleicht auch einige\Nschon. Das ist die 1Password Hilfe für so
Dialogue: 0,0:12:32.19,0:12:36.51,Default,,0000,0000,0000,,Dokumenten- Dokumentation eignet sich das\Ntatsächlich perfekt, sowas statisch zu
Dialogue: 0,0:12:36.51,0:12:40.46,Default,,0000,0000,0000,,generieren, weil das ändert sich nicht so\Noft. Und unten rechts auch relativ
Dialogue: 0,0:12:40.46,0:12:45.62,Default,,0000,0000,0000,,unbekannt. Nein, Let's Encrypt natürlich\Nauch komplett statisch generiert auch da
Dialogue: 0,0:12:45.62,0:12:49.11,Default,,0000,0000,0000,,hat die Seite große Nachfragen und\Nprofitiert natürlich davon, wenn sowas
Dialogue: 0,0:12:49.11,0:12:55.70,Default,,0000,0000,0000,,entsprechend schon fertig generiert ist.\NEs gibt so ein paar Static Site Generators
Dialogue: 0,0:12:55.70,0:13:00.14,Default,,0000,0000,0000,,die ich hier mal aufgelistet habe. Das\Nsind übrigens, habe noch nicht erwähnt,
Dialogue: 0,0:13:00.14,0:13:03.91,Default,,0000,0000,0000,,alles in der Regel Command Line Programme,\Ndas heißt ihr habt kein User Interface,
Dialogue: 0,0:13:03.91,0:13:07.01,Default,,0000,0000,0000,,sondern - also -, kein GUI, kein Graphical\NUser Interface, sondern macht das alles
Dialogue: 0,0:13:07.01,0:13:10.53,Default,,0000,0000,0000,,über die Kommandozeile. Darauf komme ich\Naber auch gleich noch mal zu sprechen. Ihr
Dialogue: 0,0:13:10.53,0:13:16.43,Default,,0000,0000,0000,,habt oben links Hugo, das ist ein Static\NSite Generator, der mit GO funktioniert
Dialogue: 0,0:13:16.43,0:13:20.79,Default,,0000,0000,0000,,und als Binary ausgeliefert wird und\Nrelativ schnell und einfach funktioniert
Dialogue: 0,0:13:20.79,0:13:25.56,Default,,0000,0000,0000,,und für die meisten Use Cases ausreicht.\NDaneben Jekyll. Das ist mehr so der
Dialogue: 0,0:13:25.56,0:13:28.97,Default,,0000,0000,0000,,Platzhirsch, den es eigentlich schon seit\NEwigkeiten gibt. Ist in Ruby geschrieben,
Dialogue: 0,0:13:28.97,0:13:32.44,Default,,0000,0000,0000,,hat Pluginsupport wird glaube ich von\NGitHub immer noch für statische Seiten
Dialogue: 0,0:13:32.44,0:13:37.29,Default,,0000,0000,0000,,empfohlen und bietet euch ein bisschen\Nmehr Flexibilität als Hugo, hat aber den
Dialogue: 0,0:13:37.29,0:13:40.40,Default,,0000,0000,0000,,Nachteil, dass es zum Beispiel auch\Nrelativ viel Ruby mit sich schleppt, und
Dialogue: 0,0:13:40.40,0:13:44.54,Default,,0000,0000,0000,,man sich mit der Ruby Toolchain mal\Nauseinandersetzen sollte. Für Leute, die
Dialogue: 0,0:13:44.54,0:13:48.42,Default,,0000,0000,0000,,schon mal mit JavaScript gearbeitet haben,\Ngibt es hier zum Beispiel ganz oben rechts
Dialogue: 0,0:13:48.42,0:13:55.18,Default,,0000,0000,0000,,auch Eleventy, wie gesagt JavaScript als\NBackendsprache und arbeitet ähnlich wie
Dialogue: 0,0:13:55.18,0:13:58.92,Default,,0000,0000,0000,,Hugo und wird auch gerne mal in andere\NToolchains mit integriert. Unten links
Dialogue: 0,0:13:58.92,0:14:01.86,Default,,0000,0000,0000,,seht ihr Gatsby das ist ein Static Site\NGenerator der ein bisschen mehr macht als
Dialogue: 0,0:14:01.86,0:14:05.88,Default,,0000,0000,0000,,die anderen. Der arbeitet mit React und\Nkann entsprechend auch Seiten generieren,
Dialogue: 0,0:14:05.88,0:14:12.63,Default,,0000,0000,0000,,die ein bisschen mehr interaktiver sind\Nund die ohne viel Aufwand quasi auch dafür
Dialogue: 0,0:14:12.63,0:14:16.27,Default,,0000,0000,0000,,sorgen, dass bestimmte fortgeschrittene\NTechniken, die ich euch später noch mal
Dialogue: 0,0:14:16.27,0:14:21.04,Default,,0000,0000,0000,,zeigen werde, auch direkt mit eingebaut\Nwerden können und macht eure Seite noch
Dialogue: 0,0:14:21.04,0:14:24.92,Default,,0000,0000,0000,,dynamischer und sorgt dafür, dass sie noch\Nweniger unterscheidbar von klassischen CMS
Dialogue: 0,0:14:24.92,0:14:30.70,Default,,0000,0000,0000,,Seiten ist. Ganz unten rechts habe ich\Neuch noch Astro mal eingefügt. Das ist ein
Dialogue: 0,0:14:30.70,0:14:34.64,Default,,0000,0000,0000,,relativ neues Tool, wenn ihr zum Beispiel\Nschon mit React oder Vue oder Svelte, das
Dialogue: 0,0:14:34.64,0:14:38.43,Default,,0000,0000,0000,,sind alles Frontend Frameworks, gearbeitet\Nhabt, ist das vielleicht was für euch. Da
Dialogue: 0,0:14:38.43,0:14:41.81,Default,,0000,0000,0000,,könnte ihr nämlich genau diesen Code\Nschreiben von diesen entsprechenden
Dialogue: 0,0:14:41.81,0:14:45.30,Default,,0000,0000,0000,,Frameworks und dann wird euch das komplett\Nstatisch ohne JavaScript raus gerendert.
Dialogue: 0,0:14:45.30,0:14:49.91,Default,,0000,0000,0000,,Das heißt, da müsst ihr nichts neu lernen,\Nsondern einfach easy anfangen eure
Dialogue: 0,0:14:49.91,0:14:54.81,Default,,0000,0000,0000,,statische Seite zu bauen. Genau. Ich\Ntrinke mal ganz kurz was und dann erzähle
Dialogue: 0,0:14:54.81,0:15:00.40,Default,,0000,0000,0000,,ich euch mal ein bisschen, wie das ganze\Nüberhaupt funktioniert. Und zwar klingt
Dialogue: 0,0:15:00.40,0:15:01.93,Default,,0000,0000,0000,,das alles erst mal ein bisschen\Nüberfordernd Ich habe euch jetzt
Dialogue: 0,0:15:01.93,0:15:06.66,Default,,0000,0000,0000,,wahnsinnig viel über Sicherheitslücken und\Nüber die Gründe für Static Site Generators
Dialogue: 0,0:15:06.66,0:15:09.20,Default,,0000,0000,0000,,erzählt, aber ihr denkt euch\Nwahrscheinlich wovon rede ich da
Dialogue: 0,0:15:09.20,0:15:13.90,Default,,0000,0000,0000,,überhaupt? Dafür habe ich mir ein Beispiel\Nmitgenommen von meinem Home Hackspace,
Dialogue: 0,0:15:13.90,0:15:17.51,Default,,0000,0000,0000,,weil wir arbeiten tatsächlich mit Static\NSite Generators, dass ist
Dialogue: 0,0:15:17.51,0:15:22.33,Default,,0000,0000,0000,,darmstadt.ccc.de. Das wird bisher mit\NJekyll gebaut. Das habe ich neulich auf
Dialogue: 0,0:15:22.33,0:15:26.76,Default,,0000,0000,0000,,Hugo portiert und in den folgenden Folien\Nseht ihr auch so ein bisschen Code daraus,
Dialogue: 0,0:15:26.76,0:15:30.36,Default,,0000,0000,0000,,deswegen wollte ich euch mal kurz sagen,\Ndass das daher kommt und wir sind damit
Dialogue: 0,0:15:30.36,0:15:35.11,Default,,0000,0000,0000,,auch sehr zufrieden. Und ich erzähle euch\Nauch so ein bisschen warum. Wenn ihr so
Dialogue: 0,0:15:35.11,0:15:38.48,Default,,0000,0000,0000,,einen Static Site Generator erst mal euch\Nrausgesucht und installiert habt, dann
Dialogue: 0,0:15:38.48,0:15:41.07,Default,,0000,0000,0000,,habt ihr meistens so einen\NInitialisierungsbefehl irgendwann
Dialogue: 0,0:15:41.07,0:15:47.58,Default,,0000,0000,0000,,eingegeben ins Terminal und dann liegt vor\Neuch eine riesen Ordnerstruktur. Diese
Dialogue: 0,0:15:47.58,0:15:49.78,Default,,0000,0000,0000,,riesige Ordnerstruktur ist erst mal\Nvielleicht ein bisschen überfordernd,
Dialogue: 0,0:15:49.78,0:15:53.15,Default,,0000,0000,0000,,gerade wenn man von Content Management\NSystemen kommt und dann plötzlich damit
Dialogue: 0,0:15:53.15,0:15:57.37,Default,,0000,0000,0000,,Dateien zu tun hat. Dann kann es einen ein\Nbisschen erschlagen. Ich kann euch das
Dialogue: 0,0:15:57.37,0:16:01.95,Default,,0000,0000,0000,,aber mal ein bisschen runterbrechen und\Nvereinfachen. Wir haben hier im Prinzip
Dialogue: 0,0:16:01.95,0:16:06.36,Default,,0000,0000,0000,,vier wichtige Bestandteile in jedem Static\NSite Generator. Die heißen meistens ein
Dialogue: 0,0:16:06.36,0:16:09.53,Default,,0000,0000,0000,,bisschen unterschiedlich, sind aber\Nrelativ ähnlich zueinander. Wir haben
Dialogue: 0,0:16:09.53,0:16:15.43,Default,,0000,0000,0000,,einmal die Inhalte und Daten. Das ist\Nquasi das, wo entsprechend dann das Herz
Dialogue: 0,0:16:15.43,0:16:22.11,Default,,0000,0000,0000,,eurer Seite besteht, so mit Blog-Posts,\NSeiten. Aber auch strukturierte oder semi-
Dialogue: 0,0:16:22.11,0:16:27.06,Default,,0000,0000,0000,,strukturierte Daten könnt ihr entsprechend\Nda einpflegen. Und ihr habt da zum
Dialogue: 0,0:16:27.06,0:16:32.11,Default,,0000,0000,0000,,Beispiel so Formate vorliegen wie\NMarkdown, YAML, JSON, TOML und so weiter.
Dialogue: 0,0:16:32.11,0:16:37.29,Default,,0000,0000,0000,,Also verschiedene Formattypen. Dann habt\Nihr Templates und/oder Themes. Das sind
Dialogue: 0,0:16:37.29,0:16:40.92,Default,,0000,0000,0000,,sozusagen die Blöcke eurer statischen\NSeite, die vorgeben, wie sie später
Dialogue: 0,0:16:40.92,0:16:44.80,Default,,0000,0000,0000,,gerendert werden soll. Wenn euer Static\NSite Generator die Seite zusammenbaut,
Dialogue: 0,0:16:44.80,0:16:48.05,Default,,0000,0000,0000,,dann nimmt er sich den Content, guckt, wo\Nkommt das ins Template rein und baut das
Dialogue: 0,0:16:48.05,0:16:51.72,Default,,0000,0000,0000,,alles entsprechend zusammen. Das heißt,\Ndass auch eine gewisse Uniformität erzeugt
Dialogue: 0,0:16:51.72,0:16:55.31,Default,,0000,0000,0000,,wird. Und diese Templates und Themes habt\Nihr im Prinzip an bestimmten Stellen in
Dialogue: 0,0:16:55.31,0:17:00.41,Default,,0000,0000,0000,,diesem Static Site Generator liegen,\Nschreibt sie dort und strukturiert und
Dialogue: 0,0:17:00.41,0:17:04.84,Default,,0000,0000,0000,,teilt sie auch dort auf. Außerdem habt ihr\NKonfiguration. Das ist ganz klar. Alles
Dialogue: 0,0:17:04.84,0:17:06.96,Default,,0000,0000,0000,,was ihr ins Netz stellt, muss auch\Nirgendwo konfiguriert werden und
Dialogue: 0,0:17:06.96,0:17:10.82,Default,,0000,0000,0000,,entsprechend mit Metadaten versehen\Nwerden. Das macht ihr meistens dort. In so
Dialogue: 0,0:17:10.82,0:17:14.19,Default,,0000,0000,0000,,Konfigurationsdateien stellt ihr zum einen\Nmeistens ein, wie so'n Static Site
Dialogue: 0,0:17:14.19,0:17:18.26,Default,,0000,0000,0000,,Generator arbeiten soll aber auch zum\NBeispiel Metadaten, euer Seitenname, eine
Dialogue: 0,0:17:18.26,0:17:23.41,Default,,0000,0000,0000,,Beschreibung für SEO oder so kommt dann\Nmeistens auch mit rein und Plugins oder
Dialogue: 0,0:17:23.41,0:17:26.76,Default,,0000,0000,0000,,ähnliches werden dann meistens auch mit\Nrein konfiguriert, wenn euer Static Site
Dialogue: 0,0:17:26.76,0:17:31.79,Default,,0000,0000,0000,,Generator das überhaupt unterstützt. Jetzt\Nhabt ihr ganz viel Struktur und Text. Eine
Dialogue: 0,0:17:31.79,0:17:37.07,Default,,0000,0000,0000,,Sache fehlt natürlich noch: Die statischen\NAssets, wie zum Beispiel Styles, Fonts,
Dialogue: 0,0:17:37.07,0:17:42.44,Default,,0000,0000,0000,,Bilder und Skripte. Also alles das, was\Nsozusagen dafür sorgt, dass das Ganze auf
Dialogue: 0,0:17:42.44,0:17:46.53,Default,,0000,0000,0000,,einem Bildschirm ein bisschen mehr Form\Nund Farbe annimmt und auch ein bisschen
Dialogue: 0,0:17:46.53,0:17:52.19,Default,,0000,0000,0000,,mehr Dynamik. Das ist quasi auch noch eine\NSache, die dort mit drinsteckt. Ich habe
Dialogue: 0,0:17:52.19,0:17:56.34,Default,,0000,0000,0000,,von einem Beispiel gesprochen. Wir haben\Nja die Darmstadt CCC Seite auf Hugo
Dialogue: 0,0:17:56.34,0:18:01.08,Default,,0000,0000,0000,,umgebaut. Ist aktuell noch nicht deployed,\Naber hier seht ihr schon mal ein bisschen
Dialogue: 0,0:18:01.08,0:18:05.19,Default,,0000,0000,0000,,als Beispiel die Ordnerstruktur von Hugo.\NWenn ihr so'n hugo new site-Befehl
Dialogue: 0,0:18:05.19,0:18:08.44,Default,,0000,0000,0000,,ausführt, dann habt ihr die\NKonfigurationsdatei ganz oben. Das ist die
Dialogue: 0,0:18:08.44,0:18:14.31,Default,,0000,0000,0000,,config.toml. Da definiert wie gesagt die\Nentsprechenden Werte für die Seite schon
Dialogue: 0,0:18:14.31,0:18:18.39,Default,,0000,0000,0000,,drin. Dann habt ihr content. Das ist das\Nfür semi- und unstrukturierten Inhalt der
Dialogue: 0,0:18:18.39,0:18:22.49,Default,,0000,0000,0000,,Seite, zum Beispiel Blogposts. Also semi-\Nund unstrukturiert heißt im Prinzip
Dialogue: 0,0:18:22.49,0:18:25.27,Default,,0000,0000,0000,,Markdown und Text einfach so als\Nunstrukturiert und semistrukturiert
Dialogue: 0,0:18:25.27,0:18:28.99,Default,,0000,0000,0000,,könntet ihr auch zum Beispiel HTML-Seiten\Nund so drin schreiben, wenn ihr das
Dialogue: 0,0:18:28.99,0:18:32.74,Default,,0000,0000,0000,,entsprechend braucht. Wenn ihr zum\NBeispiel irgendwelche Datenbanken habt,
Dialogue: 0,0:18:32.74,0:18:36.23,Default,,0000,0000,0000,,Listen oder ähnliches, die sich relativ\Nähnlich sehen, habt ihr zum Beispiel den
Dialogue: 0,0:18:36.23,0:18:40.75,Default,,0000,0000,0000,,data-Ordner. Da kommen dann, so YAML-,\NTOML- und JSON-Dateien rein, die wirklich
Dialogue: 0,0:18:40.75,0:18:44.31,Default,,0000,0000,0000,,einfach formatierte, strukturierte Inhalte\Nhaben, die ihr zum Beispiel auch als
Dialogue: 0,0:18:44.31,0:18:48.78,Default,,0000,0000,0000,,Listen in den Templates rendern könnt.\NStatische Assets ist relativ schnell
Dialogue: 0,0:18:48.78,0:18:55.85,Default,,0000,0000,0000,,erklärt, kommen in static rein. Themes\Nsind komplette Pakete, die ein bestimmtes
Dialogue: 0,0:18:55.85,0:19:01.76,Default,,0000,0000,0000,,Thema enthalten, inklusive Layout und\NStyles und Ähnlichem. Und unten habt ihr
Dialogue: 0,0:19:01.76,0:19:06.10,Default,,0000,0000,0000,,Layouts. Layouts sind ein bisschen\Nspezifischer als Themes. Darauf komme ich
Dialogue: 0,0:19:06.10,0:19:11.29,Default,,0000,0000,0000,,auch gleich noch mal zu sprechen. Das ist\Nim Prinzip der Teil, wo ihr bestimmt, wie
Dialogue: 0,0:19:11.29,0:19:15.22,Default,,0000,0000,0000,,spezifische Inhalte auf eurer Seite auch\Nunabhängig vom Theme gerendert werden
Dialogue: 0,0:19:15.22,0:19:18.68,Default,,0000,0000,0000,,sollen. Das klingt ein bisschen\Nverwirrend. Ich erkläre euch aber gleich
Dialogue: 0,0:19:18.68,0:19:22.60,Default,,0000,0000,0000,,mal, wo da der Unterschied genau besteht.
Dialogue: 0,0:19:22.60,0:19:25.97,Default,,0000,0000,0000,,Inhalte. Wenn ihr anfangt, so eine
Dialogue: 0,0:19:25.97,0:19:28.86,Default,,0000,0000,0000,,statische Seite zu bauen, dann ist das\Nerste, was euch in den Sinn kommt,
Dialogue: 0,0:19:28.86,0:19:32.34,Default,,0000,0000,0000,,natürlich, dass ihr irgendwo Inhalte\Nreinpacken wollt. Und wie gesagt, kommt
Dialogue: 0,0:19:32.34,0:19:37.69,Default,,0000,0000,0000,,das bei Hugo zum Beispiel in diesem\NContent Directory. Und dort habt ihr hier
Dialogue: 0,0:19:37.69,0:19:42.35,Default,,0000,0000,0000,,zum Beispiel wie auf der linken Seite zu\Nsehen verschiedene Markdown Dateien bei
Dialogue: 0,0:19:42.35,0:19:46.51,Default,,0000,0000,0000,,darmstadt.ccc.de zum Beispiel. Wir haben\Ndas Impressum und so, einen Ordner mit
Dialogue: 0,0:19:46.51,0:19:50.65,Default,,0000,0000,0000,,Posts, mit Blogposts und dort strukturiert\Nihr euch den ganzen Inhalt rein. In diesem
Dialogue: 0,0:19:50.65,0:19:56.24,Default,,0000,0000,0000,,Fall kommen die Inhalte bei uns halt aus\NDateien und sie sind halt strukturiert
Dialogue: 0,0:19:56.24,0:20:00.50,Default,,0000,0000,0000,,oder semistrukturiert und ihr habt\Nverschiedene Formatmöglichkeiten, die ihr
Dialogue: 0,0:20:00.50,0:20:03.36,Default,,0000,0000,0000,,wählen könnt. Das heißt, wenn ihr nicht\NMarkdown schreiben wollt, könnt ihr auch
Dialogue: 0,0:20:03.36,0:20:08.48,Default,,0000,0000,0000,,HTML schreiben oder eine andere Form von\NMarkup Sprache, die euch vielleicht ein
Dialogue: 0,0:20:08.48,0:20:15.13,Default,,0000,0000,0000,,bisschen gelegener ist. Wenn ihr mal so\Neine Markdown Datei aufmacht, dann fällt
Dialogue: 0,0:20:15.13,0:20:19.55,Default,,0000,0000,0000,,euch auf, dass da nicht nur Markdown\Ndrinsteht, wie hier zum Beispiel ab Zeile
Dialogue: 0,0:20:19.55,0:20:24.75,Default,,0000,0000,0000,,10, wo es hier um Freifunk geht, sondern\Nda gibt es auch was oben drüber. Das ist
Dialogue: 0,0:20:24.75,0:20:29.90,Default,,0000,0000,0000,,bei Static Site Generators relativ häufig\Nso. Ihr habt nämlich hier entsprechend ein
Dialogue: 0,0:20:29.90,0:20:33.95,Default,,0000,0000,0000,,paar Metadaten oder wie es bei Static Site\NGenerators häufig genannt wird, front
Dialogue: 0,0:20:33.95,0:20:39.41,Default,,0000,0000,0000,,matter. Dieses front matter sorgt dafür,\Ndass Static Site Generator weiß, worum es
Dialogue: 0,0:20:39.41,0:20:42.14,Default,,0000,0000,0000,,eigentlich in dem Inhalt überhaupt geht\Nund vor allen Dingen auch, wo er genau hin
Dialogue: 0,0:20:42.14,0:20:46.53,Default,,0000,0000,0000,,soll. In diesem Fall haben wir hier zum\NBeispiel ein Layout, was festgelegt wird,
Dialogue: 0,0:20:46.53,0:20:50.75,Default,,0000,0000,0000,,ist hier das page Layout. Wir haben den\NTitel der Seite. Das ist zum Beispiel, wie
Dialogue: 0,0:20:50.75,0:20:54.01,Default,,0000,0000,0000,,gesagt, es geht hier um Freifunk, Freifunk\Nund was hier unten ganz cool ist, das ist
Dialogue: 0,0:20:54.01,0:20:57.18,Default,,0000,0000,0000,,ein bisschen spezifischer für den Static\NSite Generator: Wir legen hier eine
Dialogue: 0,0:20:57.18,0:21:01.30,Default,,0000,0000,0000,,Menüposition fest für den entsprechenden\NInhalt. Das heißt, ihr geht nicht
Dialogue: 0,0:21:01.30,0:21:04.95,Default,,0000,0000,0000,,irgendwie, wie im Wordpress, zur Seite,\Nschreibt die, geht ins Menü und zieht das
Dialogue: 0,0:21:04.95,0:21:08.90,Default,,0000,0000,0000,,dann ins Menü rein, sondern ihr schreibt\Ndirekt in den Inhalt rein. So, hier, pack
Dialogue: 0,0:21:08.90,0:21:12.27,Default,,0000,0000,0000,,das mal bitte da hin und das macht ihr\Nalles schön von einem Ort raus und der
Dialogue: 0,0:21:12.27,0:21:17.35,Default,,0000,0000,0000,,Static Site Generator übernimmt dann den\NRest. Die letzte Variable ist etwas, was
Dialogue: 0,0:21:17.35,0:21:21.73,Default,,0000,0000,0000,,zum Beispiel auch templatespezifisch oder\Nthemespezifisch ist. Wird bei uns zum
Dialogue: 0,0:21:21.73,0:21:26.18,Default,,0000,0000,0000,,Beispiel verwendet. Hier für das\Nentsprechende Bild in der jeweiligen Seite
Dialogue: 0,0:21:26.18,0:21:30.60,Default,,0000,0000,0000,,ist hier die Hero-Variable. Die gibt es so\Nim Static Site Generator eigentlich nicht,
Dialogue: 0,0:21:30.60,0:21:34.27,Default,,0000,0000,0000,,wurde von mir sozusagen hinzugefügt. Und\Ngenau sowas könnt ihr auch machen, wenn
Dialogue: 0,0:21:34.27,0:21:40.31,Default,,0000,0000,0000,,ihr zum Beispiel spezielle Bedürfnisse für\NVariablen in euren Templates habt. Wenn
Dialogue: 0,0:21:40.31,0:21:45.82,Default,,0000,0000,0000,,ihr irgendwie mit Markdown und so nicht\Nklarkommt, habt ihr auch andere Optionen,
Dialogue: 0,0:21:45.82,0:21:48.80,Default,,0000,0000,0000,,z. B. CSV, JSON, YAML und TOML, ich habe\Nes eben schon gesagt, strukturierte
Dialogue: 0,0:21:48.80,0:21:52.21,Default,,0000,0000,0000,,Inhalte. Das ist zum Beispiel gut für\Ngroße Datensätze. Wenn ihr zum Beispiel
Dialogue: 0,0:21:52.21,0:21:56.77,Default,,0000,0000,0000,,ein Team in einer Firma habt, dann wollt\Nihr das vielleicht nicht alles so in HTML
Dialogue: 0,0:21:56.77,0:22:01.05,Default,,0000,0000,0000,,manuell runter hacken und euch irgendwann\Ndenken, ja, doof, und irgendwo habt ihr
Dialogue: 0,0:22:01.05,0:22:03.95,Default,,0000,0000,0000,,vielleicht mal einen Formatierungsfehler\Ndrin, dann sieht alles aus wie Grütze. Und
Dialogue: 0,0:22:03.95,0:22:06.79,Default,,0000,0000,0000,,das macht dann eigentlich auch im Prinzip\Nkeinen Spaß, weil da macht ihr dann im
Dialogue: 0,0:22:06.79,0:22:10.48,Default,,0000,0000,0000,,Prinzip das Layouting über die Templates\Nund müsst euch da keine Sorgen machen. Ihr
Dialogue: 0,0:22:10.48,0:22:13.29,Default,,0000,0000,0000,,schreibt einmal das Layout und ein Static\NSite Generator macht dann halt keine
Dialogue: 0,0:22:13.29,0:22:17.72,Default,,0000,0000,0000,,Fehler und bindet euch eure coole\NDatenbank schön in die Seite rein und dann
Dialogue: 0,0:22:17.72,0:22:22.31,Default,,0000,0000,0000,,ist die da vernünftig zu sehen. Außerdem\Nvermeidet das wie gesagt Inkonsistenz.
Dialogue: 0,0:22:22.31,0:22:26.86,Default,,0000,0000,0000,,Wenn ihr jetzt zum Beispiel, worauf ich\Nauch später noch mal zu sprechen komme,
Dialogue: 0,0:22:26.86,0:22:30.85,Default,,0000,0000,0000,,ein Content Management System habt oder\Nähnliches, wo ihr Daten rausziehen wollt
Dialogue: 0,0:22:30.85,0:22:34.65,Default,,0000,0000,0000,,oder eine andere Applikation, dann geht\Ndas bei den meisten Static Site Generators
Dialogue: 0,0:22:34.65,0:22:38.98,Default,,0000,0000,0000,,auch. Dann geht ihr, sucht euch ne\Nentsprechende API raus. REST ist da
Dialogue: 0,0:22:38.98,0:22:42.58,Default,,0000,0000,0000,,eigentlich der Standard. Viele können auch\Neinen neueren Standard, der sich GraphQL
Dialogue: 0,0:22:42.58,0:22:47.61,Default,,0000,0000,0000,,nennt, wo ihr festlegen könnt, was genau\Nihr an Inhalten überhaupt abgerufen haben
Dialogue: 0,0:22:47.61,0:22:53.06,Default,,0000,0000,0000,,wollt. Und diese Daten werden dann zur\NRenderingzeit quasi von der API abgerufen
Dialogue: 0,0:22:53.06,0:22:59.16,Default,,0000,0000,0000,,und in eure statische Seite integriert.\NGenau, in jedem Content Management System,
Dialogue: 0,0:22:59.16,0:23:01.16,Default,,0000,0000,0000,,normalen Content Management\NSystem, gibt es auch, zum Beispiel headless
Dialogue: 0,0:23:01.16,0:23:04.90,Default,,0000,0000,0000,,CMS, da komme ich auch noch mal gleich\Ndarauf zurück und auch da geht das
Dialogue: 0,0:23:04.90,0:23:08.12,Default,,0000,0000,0000,,Layouting dann wieder über das Template.\NDas heißt, ihr zieht euch nur die ganzen
Dialogue: 0,0:23:08.12,0:23:12.46,Default,,0000,0000,0000,,Daten raus und packt sie in dieses\NTemplate rein und vermeidet auch da
Dialogue: 0,0:23:12.46,0:23:18.40,Default,,0000,0000,0000,,entsprechende Inkonsistenzen. Jetzt habe\Nich viel über Thema Themes und Templates
Dialogue: 0,0:23:18.40,0:23:23.68,Default,,0000,0000,0000,,geredet. An dieser Stelle sollte ich\Nvielleicht mal ganz kurz erzählen, was das
Dialogue: 0,0:23:23.68,0:23:28.27,Default,,0000,0000,0000,,überhaupt ist und wie sich das voneinander\Nunterscheidet, weil das klingt ja schon
Dialogue: 0,0:23:28.27,0:23:33.11,Default,,0000,0000,0000,,relativ ähnlich. So ein Theme ist, wie\Ngesagt, so ein Gesamtpaket. Wenn ihr jetzt
Dialogue: 0,0:23:33.11,0:23:37.36,Default,,0000,0000,0000,,kein eigenes Theme in Hugo schreibt, dann\Nladet ihr euch das irgendwo runter, bei
Dialogue: 0,0:23:37.36,0:23:41.51,Default,,0000,0000,0000,,GitHub zum Beispiel oder so und da ist\Ndann alles drin, da sind Templates drin,
Dialogue: 0,0:23:41.51,0:23:47.69,Default,,0000,0000,0000,,da sind entsprechend Styles drin, Skripte\Nund so weiter, Fonts. Das heißt, ihr
Dialogue: 0,0:23:47.69,0:23:50.92,Default,,0000,0000,0000,,installiert das einmal, startet im Prinzip\Neinen Static Site Generator und seid
Dialogue: 0,0:23:50.92,0:23:54.58,Default,,0000,0000,0000,,gewaschen, gekämmt und die Seite sieht\Nschön aus. So ein Theme stellt das
Dialogue: 0,0:23:54.58,0:23:59.49,Default,,0000,0000,0000,,Grundgerüst der Seite entsprechend und\Nauch die meisten Basistemplates. Das heißt
Dialogue: 0,0:23:59.49,0:24:03.30,Default,,0000,0000,0000,,hier, wie ihr das zum Beispiel links seht,\Nhaben wir hier so ein Basistemplate mal
Dialogue: 0,0:24:03.30,0:24:07.41,Default,,0000,0000,0000,,grafisch abgebildet. Wir haben hier eine\NKopfzeile, einen Hauptbereich und einen
Dialogue: 0,0:24:07.41,0:24:10.97,Default,,0000,0000,0000,,Footer und so beginnen meistens die\NTemplates auch in Hugo. Das ihr ein
Dialogue: 0,0:24:10.97,0:24:16.21,Default,,0000,0000,0000,,base-of Template habt. Und ab da werden\Nsozusagen die Layouts ineinander immer
Dialogue: 0,0:24:16.21,0:24:22.37,Default,,0000,0000,0000,,weiter verschachtelt und so setzt sich\Ndann eure Seite zusammen. Eine typische
Dialogue: 0,0:24:22.37,0:24:26.48,Default,,0000,0000,0000,,Aufteilung, habe ich wie gesagt schon\Nerwähnt, besteht ja meist aus diesen drei
Dialogue: 0,0:24:26.48,0:24:30.12,Default,,0000,0000,0000,,Blöcken. Ihr habt ein Headertemplate, wo\Neure ganzen Metadaten das CSS, das
Dialogue: 0,0:24:30.12,0:24:35.22,Default,,0000,0000,0000,,JavaScript und so reinkommt. Ihr habt den\NMain-Bereich, wo euer Inhalt dann meistens
Dialogue: 0,0:24:35.22,0:24:38.17,Default,,0000,0000,0000,,reinkommt, wo auch entsprechend die\Neinzelnen Inhaltstemplates meistens
Dialogue: 0,0:24:38.17,0:24:43.28,Default,,0000,0000,0000,,eingefügt werden. Und ein vierter Bereich\Nwo euer ganzer JavaScript-Kram und so
Dialogue: 0,0:24:43.28,0:24:47.19,Default,,0000,0000,0000,,reinkommt, wo ihr vielleicht eure\NCopyright Notice reinpackt und so. Das ist
Dialogue: 0,0:24:47.19,0:24:50.22,Default,,0000,0000,0000,,meistens die Grundstruktur und dort kann\Nes halt auch sein, dass die Templates sich
Dialogue: 0,0:24:50.22,0:24:54.66,Default,,0000,0000,0000,,dann noch weiter verschachteln. Was ist\Ndenn so ein mysteriöses Template
Dialogue: 0,0:24:54.66,0:24:59.24,Default,,0000,0000,0000,,überhaupt? So ein Template ist im Prinzip,\Nes sieht, wenn ihr das jetzt mal auf der
Dialogue: 0,0:24:59.24,0:25:03.64,Default,,0000,0000,0000,,linken Seite seht, fast aus wie eine HTML-\NSeite. Das ist es aber nicht ganz. Es ist
Dialogue: 0,0:25:03.64,0:25:07.70,Default,,0000,0000,0000,,im Prinzip, wie schon der Name verrät,\Neine Vorlage. Und diese Vorlage sagen dem
Dialogue: 0,0:25:07.70,0:25:12.37,Default,,0000,0000,0000,,Static Site Generator, was er mit eurem\NContent machen soll. Hier zum Beispiel
Dialogue: 0,0:25:12.37,0:25:18.89,Default,,0000,0000,0000,,habe ich mal so schematisch auf der linken\NSeite ein bisschen skizziert, wie das
Dialogue: 0,0:25:18.89,0:25:22.93,Default,,0000,0000,0000,,aussehen könnte. Wenn ihr zum Beispiel ein\NBlogpost rendern wollt, ihr extended hier
Dialogue: 0,0:25:22.93,0:25:26.73,Default,,0000,0000,0000,,meinetwegen euer Basis Template. Extend\Nheißt im Prinzip, ihr sagt eurem Static
Dialogue: 0,0:25:26.73,0:25:30.99,Default,,0000,0000,0000,,Site Generator: Wenn du den Blogpost\Nrenderst, dann nutz als Basis bitte das
Dialogue: 0,0:25:30.99,0:25:36.23,Default,,0000,0000,0000,,Template 42, also pack den Rest ins\NTemplate 42, damit Template 42 den ganzen
Dialogue: 0,0:25:36.23,0:25:43.07,Default,,0000,0000,0000,,Rest der Seite enthält. Und ich habe zum\NBeispiel die article Tags wurden über
Dialogue: 0,0:25:43.07,0:25:46.05,Default,,0000,0000,0000,,einen Artikel und so entsprechend\Neingefügt, das ist jetzt ganz normales
Dialogue: 0,0:25:46.05,0:25:48.76,Default,,0000,0000,0000,,HTML, ist nicht so wichtig und ihr habt\Nhier zwei Variablen, zum Beispiel
Dialogue: 0,0:25:48.76,0:25:55.73,Default,,0000,0000,0000,,Titelvariable hier in Header 1 und unten\Nin dem Div Element mit "rC3-is-awesome"
Dialogue: 0,0:25:55.73,0:25:59.59,Default,,0000,0000,0000,,eure Inhaltsvariable, d.h. da wird der\NContent vom Blogpost entsprechend rein
Dialogue: 0,0:25:59.59,0:26:05.48,Default,,0000,0000,0000,,gerendert. Und ihr könnt dort nicht nur\Nmeistens Textvariablen einbinden, sondern
Dialogue: 0,0:26:05.48,0:26:10.09,Default,,0000,0000,0000,,dort werden auch eure Assets und Ähnliches\Neingebunden. Das heißt, alles wie sich die
Dialogue: 0,0:26:10.09,0:26:14.88,Default,,0000,0000,0000,,Seite am Ende zusammensetzt, regelt ihr in\Nder Regel über die Templates. Ich habe
Dialogue: 0,0:26:14.88,0:26:20.25,Default,,0000,0000,0000,,euch da mal so ein Beispiel mitgebracht.\NIhr seht das hier ganz gut oben. Das ist
Dialogue: 0,0:26:20.25,0:26:24.23,Default,,0000,0000,0000,,ein Auszug aus einer Single HTML in Hugo.\NDas sieht ähnlich aus wie mein
Dialogue: 0,0:26:24.23,0:26:28.14,Default,,0000,0000,0000,,schematisches Beispiel eben. Ihr extended\Nhier das Template "main", habt dann hier
Dialogue: 0,0:26:28.14,0:26:32.88,Default,,0000,0000,0000,,Titelvariable, zum Beispiel im Header 1\Nund hier die Contentvariable in main. Und
Dialogue: 0,0:26:32.88,0:26:36.09,Default,,0000,0000,0000,,was Hugo da macht, es ersetzt hier den\NTitel halt durch den Titel eures
Dialogue: 0,0:26:36.09,0:26:40.09,Default,,0000,0000,0000,,Blogposts, den Content durch den Inhalt\Nund packt das Ganze in euer Main Template,
Dialogue: 0,0:26:40.09,0:26:45.85,Default,,0000,0000,0000,,also in das Restgerüst eurer Seite. Ich\Nhabe auch gesagt, Hugo fängt meistens mit
Dialogue: 0,0:26:45.85,0:26:50.57,Default,,0000,0000,0000,,so einem Bassistemplate an, das seht ihr\Nhier unten. Wenn ihr schon HTML
Dialogue: 0,0:26:50.57,0:26:53.46,Default,,0000,0000,0000,,geschrieben habt, kommt euch das\Nvielleicht bekannt vor. Das ist so ein
Dialogue: 0,0:26:53.46,0:26:57.14,Default,,0000,0000,0000,,klassisches Grundgerüst und ihr seht auch\Nschon, hier fängt es z.B. an, dass wir die
Dialogue: 0,0:26:57.14,0:27:01.21,Default,,0000,0000,0000,,lang, also die language der Seite hier\Nschon mit einer Variable festlegen, die
Dialogue: 0,0:27:01.21,0:27:06.08,Default,,0000,0000,0000,,zum Beispiel in diesem Fall bei Hugo\Nglobal ist. Wir fügen hier schon direkt
Dialogue: 0,0:27:06.08,0:27:10.78,Default,,0000,0000,0000,,ein Template ein, das ist das head\NTemplate, also das, was im HTML dieses
Dialogue: 0,0:27:10.78,0:27:14.40,Default,,0000,0000,0000,,head-Element ist, das kommt da mit rein\Nund der Rest kommt hier in den Body rein.
Dialogue: 0,0:27:14.40,0:27:17.11,Default,,0000,0000,0000,,Ist auch nicht so wichtig. Ihr müsst noch\Nnicht alles verstehen. Nur im Prinzip
Dialogue: 0,0:27:17.11,0:27:19.73,Default,,0000,0000,0000,,müsst ihr euch vorstellen, alles was in\Ndiesen geschweiften Doppelklammern drin
Dialogue: 0,0:27:19.73,0:27:24.67,Default,,0000,0000,0000,,ist, sind quasi Bausteine, die der Static\NSite Generator zur Bauzeit quasi einzeln
Dialogue: 0,0:27:24.67,0:27:29.99,Default,,0000,0000,0000,,in die Seite rein setzt und daraus\Nentsteht dann das Gesamtkonstrukt. Ich
Dialogue: 0,0:27:29.99,0:27:33.61,Default,,0000,0000,0000,,habe von der head.html gesprochen, so\Nsieht die ja auch im Prinzip aus bzw. ein
Dialogue: 0,0:27:33.61,0:27:36.75,Default,,0000,0000,0000,,Auszug davon. Ich habe das eingefügt, weil\Nich euch zwei Dinge mal zeigen wollte,
Dialogue: 0,0:27:36.75,0:27:40.83,Default,,0000,0000,0000,,nämlich könnt ihr auch ein bisschen\Nadvancederes Zeug damit machen. Ihr könnt
Dialogue: 0,0:27:40.83,0:27:44.12,Default,,0000,0000,0000,,z.B. Conditionals auch schreiben. Meistens\Nhaben diese Static Site Generators eine
Dialogue: 0,0:27:44.12,0:27:49.37,Default,,0000,0000,0000,,Template Language an Bord, die euch viel\NDynamik erlaubt und entsprechend euch auch
Dialogue: 0,0:27:49.37,0:27:53.70,Default,,0000,0000,0000,,die Möglichkeit bietet, auf viele Sachen\Nsehr dynamisch zu reagieren. Zum Beispiel
Dialogue: 0,0:27:53.70,0:27:57.41,Default,,0000,0000,0000,,sagen wir hier, wenn die Seite nicht die\NHomeseite ist, dann hängt bitte den
Dialogue: 0,0:27:57.41,0:28:02.68,Default,,0000,0000,0000,,Seitentitel hinten dran. Oder wir fügen\Ndie Description der Seite entsprechend ein
Dialogue: 0,0:28:02.68,0:28:05.89,Default,,0000,0000,0000,,und hier unten, was ganz cool ist. Ich\Nhabe schon gesagt, so ein Template bietet
Dialogue: 0,0:28:05.89,0:28:09.75,Default,,0000,0000,0000,,euch ein bisschen mehr Möglichkeit, als\Nnur Textvariablen einzubinden. Ihr habt
Dialogue: 0,0:28:09.75,0:28:13.71,Default,,0000,0000,0000,,hier unten die Möglichkeit, zum Beispiel\NRessourcen zu laden. Zum Beispiel haben
Dialogue: 0,0:28:13.71,0:28:19.51,Default,,0000,0000,0000,,wir eine SASS-File, eine SCSS-File, das\Nist ein Superset von CSS, was sozusagen
Dialogue: 0,0:28:19.51,0:28:23.36,Default,,0000,0000,0000,,kompiliert werden muss, damit es dann\Neingefügt werden kann. Und das macht unser
Dialogue: 0,0:28:23.36,0:28:27.26,Default,,0000,0000,0000,,Static Site Generator hier mit diesen\NBefehlen automatisch mit toCSS macht es
Dialogue: 0,0:28:27.26,0:28:32.16,Default,,0000,0000,0000,,das quasi zu CSS und macht es dann auch\Ngleich minifiziert und fingerprinted das.
Dialogue: 0,0:28:32.16,0:28:35.16,Default,,0000,0000,0000,,Fingerprinting heißt, einfach für alle die\Ndas nicht kennen, dass man quasi so eine
Dialogue: 0,0:28:35.16,0:28:39.30,Default,,0000,0000,0000,,Prüfsumme generiert. Und dann, wenn wir\Ndas alles hier einmal gemacht haben, durch
Dialogue: 0,0:28:39.30,0:28:43.56,Default,,0000,0000,0000,,so eine Pipeline durchlaufen lassen haben,\Nkönnen wir es hier direkt einfügen und
Dialogue: 0,0:28:43.56,0:28:48.50,Default,,0000,0000,0000,,haben quasi einen relativ coolen Style-\NTag. der auch relativ viel Sicherheit und
Dialogue: 0,0:28:48.50,0:28:51.79,Default,,0000,0000,0000,,Absicherung, bietet, dass irgendwas schief\Nlaufen kann. Und das alles macht ihr hier
Dialogue: 0,0:28:51.79,0:28:55.75,Default,,0000,0000,0000,,im Template und das ist halt in vielen\NContent Management System deutlich
Dialogue: 0,0:28:55.75,0:29:01.12,Default,,0000,0000,0000,,komplizierter und oft auch manchmal nur\Nmit Plugins zu lösen. Kurz umrissen, damit
Dialogue: 0,0:29:01.12,0:29:04.24,Default,,0000,0000,0000,,ich es nicht ausgelassen habe. Ich habe\Ndas meiste ja eigentlich schon erzählt.
Dialogue: 0,0:29:04.24,0:29:07.98,Default,,0000,0000,0000,,Statische Assets kommen in den eigenen\NOrdner und neben diesen ganzen CSS- und
Dialogue: 0,0:29:07.98,0:29:11.14,Default,,0000,0000,0000,,JavaScript-Kram sind es Bilder und\NSchriftarten, die da auch gerne
Dialogue: 0,0:29:11.14,0:29:16.62,Default,,0000,0000,0000,,auftauchen. Die könnt ihr meistens dann\Nüber absolute Pfade in eure Seite
Dialogue: 0,0:29:16.62,0:29:21.32,Default,,0000,0000,0000,,einbinden und die meisten Static Site\NGenerators bieten euch auch Preprocessing.
Dialogue: 0,0:29:21.32,0:29:25.86,Default,,0000,0000,0000,,Ich habe es hier mit CSS gezeigt. Es geht\Nauch mit Bildern und macht auch meistens
Dialogue: 0,0:29:25.86,0:29:27.86,Default,,0000,0000,0000,,mit Bildern viel Sinn. Das heißt, ihr\Nmüsst nicht irgendwie euer
Dialogue: 0,0:29:27.86,0:29:31.80,Default,,0000,0000,0000,,Bilderminifizierungs-Tool aufrufen und da\Neure Bilder einzeln reinschieben, sondern
Dialogue: 0,0:29:31.80,0:29:34.83,Default,,0000,0000,0000,,ihr schiebt eure Bilder einfach cool in\Nden Content-Ordner rein, sagt dem Static
Dialogue: 0,0:29:34.83,0:29:39.57,Default,,0000,0000,0000,,Site Generator einmal bau das bitte. Und\Ndann fallen am Ende für das Web optimierte
Dialogue: 0,0:29:39.57,0:29:45.28,Default,,0000,0000,0000,,Bilder raus, die entsprechend schon eine\Nangenehme Größe haben. Wenn ihr jetzt
Dialogue: 0,0:29:45.28,0:29:48.99,Default,,0000,0000,0000,,diesen ganzen Prozess einmal durchlaufen\Nhabt, ihr euch sicher seid okay, jetzt
Dialogue: 0,0:29:48.99,0:29:52.09,Default,,0000,0000,0000,,möchte ich das schon mal online stellen,\Ndann kommt ihr irgendwann an den Punkt, wo
Dialogue: 0,0:29:52.09,0:29:56.78,Default,,0000,0000,0000,,ihr das auf den Server hochladen wollt. Es\Nist im Gegensatz zu Content Management
Dialogue: 0,0:29:56.78,0:30:01.80,Default,,0000,0000,0000,,Systemen hier super simpel und relativ\Neasy, weil ihr müsst einfach nur ein paar
Dialogue: 0,0:30:01.80,0:30:05.06,Default,,0000,0000,0000,,Dateien hochladen. Ihr sagt einem Static\NSite Generator meistens, dass er das
Dialogue: 0,0:30:05.06,0:30:08.94,Default,,0000,0000,0000,,irgendwie bauen soll mit einem Build-\NCommand. Und wenn ich diesen Build-Command
Dialogue: 0,0:30:08.94,0:30:13.64,Default,,0000,0000,0000,,ausgeführt habt, dann kommt da ein Haufen\Nstatischer Dateien raus. Die schiebt ihr
Dialogue: 0,0:30:13.64,0:30:16.50,Default,,0000,0000,0000,,dann meistens in ein sogenanntes Content\NDelivery Network oder auf einen
Dialogue: 0,0:30:16.50,0:30:20.88,Default,,0000,0000,0000,,statischen, also auf einen normalen\NWebserver. Das ist beides das gleiche,
Dialogue: 0,0:30:20.88,0:30:24.28,Default,,0000,0000,0000,,außer dass ein Content Delivery Network\Nhalt, meistens auf viele Nodes verteilt
Dialogue: 0,0:30:24.28,0:30:29.54,Default,,0000,0000,0000,,sind. Stichwort Skalierung. Und die Last\Nist halt gering, weil es auch keine
Dialogue: 0,0:30:29.54,0:30:32.75,Default,,0000,0000,0000,,Runtime gibt. Das heißt egal wo ihr das\Nhinschiebt, die Webserver haben damit
Dialogue: 0,0:30:32.75,0:30:37.80,Default,,0000,0000,0000,,meistens nichts zu tun, weil die müssen im\NPrinzip einfach nur die Seite auf die User
Dialogue: 0,0:30:37.80,0:30:41.72,Default,,0000,0000,0000,,werfen, wenn die Seite aufgerufen wird.\NDas ist halt ein super einfacher Prozess.
Dialogue: 0,0:30:41.72,0:30:45.47,Default,,0000,0000,0000,,Viele Anbieter von so Content Delivery\NNetworks haben auch die Möglichkeit, eine
Dialogue: 0,0:30:45.47,0:30:48.66,Default,,0000,0000,0000,,sogenannte Continuous Integration und\NContinuous Delivery anzubieten. Das heißt,
Dialogue: 0,0:30:48.66,0:30:52.47,Default,,0000,0000,0000,,da müsst ihr euch nicht mal ums Bauen\Nkümmern, da verknüpft ihr einfach das Git-
Dialogue: 0,0:30:52.47,0:30:56.28,Default,,0000,0000,0000,,Repository und dann, wenn ihr was pusht,\Ndann kommt es automatisch sozusagen zum
Dialogue: 0,0:30:56.28,0:30:59.65,Default,,0000,0000,0000,,Anbieter, wird zusammengebaut und deployt.\NDas heißt es ist für euch super einfach,
Dialogue: 0,0:30:59.65,0:31:04.13,Default,,0000,0000,0000,,ihr macht eine Änderung, pusht die einfach\Nund dann wird der Rest vom entsprechenden
Dialogue: 0,0:31:04.13,0:31:07.25,Default,,0000,0000,0000,,Anbieter übernommen. Oder ihr baut euch\Nselbst eine CI oder eine Continuous
Dialogue: 0,0:31:07.25,0:31:10.64,Default,,0000,0000,0000,,Delivery. Das geht natürlich auch. Das\Nwird dann entsprechend über Webhooks
Dialogue: 0,0:31:10.64,0:31:17.86,Default,,0000,0000,0000,,getriggert. Kommen wir noch kurz zum\NVergleich. Es ist schon ein bisschen her,
Dialogue: 0,0:31:17.86,0:31:21.22,Default,,0000,0000,0000,,aber ihr erinnert euch vielleicht noch an\Nden Anfang. Ich habe so ein paar Punkte
Dialogue: 0,0:31:21.22,0:31:24.86,Default,,0000,0000,0000,,gemacht und die möchte ich mal ein\Nbisschen dem Static Site Generator
Dialogue: 0,0:31:24.86,0:31:30.01,Default,,0000,0000,0000,,gegenüberstellen. Zum ersten waren es\NSicherheitsupdates. Ihr habt natürlich
Dialogue: 0,0:31:30.01,0:31:32.85,Default,,0000,0000,0000,,hier kein Zugriff aufs Backend. Das heißt,\Nes wird natürlich erst mal schwierig, das
Dialogue: 0,0:31:32.85,0:31:35.69,Default,,0000,0000,0000,,Content Management System, was hier\Nentsprechend nicht vorhanden ist,
Dialogue: 0,0:31:35.69,0:31:39.88,Default,,0000,0000,0000,,natürlich anzugreifen. Das heißt, ihr\Nmüsstet euch an den Webserver oder
Dialogue: 0,0:31:39.88,0:31:43.40,Default,,0000,0000,0000,,ähnliches machen, um überhaupt Zugriff zu\Nbekommen. Und wenn die Seite einmal online
Dialogue: 0,0:31:43.40,0:31:47.01,Default,,0000,0000,0000,,ist, dann braucht die auch erst mal keine\NSicherheitsupdates. Außer vielleicht, wenn
Dialogue: 0,0:31:47.01,0:31:51.36,Default,,0000,0000,0000,,mal Frontend-Updates, wenn irgendwelche\Nbestimmten Standards auslaufen. Wenn ihr
Dialogue: 0,0:31:51.36,0:31:54.30,Default,,0000,0000,0000,,eure Seite mit HTML 1.0 geschrieben habt,\Ndann wird die vielleicht irgendwann nicht
Dialogue: 0,0:31:54.30,0:31:58.75,Default,,0000,0000,0000,,mehr dargestellt oder wenn ihr die für den\NInternet Explorer optimiert habt. Das
Dialogue: 0,0:31:58.75,0:32:02.85,Default,,0000,0000,0000,,Backend benötigt natürlich Wartung, auch\Ndie Hosting Hardware und Software benötigt
Dialogue: 0,0:32:02.85,0:32:05.39,Default,,0000,0000,0000,,Wartung. Das ist natürlich\Nselbstverständlich, aber es ist halt schon
Dialogue: 0,0:32:05.39,0:32:10.37,Default,,0000,0000,0000,,deutlich geringerer Aufwand. Die Features\Nkönnen überhaupt nicht wirklich kaputt
Dialogue: 0,0:32:10.37,0:32:13.44,Default,,0000,0000,0000,,gehen, weil die Inhalte meistens über\NStandards kommen, das heißt HTML ist
Dialogue: 0,0:32:13.44,0:32:17.50,Default,,0000,0000,0000,,standardisiert, CSS ist standardisiert und\Nauch JavaScript ist standardisiert. Das
Dialogue: 0,0:32:17.50,0:32:19.85,Default,,0000,0000,0000,,veraltet irgendwann, aber bis das\Nveraltet, habt ihr wahrscheinlich eure
Dialogue: 0,0:32:19.85,0:32:24.89,Default,,0000,0000,0000,,Seite schon mal umgebaut und die\NPortierung auf ein anderes System oder
Dialogue: 0,0:32:24.89,0:32:28.12,Default,,0000,0000,0000,,auch von einem entsprechenden Content\NManagement System ist halt super einfach
Dialogue: 0,0:32:28.12,0:32:32.23,Default,,0000,0000,0000,,weil diese Standards halt existieren. Die\NPlugin-Hölle, die gibt es eigentlich so
Dialogue: 0,0:32:32.23,0:32:40.23,Default,,0000,0000,0000,,nicht mehr wirklich. Es gibt Static Site\NGenerators, die halt entsprechend Plugins
Dialogue: 0,0:32:40.23,0:32:44.35,Default,,0000,0000,0000,,euch bieten, aber die machen euch erst mal\Nkeine Probleme, wenn die outdated sind und
Dialogue: 0,0:32:44.35,0:32:48.60,Default,,0000,0000,0000,,ihr habt relativ viel Zeit auch\Nentsprechend dort eine eigene Lösung zu
Dialogue: 0,0:32:48.60,0:32:52.63,Default,,0000,0000,0000,,implementieren oder auf eine andere Lösung\Nzu wechseln, weil diese Plugins halt nicht
Dialogue: 0,0:32:52.63,0:32:55.79,Default,,0000,0000,0000,,irgendwo online liegen, sondern die sind\Nhalt bei euch lokal und bauen nur die
Dialogue: 0,0:32:55.79,0:32:59.88,Default,,0000,0000,0000,,Seite. Und wenn da mal was kaputt geht\Noder outdated ist, dann ist das nicht
Dialogue: 0,0:32:59.88,0:33:03.75,Default,,0000,0000,0000,,direkt für Nutzer sichtbar. Genau. Ich\Nhabe eben schon kurz von Skalierung
Dialogue: 0,0:33:03.75,0:33:07.35,Default,,0000,0000,0000,,gesprochen. Das ist halt bei Static Sites\Nsuper einfach, natürlich auch nicht
Dialogue: 0,0:33:07.35,0:33:12.71,Default,,0000,0000,0000,,unendlich erweiterbar. Wenn so ein\NWebserver irgendwie eine riesen
Dialogue: 0,0:33:12.71,0:33:15.68,Default,,0000,0000,0000,,Menschenmasse abkriegt, dann geht der\Nirgendwann auch mal in die Knie. Aber dass
Dialogue: 0,0:33:15.68,0:33:19.93,Default,,0000,0000,0000,,das passiert ist halt wesentlich später.\NAuch cool ist halt, dass ihr im Content
Dialogue: 0,0:33:19.93,0:33:23.98,Default,,0000,0000,0000,,Delivery Network die Seite verteilen könnt\Nauf verschiedene Nodes und euch so
Dialogue: 0,0:33:23.98,0:33:29.73,Default,,0000,0000,0000,,entsprechend ein bisschen\NSkalierungsaufwand ersparen könnt. Das
Dialogue: 0,0:33:29.73,0:33:33.11,Default,,0000,0000,0000,,Ausrollen ist außerdem sehr einfach. Das\Nheißt, wenn ihr eine Änderung haben wollt,
Dialogue: 0,0:33:33.11,0:33:36.35,Default,,0000,0000,0000,,dann müsst ihr nicht anfangen, irgendwie\NDatenbanken zu migrieren, die PHP-Version
Dialogue: 0,0:33:36.35,0:33:40.04,Default,,0000,0000,0000,,zu updaten, irgendwelche Plugins zu\Nenabeln, sondern ihr schiebt einfach die
Dialogue: 0,0:33:40.04,0:33:43.78,Default,,0000,0000,0000,,Dateien auf den Server und es läuft. Eine\NDatenbank gibt es natürlich in diesem Fall
Dialogue: 0,0:33:43.78,0:33:46.94,Default,,0000,0000,0000,,dann auch entsprechend nicht. Die muss\Nnicht mit skalieren. Das einzige was es
Dialogue: 0,0:33:46.94,0:33:50.42,Default,,0000,0000,0000,,geben kann, ich habe es vorhin gesagt,\Nwenn ihr z.B. eine API verwendet und ihr
Dialogue: 0,0:33:50.42,0:33:53.69,Default,,0000,0000,0000,,wollt zum Beispiel auch die API nicht nur\Nvom Static Site Generator direkt beim
Dialogue: 0,0:33:53.69,0:33:59.44,Default,,0000,0000,0000,,Rendering aufrufen lassen. Dazu komme ich\Nnämlich gleich, sondern auch über über
Dialogue: 0,0:33:59.44,0:34:03.74,Default,,0000,0000,0000,,JavaScript z.B. wenn jemand die Seite\Naufruft, dann muss diese API entsprechend
Dialogue: 0,0:34:03.74,0:34:08.14,Default,,0000,0000,0000,,auch mit Skalieren und auch entsprechend\Nabgesichert sein. Aber das ist dann ein
Dialogue: 0,0:34:08.14,0:34:11.50,Default,,0000,0000,0000,,Problem, mit dem man sich dann\Nbeschäftigen muss. Und es gibt auch da ein
Dialogue: 0,0:34:11.50,0:34:17.27,Default,,0000,0000,0000,,paar Vorteile, weswegen man trotzdem einen\NStatic Site Generator verwenden möchte.
Dialogue: 0,0:34:17.27,0:34:20.30,Default,,0000,0000,0000,,Kommen wir jetzt mal noch ein bisschen zu\Nadvancteren Themen. Ich habe gerade eben
Dialogue: 0,0:34:20.30,0:34:23.60,Default,,0000,0000,0000,,schon gesagt, wie ist das denn, wenn ihr\Neine API abrufen wollt? Wenn ihr zum
Dialogue: 0,0:34:23.60,0:34:28.51,Default,,0000,0000,0000,,Beispiel eine statische Seite generiert,\Naber trotzdem vielleicht Änderungen
Dialogue: 0,0:34:28.51,0:34:32.29,Default,,0000,0000,0000,,schnell sichtbar haben wollt? Weil das\Nkann häufiger schon mal sein. Da gibt es
Dialogue: 0,0:34:32.29,0:34:37.85,Default,,0000,0000,0000,,einen Prozess, der sozusagen sich darum\Nkümmert, dass wenn ihr eine Seite aufruft,
Dialogue: 0,0:34:37.85,0:34:40.99,Default,,0000,0000,0000,,dass sie dann entsprechend mit Inhalt\Ngefüllt wird, dass sie sozusagen mit
Dialogue: 0,0:34:40.99,0:34:44.88,Default,,0000,0000,0000,,JavaScript Wasser übergossen wird und dann\Nanfängt, auf einmal neue Inhalte
Dialogue: 0,0:34:44.88,0:34:49.06,Default,,0000,0000,0000,,nachzuladen. Dieser Prozess nennt sich\NHydration. Da gibt es zwei verschiedene
Dialogue: 0,0:34:49.06,0:34:53.97,Default,,0000,0000,0000,,Techniken, da gibt es einmal das partial\Nhydration. Das heißt, bestimmte Inhalte
Dialogue: 0,0:34:53.97,0:34:58.66,Default,,0000,0000,0000,,der Seite werden einfach nur sozusagen mit\NDynamik versehen, mit JavaScript. Das
Dialogue: 0,0:34:58.66,0:35:01.71,Default,,0000,0000,0000,,heißt, ihr seht es auch unten in der\NGrafik: Die Seite läd, dann wird die Seite
Dialogue: 0,0:35:01.71,0:35:04.98,Default,,0000,0000,0000,,aufgerufen, dann hat die ein bisschen\NInhalt, der ist hier halt noch orange und
Dialogue: 0,0:35:04.98,0:35:07.82,Default,,0000,0000,0000,,dann kommt die Hydration in diesem\Norangenen Bereich und hängt sich da rein,
Dialogue: 0,0:35:07.82,0:35:11.39,Default,,0000,0000,0000,,sozusagen mit JavaScript und lädt\Nvielleicht Inhalte nach. Und auf einmal
Dialogue: 0,0:35:11.39,0:35:14.05,Default,,0000,0000,0000,,sind da plötzlich drei Blogposts, weil\Nvielleicht der Rendering Prozess noch
Dialogue: 0,0:35:14.05,0:35:18.30,Default,,0000,0000,0000,,nicht hinterher gekommen ist, weil die den\Nhalt gerade just veröffentlicht ist. Oder
Dialogue: 0,0:35:18.30,0:35:23.32,Default,,0000,0000,0000,,ihr habt eine ganz hitzige Kommentarspalte\Nund viel zu rendern, das lohnt sich jetzt
Dialogue: 0,0:35:23.32,0:35:27.11,Default,,0000,0000,0000,,einfach mal gerade nicht. Ihr könnt es\Nauch mit lazy Hydration machen. Das hat
Dialogue: 0,0:35:27.11,0:35:32.10,Default,,0000,0000,0000,,sogar noch den Vorteil, dass ihr\Nentsprechende Inhalte nur hydrated, wenn
Dialogue: 0,0:35:32.10,0:35:35.13,Default,,0000,0000,0000,,sie überhaupt in den Sichtbereich kommen.\NDas ist, wenn ihr viel Hydration nutzen
Dialogue: 0,0:35:35.13,0:35:38.84,Default,,0000,0000,0000,,wollt, sinnvoll, weil ihr dann nicht\Nanfangt, dem Client irgendwie mit ganz
Dialogue: 0,0:35:38.84,0:35:43.41,Default,,0000,0000,0000,,viel JavaScript um die Ohren zu werfen.\NSo, wir kommen auch langsam Richtung Ende,
Dialogue: 0,0:35:43.41,0:35:48.70,Default,,0000,0000,0000,,keine Sorge. Wir haben hier noch die\Ndeferred Static Site Generation. Das ist
Dialogue: 0,0:35:48.70,0:35:55.01,Default,,0000,0000,0000,,ein cooler Mittelweg, wenn ihr zum\NBeispiel sagen wollt: Okay, ich hätte gern
Dialogue: 0,0:35:55.01,0:35:57.74,Default,,0000,0000,0000,,trotzdem noch den Server und ich hätte\Ngerne schnelles Rendering und es soll
Dialogue: 0,0:35:57.74,0:36:02.19,Default,,0000,0000,0000,,alles schnell bereitgestellt werden. Ist\Ndas hier ein cooler Weg. Ihr habt einen
Dialogue: 0,0:36:02.19,0:36:05.69,Default,,0000,0000,0000,,Server im Hintergrund, der quasi wie ein\NCMS läuft. Hier ist es zum Beispiel unten
Dialogue: 0,0:36:05.69,0:36:08.77,Default,,0000,0000,0000,,in der Grafik von Gatsby, und ich sehe,\Ndie Quelle ist abgeschnitten. Das sollte
Dialogue: 0,0:36:08.77,0:36:12.61,Default,,0000,0000,0000,,vielleicht mal fixen danach ist auch egal.\NIch habe jetzt gesagt von gatsby.org ist
Dialogue: 0,0:36:12.61,0:36:18.16,Default,,0000,0000,0000,,das gerade und dieser Server, der läuft im\NHintergrund und liefert die Seite aus. Und
Dialogue: 0,0:36:18.16,0:36:20.76,Default,,0000,0000,0000,,jedes Mal, wenn diese Seite ausgeliefert\Nwird und es gab eine Inhalts-Änderung,
Dialogue: 0,0:36:20.76,0:36:24.58,Default,,0000,0000,0000,,dann wird ein Abbild automatisch\Ngeneriert. Das wird im Cache abgelegt und
Dialogue: 0,0:36:24.58,0:36:27.87,Default,,0000,0000,0000,,wenn die nächste Person kommt, kriegt die\Nnur den Cache zurück geworfen. Das heißt
Dialogue: 0,0:36:27.87,0:36:33.35,Default,,0000,0000,0000,,im Prinzip habt ihr immer ein Abbild, was\Nsozusagen inkrementell mitgeneriert wird
Dialogue: 0,0:36:33.35,0:36:36.63,Default,,0000,0000,0000,,und es fühlt sich an wie eine statische\NSeite, skaliert auch ähnlich. Aber ihr
Dialogue: 0,0:36:36.63,0:36:38.75,Default,,0000,0000,0000,,habt eben immer noch die Dynamik des\NServers hinten dran und könnt schnell auf
Dialogue: 0,0:36:38.75,0:36:43.71,Default,,0000,0000,0000,,Änderungen reagieren. Wenn ihr sagt, okay,\Nich will mein Content Management System
Dialogue: 0,0:36:43.71,0:36:48.93,Default,,0000,0000,0000,,nicht komplett aufgeben, dann gibt es auch\Nso coole hybride Ansätze und auch Plugins
Dialogue: 0,0:36:48.93,0:36:52.44,Default,,0000,0000,0000,,für viele Content Management Systeme. Seid\Ngewarnt, ihr nehmt natürlich die vielen
Dialogue: 0,0:36:52.44,0:36:55.81,Default,,0000,0000,0000,,Nachteile des Backend-Servers dann mit\Neuch. Aber wenn ihr sagt, ihr wollt nur
Dialogue: 0,0:36:55.81,0:36:58.60,Default,,0000,0000,0000,,skalieren und Sicherheitsupdates sind für\Neuch kein Problem, ist das vielleicht für
Dialogue: 0,0:36:58.60,0:37:05.72,Default,,0000,0000,0000,,euch ein Ansatz. Ihr habt auch dort die\NMöglichkeit, entsprechend dafür zu sorgen,
Dialogue: 0,0:37:05.72,0:37:11.59,Default,,0000,0000,0000,,dass auch die Leute weiterhin die Seite\Npflegen können. Mir fällt auch auf, dass
Dialogue: 0,0:37:11.59,0:37:15.93,Default,,0000,0000,0000,,da eine Slide irgendwie fehlt mit dem mit\Ndem Workflowwechsel, deswegen baue ich das
Dialogue: 0,0:37:15.93,0:37:19.86,Default,,0000,0000,0000,,hier schnell ein. Die Leute können halt\Nweiterhin sozusagen über eure Seite
Dialogue: 0,0:37:19.86,0:37:23.85,Default,,0000,0000,0000,,entsprechend den Content pflegen für eure\NRedakteure. Wenn ihr ein größeres Team
Dialogue: 0,0:37:23.85,0:37:29.21,Default,,0000,0000,0000,,habt, ändert sich nichts. Und so habt ihr\Nweiterhin alles im Griff und habt trotzdem
Dialogue: 0,0:37:29.21,0:37:32.64,Default,,0000,0000,0000,,die Möglichkeit, die Dinge statisch zu\Nskalieren und teilweise bieten auch die
Dialogue: 0,0:37:32.64,0:37:35.18,Default,,0000,0000,0000,,Content Management Systeme die\NMöglichkeit, das in ein Content Delivery
Dialogue: 0,0:37:35.18,0:37:38.88,Default,,0000,0000,0000,,Network zu schieben. Das heißt noch nicht\Nmal euer Server hat eine wirkliche Last
Dialogue: 0,0:37:38.88,0:37:42.83,Default,,0000,0000,0000,,und der Server, auf dem die Seite liegt,\Nist kein Angriffsvektor für euer Content
Dialogue: 0,0:37:42.83,0:37:47.49,Default,,0000,0000,0000,,Management System. Kurz als Ergänzung,\Nweil das vorhin gefehlt hat aus
Dialogue: 0,0:37:47.49,0:37:52.71,Default,,0000,0000,0000,,irgendeinem Grund: Wenn ihr ein Content\NManagement System habt, bietet es meistens
Dialogue: 0,0:37:52.71,0:37:57.59,Default,,0000,0000,0000,,auch eine API um dort Inhalte abzurufen.\NDas heißt, wenn ihr entsprechend WordPress
Dialogue: 0,0:37:57.59,0:38:00.77,Default,,0000,0000,0000,,oder ähnliches habt, hat es meistens eine\NRest API und ihr könnt auch die natürlich
Dialogue: 0,0:38:00.77,0:38:06.01,Default,,0000,0000,0000,,mit dem Static Site Generator anzapfen, um\Nentsprechend Inhalte abzurufen und sie
Dialogue: 0,0:38:06.01,0:38:09.76,Default,,0000,0000,0000,,dann rein zu generieren. Das heißt, es ist\Nfür euren Workflow eigentlich ganz cool,
Dialogue: 0,0:38:09.76,0:38:12.42,Default,,0000,0000,0000,,weil ihr da nicht viel ändern müsst. Also\Nfür eure Redakteure oder ähnliches ändert
Dialogue: 0,0:38:12.42,0:38:15.32,Default,,0000,0000,0000,,sich nichts, sondern es generiert sich\Neinfach eine Seite hintendran mit und das
Dialogue: 0,0:38:15.32,0:38:20.17,Default,,0000,0000,0000,,Editing Frontend bleibt quasi gleich. NEOS\Nist übrigens auch ein bekanntes Beispiel.
Dialogue: 0,0:38:20.17,0:38:24.56,Default,,0000,0000,0000,,Ist ein bisschen anders. Das generiert\Nkomplett statische Seiten, ist aber auch
Dialogue: 0,0:38:24.56,0:38:28.23,Default,,0000,0000,0000,,TYPO3 ähnlich. Das heißt für kleinere\NInstallationen vielleicht nicht so ganz
Dialogue: 0,0:38:28.23,0:38:33.66,Default,,0000,0000,0000,,geeignet. So, das war jetzt viel Inhalt.\NKommen wir zum Fazit. Sind Static Site
Dialogue: 0,0:38:33.66,0:38:39.09,Default,,0000,0000,0000,,Generators die Lösung für alles? Ist das\Nirgendwie das, was man einfach die Magie,
Dialogue: 0,0:38:39.09,0:38:42.06,Default,,0000,0000,0000,,die man über alles drüber gießen kann und\Ndann funktioniert alles? Nein, das sind
Dialogue: 0,0:38:42.06,0:38:44.58,Default,,0000,0000,0000,,sie eigentlich nicht. Ich will ja auch\Nnicht Content Management Systeme
Dialogue: 0,0:38:44.58,0:38:49.09,Default,,0000,0000,0000,,runtermachen, aber sie sind eine coole\NMöglichkeit, um euch hohe Flexibilität zu
Dialogue: 0,0:38:49.09,0:38:52.09,Default,,0000,0000,0000,,bieten, um euch hohe Skalierbarkeit zu\Nbieten und euch zum Beispiel auch die
Dialogue: 0,0:38:52.09,0:38:56.75,Default,,0000,0000,0000,,Wartung zu nehmen. Wenn ihr sagt, ihr baut\Nein kleines Blog zum Beispiel, da habt ihr
Dialogue: 0,0:38:56.75,0:39:00.16,Default,,0000,0000,0000,,ja keine große Instanz von WordPress,\Nsondern ihr schreibt euer Blog, ihr postet
Dialogue: 0,0:39:00.16,0:39:03.84,Default,,0000,0000,0000,,den Eintrag, dann geht er online und dann\Nmüsst ihr euch da keinen Kopf drum machen.
Dialogue: 0,0:39:03.84,0:39:08.63,Default,,0000,0000,0000,,Der liegt irgendwo. Und wenn ihr\NAufmerksamkeit mit eurem Inhalt generiert,
Dialogue: 0,0:39:08.63,0:39:15.29,Default,,0000,0000,0000,,dann ist das für euch kein Problem, weil\Nder Blog skaliert dann ordentlich mit. Und
Dialogue: 0,0:39:15.29,0:39:17.74,Default,,0000,0000,0000,,ihr habt auch hohe\NAufrufgeschwindigkeiten. Was ich übrigens
Dialogue: 0,0:39:17.74,0:39:21.29,Default,,0000,0000,0000,,vorhin noch nicht erwähnt habe, was auch\Nsehr cool ist, ist, dass ihr natürlich
Dialogue: 0,0:39:21.29,0:39:24.11,Default,,0000,0000,0000,,sofort mit dem Inhalt da seid. Das heißt,\Nihr müsst es nicht dynamisch nach
Dialogue: 0,0:39:24.11,0:39:27.70,Default,,0000,0000,0000,,generieren. Und wenn ihr zum Beispiel\Njemanden oder eine Suchmaschine habt, die
Dialogue: 0,0:39:27.70,0:39:30.94,Default,,0000,0000,0000,,Inhalte in der Seite sucht, dann sind die\NInhalte auch sofort da. Oder zum Beispiel
Dialogue: 0,0:39:30.94,0:39:34.67,Default,,0000,0000,0000,,eine Person mit Screenreader. Dann hat sie\Nauch sofort ein statisches Abbild der
Dialogue: 0,0:39:34.67,0:39:37.58,Default,,0000,0000,0000,,Seite, wo nichts irgendwie noch komisch\Nmit Magie nachgeneriert wird und die
Dialogue: 0,0:39:37.58,0:39:42.32,Default,,0000,0000,0000,,Person kann die Seite auch sehr schnell\Nund ordentlich durchsuchen. In diesem
Dialogue: 0,0:39:42.32,0:39:47.15,Default,,0000,0000,0000,,Sinne vielen Dank fürs Zuschauen oder\NZuhören oder wie auch immer und ich bin es
Dialogue: 0,0:39:47.15,0:39:49.87,Default,,0000,0000,0000,,auf jeden Fall mal gespannt auf eure\NFragen und hoffe, ich habe euch nicht
Dialogue: 0,0:39:49.87,0:39:54.11,Default,,0000,0000,0000,,allzu sehr mit dem ganzen Inhalt\Nerschlagen. Und ja, cool.
Dialogue: 0,0:39:54.11,0:39:59.94,Default,,0000,0000,0000,,Herald: Ja, danke für diesen super\NVortrag. Wenn ihr jetzt noch Fragen habt,
Dialogue: 0,0:39:59.94,0:40:05.69,Default,,0000,0000,0000,,könnt ihr die gerne auf Twitter und\NMastodon stellen unter dem Hashtag
Dialogue: 0,0:40:05.69,0:40:13.94,Default,,0000,0000,0000,,#rC3cwtv, also rC3 Chaos West TV. Unser\NSignal Angel wird sie dann mir schicken,
Dialogue: 0,0:40:13.94,0:40:18.86,Default,,0000,0000,0000,,damit ich sie stellen kann. Gleich am\NAnfang ist die Frage gestellt worden,
Dialogue: 0,0:40:18.86,0:40:23.53,Default,,0000,0000,0000,,können auch Videos eingebettet werden?\NVielleicht kann man noch darstellen, was
Dialogue: 0,0:40:23.53,0:40:28.67,Default,,0000,0000,0000,,mit Static Sites geht und was nicht?\NAvocadoom: Du schneidest bei mir manchmal
Dialogue: 0,0:40:28.67,0:40:30.100,Default,,0000,0000,0000,,mit dem Audio ein bisschen ab, aber ich\Nglaube, ich habe das meiste von der Frage
Dialogue: 0,0:40:30.100,0:40:37.16,Default,,0000,0000,0000,,tatsächlich verstanden. Die Videos können\Ntatsächlich eingebettet werden. Ich glaube
Dialogue: 0,0:40:37.16,0:40:40.52,Default,,0000,0000,0000,,Tooling, um Videos zu optimieren, gibt es\Nmeistens nicht. Aber natürlich habt ihr
Dialogue: 0,0:40:40.52,0:40:43.89,Default,,0000,0000,0000,,die Möglichkeit, wie bei allen anderen\Nstatischen Assets auch, dass ihr einfach
Dialogue: 0,0:40:43.89,0:40:47.32,Default,,0000,0000,0000,,die Videos auf dem Webserver mit\Nhochladet. Meistens in diese Static
Dialogue: 0,0:40:47.32,0:40:51.88,Default,,0000,0000,0000,,Directory sozusagen, wenn euch das lieb\Nist und sie da entsprechend einbettet und
Dialogue: 0,0:40:51.88,0:40:57.81,Default,,0000,0000,0000,,dann dort sozusagen mit Video Elementen im\NHTML oder mit einem Video Player Library
Dialogue: 0,0:40:57.81,0:41:01.93,Default,,0000,0000,0000,,in JavaScript entsprechend diese Dinge\Neinbettet. Es gibt natürlich auch die
Dialogue: 0,0:41:01.93,0:41:04.57,Default,,0000,0000,0000,,Möglichkeit, dass ihr anfangt irgendwie\NYouTube oder Vimeo oder was auch immer mit
Dialogue: 0,0:41:04.57,0:41:08.44,Default,,0000,0000,0000,,der API anzuzapfen und so entsprechend\NVideos einbettet. Also da sind euch die
Dialogue: 0,0:41:08.44,0:41:13.01,Default,,0000,0000,0000,,Möglichkeiten relativ offen. Ihr müsst nur\Nein bisschen darauf gefasst sein, dass
Dialogue: 0,0:41:13.01,0:41:16.73,Default,,0000,0000,0000,,natürlich Videos eine hohe Last für den\NWebserver bieten. Das heißt, da fließen
Dialogue: 0,0:41:16.73,0:41:22.03,Default,,0000,0000,0000,,relativ viele Daten, aber in der Regel ist\Nes auch kein großes Problem.
Dialogue: 0,0:41:22.03,0:41:26.33,Default,,0000,0000,0000,,Herald: Danke! Könntest du noch ein\NBeispiel bringen, was man nicht mit einer
Dialogue: 0,0:41:26.33,0:41:31.38,Default,,0000,0000,0000,,statischen Seite realisieren kann.\NAvocadoom: Nicht mit einer statischen
Dialogue: 0,0:41:31.38,0:41:36.25,Default,,0000,0000,0000,,Seite realisieren? Im Prinzip kann man\Nsehr viel mit einer statischen Seite
Dialogue: 0,0:41:36.25,0:41:40.14,Default,,0000,0000,0000,,realisieren. Was man natürlich nicht\Nrealisieren sollte oder könnte ist
Dialogue: 0,0:41:40.14,0:41:44.40,Default,,0000,0000,0000,,natürlich, sind Seiten mit sehr viel\Ndynamischen Inhalt, sage ich mal so. Also
Dialogue: 0,0:41:44.40,0:41:47.08,Default,,0000,0000,0000,,wenn ihr zum Beispiel jetzt anfangt, ich\Nhabe es vorhin mit der hitzigen
Dialogue: 0,0:41:47.08,0:41:50.48,Default,,0000,0000,0000,,Kommentarspalte gesagt, wenn ihr jetzt\Nirgendwas habt, wo ihr viele Kommentare
Dialogue: 0,0:41:50.48,0:41:55.30,Default,,0000,0000,0000,,drin habt und ihr wollt da nicht viel mit\NJavaScript oder so arbeiten, sondern das
Dialogue: 0,0:41:55.30,0:41:58.70,Default,,0000,0000,0000,,relativ statisch lassen, dann werdet ihr\Nschnell auf das Problem stoßen, dass
Dialogue: 0,0:41:58.70,0:42:02.03,Default,,0000,0000,0000,,nicht, wenn jemand alle 10 Sekunden\Nkommentiert, dass ihr dann anfangen könnt,
Dialogue: 0,0:42:02.03,0:42:06.99,Default,,0000,0000,0000,,die Seite neu zu rendern, weil das queued\Ndann ewig ab und irgendwann zieht eure
Dialogue: 0,0:42:06.99,0:42:09.76,Default,,0000,0000,0000,,Seite nur noch so hinterher mit dem\NRendering oder das Rendering wird dauernd
Dialogue: 0,0:42:09.76,0:42:14.12,Default,,0000,0000,0000,,abgebrochen. Das heißt, wenn ihr sehr,\Nsehr, sehr viele dynamische Inhalte habt,
Dialogue: 0,0:42:14.12,0:42:17.20,Default,,0000,0000,0000,,dann könnte es tatsächlich irgendwann ein\NProblem werden, das zu realisieren. Aber
Dialogue: 0,0:42:17.20,0:42:20.06,Default,,0000,0000,0000,,ansonsten kann man eigentlich relativ viel\Nmit statischen Seiten realisieren.
Dialogue: 0,0:42:20.06,0:42:25.27,Default,,0000,0000,0000,,Herald: Dann noch eine Frage zur\NGeschwindigkeit. Es kommt dann öfter vor,
Dialogue: 0,0:42:25.27,0:42:30.56,Default,,0000,0000,0000,,dass man Kilobytes an Frameworkcode\Npreloaden muss, bevor die Seite überhaupt
Dialogue: 0,0:42:30.56,0:42:35.21,Default,,0000,0000,0000,,reagiert. Gibt es da Tipps, wie man die\NLadezeit bei static sites gering hält?
Dialogue: 0,0:42:35.21,0:42:38.59,Default,,0000,0000,0000,,Avocadoom: Da gibt es tatsächlich Tipps,\Nalso wenn man zum Beispiel mit einem
Dialogue: 0,0:42:38.59,0:42:42.31,Default,,0000,0000,0000,,JavaScript Static Site Generator arbeitet,\Nwie Gatsby oder so, gibt es dort die
Dialogue: 0,0:42:42.31,0:42:46.99,Default,,0000,0000,0000,,Möglichkeiten, dass man, wenn man dort ein\NFramework wie React einbindet, das sie
Dialogue: 0,0:42:46.99,0:42:51.05,Default,,0000,0000,0000,,sogenannte Tree shaking mit sich bringen.\NDas heißt im Prinzip, dass sie sozusagen
Dialogue: 0,0:42:51.05,0:42:55.22,Default,,0000,0000,0000,,an dem Dependency-Baum, den man aufbaut,\Num es mal bildlich zu beschreiben,
Dialogue: 0,0:42:55.22,0:42:57.88,Default,,0000,0000,0000,,schütteln, d.h. sie schütteln da so lange\Ndran, bis nur noch das Notwendigste
Dialogue: 0,0:42:57.88,0:43:02.44,Default,,0000,0000,0000,,dranhängt und werfen den Rest des\NFrameworkcodes weg. Das heißt, ihr habt am
Dialogue: 0,0:43:02.44,0:43:07.63,Default,,0000,0000,0000,,Ende ein gebündeltes JavaScript, was quasi\Nrelativ minimal ist. Natürlich ist es
Dialogue: 0,0:43:07.63,0:43:10.89,Default,,0000,0000,0000,,trotzdem immer noch ein bisschen\NFrameworkcode. Viele bieten auch
Dialogue: 0,0:43:10.89,0:43:15.30,Default,,0000,0000,0000,,sogenanntes Code Splitting an, das heißt\Nim Prinzip, dass ihr nur den für die Seite
Dialogue: 0,0:43:15.30,0:43:19.22,Default,,0000,0000,0000,,notwendigen Code ladet. Und wenn ihr eine\Nneue Seite ladet, dann ladet ihr den
Dialogue: 0,0:43:19.22,0:43:23.11,Default,,0000,0000,0000,,restlichen notwendigen Code. Das kann man\Nauch manuell machen. Ich habe es ja von
Dialogue: 0,0:43:23.11,0:43:27.85,Default,,0000,0000,0000,,darmstadt.ccc.de genannt gehabt. Da haben\Nwir es tatsächlich so gemacht, dass wir
Dialogue: 0,0:43:27.85,0:43:31.78,Default,,0000,0000,0000,,den Kalender mit JavaScript realisiert\Nhaben, weil wir dort iCal parsen und das
Dialogue: 0,0:43:31.78,0:43:35.75,Default,,0000,0000,0000,,ist auch relativ dynamisch. Und dort ist\Nes tatsächlich so, dass wir diesen Code
Dialogue: 0,0:43:35.75,0:43:39.58,Default,,0000,0000,0000,,nur laden, wenn die entsprechende Seite\Naufgerufen wird mit einer entsprechenden
Dialogue: 0,0:43:39.58,0:43:42.85,Default,,0000,0000,0000,,Templatevariable, die dann sozusagen auf\Nwahr gesetzt wird. Und dann wird dieses
Dialogue: 0,0:43:42.85,0:43:46.61,Default,,0000,0000,0000,,JavaScript eingebunden. Das heißt im\NPrinzip die Dinge, die man dann da
Dialogue: 0,0:43:46.63,0:43:49.69,Default,,0000,0000,0000,,mitnehmen kann, ist zum einen halt es\Nmanuell aufzuteilen, nicht einfach nur die
Dialogue: 0,0:43:49.69,0:43:55.01,Default,,0000,0000,0000,,Binaries irgendwie aus den Release Renders\Noder aus den Release Builds quasi einfach
Dialogue: 0,0:43:55.01,0:43:57.90,Default,,0000,0000,0000,,in den Header einzubinden, sondern Bundler\Nzu verwenden, auch wenn es ein bisschen
Dialogue: 0,0:43:57.90,0:44:03.07,Default,,0000,0000,0000,,schmerzhaft ist oder halt auch einfach das\NGanze manuell aufzuteilen.
Dialogue: 0,0:44:03.07,0:44:06.92,Default,,0000,0000,0000,,Herald: Danke! Dann noch eine Frage, was\Ndu von verschiedenen Frameworks...
Dialogue: 0,0:44:06.92,0:44:11.71,Default,,0000,0000,0000,,Avocadoom: Du bist gerade super leise,\Nkannst du gerade mal gucken ob du...
Dialogue: 0,0:44:11.71,0:44:14.77,Default,,0000,0000,0000,,Herald: Geht es besser?\NAvocadoom: Ähh ja, naja, es geht.
Dialogue: 0,0:44:14.77,0:44:19.50,Default,,0000,0000,0000,,Herald: Okay, was ist deine Meinung zu\Nheadless CMS für static site generator?
Dialogue: 0,0:44:19.50,0:44:25.07,Default,,0000,0000,0000,,Avocadoom: Tatsächlich eine sehr gute.\NHeadless CMS ist tatsächlich was, wo ich
Dialogue: 0,0:44:25.07,0:44:29.86,Default,,0000,0000,0000,,auch in gewisser Weise die Zukunft sehe\Nund viele etablierte CMS Lösungen arbeiten
Dialogue: 0,0:44:29.86,0:44:33.14,Default,,0000,0000,0000,,natürlich auch auf diesen Punkt hin, dass\Nsie zum headless CMS werden können oder
Dialogue: 0,0:44:33.14,0:44:37.96,Default,,0000,0000,0000,,zumindest zum teilweise headless CMS. Wenn\Nihr nur 'ne static site habt, ist es
Dialogue: 0,0:44:37.96,0:44:42.23,Default,,0000,0000,0000,,natürlich erst mal nur so die halbe Miete,\Naber da ist es halt auch schon ganz cool.
Dialogue: 0,0:44:42.23,0:44:46.06,Default,,0000,0000,0000,,Aber was halt vor allem der Vorteil ist,\Nwenn ihr anfangt, die Inhalte noch auf
Dialogue: 0,0:44:46.06,0:44:49.74,Default,,0000,0000,0000,,weitere Endgeräte zu bringen. Das heißt\Nzum Beispiel, wenn ihr jetzt eine
Dialogue: 0,0:44:49.74,0:44:52.92,Default,,0000,0000,0000,,Newsseite seid und ihr baut euch jetzt\Neine mobile App, dann müsst ihr nicht noch
Dialogue: 0,0:44:52.92,0:44:57.48,Default,,0000,0000,0000,,eine API dafür schreiben, sondern die API\Nliegt halt einfach schon da. Und das
Dialogue: 0,0:44:57.48,0:45:02.23,Default,,0000,0000,0000,,bietet euch natürlich viele Vorteile. Das\Nheißt, wenn ihr verschiedene Zielgeräte
Dialogue: 0,0:45:02.23,0:45:04.96,Default,,0000,0000,0000,,damit ansprechen wollt, habt ihr halt\Nsofort eine API und die API ist halt auch
Dialogue: 0,0:45:04.96,0:45:08.84,Default,,0000,0000,0000,,unsere einzige source of truth. Das heißt,\Ndie könnt ihr pflegen, da könnt ihr dafür
Dialogue: 0,0:45:08.84,0:45:13.07,Default,,0000,0000,0000,,sorgen, dass sie ordentlich läuft und habt\Nso die Möglichkeit halt auch das
Dialogue: 0,0:45:13.07,0:45:16.40,Default,,0000,0000,0000,,entsprechend in andere Services mit\Neinzubinden. Oder auch, weiß ich nicht,
Dialogue: 0,0:45:16.40,0:45:19.80,Default,,0000,0000,0000,,ein Sprachassistentenskill, was weiß ich.\NEs läuft halt alles auf die selbe source
Dialogue: 0,0:45:19.80,0:45:24.50,Default,,0000,0000,0000,,hinaus und ich finde das sehr gut. Das ist\Neine sehr gute Lösung. Auf jeden Fall.
Dialogue: 0,0:45:24.50,0:45:28.88,Default,,0000,0000,0000,,Herald: Cool. Was ist deine Einschätzung\Nzu Graph?
Dialogue: 0,0:45:28.88,0:45:31.87,Default,,0000,0000,0000,,Avocadoom: Du bist wieder super leise,\Nsorry.
Dialogue: 0,0:45:31.87,0:45:36.40,Default,,0000,0000,0000,,Herald: Was ist deine Einschätzung zu\NGraph, du hast es ja vorher einmal kurz
Dialogue: 0,0:45:36.40,0:45:40.22,Default,,0000,0000,0000,,erwähnt.\NAvocadoom: Meine Meinung zu, jetzt warst
Dialogue: 0,0:45:40.22,0:45:43.37,Default,,0000,0000,0000,,du wieder laut noch mal..\NHerald: Was ist deine Einschätzung zu
Dialogue: 0,0:45:43.37,0:45:47.29,Default,,0000,0000,0000,,Graph?\NAvocadoom: Zu Graph? Meine Einschätzung zu
Dialogue: 0,0:45:47.29,0:45:52.72,Default,,0000,0000,0000,,Graph ist tatsächlich auch eine relativ\Ngute. Graph arbeitet ja an sich nicht
Dialogue: 0,0:45:52.72,0:45:56.24,Default,,0000,0000,0000,,unbedingt direkt mit static site\Ngeneration, sondern cached das ganze, ja,
Dialogue: 0,0:45:56.24,0:46:00.85,Default,,0000,0000,0000,,in so Blöcken quasi, also im Prinzip\Nwerden keine Seiten raus gerendert,
Dialogue: 0,0:46:00.85,0:46:05.77,Default,,0000,0000,0000,,sondern die Seite speichert sich oder das\NCMS speichert sich quasi so Blöcke der
Dialogue: 0,0:46:05.77,0:46:09.60,Default,,0000,0000,0000,,Seite ab und fügt die am Ende nochmal kurz\Nmit PHP zusammen. Es gibt aber auch die
Dialogue: 0,0:46:09.60,0:46:13.88,Default,,0000,0000,0000,,Möglichkeit, das statisch zu machen, aber\Nso oder so ist es ganz sinnvoll. Graph
Dialogue: 0,0:46:13.88,0:46:17.12,Default,,0000,0000,0000,,legt damit ja so ein bisschen so eine\NMitte, weil es ja aus diesem Bereich der
Dialogue: 0,0:46:17.12,0:46:20.07,Default,,0000,0000,0000,,flat file Content Management Systeme\Nbekommt. Das heißt, für alle, die das
Dialogue: 0,0:46:20.07,0:46:23.64,Default,,0000,0000,0000,,nicht kennen. Das sind Content Management\NSysteme, die über das Dateisystem arbeiten
Dialogue: 0,0:46:23.64,0:46:28.04,Default,,0000,0000,0000,,und nicht über eine Datenbank. Und ja, es\Nist auf jeden Fall ein cooler Mittelweg.
Dialogue: 0,0:46:28.04,0:46:32.96,Default,,0000,0000,0000,,Es ist halt trotzdem ein System, was\NSicherheitsrisiken bieten kann und wo man
Dialogue: 0,0:46:32.96,0:46:36.11,Default,,0000,0000,0000,,natürlich immer ein Backend mit schleppt.\NAber es bietet halt auch hohe Flexibilität
Dialogue: 0,0:46:36.11,0:46:39.51,Default,,0000,0000,0000,,und Performance halt gerade dadurch, weil\Nes mit diesem Cachingmechanismus arbeitet
Dialogue: 0,0:46:39.51,0:46:45.24,Default,,0000,0000,0000,,oder über ein Plugin sogar mit static site\Nrendering. Und ja, es ist auch eine sehr
Dialogue: 0,0:46:45.24,0:46:48.23,Default,,0000,0000,0000,,positive Meinung, die ich dazu habe und es\Nauf jeden Fall ein cooler Einstieg, wenn
Dialogue: 0,0:46:48.23,0:46:52.50,Default,,0000,0000,0000,,man mal so ein bisschen in diese Richtung\Ngehen will von: Wie sieht das alles aus,
Dialogue: 0,0:46:52.50,0:46:57.06,Default,,0000,0000,0000,,wenn ich was sozusagen einfach statisch\Nmache und nicht so krass hoch dynamisch
Dialogue: 0,0:46:57.06,0:47:00.15,Default,,0000,0000,0000,,und vor allem wenn ich mal eine große\NDatenbank wegwerfen will.
Dialogue: 0,0:47:00.15,0:47:05.27,Default,,0000,0000,0000,,Herald: Die nächste Frage wär: Ist aus\Ndeiner Sicht PHP noch zeitgemäß?
Dialogue: 0,0:47:05.27,0:47:10.94,Default,,0000,0000,0000,,Avocadoom: Ja, PHP ist zeitgemäß.\NTatsächlich weiß ich, dass viele PHP total
Dialogue: 0,0:47:10.94,0:47:17.07,Default,,0000,0000,0000,,abhaten, aber ich finde der PHP-Entwickler\Noder der PHP-Schöpfer, ich weiß seinen
Dialogue: 0,0:47:17.07,0:47:20.64,Default,,0000,0000,0000,,Namen gerade nicht. Ich habe mal einen\NTalk von dem gesehen, vor einem Jahr
Dialogue: 0,0:47:20.65,0:47:24.03,Default,,0000,0000,0000,,glaube ich ungefähr. Und er gibt sich halt\Ngroße Mühe bzw. sein Team gibt sich große
Dialogue: 0,0:47:24.03,0:47:30.41,Default,,0000,0000,0000,,Mühe, dass die Sprache immer moderner\Nwird, immer aktueller. Klar ist es nicht
Dialogue: 0,0:47:30.41,0:47:35.08,Default,,0000,0000,0000,,die schönste Sprache, mit Sicherheit, aber\NPHP ist halt immer noch in seiner
Dialogue: 0,0:47:35.08,0:47:40.68,Default,,0000,0000,0000,,Möglichkeit, dass man es einfach relativ\Neasy in HTML z.B. einbauen kann oder
Dialogue: 0,0:47:40.68,0:47:45.45,Default,,0000,0000,0000,,dadurch, dass es fast auf jedem Webserver\Nläuft, eigentlich fast ungeschlagen. Und
Dialogue: 0,0:47:45.45,0:47:49.57,Default,,0000,0000,0000,,ja, ich weiß, es ist wirklich von der\Nreinen Theorieperspektive mit Sicherheit
Dialogue: 0,0:47:49.57,0:47:54.14,Default,,0000,0000,0000,,nicht die schönste Sprache, aber es ist\Ndefinitiv immer noch zeitgemäß.
Dialogue: 0,0:47:54.14,0:48:09.93,Default,,0000,0000,0000,,Herald: So, im Chat, wie IRC, der... Okay,\Ngeht besser?
Dialogue: 0,0:48:09.93,0:48:14.41,Default,,0000,0000,0000,,Avocadoom: Von wem jetzt, von mir schon?\NAh, okay, das erklärt auch, warum er immer
Dialogue: 0,0:48:14.41,0:48:20.15,Default,,0000,0000,0000,,wieder leise ist. Aber ja, gerade\Nübrigens, ich überbrück' das mal ein
Dialogue: 0,0:48:20.15,0:48:23.69,Default,,0000,0000,0000,,bisschen, gerade mit dieser ganzen\NGeschichte, mit PHP 7 und PHP 8 sind ja
Dialogue: 0,0:48:23.69,0:48:27.08,Default,,0000,0000,0000,,viele Änderungen reingekommen, die der\NSprache einen ordentlich modernen Anstrich
Dialogue: 0,0:48:27.08,0:48:32.24,Default,,0000,0000,0000,,verleihen. Und es gibt auch immer wieder\Nneue Frameworks und Ansätze, die PHP-
Dialogue: 0,0:48:32.24,0:48:38.48,Default,,0000,0000,0000,,Entwicklung immer leichter machen und\Nimmer moderner. Und ich denke schon, dass
Dialogue: 0,0:48:38.48,0:48:44.00,Default,,0000,0000,0000,,das auch Zukunft hat.\NHerald: So, ich hoffe, man hört mich?
Dialogue: 0,0:48:44.00,0:48:46.53,Default,,0000,0000,0000,,Avocadoom: Ja, man hört dich.\NHerald: Wie sieht es mit der
Dialogue: 0,0:48:46.53,0:48:50.53,Default,,0000,0000,0000,,Kompatibilität für Smartphones bei\Nstatischen Seiten aus?
Dialogue: 0,0:48:50.53,0:48:54.10,Default,,0000,0000,0000,,Avocadoom: Da ändert sich eigentlich\Nnichts, also es ändert sich ja quasi nur
Dialogue: 0,0:48:54.10,0:48:59.68,Default,,0000,0000,0000,,was wie die Seite ausliefert. Aber wie die\NSeite dargestellt wird, ist quasi ja für
Dialogue: 0,0:48:59.68,0:49:05.33,Default,,0000,0000,0000,,euer Smartphone das gleiche. Das heißt\Nnur, wie die Seite quasi vorher
Dialogue: 0,0:49:05.33,0:49:09.53,Default,,0000,0000,0000,,zusammengebaut wird und so, das ist quasi\Ndas wichtige, was sich ändert. Aber wie
Dialogue: 0,0:49:09.53,0:49:13.05,Default,,0000,0000,0000,,die Seite dann dargestellt wird also mit\NJavaScript und CSS und so. Das bleibt ja
Dialogue: 0,0:49:13.05,0:49:18.12,Default,,0000,0000,0000,,das gleiche. Wenn ihr jetzt noch ein\NContent Management System habt, wo ihr so
Dialogue: 0,0:49:18.12,0:49:21.97,Default,,0000,0000,0000,,eine spezielle mobile Seite habt, was man\Nin der Regel heute nicht mehr haben
Dialogue: 0,0:49:21.97,0:49:25.91,Default,,0000,0000,0000,,sollte, weil man das inzwischen gut mit\NCSS und Co lösen kann, dann habt ihr
Dialogue: 0,0:49:25.91,0:49:29.13,Default,,0000,0000,0000,,vielleicht ein Problem, dass ihr zwei\NSeiten bauen müsst, aber ansonsten ist
Dialogue: 0,0:49:29.13,0:49:34.66,Default,,0000,0000,0000,,eigentlich die Kompatibilität mit\NSmartphones ziemlich super und die meisten
Dialogue: 0,0:49:34.66,0:49:38.66,Default,,0000,0000,0000,,Smartphones können auch, also da können\Ndie eigentlich alle auch JavaScript
Dialogue: 0,0:49:38.66,0:49:41.94,Default,,0000,0000,0000,,vollständig ausführen, die haben ja mit\NSafari oder Chrome oder was auch immer
Dialogue: 0,0:49:41.94,0:49:46.72,Default,,0000,0000,0000,,eine vollständige JavaScript-Engine mit\Ndrinnen, also die Kompatibilität ist
Dialogue: 0,0:49:46.72,0:49:49.88,Default,,0000,0000,0000,,eigentlich komplett gegeben und viele\NNewsportale und so arbeiten ja schon mit
Dialogue: 0,0:49:49.88,0:49:54.51,Default,,0000,0000,0000,,diesen Techniken, das heißt dass ist\Neigentlich auch schon etabliert und
Dialogue: 0,0:49:54.51,0:50:00.28,Default,,0000,0000,0000,,getestet, dass das läuft.\NHerald: Noch eine Frage, so einem Chat wie
Dialogue: 0,0:50:00.28,0:50:05.04,Default,,0000,0000,0000,,der IRC. Wäre es da eine gute Idee, eine\Nstatische Seite daraus zu machen, wenn der
Dialogue: 0,0:50:05.04,0:50:09.04,Default,,0000,0000,0000,,Chat dass einzige ist, was man machen\Nwill? Weil so wie ich das verstehe, wäre
Dialogue: 0,0:50:09.04,0:50:12.54,Default,,0000,0000,0000,,es dafür ja eher mehr Last für den Server,\Noder?
Dialogue: 0,0:50:12.54,0:50:17.28,Default,,0000,0000,0000,,Avocadoom: Ja, das ist wie gesagt das\Ngleiche Beispiel mit der Kommentarspalte.
Dialogue: 0,0:50:17.28,0:50:20.20,Default,,0000,0000,0000,,Wenn ihr dynamischen Inhalte wie ein Chat\Nhabt, dann wollte ihr die nicht immer
Dialogue: 0,0:50:20.20,0:50:25.72,Default,,0000,0000,0000,,statisch rendern, weil die ändern sich ja\Nständig. Also das sind ja Inhalte, die
Dialogue: 0,0:50:25.72,0:50:29.50,Default,,0000,0000,0000,,immer immer wieder sozusagen entsprechend\Nsich ändern. Das heißt, was ihr da machen
Dialogue: 0,0:50:29.50,0:50:34.48,Default,,0000,0000,0000,,könnt, wäre zum Beispiel ihr baut so eine\NFrontend Anwendung und macht es nur mit
Dialogue: 0,0:50:34.48,0:50:37.30,Default,,0000,0000,0000,,JavaScript und zieht euch das darüber.\NAber das ist nicht das, was ich unter
Dialogue: 0,0:50:37.30,0:50:40.74,Default,,0000,0000,0000,,einer statischen Seite sozusagen verstehe,\Nweil eine statische Seite ist für mich
Dialogue: 0,0:50:40.74,0:50:44.83,Default,,0000,0000,0000,,was, wo der Inhalt quasi schon generiert\Nist und in HTML vorliegt, wenn ihr die
Dialogue: 0,0:50:44.83,0:50:48.45,Default,,0000,0000,0000,,Seite aufruft. Also da gibt es eigentlich\Nnur die zwei Wege: Entweder man macht das
Dialogue: 0,0:50:48.45,0:50:52.72,Default,,0000,0000,0000,,komplett über eine Backend Anwendung oder\Nman macht es komplett im Frontend, aber
Dialogue: 0,0:50:52.72,0:50:57.66,Default,,0000,0000,0000,,man kann halt sozusagen also das halt\Nvorher auszuliefern in gegossenes HTML,
Dialogue: 0,0:50:57.66,0:51:02.11,Default,,0000,0000,0000,,was sozusagen Accessibility Tools oder\Neine Suchmaschine lesen können, dass ist
Dialogue: 0,0:51:02.11,0:51:05.76,Default,,0000,0000,0000,,eigentlich eher unvorteilhaft, weil dann\Nmüsste man alle paar Sekunden die Seite
Dialogue: 0,0:51:05.76,0:51:10.44,Default,,0000,0000,0000,,neu rendern und das ist ja viel zu viel\NLast.
Dialogue: 0,0:51:10.44,0:51:15.49,Default,,0000,0000,0000,,Herald: Ja, braucht man dann für eine\Nstatische Seite mehr Leistung beim Client?
Dialogue: 0,0:51:15.49,0:51:20.79,Default,,0000,0000,0000,,Avocadoom: Nein, in der Regel eigentlich\Nnicht. Also viele Seiten setzen
Dialogue: 0,0:51:20.79,0:51:23.96,Default,,0000,0000,0000,,heutzutage, also das Einzige was halt viel\NLeistung braucht ist JavaScript. Aber
Dialogue: 0,0:51:23.96,0:51:29.99,Default,,0000,0000,0000,,viele Seiten setzen ja heutzutage schon\Nauf JavaScript, auch wenn sie vom
Dialogue: 0,0:51:29.99,0:51:33.14,Default,,0000,0000,0000,,Conten tManagement System kommen. Und das\NJavaScript, was zum Beispiel verwendet
Dialogue: 0,0:51:33.14,0:51:37.85,Default,,0000,0000,0000,,wird, um Hydration zu betreiben, ist nicht\Nunbedingt etwas, was die Leistung zieht.
Dialogue: 0,0:51:37.85,0:51:41.93,Default,,0000,0000,0000,,Also der Leistungsunterschiede ist\Neigentlich quasi gleich Null. Und wenn du
Dialogue: 0,0:51:41.93,0:51:44.61,Default,,0000,0000,0000,,zum Beispiel komplett auf JavaScript\Nverzichtet, dann habt ihr sogar noch einen
Dialogue: 0,0:51:44.61,0:51:49.33,Default,,0000,0000,0000,,Leistungsboost eigentlich in der Regel.\NAußer ihr schreibt jetzt komplett
Dialogue: 0,0:51:49.33,0:51:52.00,Default,,0000,0000,0000,,verrücktes CSS, aber das ist dann auch\Nwieder eine Sache die euch auch mit
Dialogue: 0,0:51:52.00,0:51:54.37,Default,,0000,0000,0000,,Content Management Systemen passieren\Nkann. Also eigentlich ist der
Dialogue: 0,0:51:54.37,0:51:59.75,Default,,0000,0000,0000,,Leistungsunterschiede der gleiche bzw.\Nvielleicht habt ihr sogar mehr Leistung
Dialogue: 0,0:51:59.75,0:52:04.03,Default,,0000,0000,0000,,wenn in eine statische Seite baut. Je\Nnachdem wie viel JavaScript ihr sozusagen
Dialogue: 0,0:52:04.03,0:52:08.01,Default,,0000,0000,0000,,in eure Seite einfügt. Wenn ihr da jetzt\Nnatürlich das große 3D Rendering, ich zieh
Dialogue: 0,0:52:08.01,0:52:11.05,Default,,0000,0000,0000,,mir ständig Content rein JavaScript baut,\Ndann hat sie natürlich mehr
Dialogue: 0,0:52:11.05,0:52:13.76,Default,,0000,0000,0000,,Leistungsverbrauch, aber das ist nicht\Nzwingend ein Problem einer statischen
Dialogue: 0,0:52:13.76,0:52:17.30,Default,,0000,0000,0000,,Seite.\NHerald: Du hast ja zum Ende von deinem
Dialogue: 0,0:52:17.30,0:52:20.94,Default,,0000,0000,0000,,Vortrag noch Barrierefreiheit\Nangesprochen. Muss man da auf irgendwas
Dialogue: 0,0:52:20.94,0:52:25.97,Default,,0000,0000,0000,,achten, dass es dann für Screenreader und\Nso gut lesbar ist?
Dialogue: 0,0:52:25.97,0:52:30.41,Default,,0000,0000,0000,,Avocadoom: Also was ich mir dabei gedacht\Nhabe, ist im Prinzip, dass so ein
Dialogue: 0,0:52:30.41,0:52:34.44,Default,,0000,0000,0000,,Screenreader natürlich einfach glaube ich\Nbesser damit klarkommt, wenn er schon
Dialogue: 0,0:52:34.44,0:52:40.08,Default,,0000,0000,0000,,vorher das ganze HTML vorliegen hat. Was\Nich halt prinzipiell beachten würde, das
Dialogue: 0,0:52:40.08,0:52:45.23,Default,,0000,0000,0000,,einfach die generellen Accessability-\NGuidelines zu beachten sind, von der W3C
Dialogue: 0,0:52:45.23,0:52:49.03,Default,,0000,0000,0000,,und ähnlichen, das ist sowieso immer klar.\NDas sollte man auch generell, wenn man
Dialogue: 0,0:52:49.03,0:52:53.03,Default,,0000,0000,0000,,eine Seite mit was auch immer baut machen.\NAber was ich sehr gut finde ist halt, dass
Dialogue: 0,0:52:53.03,0:52:57.07,Default,,0000,0000,0000,,wenn man zum Beispiel jetzt kein\NJavaScript enabed hat, weil man damit
Dialogue: 0,0:52:57.07,0:53:02.63,Default,,0000,0000,0000,,vielleicht nicht klarkommt, wenn man\NAccessability Tools hat und nur die Seite
Dialogue: 0,0:53:02.63,0:53:05.87,Default,,0000,0000,0000,,statisch rausgerendert sehen möchte, ohne\Nirgendwelche Hydration oder ähnliches,
Dialogue: 0,0:53:05.87,0:53:10.77,Default,,0000,0000,0000,,dann kann man halt mit den Accessability\NTools quasi relativ easy darüber gehen.
Dialogue: 0,0:53:10.77,0:53:13.36,Default,,0000,0000,0000,,Und beachten muss man dabei eigentlich\Nnichts Spezielles. Ich sehe es einfach nur
Dialogue: 0,0:53:13.36,0:53:20.17,Default,,0000,0000,0000,,als Vorteil, wenn das HTML quasi direkt\Nvorliegt und so ein Tool sich nicht darum
Dialogue: 0,0:53:20.17,0:53:23.61,Default,,0000,0000,0000,,kümmern muss, dass irgendwo noch was\Ndynamisch hinzugefügt wird, sondern
Dialogue: 0,0:53:23.61,0:53:26.90,Default,,0000,0000,0000,,Screenreader direkt anfangen kann, das\Neinmal von oben nach unten abzuarbeiten.
Dialogue: 0,0:53:26.90,0:53:29.92,Default,,0000,0000,0000,,Also beachten muss man dabei nichts. Ich\Nhabe das mehr erwähnt, weil ich das
Dialogue: 0,0:53:29.92,0:53:35.45,Default,,0000,0000,0000,,einfach sehr sinnvoll finde, dass man\Ndamit mehr Leute sozusagen auch targeten
Dialogue: 0,0:53:35.45,0:53:40.26,Default,,0000,0000,0000,,kann und dass man dafür sorgen kann, dass\Nman nicht darauf achten muss, dass die
Dialogue: 0,0:53:40.26,0:53:44.28,Default,,0000,0000,0000,,jetzt vielleicht irgendein Tool verwenden,\Nwas mit ich "füge hier mal mit Dynamik
Dialogue: 0,0:53:44.28,0:53:47.42,Default,,0000,0000,0000,,ganz viel Spaß hinzu" irgendwie nicht klar\Nkommen kann.
Dialogue: 0,0:53:47.42,0:53:52.37,Default,,0000,0000,0000,,Herald: Ah ja, cool. Welches Backend\Nwürdest du für Nutzer empfehlen, die kein
Dialogue: 0,0:53:52.37,0:53:57.49,Default,,0000,0000,0000,,Markdown schreiben wollen?\NAvocadoom: Hmmm, das kommt drauf an, was
Dialogue: 0,0:53:57.49,0:54:05.28,Default,,0000,0000,0000,,man machen will. Wenn man einen Blog hat\Nwürde ich tatsächlich entweder auf ein
Dialogue: 0,0:54:05.28,0:54:11.81,Default,,0000,0000,0000,,Blog Service setzen, also so was wie\NMedium oderso und mich da an der an die
Dialogue: 0,0:54:11.81,0:54:18.27,Default,,0000,0000,0000,,API anschließen, weil das einfach relativ\Ngute editing experience bietet oder auch
Dialogue: 0,0:54:18.27,0:54:21.41,Default,,0000,0000,0000,,an anderen Hosting Service oder z.B. auch\Neinfach ein klassisches Content Management
Dialogue: 0,0:54:21.41,0:54:25.83,Default,,0000,0000,0000,,System wie WordPress oder ähnliches\Nverwenden. Es gibt tatsächlich auch so
Dialogue: 0,0:54:25.83,0:54:31.01,Default,,0000,0000,0000,,Frontends für einige Static Site\NGenerators, die euch das sozusagen
Dialogue: 0,0:54:31.01,0:54:36.92,Default,,0000,0000,0000,,ermöglichen, dass man dann so einen Editor\Ndavor hat, der dann Markdown am Ende
Dialogue: 0,0:54:36.92,0:54:40.77,Default,,0000,0000,0000,,hinten raus rendert, aber die haben\Nmeistens den Nachteil, dass die oft auf
Dialogue: 0,0:54:40.77,0:54:44.82,Default,,0000,0000,0000,,dem Client laufen und dann bei euch\Nlaufen, auf dem Desktop quasi, und dass
Dialogue: 0,0:54:44.82,0:54:47.77,Default,,0000,0000,0000,,man dann trotzdem sich immer noch darum\Nkümmern muss, dass das dann irgendwo in
Dialogue: 0,0:54:47.77,0:54:52.85,Default,,0000,0000,0000,,git gepusht wird und ähnliches und dann\Nirgendwo hoch kommt. Und daher würde ich
Dialogue: 0,0:54:52.85,0:54:58.65,Default,,0000,0000,0000,,eher sagen Notfalls, wenn man zum Beispiel\Nmit Wordpress schon mal gearbeitet hat
Dialogue: 0,0:54:58.65,0:55:03.17,Default,,0000,0000,0000,,oder mit einem ähnlichen System gucken ob\Ndas erst mal eine Rest-API anbietet und
Dialogue: 0,0:55:03.17,0:55:09.57,Default,,0000,0000,0000,,sich darüber versuchen mit dem Static Site\NGenerator zu verständigen.
Dialogue: 0,0:55:09.57,0:55:16.26,Default,,0000,0000,0000,,Herald: Es kommt noch viel: "Danke für\Ndeinen coolen Talk" rein.
Dialogue: 0,0:55:16.26,0:55:20.20,Default,,0000,0000,0000,,Avocadoom: Gerne. Ich hoffe euch hat es\NSpaß gemacht.
Dialogue: 0,0:55:20.20,0:55:26.19,Default,,0000,0000,0000,,Herald: Genau. Vielleicht noch eine letzte\NVerständnisfrage. Der Nutzer fragt / oder
Dialogue: 0,0:55:26.19,0:55:31.43,Default,,0000,0000,0000,,die Nutzerin: Ich verstehe jetzt noch\Nnicht zu 100 Prozent was genau man mit
Dialogue: 0,0:55:31.43,0:55:35.42,Default,,0000,0000,0000,,statischen Sites verhindern will? Ist es,\Ndass der Client nicht direkt mit dem
Dialogue: 0,0:55:35.42,0:55:39.96,Default,,0000,0000,0000,,Server interagiert oder dass es keine User\NEingaben gibt, die an einen Server
Dialogue: 0,0:55:39.96,0:55:44.72,Default,,0000,0000,0000,,weitergegeben werden?\NAvocadoom: Beides will man nicht unbedingt
Dialogue: 0,0:55:44.72,0:55:49.82,Default,,0000,0000,0000,,verhindern. Was man vor allem verhindern\Nwill ist, dass man sich, dass man zum
Dialogue: 0,0:55:49.82,0:55:54.40,Default,,0000,0000,0000,,Beispiel ein System auf dem Server liegen\Nhat, wie zum Beispiel ein, also wenn ihr
Dialogue: 0,0:55:54.40,0:55:57.03,Default,,0000,0000,0000,,ein klassisches Content Management System\Nhabt, ich erkläre es mal so, so ein
Dialogue: 0,0:55:57.03,0:56:01.44,Default,,0000,0000,0000,,WordPress oder so, oder ein Joomla oder\Nein Drupal oder was auch immer dann
Dialogue: 0,0:56:01.44,0:56:06.68,Default,,0000,0000,0000,,generiert euch das beim Aufruf der Seite\Ndas HTML, was dann an den Client
Dialogue: 0,0:56:06.68,0:56:12.30,Default,,0000,0000,0000,,ausgeliefert wird. Dass heißt das System,\Nwenn so ein Client das aufruft, dann
Dialogue: 0,0:56:12.30,0:56:15.88,Default,,0000,0000,0000,,interagiert das System damit. Oder habt\Nihr zum Beispiel eine Suche drin und so
Dialogue: 0,0:56:15.88,0:56:19.06,Default,,0000,0000,0000,,eine Suche die sucht natürlich in der\NDatenbank. Das heißt, wenn ihr diese Suche
Dialogue: 0,0:56:19.06,0:56:22.98,Default,,0000,0000,0000,,entsprechend manipulieren würdet und es\Nwäre jetzt bekannt, dass in eurem Content
Dialogue: 0,0:56:22.98,0:56:27.56,Default,,0000,0000,0000,,Management System eine SQL-Injection\Nmöglich wäre, dann können Sie so rüber ins
Dialogue: 0,0:56:27.56,0:56:31.12,Default,,0000,0000,0000,,System kommen. Das heißt, wenn das System\Nnicht vernünftig wartet und ihr dieses
Dialogue: 0,0:56:31.12,0:56:36.39,Default,,0000,0000,0000,,SQL-Injection Problem Update nicht\Ninstalliert, dann ist diese Lücke
Dialogue: 0,0:56:36.39,0:56:40.82,Default,,0000,0000,0000,,sozusagen da, dann stehen da sozusagen die\NTore offen. Das heißt, das ist zum
Dialogue: 0,0:56:40.82,0:56:44.74,Default,,0000,0000,0000,,Beispiel der Punkt, dass ihr da sagen\Nkönnt diese statische Seite bietet einfach
Dialogue: 0,0:56:44.74,0:56:49.80,Default,,0000,0000,0000,,kein direktes Einfallstor in euer System,\Nweil sie quasi keine direkte Interaktion
Dialogue: 0,0:56:49.80,0:56:54.15,Default,,0000,0000,0000,,mit dem Backend ermöglicht. Das bietet\Nhalt auch den zweiten Vorteil, dass ihr
Dialogue: 0,0:56:54.15,0:56:59.02,Default,,0000,0000,0000,,Performance habt, weil ihr quasi nicht bei\Njedem Aufruf anfangt, die Seite neu zu
Dialogue: 0,0:56:59.02,0:57:04.23,Default,,0000,0000,0000,,generieren, sondern ihr habt einfach die\Nfertig generierte Seite und liefert sie
Dialogue: 0,0:57:04.23,0:57:08.07,Default,,0000,0000,0000,,nur noch an das Endgerät aus. Das heißt\Nihr interagiert immer noch mit einer Art
Dialogue: 0,0:57:08.07,0:57:10.72,Default,,0000,0000,0000,,Server, aber ihr interagiert nicht mit dem\NContent Management System und habt nicht
Dialogue: 0,0:57:10.72,0:57:14.83,Default,,0000,0000,0000,,die Möglichkeit, dass sie zum Beispiel in\Neurer Datenbank einfallen. Und das sind
Dialogue: 0,0:57:14.83,0:57:17.92,Default,,0000,0000,0000,,eigentlich die zwei hauptsächlichen\NGründe, weswegen man Static Site
Dialogue: 0,0:57:17.92,0:57:21.76,Default,,0000,0000,0000,,Generation vorziehen möchte. Außerdem hat\Nes halt den großen Vorteil, dass dadurch,
Dialogue: 0,0:57:21.76,0:57:33.44,Default,,0000,0000,0000,,dass alles vorgerendert ist, dass diese\Nentsprechende Last, also diese
Dialogue: 0,0:57:33.44,0:57:39.10,Default,,0000,0000,0000,,Performance, ich habe es ja schon erwähnt,\Ndass quasi einfach das passiert, ihr
Dialogue: 0,0:57:39.10,0:57:42.02,Default,,0000,0000,0000,,schiebt die Seite einfach einmal hoch und\Ndann ist sie da und dann wird sie
Dialogue: 0,0:57:42.02,0:57:45.13,Default,,0000,0000,0000,,abgerufen und ihr müsst nicht gucken, dass\Nirgendwo was kaputt gehen kann.
Dialogue: 0,0:57:45.13,0:57:51.01,Default,,0000,0000,0000,,Herald: Ja, danke für das Beantworten der\NFragen und auch für diesen super coolen
Dialogue: 0,0:57:51.01,0:57:53.63,Default,,0000,0000,0000,,Vortrag hier bei Chaos West.
Dialogue: 0,0:57:53.63,0:57:58.32,Default,,0000,0000,0000,,{\i1}rc3-nowhere Abspannmusik{\i0}
Dialogue: 0,0:57:58.32,0:58:17.00,Default,,0000,0000,0000,,Untertitel erstellt von c3subtitles.de\Nim Jahr 2021. Mach mit und hilf uns!