Machen Sie mit Hugo das Erstellen von Websites wieder zum Spaß

Statische Websites sind aus vielen Gründen beliebt. Das Vermeiden von Overkill-Lösungen und die Vereinfachung eines Projekts ohne Datenbanken, zu viele Abhängigkeiten oder spezielle serverseitige Konfigurationen (kein PHP, kein MySQL / MSSQL, .NET, Python, Ruby usw.) machen die Implementierung sehr einfach und robust gegen zahlreiche mögliche Schwachstellen. Letztendlich werden diese zu einfachen HTML-Seiten, die dem Benutzer zur Verfügung gestellt werden.

In diesem Handbuch zeige ich Ihnen, wie Sie Ihre Entwicklungsumgebung mit Hugo einrichten und Ihre erste statische Hugo-Website erstellen.

Ein völlig neuer Ansatz für statische Websites

Das legendäre Designakronym KISS - Halten Sie es einfach dumm - kann auf Hugo angewendet werden und wie er an den statischen Platz für Website-Generator herankommt.

Hugo erstellt in Go schnell statische Seiten (es dauert Bruchteile von Millisekunden, um eine kleine Site zu erstellen - und kann Tausende von Seiten in Sekunden erstellen).

Hugo bietet auch wichtige Tools für den statischen Website-Workflow (einschließlich Implementierungs- und Migrations-Tools), sodass Entwickler und Designer sich auf die Spaßbereiche konzentrieren können, z. B. ihre Kreativität ausüben und diese Kreativität beim Aufbau der Website einsetzen können.

Warum statische Websites??

Wenn wir inhaltsbasierte Websites erstellen, können wir einige allgemeine Bedingungen auf allen Websites annehmen. Hugo gibt dazu einen Rahmen vor. Insbesondere können wir Inhaltstypen wie Beiträge, Kategorien, Bewertungen oder Produkte übernehmen und die Daten organisieren. Dann können wir jedem über Vorlagen und Stylesheets ein bestimmtes Aussehen verleihen.

In der Zukunft können wir es dann wirklich überall dort hinbringen, wo wir innerhalb der statischen HTML / CSS / JS-Website Platz benötigen. Wenn Sie pragmatisch darüber nachdenken, ist dies ein großer Raum, der viel Raum für Kreativität bietet.

jQuery läuft einwandfrei und es gibt nichts, was Sie daran hindert, Dienste von Drittanbietern auf Ihrer statischen Seite zu verwenden, falls Sie diese benötigen. Beschränken Sie sich also nicht dadurch, dass Sie andere Bibliotheken oder Anwendungen nicht in Ihre statischen Sites integrieren können. Das ist wirklich nicht der Fall - Sie können eine der verfügbaren JavaScript-Bibliotheken verwenden.

Also für ein paar Seiten einer Unternehmensbroschüren-Website mit einem Link zu einem Google Forms für eine Kontaktseite. Wenn Sie andere Datentypen anzeigen müssen, können Sie JavaScript für diesen Aspekt Ihrer Website verwenden.

Wie kann es für mein Unternehmen und meine Kunden funktionieren??

Nehmen Sie zum Beispiel einen kleinen Laden oder Freiberufler mit einigen Produkten oder Dienstleistungen, für die keine vollständige E-Commerce-Lösung erforderlich ist. Stattdessen benötigen sie nur Produktinformationen und einen "Kontakt" -Link auf der Seite. Hugo kann es bis zum Ende eines Vormittags. Das Hosting ist nicht einmal eine große Sache - es ist wirklich eine nachträgliche Idee, weil wir nur einfache HTML-Seiten bereitstellen.

Hugo eignet sich auch gut für die Projektdokumentation von GNU-Projekten. Denken Sie beispielsweise an Start-ups oder KMU, die eine einfache Präsenz benötigen.

Was sind die Einschränkungen für statische Sites??

Was Hugo nicht kann, ist dynamisch Inhalt, beispielsweise datenbankgestützte Formulare, Such- oder Benutzersysteme. Wenn Sie danach suchen, ist Hugo sicherlich der richtige nicht was du willst Aber für die anderen Zeiten, wenn Sie sich sagen, "können wir nicht einfach eine grundlegende Seite dafür erstellen?" Statische Website-Generatoren sind eine solide Option. Beachten Sie auch, dass Hugo nicht der einzige statische Standortgenerator ist. Es gibt viele da draußen und gibt es schon lange, hier ist eine Liste von ihnen.

Für das Erstellen von Live-Content-Blogs wie Nachrichtenseiten kann Hugo eine hervorragende Lösung sein, um schnell eine Seite für diese Berichterstattung von Ihrer Hauptsite aus zu verknüpfen und sie in wenigen Minuten online zu stellen sehr schnell. Aber um eine komplette Nachrichtenseite mit Suchfunktion und vielen Autoren zu erstellen, wäre es wirklich nicht geeignet, Hugo zu verwenden.

Hugo fehlt es auch an fortschrittlicheren Tools für seine Asset-Pipeline wie ES6 und Sass. Wenn Sie diese Technologie nutzen möchten, müssen Sie Gulp oder Grunt einbeziehen, um die Arbeit zu erledigen. Ansonsten funktionieren Vanilla-CSS und JavaScript am besten.

Ihre Entwicklungsumgebung für Zuhause

Hugo ist in Go geschrieben und unterstützt viele Plattformen, um alle Veröffentlichungen anzuzeigen, die hier verfügbar sind

Für MacOS-Benutzer mit HomeBrew kann die Installation folgendermaßen durchgeführt werden:

Brüh-Update && Brüh-Installation von Hugo

Weitere Informationen zur Installation für Mac OSX und Windows

Sobald Hugo installiert ist, können Sie die Installation testen, indem Sie sie ausführen Hugo helfen in der Eingabeaufforderung oder Hugo-Version

Erstellen Ihrer ersten statischen Website mit Hugo

Nachdem wir Hugo installiert haben, können wir mit dem Erstellen der Website beginnen. Führen Sie den folgenden Befehl aus, und ersetzen Sie "your-sitename-here" durch Ihren Projektnamen:

$ hugo new site your-sitename-here

Dadurch wird ein Gerüst für Ihre Website erstellt, das Sie in Ihrem Finder anzeigen können

oder in Ihrem Terminal über die Baum Befehl

Hugo hat 5 Unterverzeichnisse und eine Datei erstellt, aus denen die endgültige Website erstellt wird.

Archetypen: Hier definieren wir, was unser Inhalt ist, wir können Standard-Tags oder -Kategorien festlegen und Typen wie Post, Tutorial oder Produkt hier definieren
config.toml: Die Hauptkonfiguration ist hier enthalten. Hier können Sie alle Titel, Sprache, URLs usw. der Websites definieren
Inhalt: Die Inhaltsseiten der Site werden hier gespeichert, Unterverzeichnisse werden für Abschnitte verwendet, um den Inhalt zu organisieren, einen zu erstellen Inhalt / Produkte für den Inhalt Ihrer Produkte zum Beispiel
Daten: Standortdaten wie eine solche Lokalisierungskonfiguration finden Sie hier
Layouts: Layouts für die Go-HTML / Vorlagen-Bibliothek, die Hugo verwendet, finden Sie hier
statisch: Alle statischen Dateien werden in der endgültigen Website zusammengefasst. Die vollständige Freiheit ist zulässig, sodass Sie zum Beispiel beliebige CSS-, JS- oder Bilddateien bereitstellen können.
themen: Erstellen Sie neue Designs oder klonen Sie Designs von github in dieses Verzeichnis, um sie mit Ihrer Site zu verwenden.

"Hallo Welt" in Hugo

Wir müssen einen Post hinzufügen, um die soeben erstellte Site anzuzeigen. Führen Sie dazu den folgenden Befehl aus:

$ hugo neuer post / first-post.md

Bearbeiten Sie nun die Datei in content / post / first-post.md. Diese Datei enthält standardmäßig Folgendes:

+++ date = "2016-09-26T13: 19: 03 + 07: 00" title = "Erster Beitrag" +++

Hauptsache

Der Inhalt ist drin +++ ist die TOML-Konfiguration für den Beitrag. Diese Konfiguration wird aufgerufen vordere Angelegenheit. Sie können damit die Nachkonfiguration zusammen mit ihrem Inhalt definieren. Standardmäßig hat jeder Beitrag die oben gezeigten Konfigurationseigenschaften.

Fügen Sie etwas Text nach dem hinzu +++wie so:

+++ date = "2016-09-26T13: 19: 03 + 07: 00" title = "erster Beitrag" +++ Hallo Welt!

Bereitstellen von Daten und Live Reload

So können wir die mit Hugo integrierte Live-Nachladefunktion sehen. Nehmen wir einige Änderungen an der Site vor und sehen Sie, was passiert.

Starten Sie zuerst den Server, indem Sie ausführen

$ hugo Server

Wenn Sie nun einige Änderungen an Ihrer Datei vornehmen, wird Hugo sofort neu geladen.

Ihre Website wird unter http: // localhost: 1313 verfügbar sein warten Sie mal - Sie sehen immer nur eine leere weiße Seite an dieser Stelle, weil wir kein Thema definiert haben!

Fügen Sie ein Thema hinzu

Hugo hat eine sehr robuste und vielseitige Themenbibliothek, da sie Go's verwendet HTML / Vorlage Bibliothek. Themes sind einfach zu handhaben, die Installation erfolgt durch einfaches Klonen des Repositorys eines Themes in das themen Verzeichnis für Ihre Hugo-Site.

Hugo hat kein Standarddesign, also Sie Muss Set eins.

Es gibt unzählige Open Source-Themen, aus denen Sie wählen können.

Fügen wir unserer Website jede Menge Themen hinzu, damit wir mit allen spielen können und sehen, was uns gefällt. Führen Sie dazu in unserem Hugo-Verzeichnis Folgendes aus:

$ git clone --recursive https://github.com/spf13/hugoThemes.git themes In 'themes' klonen ... remote: Objekte zählen: 880, fertig. Remote: Komprimieren von Objekten: 100% (5/5), fertig. Remote: Gesamt 880 (Delta 1), wiederverwendete 0 (Delta 0), wiederverwendete Packung 875 Empfangsobjekte: 100% (880/880), 669,20 KiB | 288,00 KiB / s, fertig. Deltas auflösen: 100% (506/506), fertig. Konnektivität prüfen… fertig.

Sie sehen jetzt eine ganze Reihe von Themen, die in Ihre Site geklont werden. Es gibt eine Menge, so dass Sie Zeit für eine Pause haben, während es klont…

Verwenden eines Themas

Um ein Thema zu verwenden, starten Sie Hugo mit der -t oder --Thema Parameter wie so

$ hugo -t ThemeName

Oder Sie können zu Ihrem hinzufügen config.toml :

Theme: "ThemeName"

Das ThemeName muss mit dem Namen des Verzeichnisses übereinstimmen / themen.

Wenn Sie einen Themennamen aus dem Verzeichnis ausgewählt haben, starten Sie Ihren Server mit hugo server --theme = ThemeName und werfen Sie einen Blick auf http: // localhost: 1313

Hier sind einige Beispiele aus einigen dieser Themen, die wir geklont haben bitten, knackig undKaktus Schauen Sie sich um, es gibt so viele zur Auswahl!

Sie haben jetzt eine Website mit einem Hallo Weltpost erstellt, was wir sonst noch tun können?

Blog erstellen

Mit Hugo ist es sehr einfach, ein einfaches Blog zu erstellen. Zuerst müssen Sie einen Archetyp für den Standardbeitrag definieren. Erstellen Sie also eine neue Datei in Archetypen / default.md und fügen Sie folgendes als ein vordere Angelegenheit:

+++ tags = ["Schweißen", "Metallarbeiten"] categories = ["posts"] +++

Hier haben wir einige Standard-Tags gesetzt. Für einen Blog zum Thema Schweißen können wir sicher sein, dass wir diese Tags in allen unseren Posts haben möchten. Außerdem erstellen wir eine Kategorie namens Posts, damit wir beim Erstellen eines Posts einen Standard festlegen.

Fügen Sie nun Ihren ersten Beitrag über das Terminal hinzu:

$ hugo neuer post / tig-welding-a-bike-frame.md

Dadurch wird ein Beitrag mit dem zuvor definierten Archetyp erstellt. Sie können ihn jetzt in einem Texteditor öffnen und im Markdown-Format wegschreiben!

Fügen wir noch ein paar Beiträge hinzu:

$ hugo neuer post / schweißen-a-roll-cage.md

Um wieder Inhalt hinzuzufügen, öffnen Sie einfach die von Hugo erstellte Datei und fügen nach der ersten Frage Inhalt am Ende der Datei hinzu.

Erstellen einer Fotogalerie

Um eine Fotogalerie mit Hugo zu erstellen, verwenden wir das hervorragende Werkzeug Hugo-Galerie verfügbar auf GitHub.

Die Verwendung ist wie folgt:

Hugo-Galerie [BaseUrl]</code></p><p>Das <code>Hugo-Galerie</code> Das Tool erstellt ein neues Posts-Verzeichnis mit einer Markdown-Datei für jedes Image im Quellverzeichnis, das eine geordnete Diashow ermöglicht. Es liest alle Dateien aus <code>Quellpfad</code> und speichern Sie sie im statischen Verzeichnis der Hugo-Site. <br></p><p>Es erstellt ein neues Verzeichnis innerhalb des Inhaltsverzeichnisses, basierend auf dem <code>Titel</code> bereitgestellt, z.B. <code>Inhalt / Schweißen</code></p><p>Zum Beispiel: </p><pre>$ hugo-gallery static / Bilder / Schweißen-Fotos Schweißen "Fotos meiner wahnsinnigen Schweißfertigkeiten"</pre><p>Besuch <code>localhost: 1313 / schweißen</code> um den Inhalt anzuzeigen.</p><h2>Einsatz</h2><p>Hugo verfügt über mehrere Tools für die Bereitstellung, z. B. Hugomac, eine OSX-Menüleiste-App, mit der der Benutzer problemlos im EC2-Hosting veröffentlichen kann. Keine Befehlszeile erforderlich.</p><p>Hugodeploy bietet auch ein SFTP-Setup, mit dem Sie bereitstellen können. Sie können auch die automatisierten Bereitstellungen verwenden, die mit Hugo geliefert werden.</p><h2>Fazit</h2><p>Statische Site-Generatoren gibt es schon eine Weile, und Hugo baut auf dem Tool-Set auf, das das schnelle Anlegen von Sites oder das Migrieren einer vorhandenen Site von WordPress zu Hugo ermöglicht. Für Hugo gibt es viele Tools, einschließlich Front-End-Editoren, die sie auschecken.</p><p>In Zukunft werden weitere Module für Hugo zur Verfügung stehen, die Unterstützung für Dinge wie Kontaktformular und Galerieunterstützung oder zugehörige Beiträge beispielsweise bieten. </p><p>Die Hugo-Roadmap enthält viele aufregende Ideen wie dynamische Bildgrößenanpassung, Unterstützung für Rsync und Bildimport von Hosting-Providern sowie einfacheres Hosting mit AWS EC2 und GitHub-Integration.</p><p>Wenn Sie Hugo noch nicht verwenden, sollten Sie sich unbedingt wieder mit dem Projekt vertraut machen!</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/code">Code</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/crafts/make-cute-origami-bunny-decorations-for-easter.html">Machen Sie niedliche Origami Bunny Dekorationen für Ostern</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_19/make-cute-origami-bunny-decorations-for-easter_41.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/crafts/make-copper-and-pearl-earrings-for-valentines-day.html">Machen Sie Kupfer- und Perlenohrringe für den Valentinstag</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_15/make-copper-and-pearl-earrings-for-valentines-day_13.jpg');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessante Informationen und nützliche Tipps zur Programmierung. Website-Entwicklung, Webdesign und Webentwicklung. Photoshop-Tutorials. Erstellung von Computerspielen und mobilen Anwendungen. Werden Sie von Grund auf professioneller Programmierer. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Suche..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>