Statische Webseiten sind einfach zu erstellen und rasend schnell zu bedienen. Wenn Sie lernen, Hugo, Sie können generieren, Thema-basierte statische Webseiten auf Linux. Das erstellen von Webseiten macht wieder Spaß!
Der Hugo-Website Generator
Eine statische Website ist eine, die nicht erstellen oder ändern von web-Seiten on the fly. Es gibt keine hintergrund-Datenbank, e-commerce-processing und PHP. Alle Webseiten sind komplett vormontiert und kann serviert werden, bis zu den Besuchern sehr schnell.
Aber das bedeutet nicht, eine statische Website hat, langweilig zu sein. Sie können alles benutzen, was HTML bietet, plus cascading style sheets (CSS) und JavaScript. Sie können auch ganz einfach Dinge wie Bild Karussells und web-Seiten rutschen über hintergrund-Bilder.
Der Hugo-Seite-generator arbeitet mit einem template und alle Inhalte, die Sie erstellt haben, zu generieren, eine fertig-website. Sie können dann legen Sie Sie auf einer hosting-Plattform, und sofort haben Sie eine live-website.
Hugo nutzt markdown für die Seiten und blog-Einträge, die Sie erstellen. Markdown ist nur über die einfachste markup language es ist, das macht die Pflege Ihrer Website einfach.
Hugo ‘s Konfigurationsdateien sind in Tom’ s Hand, Minimale Sprache (TOML) und YAML Ain ‘ T Markup Language (YAML), die sind so einfach. Ein weiterer bonus ist Hugo ist rasend schnell—einige Webseiten laden in weniger als einer Sekunde. Es hat viele Vorlagen, die Sie wählen können, und mehr werden ständig Hinzugefügt, so ist es einfach, um loszulegen. Wählen Sie einfach eine Vorlage und fügen Sie einige Inhalte, die es macht, verkaufen.
Hugo fungiert auch als eine kleine web-server direkt auf Ihren computer. Sie können sehen, eine live-version Ihrer website, während Sie entwerfen und erstellen Sie es, und wenn Sie hinzufügen einen neuen post. Auch auto-updates jedes mal, wenn Sie “Speichern” im editor, so können Sie sofort sehen, die Wirkung der änderungen in Ihrem browser.
Hosting Ihrer Website
Wenn es um das hosting Ihrer statischen website, haben Sie die Qual der Wahl. Die meisten Unternehmen bieten Kostenlose hosting für den persönlichen oder open-source verwenden. Natürlich können Sie auch wählen, eine normale web-hosting-Unternehmen, wie die folgenden:
- Kunstflug
- Amazon S3
- Azure
- CloudFront
- DreamHost
- FB
- GitHub Pages
- GoDaddy
- Google Cloud-Speicher
- Heroku
- GitLab Seiten
- Netlify
- Rackspace
- Überspannungsschutz
RELATED: Wie Host eine Statische Website für Kostenlose Google-FB-Hosting-Plattform
Installieren Von Hugo
Zusammen mit Hugo, müssen Sie Git installiert. Git bereits installiert wurde auf Fedora 32 und Manjaro 20.0.1. Auf Ubuntu 20.04 (Focal Fossa) es wurde automatisch Hinzugefügt, wie eine abhängige von Hugo.
Installieren Hugo auf Ubuntu, verwenden Sie diesen Befehl:
sudo apt-get install hugo
Auf Fedora, die Sie brauchen zu geben:
sudo dnf installieren hugo
Der Befehl für Manjaro ist:
sudo pacman -Syu hugo
Erstellen einer Website mit Hugo
Wenn wir Fragen, Hugo, eine neue Website, erstellt es eine Reihe von Verzeichnissen für uns. Diese halten die verschiedenen Elemente unserer website. Dies ist nicht die endgültige website, die hochgeladen wird, um Ihre hosting-Plattform, jedoch. Diese Verzeichnisse halten die Design -, Konfigurations-Dateien, Inhalte, Bilder und Hugo wird als Eingabe verwendet werden, wenn wir Sie Fragen zum erstellen der eigentlichen website.
Es ist wie der Unterschied zwischen Quellcode und eine kompilierte Programm. Der Quellcode ist das, was der compiler verwendet zum generieren der endgültigen Produkt. Ebenso Hugo nimmt den Inhalt dieser Verzeichnisse und erzeugt eine funktionierende website.
Der Befehl wir ausgeführt werden, erstellen Sie ein Verzeichnis mit dem gleichen Namen wie die Website, die Sie erstellen möchten. Das Verzeichnis wird in dem Verzeichnis erstellt, in dem Sie den Befehl ausführen.
Also, verschieben Sie das Verzeichnis, in dem Sie möchten, dass Ihre website erstellt werden. Wir sind mit unserem home-Verzeichnis, so geben wir die folgenden:
hugo neue Website geek-demo
Dies schafft eine “geek-demo” – Verzeichnis. Wir geben im folgenden wechseln Sie in das Verzeichnis und führen Sie ls:
cd-geek-demo/
ls
Wir sehen die “config.toml” Konfigurations-Datei und die Verzeichnisse, die erstellt wurden. Diese sind praktisch leer, obwohl, wie das ist nur das Gerüst für die Webseite.
Initialisieren von Git und das Hinzufügen von ein Thema
Wir brauchen Sie, um ein Thema so Hugo weiß, was wir wollen, dass die fertige Website Aussehen soll. Um dies zu tun, müssen wir initialisieren von Git. In den root-Ordner Ihrer Website (die, die enthält die “config.toml” – Datei), diesen Befehl ausführen:
git init
Es gibt Hunderte von Designs, die Sie wählen können, und jeder hat eine web-Seite, die es beschreibt. Sie können führen Sie eine demo von einem Thema und finden Sie heraus, was der Befehl ist, um es herunterzuladen. Wir verwenden eine namens Meghna.
Integrieren dieses Thema in unsere website, wir wechseln müssen, um unsere “Themen” – Ordner und führen Sie das git-clone-Kommando:
cd-Themen
git clone https://github.com/themefisher/meghna-hugo.git
Git zeigt einige Nachrichten, wie Sie fortschreitet. Wenn es fertig ist, wir verwenden Sie ls, um zu sehen, das Verzeichnis mit dem Thema:
ls
Hugo Themen sind ein funktionierendes Beispiel-website. Sie müssen die Kopie, die Standard-Website in die Verzeichnisse Ihrer website.
Zunächst zurück zum root-Verzeichnis Ihrer website. Wir sind-r (recursive) die cp-option, um die Unterverzeichnisse enthalten, und das -f (force) option, um alle vorhandenen Dateien überschrieben:
cd ..
cp themes/meghna-hugo/exampleSite/* -rf
Starten Sie Ihre Website Lokal
Wir haben genug getan, um der launch einer neuen website vor Ort. Es werde noch enthalten Platzhalter für Texte und Bilder, aber das sind nur kosmetische änderungen. Lassen Sie uns überprüfen Sie die technischen bits erst die Arbeit.
Sagen wir Hugo auf seinen web-server und verwenden Sie die -D (Entwurf) – option, um sicherzustellen, dass alle Dateien, die möglicherweise getaggt mit “Entwurf” sind auf der Webseite enthalten:
hugo-server -D
Das Bild unten zeigt das Ergebnis von unserem hugo-Befehl.
Wir sagten, dass Hugo baute den Standort in 142 Millisekunden (wir haben gesagt, es war schnell, nicht wahr?). Es sagt uns auch, drücken Sie Strg+C um den server zu stoppen, aber lassen Sie es laufen für jetzt.
Öffnen Sie Ihren browser und gehen Sie zu ” localhost:1313, um zu sehen, Ihre website.
Ändern der Standard-Website-Inhalte
Während es läuft, wie diese, Hugo dient die web-Seiten aus dem Speicher. Es ist noch nicht erstellt die website auf der Festplatte, sondern eine funktionierende Kopie im RAM. Es ist die überwachung der Dateien und Bilder auf der Festplatte, obwohl. Wenn einer von Ihnen verändert werden, es aktualisiert die Website in Ihrem browser—Sie haben nicht einmal Strg+F5.
Öffnen Sie ein weiteres terminal-Fenster und navigieren Sie zum root-Verzeichnis Ihrer website. Öffnen Sie die “config.toml” – Datei in einem editor. Änderung der “baseURL” an der Domäne, auf dem Ihre Webseite gehostet werden soll, und ändern Sie den “Titel” den Namen Ihrer website. Speichern Sie Ihre änderungen, aber verlassen Sie den editor öffnen.
Hugo erkennt, dass es änderungen an der “config.toml” – Datei, so liest er diese, erstellt die Website und aktualisiert den browser.
Sie sollten nun den von Ihnen ausgewählten Namen für Ihre Website in den browser-tab. Erste, sofortige visuelle Rückmeldung über gespeicherte änderungen erheblich beschleunigt den Prozess der Anpassung einer website.
Alle Themen sind unterschiedlich, aber wir fanden, dass diejenigen, die wir verwendet werden, um Recht einfach zu Folgen. Die verschiedenen Bereiche der website haben offensichtliche Namen, wie die Einstellungen in jedem Bereich, so ist es immer offensichtlich ist, was man ändern.
Und, wieder, sobald Sie eine änderung speichern, sehen Sie, was haben Sie verändert in Ihrem browser. Wenn Sie es nicht mögen, einfach die änderung rückgängig machen und erneut speichern.
Die verschiedenen Konfigurationsdateien, die Steuerung der website sind jedem, der sich in einer einzigen job und beschriftet in einer sinnvollen Art und Weise. Tracking Sie nieder ist das nicht schwer, da es nicht allzu viele Orte, die Sie können in dem Verzeichnis. In der Regel werden Sie in den “Data” Ordner.
Denn wir arbeiten mit einem zweisprachigen Vorlage, unsere Englisch-Konfigurations-Dateien sind in der “De” – Unterverzeichnis.
Wenn Sie öffnen Sie die Daten – > En – > banner.yml-Datei in einem editor, sehen Sie die Sammlung von Einstellungen, die das banner-Bereich der website.
Wenn Sie ändern Sie den “Titel” und “Inhalt” – Einstellungen, ändern Sie den text auf dem banner der Seite.
Wir änderten auch das “Label” – Einstellung, so dass die Schaltfläche text sagt, “Mehr herausfinden.” Für Ihre Website, werden Sie wahrscheinlich wollen, um das Bild zu ändern, auch.
Sobald Sie die änderungen gespeichert haben, sehen Sie diese in Ihrem browser.
Ändern Sie Andere Elemente einer Webseite
Sie können alle anderen Elemente, die in einer ähnlichen Art und Weise. Nur die Spur für die entsprechende Konfigurationsdatei, und ändern Sie die Einstellungen und den text an Ihre Bedürfnisse anzupassen.
Sie wollen auch auf den Wandel der Bilder. Das default-Bild wird in der Konfigurationsdatei verwiesen. Sie können leicht finden, und werfen Sie einen Blick auf das Originalbild zu sehen, was seine Abmessungen sind.
Bilder sind in der “Statischen” > “Bilder” – Verzeichnis mit den Unterverzeichnissen für die verschiedenen Bereiche der website. Legen Sie alle favicons und logos direkt in die “Statische” > “Bilder” – Verzeichnis.
Das Hinzufügen Von Neuen Blog-Content
So weit, wir haben uns angeschaut ändern, was bereits vorhanden ist. Aber, wie wir hinzufügen eines neuen blog-post? Hugo nutzt das Konzept der sogenannten “Archetypen” für die Schaffung neuer Inhalte. Wenn wir das nicht schaffen, ein Archetyp für unsere blog-Einträge, eine default-Datei erstellt werden, die für uns jedes mal Fragen wir Hugo zum erstellen eines neuen blog-Eintrag.
Das ist gut, aber mit ein Archetyp, wir sparen uns einige Mühe und stellen Sie sicher, wie viel von der Titelei wie möglich angegeben, für uns im Voraus.
In diesem Thema, blog-Einträge befinden sich in Inhalt > Deutsch > Blog. Wenn wir öffnen Sie einen vorhandenen Blogeintrag in einem editor wie “simple-blog-post-1.md”—können wir sehen, der Titelei.
Wir kopieren zu müssen, dass im Abschnitt ” Bearbeiten der aktuellen Einträge, so kann es verwendet werden als ein Archetyp Vorlage, und speichern Sie es dann in die “Archetypen” – Ordner. Wenn wir den Namen “blog.md,” es wird automatisch werden, dient als Vorlage für neue blog-Einträge.
In gedit, wir können dies tun, wie folgt:
gedit-content/Englisch/blog/simple-blog-post-1.md
Markieren Sie den oberen Bereich, darunter die zwei gestrichelten Linien, und drücken Sie dann Strg+C um es zu kopieren. Drücken Sie Strg+N um eine neue Datei, und dann Strg+V zum einfügen, was Sie kopiert haben.
Nun, die folgenden änderungen vor, und lassen Sie ein Leerzeichen nach dem Doppelpunkt (:) in jeder Zeile:
- Titel: Ändern Sie dies in “{{ ersetzen .Namen “-” “” | title }}” (einschließlich der Anführungszeichen). Ein Titel für jeden neuen blog-post automatisch eingefügt werden. Es ist gebildet aus den Namen der Datei, die Sie übergeben, um die neue hugo-Befehl, wie wir sehen werden.
- Datum: Ändern Sie diese auf {{ .Datum }}. Das Datum und die Uhrzeit der blog ist erstellt, wird automatisch eingegeben.
- Image_webp: Dies ist der Pfad zu dem blog-header-Bild im format webp. Wenn das Thema nicht finden können, ein, es werde das Bild aus der nächsten Zeile.
- Bild: Dies ist der Pfad zu dem blog-header-Bild im JPEG-format. Sie könnte genauso gut lassen Sie diese verweist auf die Standard-Bilder. Dann werden alle blog-Beiträge haben eine Notlösung Bild, noch bevor Sie finden, vergrößern, verkleinern, oder speichern Sie eine benutzerdefinierte ein. Sobald Sie das getan haben, können Sie einfach Bearbeiten Sie den Namen der Datei übereinstimmen, die von Ihrem benutzerdefinierten image.
- Autor: Ändern Sie diese zu Ihrem Namen.
- Beschreibung: geben Sie jeweils eine kurze Beschreibung hier posten. Wenn Sie dies ändern, um eine leere Zeichenfolge (“”), Sie können geben Sie eine Beschreibung für jeden neuen blog, ohne zu Bearbeiten der alte text.
Speichern Sie diese neue Datei als “Archetypen/blog.md”, und schließen Sie gedit. Hugo wird jetzt mit dieser neuen Archetyp Wann immer Sie wollen-erstellen Sie einen neuen blog-Eintrag.
Beachten Sie, dass unsere Datei sollte “.md” – Erweiterung, weil wir mit markdown zu schreiben unseren blog-Eintrag:
hugo-der neue blog/first-new-blog-post-auf-dieser-Website.md
Nun, wir wollen unser neue blog-Eintrag im editor:
gedit-content/Englisch/blog/first-new-blog-post-auf-dieser-Website.md
Unser neuer blog-post öffnen in gedit.
Alle der folgenden Teile der Titelei Hinzugefügt, die für uns:
- Titel: Das war abgeleitet von den Namen der Datei. Falls es irgendwelche tweaking, können Sie es Bearbeiten, hier.
- Zeit und Datum: Diese werden automatisch Hinzugefügt.
- Standard-Bild: Sie werden wahrscheinlich wollen, zu finden, die einen relevanten, royalty-free image. Legen Sie es in Statischen > Bilder > Blog. Sie müssen geben Sie den tatsächlichen Dateinamen des Bildes hier.
- Autor: Ihr name wird automatisch Hinzugefügt.
- Beschreibung: Dieses bearbeitet wurde.
Schreiben Sie die blog mit markdown und nutzen Sie das standard-markup für überschriften, Fett, Kursiv, Bilder, links und so weiter. Jedes mal, wenn Sie Ihre Datei speichern, Hugo erstellt die website und aktualisiert es in Ihrem browser.
Das Bild unten zeigt, wie unser neues blog-Eintrag erscheint auf der Startseite.
Das Bild unten zeigt, wie die neuen blog-Eintrag sieht auf seine eigene Seite.
Nachdem Sie fertig sind, schreiben Ihre blog-post, speichern Sie die änderungen, und schließen Sie dann den editor. Sie können auch Ihren browser schließen, weil wir aufhören, die Hugo-server.
In das terminal-Fenster, in dem die Hugo-server ausgeführt wird, drücken Sie Strg+C.
Aufbau der Homepage
In das root-Verzeichnis Ihrer website, geben Sie den folgenden Befehl zum erstellen Ihrer website:
hugo
Hugo baut die website und listet die Anzahl der Seiten und anderen Komponenten erstellt. Es nahmen 134 Millisekunden zu erstellen, unsere.
Hugo erstellt ein neues Verzeichnis namens “Public” in das root-Verzeichnis Ihrer website. In der “Public” – Verzeichnis, finden Sie alle Dateien, die Sie übertragen müssen, um Ihre hosting-Plattform.
Beachten Sie, dass der upload der Dateien und Verzeichnisse in den “Public” – Verzeichnis auf Ihrem hosting-Plattform, nicht die “Public” – Verzeichnis selbst.
Jetzt Kennen Sie die Grundlagen
Jedes Thema erfordert ein bisschen exploration, um herauszufinden, wie Sie bekommen es zu sehen, wie Sie wollen, aber das ist der Spaß Teil! Angesichts Hugo ‘ s Fähigkeit zu Rendern änderungen sofort im browser-Fenster, nichts dauert zu lange.
Sie werden wahrscheinlich feststellen, dass das schreiben Ihre Texte und finden und zuschneiden von Bildern sind die Teile des Prozesses, die dauern am längsten.
Die Hugo-Dokumentation Seite ist auch hilfreich, aber umfangreich. Ich hoffe, diese basic-walk-through wird genug sein, zum du zu erhalten begannen.
Wenn Sie mithilfe von Git und Github, GitLab, oder BitBucket gibt es auch Integrationen verfügbar für diese Plattformen. Beobachten Sie Ihre remote-Hugo-repository und den Wiederaufbau Ihrer live-Website, wenn Sie drücken Sie ändern.
LESEN SIE WEITER
- › So Schützen Sie Ihren Mac vor Ransomware
- › Wie Pin und Unpin Erweiterungen aus dem Chrome Toolbar
- › Wie zum Erstellen Bedingter Formeln in Adobe Acrobat
- › How to Erstellen von Benutzerdefinierten Tastenkombinationen für den Mac-App
- › How to Kick die Leute Aus Ihrem Netflix-Konto