Erstellen Sie Ihren kostenlosen Entwickler-Blog mit Hugo und Firebase

In diesem Tutorial zeige ich Ihnen, wie Sie mit Hugo Ihren eigenen Blog erstellen und ihn kostenlos auf Firebase bereitstellen. Hugo ist ein Open-Source-Generator für statische Websites und Firebase ist eine Google-Plattform, die Ressourcen und Dienste anbietet, die zur Erweiterung der Web- und Mobilentwicklung verwendet werden. Wenn Sie ein Entwickler sind, der noch keinen Blog hat, aber daran interessiert ist, einen zu hosten, hilft Ihnen dieser Artikel beim Erstellen eines Blogs. Um diese Schritte ausführen zu können, müssen Sie wissen, wie Sie Git und Ihr Terminal verwenden.

Ein eigener technischer Blog kann für Ihre Karriere als Entwickler jede Menge Vorteile haben. Zum einen lernen Sie durch das Bloggen über technische Themen Dinge, die Sie sonst bei Ihrem primären Entwicklerjob möglicherweise nicht gelernt hätten. Während Sie Ihre Stücke recherchieren oder neue Dinge ausprobieren, lernen Sie am Ende eine ganze Reihe von Dingen, z. B. wie Sie mit neuen Technologien arbeiten und Grenzfälle lösen. Darüber hinaus trainieren Sie Soft Skills wie Kommunikation und den Umgang mit Kritik und Feedback, wenn Sie sich mit den Kommentaren Ihrer Leser auseinandersetzen.

Darüber hinaus werden Sie selbstbewusster in Ihren Softwareentwicklungsfähigkeiten, da Sie beim Erstellen von Beispielprojekten für Ihr Blog so viel Code schreiben müssen, um Konzepte zu veranschaulichen. Ein technischer Blog stärkt Ihre Marke als Entwickler, da er Ihnen eine Plattform bietet, auf der Sie Ihre Fähigkeiten und Ihr Fachwissen präsentieren können. Dies eröffnet Ihnen alle möglichen Möglichkeiten wie Jobs, Reden und Konferenzverpflichtungen, Buchgeschäfte, Nebengeschäfte, Beziehungen zu anderen Entwicklern und so weiter.

Empfohlene Lektüre auf SmashingMag:

• Wechsel von WordPress zu Hugo
• So erstellen Sie eine Headless-WordPress-Site auf dem JAMstack
• Ersetzen von jQuery durch Vue.js: Kein Build-Schritt erforderlich
• Erstellen authentischer menschlicher Verbindungen innerhalb eines Remote-Teams

Chris Sevilleja zum Beispiel begann 2014 mit dem Schreiben von Tutorials auf seinem Blog scotch.io, der sich zu einem Unternehmen entwickelte, das später zu Digital Ocean kam. Ein weiterer bedeutender Vorteil eines technischen Blogs besteht darin, dass er Sie zu einem besseren Autor macht, was beim Schreiben von Dokumenten zum Softwaredesign und zu technischen Spezifikationen von Vorteil sein kann. Darüber hinaus macht es Sie zu einem außergewöhnlichen Lehrer und Mentor. Zum Beispiel lese ich oft research.swtch.com, einen Blog von Russ Cox, der über die Go-Sprache bloggt und auch im Google Go-Team arbeitet, das sie entwickelt. Dadurch habe ich eine Menge darüber gelernt, wie die Sprache funktioniert, die ich vielleicht nicht von meinem Hauptjob gelernt hätte.

Ein weiterer großartiger Blog, den ich auch gerne lese und von dem ich viel lerne, ist welearncode.com von Ali Spittel, der einmal schrieb, dass ein wirklich großartiger Teil des Bloggens ist:

„Anderen beim Programmieren zu helfen und es den Leuten, die nach mir kommen, leichter zu machen.“

Eine ziemlich einfache und schmerzlose Möglichkeit, Ihren Blog zum Laufen zu bringen, ist die Verwendung einer Drittanbieterplattform wie Medium, auf der Sie nur ein Konto erstellen müssen, um einen Blog zu erhalten. Obwohl diese Plattformen anfangs für die meisten Blogging-Anforderungen geeignet sind, haben sie auf lange Sicht einige Nachteile.

Einige Plattformen bieten schlechte Benutzererfahrungen wie das ständige Senden ablenkender Benachrichtigungen für triviale Dinge, die Aufforderung zur App-Installation und so weiter. Wenn Ihr Leser schlechte Erfahrungen mit einer Plattform macht, auf der Ihr Blog gehostet wird, ist es weniger wahrscheinlich, dass er sich mit Ihren Inhalten beschäftigt. Außerdem werden Tools, die Sie möglicherweise benötigen, um die Interaktion Ihrer Leser mit und die Zeit in Ihrem Blog zu verbessern, möglicherweise nicht unterstützt. Dinge wie RSS-Feeds, Syntaxhervorhebung für Codeschnipsel und andere Dinge werden auf der Plattform möglicherweise nicht unterstützt. Im schlimmsten Fall kann die Plattform, auf der Ihr Blog gehostet wird, geschlossen werden und Sie verlieren möglicherweise Ihre gesamte Arbeit.

Das Hosten Ihres eigenen Blogs und das Umleiten Ihrer Benutzer darauf erhöht die Wahrscheinlichkeit, dass sie sich mehr mit den von Ihnen veröffentlichten Beiträgen beschäftigen. Sie müssen nicht mit anderen Autoren auf einer Plattform um die Aufmerksamkeit Ihres Lesers konkurrieren, da Sie der einzige auf dieser Plattform sind. Die Leser werden wahrscheinlich mehr Ihrer Posts lesen oder sich für Ihren Newsletter anmelden, da sie sich mehr auf das konzentrieren, was Sie kommunizieren. Ein weiteres Plus, das mit dem Hosten eines eigenen Blogs einhergeht, ist die Möglichkeit, es auf unzählige Arten an den eigenen Geschmack anzupassen, was bei Plattformen von Drittanbietern normalerweise nicht möglich ist.

Hugo einrichten

Wenn Sie mit macOS oder Linux arbeiten, können Sie Hugo am einfachsten mit Homebrew installieren. Alles, was Sie für die Ausführung auf Ihrem Terminal benötigen, ist:

 brew install hugo

Unter Windows kann Hugo entweder mit dem Scoop-Installer oder dem Chocolatey-Paketmanager installiert werden. Für Schaufel:

 scoop install hugo

Für schokoladig:

 choco install hugo -confirm

Wenn keine dieser Optionen auf Sie zutrifft, sehen Sie sich diese Optionen für die Installation an.

Firebase-Tools einrichten

Um Firebase-Tools zu installieren, muss Node.js installiert sein, um Zugriff auf npm zu erhalten. Führen Sie Folgendes aus, um Firebase-Tools zu installieren:

 npm install -g firebase-tools

Erstellen Sie kostenlos ein Firebase-Konto unter diesem Link. Dazu benötigen Sie ein Google-Konto. Melden Sie sich als Nächstes mit den Firebase-Tools an. Sie werden zu einem Browser-Tab weitergeleitet, wo Sie sich mit Ihrem Google-Konto anmelden können.

 firebase login

Erstellen Sie Ihren Blog

Wählen Sie ein Verzeichnis aus, in dem sich der Quellcode Ihres Blogs befinden soll. Wechseln Sie auf Ihrem Terminal in dieses Verzeichnis. Wählen Sie einen Namen für Ihr Blog. Für dieses Tutorial nennen wir das Blog sm-blog .

 hugo new site sm-blog

Es ist ratsam, den Quellcode Ihrer Website zu sichern, falls etwas schief geht. Ich werde dafür Github verwenden, aber Sie können jeden Versionskontrolldienst verwenden – wenn Sie dasselbe tun möchten. Ich werde ein Repository initialisieren.

 cd sm-blog git init

Bevor wir die Site lokal ausführen und tatsächlich im Browser anzeigen können, müssen wir ein Design hinzufügen, sonst sehen Sie nur eine leere Seite.

Auswählen und Installieren eines Themas für Ihren Blog

Eine Sache, die ich an Hugo liebe, ist die Community dahinter und all die Entwickler, die Themen zur Verwendung durch die Community einreichen. Es steht eine große Auswahl an Themen zur Auswahl, von Websites für kleine Unternehmen über Portfolios bis hin zu Blogs. Um ein Blog-Thema auszuwählen, gehen Sie zum Blog-Bereich von themes.gohugo.io. Ich habe ein Thema namens Cactus Plus wegen seiner Einfachheit und seines Minimalismus ausgewählt. Um dieses Design zu installieren, muss ich es als Submodul meines Repositorys hinzufügen. Viele Themen weisen ihre Benutzer an, Submodule für Installationen zu verwenden, aber wenn dies nicht der Fall ist, befolgen Sie einfach die Anweisungen des Themenherstellers in der Beschreibung. Ich füge das Design dem Ordner /themes hinzu.

 git submodule add -b master https://github.com/nodejh/hugo-theme-cactus-plus.git themes/hugo-theme-cactus-plus

Im Stammverzeichnis des Blog-Ordners befindet sich eine generierte Datei, config.toml . Hier legen Sie Einstellungen für Ihre Site fest. Wir müssen das Thema dort ändern. Der Designname entspricht dem Ordnernamen des ausgewählten Designs im /themes -Ordner. Dies sind jetzt die Inhalte der Datei config.toml . Sie können auch den Titel des Blogs ändern.

 baseURL = "https://example.org/" languageCode = "en-us" title = "SM Blog" theme="hugo-theme-cactus-plus"

Jetzt können wir den Blog betreiben. Es wird bis auf die Namensänderung genauso aussehen wie das Theme. Sobald Sie den Server ausgeführt haben, gehen Sie in Ihrem Browser zu https://localhost:1313 .

 hugo server -D

Personalisierung Ihres Blogs

Ein Vorteil der Bereitstellung Ihres eigenen Blogs besteht darin, dass Sie ihn auf alle möglichen Arten nach Ihren Wünschen personalisieren können. Der primäre Weg, dies mit Hugo zu tun, besteht darin, das ausgewählte Thema zu ändern. Viele Themes bieten Anpassungsoptionen über die config.toml . Der Ersteller des Themas stellt normalerweise in der Beschreibung auf der Themenseite eine Liste mit Optionen und deren Bedeutung zur Verfügung. Wenn dies nicht der Fall ist, überprüfen Sie den /exampleSite Ordner des Themas und kopieren Sie den Inhalt von config.toml in diesem Ordner in Ihre config.toml -Datei. Zum Beispiel:

 cp themes/hugo-theme-cactus-plus/exampleSite/config.toml .

Da alle Themen unterschiedlich sind, gelten Änderungen, die ich hier vornehme, möglicherweise nicht für Ihr Thema, aber hoffentlich können Sie sich ein Bild davon machen, was Sie mit Ihrem Blog machen sollen.

1. Ich werde das Avatarbild und das Favicon des Blogs ändern. Alle statischen Dateien, einschließlich Bilder, sollten dem Ordner /static hinzugefügt werden. Ich habe einen Ordner /images in static erstellt und die Bilder dort hinzugefügt.
2. Ich werde Google Analytics hinzufügen, damit ich den Verkehr zu meinem Blog verfolgen kann.
3. Ich werde Disqus aktivieren, damit meine Leser Kommentare zu meinen Beiträgen hinterlassen können.
4. Ich werde RSS aktivieren.
5. Ich werde meine sozialen Links zu Twitter und Github einfügen.
6. Ich werde die Twitter-Karte aktivieren.
7. Ich werde Zusammenfassungen unter den Beitragstiteln auf der Startseite aktivieren.

Meine config.toml sieht also so aus:

 ### Site settings baseurl = "your_firebase_address" languageCode = "en" title = "SM Blog" theme = "hugo-theme-cactus-plus" googleAnalytics = "your_google_analytics_id" [params] # My information author = "Cat Lense" description = "blog about cats" bio = "cat photographer" twitter = "cats" copyright = "Cat Photographer" # Tools enableRSS = true enableDisqus = true disqusShortname = "your_disqus_short_name" enableSummary = true enableGoogleAnalytics = true enableTwitterCard = true [social] twitter = "https://twitter.com/cats" github = "https://github.com/cats"

Erstellen Ihres ersten Beitrags

Hugo-Beiträge werden in Markdown geschrieben. Sie müssen sich also damit auskennen. Wenn Sie einen Beitrag erstellen, erstellen Sie eigentlich eine Markdown-Datei, die Hugo dann in HTML rendert. Nehmen Sie den Titel Ihres Beitrags, machen Sie ihn klein, ersetzen Sie die Leerzeichen durch Bindestriche. Das wird der Name Ihres Beitrags sein. Hugo nimmt den Dateinamen, ersetzt die Bindestriche durch Leerzeichen, wandelt ihn in Groß- und Kleinschreibung um und setzt ihn dann als Titel. Ich nenne meine Datei my-first-post.md . Um Ihren ersten Beitrag zu erstellen, führen Sie Folgendes aus:

 hugo new posts/my-first-post.md

Der Beitrag wird im Ordner /content erstellt. Dies sind die Inhalte der Datei.

 --- title: "My First Post" date: 2020-03-18T15:59:53+03:00 draft: true ---

Ein Beitrag enthält Titelei, also die Metadaten, die Ihren Beitrag beschreiben. Wenn Sie Ihre Beiträge beim Schreiben als Entwürfe behalten möchten, lassen Sie draft: true . Wenn Sie mit dem Schreiben fertig sind, ändern Sie draft: false , damit die Beiträge auf der Startseite angezeigt werden können. Ich füge der Titelseite eine Zusammenfassungszeile hinzu, um den Beitrag auf der Homepage zusammenzufassen.

Hinzufügen von Ressourcen zu Ihrem Beitrag

Um Ihren Beiträgen Ressourcen wie Bilder, Videos, Audiodateien usw. hinzuzufügen, erstellen Sie einen Ordner im Ordner /content/posts mit demselben Namen wie Ihr Beitrag ohne die Erweiterung.

Zum Beispiel würde ich diesen Ordner erstellen:

 mkdir content/posts/my-first-post

Dann würde ich alle meine Post-Ressourcen zu diesem Ordner hinzufügen und nur über den Dateinamen auf die Ressourcen verlinken, ohne eine lange URL angeben zu müssen. Zum Beispiel würde ich ein Bild wie dieses hinzufügen:

 ![A cute cat](cute-cat.png)

Hosten des Quellcodes Ihres Blogs

Nachdem Sie Ihren ersten Beitrag geschrieben haben, ist es wichtig, ihn zu sichern, bevor Sie ihn bereitstellen. Stellen Sie vorher sicher, dass Sie eine .gitignore -Datei haben, und fügen Sie den /public -Ordner hinzu. Der öffentliche Ordner sollte ignoriert werden, da er erneut generiert werden kann.

Erstellen Sie ein Repository auf Github, um den Quellcode Ihres Blogs zu hosten. Legen Sie dann das Remote-Repository lokal fest.

 git remote add origin [remote repository URL]

Stellen Sie schließlich alle Ihre Änderungen bereit, übertragen Sie sie und übertragen Sie sie dann in das Remote-Repository.

 git add * git commit -m "Add my first post" git push origin master

Bereitstellen Ihres Blogs auf Firebase

Bevor Sie Ihr Blog auf Firebase bereitstellen können, müssen Sie ein Projekt auf Firebase erstellen. Gehen Sie weiter zur Firebase-Konsole. Klicken Sie auf Projekt hinzufügen.

Geben Sie den Namen Ihres Projekts ein.

Aktivieren Sie Google Analytics, wenn Sie es in Ihrem Blog verwenden möchten.

Wenn Sie mit der Erstellung des Projekts fertig sind, kehren Sie zum Stammverzeichnis Ihres Blogs zurück und initialisieren Sie ein Firebase-Projekt im Blog.

 firebase init

Sie werden aufgefordert, einige Informationen einzugeben, wenn dieser Befehl ausgeführt wird.

Als nächstes bauen wir den Blog auf. Ein /public -Ordner wird erstellt und enthält Ihren erstellten Blog.

 hugo

Danach müssen wir nur noch den Blog bereitstellen.

 firebase deploy

Jetzt wird der Blog bereitgestellt. Überprüfen Sie es unter der in der Ausgabe angegebenen Hosting-URL.

Nächste Schritte

Der einzige Nachteil des Hostings auf Firebase ist die URL, die für Ihr gehostetes Projekt verwendet wird. Es kann unansehnlich und schwer zu merken sein. Ich würde Ihnen daher raten, eine Domain zu kaufen und diese für Ihr Blog einzurichten.

Plattformen von Drittanbietern sind nicht alle schlecht. Sie haben Unmengen von Lesern, die vielleicht an Ihren Texten interessiert sind, aber noch nicht auf Ihren Blog gestoßen sind. Sie können auf diesen Seiten Cross-Posts posten, um Ihre Arbeit einem großen Publikum vorzustellen, aber vergessen Sie nicht, auf Ihren eigenen Blog zurückzuverlinken. Fügen Sie den Link zu Ihrem Artikel in Ihrem Blog auf der Plattform, auf der Sie posten, als kanonische URL hinzu, damit er von einer Suchmaschine nicht als doppelter Inhalt angesehen wird und der SEO Ihrer Website schadet. Seiten wie Medium, dev.to und Hashnode unterstützen kanonische URLs.

Fazit

Das Schreiben in Ihrem eigenen technischen Blog kann Ihrer Karriere als Softwareentwickler enorme Vorteile bringen und Ihnen helfen, Ihre Fähigkeiten und Ihr Fachwissen zu entwickeln. Ich hoffe, dass dieses Tutorial Sie auf diese Reise gebracht oder Sie zumindest dazu ermutigt hat, Ihren eigenen Blog zu erstellen.