Eigene Website dynamisch erstellen // Astro Tutorial Deutsch

Die eigene Website erstellen dynamisch mit Astro. In diesem Astro Tutorial zeige ich dir wie du eine statische Website dynamisch erzeugen und veröffentlichen kannst. Dies ist eine MPA (Multi Page Application). Dabei zerlegen wir den Code in einzelne Templates und Komponenten, nutzen serverseitiges JavaScript und zeige dir worauf sonst noch zu achten ist. Happy Coding!

⏩ Videoinhalt
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
00:00 Einleitung
01:22 Astro Website
03:55 Installation
05:58 Neues Projekt erstellen
09:38 Struktur und Aufbau
16:34 Eigene Website zerlegen
22:58 Layout verwenden
25:39 Website lokal anschauen
26:49 Globales CSS einbinden
29:17 Komponenten erstellen
33:18 JavaScript Serverseitig
36:00 CSS für Komponenten
39:10 Alle Pages erstellen
45:42 CSS verteilen/optimieren
48:08 Content via JSON
1:01:47 restliches JS verteilen
1:06:00 Build erstellen und veröffentlichen

⭐ Das könnte dich auch interessieren
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Von der Website zur App:

Nützliche Frameworks, Libraries und Tools:

JavaScript Tutorials für Anfänger:

📌 Über diesen Kanal und mich
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Webentwicklung effizient und einfach. Alles rundum Webentwicklung, Webdesign und angrenzende Themen. Mein Name ist Mario und ich bin bereits seit vielen Jahren beruflich als Web Entwickler tätig. Einige Tutorials auf diesem Kanal sind für absolute Anfänger ohne Vorkenntnisse geeignet, und andere für erfahrene Entwickler.

Starte Jetzt!

#Astro #Website #ProgrammierenM

[andreaskruger]

Hallo Mario, es war wieder ein Traum! Mein Wochenende ist gerettet!

[codingcrashkurse]

Wow, da hast du dir wiede recht viel Mühe gegeben. Spitze <3

[MrPietsch]

Wieder ein tolles und sehr informatives Video! 👍

[birdy]

Tolles Video wieder mal. Schönes Wochenende Dir.

[gerselent]

Ich hab von Astro vorher noch nie was gehört, möchte echt wissen woher du immer diese neuen Sachen herholst. Bin selbst einer, der sehr gerne neue Sachen ausprobiert, egal welche Sprache es geschrieben ist ;D Aber Astro scheint ja echt super Framework zu sein, erinnert mich ein ganz wenig an Hugo, was ja so ähnlich funktioniert. Okkkk ncht ganz so, aber so in etwa ;D
Wieder aber ein super Video, versüsst mich grade den Samstag Abend *gg Mach weiter so, hoffe echt das du mal einen Stream machst, würde mich echt drüber freuen und denke andere würden da sich bestimmt auch sehr drüber freuen ;D

Kleiner Nachtrag: Die Doku gibt es auch auf Deutsch ;D

[ralfhein]

Schönes Video zu dynamische Seiten, dass ist eine schöne client Variante zu dem Thema nicht Server seitig kompilieren. Ähnlich fasst wie Svelte Framework. Das ist gerade der neue Scheiß und man kann es Server und client seitig setzen kann.
Mach weiter so

[triantafyllosmylonas]

Hallo Mario! Danke für das Video, es war super 👍

[amperusvonstromus]

Hallo Mario,
wie immer alles gut erklärt.
Frage: wird das ganze auch bei jedem Webhoster
funktionieren oder nur unter bestimmten Bedingungen
z.B. php oder

[badmax]

Servus Mario,
Astro macht das Routing ja automatisch. Jetzt wollte ich einen alten Blog umbauen und wegen SEO, sollten die Seiten aber auf html bleiben.
Weisst du ob ich Astro das beibringen kann .html anstatt die Ordnerstruktur zu nutzen?

[yt]

Danke für das Video. Ganz ehrlich - Ich kannte Astro vorher nicht, da ich nicht so FE zentriert arbeite. Das scheint ja eher eine Next.js / Nuxt.js Alternative zu sein. Falls ich mal die Zeit habe mich mit solchen "Geschichten" zu beschäftigen werde ich es mal probieren.
Schönes WE!

[rudiziebart]

Hallo Mario, habe den dist Ordner auf meinen Server geladen. Wie muss ich jetzt die index.html datei ansteuern. Wenn ich sie über den dist Ornder ansteuere kommt immer kommt immer die Startseite ohne css Formatierung. Muss ich die index.html Datei außerhalb des dist Ornders legen. Jedenfalls funktioniert das ganze bis jetzt nicht auf meinem Provider. Können sie mir bitte helfen wie man das richtig macht?

[tomscall]

Zählt eigentlich Angular JS auch zu diesem Thema?!

[igorbonicib]

Hallo. Mario. ich. mach. gerade einen full stack web developer kurs und hab davor noch. nie was mit programmieren zu tun gehabt. Ich. hab jetz html. css and bootstrap hinter mir. jetz sind wir bei java script ich. hab so meine schwierigkeiten mit den funktionen hast du da ein par tipps oder video ??? lg

[sanskriep]

Hallo Mario, Wow, Vielen Dank für das Super Tolle und verständliche Video 👍😀
Astro und Tailwind funktionieren ja wohl auch zusammen.
Kannst Du dazu mal ein Tutorial machen das zeigt wie Tailwind in Astro integriert wird ?
Ich wünsche Dir einen schönen Sonntag 👋

[Baltarsar]

Also ich breche jetzt mal nach 15 Minuten ab, denn alles was ich bis jetzt gehört habe, lässt sich einfacher und schneller mit einfachsten php lösen ohne sich eine riesige json oder astro struktur aufbauen zu müssen. Ich meine, ich verstehe, dass es sich Entwickler sehr gerne kompliziert machen wollen, irgendwie will man noch Herausforderungen haben, ich gehöre eher zu denjenigen, die zur Effektivität neigen. In den 15 Minuten hätte ich längst die html Struktur in absolut einfachste php Struktur umgewandelt, z.B. Header, Footer und Navigation in extra php Dateien ausgelagert und würde dieser in die einzelnen html Seiten, die einfach die Endung php bekommen, importieren und fertig. Funktioniert einwandfrei OHNE Installation von irgendwas, OHNE extra JSON oder zusätzliches Javascript zu benötigen und OHNE irgendwelchen überflüssigen Kram. Im Kern funktioniert das Ganze dann auch dynamisch und schnell.