In etwa 10 Minuten richten wir einen Workflow ein, der statische Seiten extrem einfach macht.
Du erhältst Folgendes
- Kostenloses HTTPS
- Kostenloses oder günstiges Hosting
- Seiten schnell erstellen
- Mit Live-Reload bearbeiten
- Bearbeiten, wenn du in 6 Monaten alles vergessen hast
Start: Anmeldungen
All dies erreichen wir durch die Nutzung von Netlify (wirklich einfaches statisches Hosting) zusammen mit AnyMod (Hunderte von Website-Abschnitten).
Bereitstellungspipeline einrichten
Wir erstellen eine einfache HTML-Datei, verfolgen sie mit GitHub und stellen sie dann automatisch mit Netlify bereit.
(Wenn du eine manuelle Einrichtung bevorzugst, kannst du diesen Schritt überspringen und stattdessen per Drag & Drop in den Netlify-Ordner auf Netlify bereitstellen.)
1. Lege ein leeres Repository in GitHub an.
Gehe zu https://github.com/new und nenne es netlify-anymod
2. Verbinde Netlify mit deinem Repository.
Dies tust du über den Netlify Startbildschirm.
3. Erstelle einen Ordner auf deinem Computer und füge eine Datei namens index.html hinzu.
Du kannst dies in deinem Terminal ausführen, um dies zu tun
mkdir netlify-anymod
cd netlify-anymod
touch index.htmlBearbeite nun die Datei index.html, um eine einfache HTML-Struktur hinzuzufügen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Netlify & AnyMod | CSS Tricks</title>
</head>
<body>
Hello, World!
</body>
</html>4. Verfolge es mit Git und stelle es in GitHub bereit
git init
git remote add origin https://github.com/tyrw/netlify-anymod.git
git add -A
git commit -m "Initial commit"
git push --set-upstream origin masterHinweis: Verwende deine eigene Repository-URL für git remote add origin.
Überprüfe deine Netlify-URL nach etwa einer Minute, und deine Seite sollte live sein!
Abschnitts-„Mods“ hinzufügen
Jetzt, da wir unsere Bereitstellung eingerichtet haben, können wir die Seite selbst erstellen. Wir tun dies mit gebrauchsfertigen Modulen („Mods“) auf AnyMod.
Es gibt eine große Auswahl, aber wir werden Mods aus dem Editorial Theme verwenden
Navigation
Intro / Hero-Einheit
Formular
Bildergalerie
Mods klonen und hinzufügen
Füge diese Mods hinzu, indem du für jeden „Klonen“ klickst, dann nach unten scrollst und den Installationscode in die Datei index.html kopierst und einfügst. Kopiere und füge auch dein Projekt-Skript ganz oben ein.
Deine index.html sollte nun ungefähr so aussehen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Netlify & AnyMod | CSS Tricks</title>
<!-- AnyMod -->
<script id="AnyMod-script">
(function (m,o,d,u,l,a,r,i,z,e) {
u[m]={Project:o,rq:[],Opts:r,ready:function(j){u[m].rq.push(j)}};function j(s){return encodeURIComponent(btoa(s))};z=l.getElementById(m+'-'+a);r=u.location;
e=[d+'/page/'+o+'/'+j(r.pathname)+'/'+j(r.host)+'?t='+Date.now(),d];e.map(function(w){i=l.createElement(a);i.defer=1;i.src=w;z.parentNode.insertBefore(i,z);});
})('AnyMod','82PEPN','https://cdn.anymod.com/v2',window,document,'script',{ toolkit: true, tips: true, priority: 3 });
</script>
<!-- /AnyMod -->
</head>
<body>
<!-- Professional side nav -->
<div id="anymod-mlrnbm"></div>
<!-- Intro section -->
<div id="anymod-ormard"></div>
<!-- Contact form -->
<div id="anymod-ralmam"></div>
<!-- Card section -->
<div id="anymod-balmaa"></div>
</body>
</html>Und die Seite ist fertig.
Speichere nun und pushe nach GitHub, um die Seite bereitzustellen
git add -A
git commit -m "Added mods"
git push originWarte eine Minute, und deine Seite sollte bereit sein. Hier ist die Demo-Seite.
Inhalt bearbeiten
Jetzt kannst du den Inhalt und den Code für jeden Mod live bearbeiten. Wenn du deine eigene Seite ansiehst (während du auch bei AnyMod angemeldet bist), siehst du rechts einen Stift.
Klicke auf den Stift und wähle einen Mod aus. Versuche nun, einige Änderungen am Inhalt (oder Code) vorzunehmen, und beachte, dass sie sich auf der Seite automatisch und in Echtzeit aktualisieren.
Du kannst diese Methode nutzen, um jetzt oder in 6 Monaten, wenn du vergessen hast, wie das Projekt eingerichtet ist, Änderungen vorzunehmen.
Formular
Das Formular funktioniert ebenfalls automatisch. Versuche, eine Nachricht auf deiner eigenen Seite zu senden. Die Antwort wird dir sofort per E-Mail zugesendet.
Fazit
Du hast jetzt eine großartige Möglichkeit, schnelle, zuverlässige und sichere statische Seiten zu erstellen.
Denk daran: Mit großer Macht kommt große Verantwortung.
Einige Fragen bleiben unbeantwortet: Funktioniert es ohne JavaScript? Hat man Kontrolle über den Code? Wird es von Google gut indexiert? Dinge, die ich gerne wissen würde!
Es erfordert JavaScript, du hast 100% Kontrolle über den Code, und Google indexiert es!