So erstellen Sie Ihren ersten Hugo-Blog: ein praktischer Leitfaden

Hugo ist ein großartiges Tool, wenn Sie ein Blog starten möchten.

Ich benutze Hugo selbst für meinen Blog flaviocopes.com und benutze ihn seit mehr als zwei Jahren. Ich habe ein paar Gründe, Hugo zu lieben.

Erstens ist es einfach , langweilig , flexibel und schnell .

Der Hauptgrund ist, dass es einfach ist . Sie müssen nicht viel lernen, um loszulegen.

Sie schreiben Inhalte in Markdown, einem Format, mit dem ich meinen Lieblingseditor (Bär) zum Schreiben von Posts verwenden kann.

Hugo ist langweilig . Versteh mich nicht falsch, das ist eine sehr positive Sache. Als Entwickler bin ich versucht, hier und da ständig Dinge zu optimieren. Hugo liegt keine ausgefallene Technologie zugrunde. Es wurde mit Go erstellt, einer der Sprachen, die ich am meisten liebe, aber das bedeutet nicht, dass ich in die Interna von Hugo eintauchen und die Funktionsweise ändern möchte.

Und es taucht kein cooles Zeug oder Material der nächsten Generation auf, wie es viele JavaScript-Frameworks tun.

Daher ist es langweilig, was mir viel Zeit gibt, das zu tun, was bei der Arbeit an einem Blog wirklich nützlich ist: das Schreiben von Inhalten . Ich konzentriere mich auf den Inhalt, nicht auf den Inhaltscontainer.

Trotzdem ist Hugo verdammt flexibel . Ich habe mein eigenes Blog mit einem Open-Source-Thema gestartet und es dann im Laufe der Zeit komplett geändert. Manchmal möchte ich auf meiner Website Dinge tun, die außerhalb des Rahmens eines einfachen Blogs liegen, und Hugo ermöglicht mir, diese Dinge zu erstellen.

Ein weiterer Grund, warum ich Hugo liebe, ist, dass es schnell ist . Warum? Erstens hat es Go im Kern, das als sehr schnelle Sprache bekannt ist. Und im Go-Ökosystem gibt es kein Konzept für 100-Megabyte-Abhängigkeiten. Die Dinge sollen so schnell wie möglich sein. Außerdem muss Hugo nicht einige der ausgefallenen Dinge tun, die für die Verwendung ausgefallener Technologie erforderlich sind. Dies ist ein Nebenprodukt der Langeweile.

Wie auch immer, genug mit Worten.

Hugo ist unglaublich, besonders wenn Sie Entwickler sind und bereit sind, in Markdown zu schreiben. Nicht-Techniker lehnen es möglicherweise ab, Markdown zu verwenden, und das ist vollkommen verständlich.

Außerdem müssen Sie auf einen Git-zentrierten Workflow vorbereitet sein, damit die Dinge wirklich klicken.

Dies ist der Prozess zum Schreiben eines Blogs:

  • schreibe einen Beitrag mit Markdown,
  • Übertragen Sie dann Ihre Änderungen in ein Git-Repository, am häufigsten auf GitHub.
  • und dann stellt eine Klebetechnologie die Änderungen auf dem Server bereit, auf dem sich die Site befindet.

Hosting einer Hugo-Website

Ein Hugo-Blog ist völlig statisch . Dies bedeutet, dass Sie keinen eigenen Server hosten oder einen speziellen Dienst dafür verwenden müssen.

Netlify, Now und GitHub Pages sind drei großartige Orte, an denen Sie kostenlos einen Hugo-Blog hosten können.

Die einzigen Kosten sind die, die Sie für den Domainnamen tragen müssen. Ich kann nicht genug betonen, wie wichtig es ist, einen eigenen Domainnamen zu haben. Nein .github.iooder .netlify.comoder .now.shWebsites, bitte.

Meine eigenen Hugo-Sites werden auf Netlify gehostet.

Wählen Sie eine Domain

Stellen Sie Ihr Blog unter Ihre eigene Domain. Wähle eins. Verwenden Sie Ihren eigenen Namen. Und benutze .comoder .blog. Versuchen Sie nicht, mit einer lokalisierten Domain klug zu sein - verwenden Sie sie beispielsweise nicht .io. .comvermittelt nur einen besseren Eindruck und ist für alle zukünftigen Projekte wiederverwendbar, nicht nur zum Hosten Ihres Blogs. Ich habe das ausgewählt.

Oh, und wenn Sie eine alte Domain herumliegen haben, verwenden Sie diese einfach. Warum? Je älter Ihre Domain ist, desto besser.

Hinweis zu Subdomains: Jede Subdomain ist für Google eine andere Website. Wenn Ihre Domain also ist flaviocopes.comund Sie Ihr Blog in erstellen blog.flaviocopes.com, ist dies eine völlig neue Website für Google und hat ein eigenes Ranking, das von der Hauptdomain getrennt ist.

Mein Vorschlag ist, Subdomains vollständig zu vermeiden.

Installieren Sie Hugo

Um Hugo unter macOS zu installieren, führen Sie es von Ihrem Terminal aus

brew install hugo 

Der brewBefehl existiert nicht auf Ihrem Mac? Überprüfen Sie die Homebrew-Anleitung .

Lesen Sie für Windows und Linux die offizielle Installationsanleitung.

Erstellen Sie eine Hugo-Site

Sobald Hugo installiert ist, können Sie durch Ausführen eine Hugo-Site erstellen

hugo new site myblog 

Ich schlage vor, dass Sie dies in einem wwwOrdner in Ihrem Home-Verzeichnis ausführen , da der Befehl einen neuen myblogOrdner erstellt, in dem Sie ihn ausführen.

Wählen Sie ein Thema

Bevor Sie beginnen können, müssen Sie ein Thema auswählen. Ich wünschte, Hugo hätte ein Standardthema eingefügt, um die Dinge unkompliziert zu machen, aber das tut es nicht.

Auf //themes.gohugo.io gibt es viele Möglichkeiten. Meine persönliche Empfehlung ist, mit //themes.gohugo.io/ghostwriter/ zu beginnen und es später zu optimieren.

Ich empfehle außerdem, den git cloneauf dieser Seite vorgeschlagenen Workflow zu vermeiden . Sie werden das Thema sicherlich in Zukunft optimieren, und ich finde es am besten, ein einziges Repository für Inhalt und Thema zu haben. Dies vereinfacht die Bereitstellung.

Gehen Sie also zu //github.com/jbub/ghostwriter/archive/master.zip, um die aktuelle Version des Themas herunterzuladen.

Dann packen Sie es in den themes/ghostwriterOrdner auf Ihrer neu erstellten Hugo-Website aus:

Notice there is an exampleSite folder in the themes/ghostwriter. Open it, and open its content subfolder. In there, you can see the page, post and project subfolders.

Copy page and post in the content folder of the site:

The configuration

The sample data also provide a sample config.toml file in themes/ghostwriter/exampleSite/config.toml. This is the Hugo configuration file, which tells Hugo some details of the configuration without you having to hardcode information in the theme.

I recommend that you not copy that, because it has too many things, and instead use this:

baseurl = "/" title = "My blog" theme = "ghostwriter" [Params] mainSections = ["post"] intro = true headline = "My headline" description = "My description" github = "//github.com/XXX" twitter = "//twitter.com/XXX" email = "[email protected]" opengraph = true shareTwitter = true dateFormat = "Mon, Jan 2, 2006" [Permalinks] post = "/:filename/" 

You can freely customize the information in this file later.

Now from the command line, run:

hugo serve 

Open //localhost:1313 in your browser, and you should be able to see the site live!

This is the site home page.

There is a list of posts that is taken from the content/post folder of your website:

Click the first, called “Creating a New Theme”:

You can open the file content/post/creating-a-new-theme.md to change anything in the post.

If you save, the website will automatically update with the new content.

This is pretty awesome, right?

You can create a new post by creating a new .md file, prefixing it with anything you want. You can use incremental numbers, if you prefer. Or use a date.

If something doesn't look the way you want, you can open the themes/ghostwriter/layouts folder and tweak it.

The “post” template is defined in themes/ghostwriter/layouts/post/single.html:

Hugo uses Go templates. The syntax can be pretty unfamiliar but the Hugo website does a very good job at explaining them in this Go templates introduction.

However, try to not look at customizing your template now.

If you want to tweak the colors, add a tag with some CSS in the themes/ghostwriter/layouts/partials/header.html.

For example, make links black:

 .site-title a, .button-square { background: black; } a { color: black; }  

Focus on the content instead.

Remove the existing files, and write 2-3 posts to start with.

It’s too easy to get trapped in making things perfectly the way you want, but the important thing is the content.

And the cleaner your site is, the better for your readers.

Let me now write a little about deployment.

Deploy the Hugo site to Netlify

I want to showcase how to deploy a Hugo site in 2 of the services I enjoy the most: Netlify and Now.

First, I’m going to create a GitHub repository to host the site.

I open GitHub Desktop, an app I use every day and that is part of my workflow. It’s the simplest way to use Git.

From the File menu, I pressed the “New Repository” option:

The same screen can be generated by simply dragging the myblog folder into the app.

I gave the myblog name to the repository, and picked the correct path for the repo.

The process automatically makes the first commit:

Now we can click the “Publish repository” button to push the repo to GitHub:

You can keep the repo private, of course.

Once the repo is in GitHub:

we can move to Netlify.

From my Netlify dashboard I pressed the “New site from Git” button:

I pressed GitHub, authorized Netlify to access my private repositories, then I picked the repo I just created:

Netlify automatically identified it as a Hugo repo, and entered the build command automatically:

Clicking “Deploy site” starts the deploy process:

On a real site, I would set up a custom domain. Netlify has the option to purchase a domain through them, and it’s a very (VERY) straightforward process. I highly recommend it. The site can be live in just a few minutes after purchasing the domain.

A random .netlify.com subdomain is attached to the site, in this case pedantic-engelbart-500c9a.netlify.com, and HTTPS is automatically enabled.

We can therefore immediately see the site live:

Now if you try to edit something in your local version, you just push the changes to GitHub, and Netlify will automatically update the site. You can see it building the site in the “Overview” panel of the site:

To learn more about Netlify I recommend that you check out my Netlify tutorial.

Deploy the Hugo site to Zeit Now

Another awesome platform you can use for your Hugo blog is Zeit Now.

Once you sign up, from the dashboard you press the New Project button.

The first time you deploy from GitHub you have to first install the GitHub app by clicking “Install Now For GitHub”:

This brings you to the GitHub page for the app, where you can authorize it for all your repos, or just for some:

Once you get back, click the “New Project From GitHub” button:

Select the project and click “Import”:

In the meantime, go into the main folder of mysite and add a package.json file with this content:

{ "scripts": { "build": "hugo" } } 

This tells Now how to deploy the site.

When you get back to the dashboard, the new deploy should start soon, and you will see the site working live:

Note that in Now you have three URLs you can use to access the site:

  • myblog.flaviocopes.now.sh
  • myblog-alpha-swart.now.sh
  • myblog-git-master.flaviocopes.now.sh

You can choose the one you prefer.

Plus, each deployment has its own URL, too. In this case I had myblog-h8xks5jhn.now.sh but it changes with every deployment.

And of course you can add your domain, too. Zeit has a great service to purchase your domain directly from them, available at //zeit.co/domains.

And if you prefer working with the command line, the now command lets you purchase domains from there, as well.

I highly recommend that you check out my Zeit Now tutorial to learn more about this platform.

Wrapping up

I hope this tutorial can give you a little guidance if you are planning to start a new blog. Hugo is my favorite platform, but it's not unique of course. Ghost (the platform powering freeCodeCamp) is great too, along with WordPress of course, and Gatsby.

Pick your favorite. In my opinion the platform does not matter as much as your content does. So, choose one and start writing!