Az első Hugo blog létrehozása: gyakorlati útmutató

A Hugo egy nagyszerű eszköz, amellyel blogot akar indítani.

Magam Hugót használom a blogomhoz, a flaviocopes.com-hoz, és több mint két éve használom. Van néhány okom arra, hogy szeressem Hugót.

Először is egyszerű , unalmas , rugalmas és gyors .

A fő ok az, hogy egyszerű . Az induláshoz nem sokat kell megtanulnia.

Tartalmat Markdown-ban írsz, olyan formátumban, amely lehetővé teszi számomra, hogy kedvenc szerkesztőmet (Medve) használjam bejegyzések írására.

Hugo unalmas . Félreértés ne essék, ez nagyon pozitív dolog. Fejlesztőként csábítok, hogy állandóan ide-oda csípjek dolgokat. A Hugo mögött nem található divatos technológia. A Go használatával épült, az egyik nyelv, amelyet a legjobban szeretek, de ez nem azt jelenti, hogy el akarok merülni a Hugo belsejében és változtatni a működésén.

És nem fed fel semmilyen klassz vagy újgenerációs dolgot, mint sok JavaScript-keret általában.

Ezért unalmas, ami sok időt ad arra, hogy megcsináljam azt, ami valóban hasznos egy blogon dolgozva: tartalom írása . A tartalomra koncentrálok, nem a tartalomtárolóra.

Ennek ellenére Hugo eléggé rugalmas . Saját blogot indítottam nyílt forráskódú témával, majd az idő múlásával teljesen megváltoztattam. Néha olyan dolgokat akarok csinálni a weboldalamon, amelyek nem tartoznak egy egyszerű blog hatókörébe, és Hugo lehetővé teszi számomra, hogy ezeket létrehozzam.

Végül egy másik ok, amiért szeretem Hugót, az, hogy gyors . Miért? Először is a Go van a középpontban, amely köztudottan nagyon gyors nyelv. És a Go ökoszisztémában nincs fogalma a 100 megabájtos függőségeknek. A dolgok a lehető leggyorsabbak. Ráadásul Hugónak nem kell megtennie azokat a divatos dolgokat, amelyekre szükség van a divatos technológia használatakor. Ez az unalom mellékterméke.

Egyébként elég a szavakkal.

Hugo elképesztő, főleg ha fejlesztő vagy és hajlandó vagy a Markdown-ba írni. Lehet, hogy a nem tech emberek egyszerűen megtagadják a Markdown használatát, és ez teljesen érthető.

Fel kell készülnie egy Git-központú munkafolyamatra is, hogy a dolgok valóban kattanjanak.

Ez a blogírás folyamata:

  • írj egy bejegyzést a Markdown segítségével,
  • majd végezze el a változtatásokat egy Git-adattáron, leggyakrabban a GitHub-on,
  • majd valamilyen ragasztótechnológia telepíti a változtatásokat a webhelyet üzemeltető kiszolgálón.

Hugo weboldal üzemeltetése

A Hugo blog teljesen statikus . Ez azt jelenti, hogy nem kell saját szervert üzemeltetnie, vagy speciális szolgáltatást kell használnia hozzá.

A Netlify, a Now és a GitHub Pages három nagyszerű hely, ahol ingyenesen tárolhat egy Hugo blogot.

Az egyetlen költség a domainnév fenntartása. Nem tudom eléggé hangsúlyozni a saját domainnév fontosságát. Nem .github.iovagy .netlify.comvagy .now.sholdalakat, kérem.

Saját Hugo-webhelyeimet a Netlify tárolja.

Válasszon egy domaint

Helyezze blogját saját domainje alá. Válassz egyet. Használja a saját nevét. És használja a .comvagy .blog. Ne próbáljon okoskodni egy lokalizált domain használatával - például ne használja .io. .comcsak jobb benyomást kelt, és újrafelhasználható minden jövőbeni projektjéhez, nemcsak a blog tárolásához. Ezt választottam.

Ja és ha van egy régi domain, csak használja ezt. Miért? Minél régebbi a domainje, annál jobb.

Megjegyzés az aldomainekről: a Google-nak minden aldomain más és más webhely. Tehát, ha a domainje van flaviocopes.com, és a blogot itt hozza létre blog.flaviocopes.com, akkor ez egy teljesen új webhely a Google számára, és külön rangsor lesz a fő domaintól.

Javaslatom az aldomainek teljes elkerülése.

Telepítse Hugót

A Hugo telepítéséhez a macOS-ra a terminál futtatásával

brew install hugo 

A brewparancs nem létezik a Mac számítógépén? Ellenőrizze a Homebrew útmutatót .

Windows és Linux esetén ellenőrizze a hivatalos telepítési útmutatót.

Hozzon létre egy Hugo webhelyet

A Hugo telepítése után létrehozhat egy Hugo webhelyet futtatással

hugo new site myblog 

Javaslom, hogy futtassa ezt egy wwwmappába a saját könyvtárában, mert a parancs új myblogmappát hoz létre, ahol futtatja.

Válasszon témát

Mielőtt elkezdené, ki kell választania egy témát. Szeretném, ha Hugo egy alapértelmezett témát tartalmazna a dolgok egyszerűsítése érdekében, de nem így van.

Nagyon sok választási lehetőség van a //themes.gohugo.io oldalon. Személyes javaslatom, hogy a //themes.gohugo.io/ghostwriter/ címmel kezdjem, és később módosítsam.

Azt is javasoljuk, hogy kerülje el az git cloneadott oldalon javasolt munkafolyamatot. A jövőben biztosan módosítja a témát, és a legjobbnak tartom, ha egyetlen adattár áll rendelkezésre mind a tartalomhoz, mind a témához. Leegyszerűsíti a telepítést.

Tehát keresse fel a //github.com/jbub/ghostwriter/archive/master.zip webhelyet a téma aktuális verziójának letöltéséhez.

Ezután csomagolja ki themes/ghostwriteraz újonnan létrehozott Hugo webhely mappájába:

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!