Kako stvoriti svoj prvi Hugo blog: Praktični vodič

Hugo je sjajan alat koji želite koristiti ako želite pokrenuti blog.

Hugo osobno koristim za svoj blog, flaviocopes.com, i koristim ga više od dvije godine. Imam nekoliko razloga za ljubav prema Hugu.

Prije svega, jednostavan je , dosadan , fleksibilan i brz .

Glavni razlog je taj što je jednostavan . Ne morate puno naučiti da biste započeli.

Sadržaj pišete u Markdown-u, formatu koji mi omogućuje da koristim svoj omiljeni editor (Bear) za pisanje postova.

Hugo je dosadan . Nemojte me krivo shvatiti, ovo je vrlo pozitivna stvar. Kao programer u iskušenju sam da tu i tamo stalno dotjerujem stvari. Ne postoji nikakva otmjena tehnologija koja stoji u osnovi Huga. Izgrađen je pomoću Goa, jednog od jezika koji najviše volim, ali to ne znači da želim zaroniti u Hugovu nutrinu i promijeniti način rada.

I ne pojavljuje nikakve cool stvari ili stvari sljedeće generacije kao što to čine mnogi JavaScript okviri.

Stoga je dosadno, što mi daje puno vremena za ono što je zaista korisno kada radim na blogu: pisanje sadržaja . Usredotočujem se na sadržaj, a ne na spremnik sadržaja.

To je reklo, Hugo je prilično fleksibilan . Pokrenuo sam vlastiti blog s temom otvorenog koda, a zatim sam ga s vremenom potpuno promijenio. Ponekad na svojoj web stranici želim raditi stvari koje su izvan dosega jednostavnog bloga, a Hugo mi dopušta da te stvari kreiram.

Napokon, još jedan razlog zbog kojeg volim Huga je taj što je brz . Zašto? Prvo, u srži je Go, za koji se zna da je vrlo brz jezik. A u ekosustavu Go ne postoji koncept ovisnosti od 100 megabajta. Stvari su napravljene da budu što brže. Osim toga, Hugo ne treba raditi neke otmjene stvari koje su potrebne kada se koristi otmjena tehnologija. Ovo je nusproizvod dosadnosti.

Svejedno, dosta s riječima.

Hugo je nevjerojatan, pogotovo ako ste programer i voljni ste pisati u Markdown-u. Netehnološki ljudi možda jednostavno odbiju koristiti Markdown i to je posve razumljivo.

Također, morate biti spremni na tijek rada usmjeren na Git kako biste stvari stvarno kliknuli.

Ovo je postupak za pisanje bloga:

  • napiši post koristeći Markdown,
  • zatim unesite svoje promjene u Git spremište, najčešće na GitHub,
  • a zatim neka tehnologija ljepila primjenjuje promjene na poslužitelju koji je domaćin web mjestu.

Hostiranje web stranice Hugo

Hugo blog je potpuno statičan . To znači da ne trebate hostirati vlastiti poslužitelj ili koristiti posebnu uslugu za njega.

Netlify, Now i GitHub Pages tri su sjajna mjesta na kojima možete besplatno ugostiti Hugo blog.

Jedini trošak je onaj koji morate podnijeti za ime domene. Ne mogu dovoljno naglasiti važnost posjedovanja vlastitog imena domene. Bez .github.ioili .netlify.comili .now.shweb stranice, molim te.

Moja vlastita Hugo web mjesta hostirana su na Netlifyu.

Odaberite domenu

Stavite svoj blog pod vlastitu domenu. Odabrati jedan. Upotrijebite svoje ime. I koristiti .comili .blog. Ne pokušavajte biti pametni pomoću lokalizirane domene - na primjer, nemojte je koristiti .io. .comsamo daje bolji dojam i može se ponovno koristiti za sve vaše buduće projekte, a ne samo za domaćinstvo vašeg bloga. Odabrala sam onu.

Oh, i ako imate staru domenu koja samo leži, samo je upotrijebite. Zašto? Što je vaša domena starija, to je bolje.

Napomena o poddomenama: svaka poddomena, za Google, različita je web lokacija. Dakle, ako je vaša domena flaviocopes.com, a vi kreirate svoj blog blog.flaviocopes.com, to je potpuno nova web stranica za Google i imat će vlastiti poredak odvojeno od glavne domene.

Moj je prijedlog da u potpunosti izbjegnete poddomene.

Instalirajte Hugo

Da biste instalirali Hugo na macOS, iz vašeg terminala

brew install hugo 

brewNaredba ne postoji na Mac? Provjerite vodič za Homebrew .

Za Windows i Linux provjerite službeni vodič za instalaciju.

Izradite Hugo stranicu

Nakon što je Hugo instaliran, možete stvoriti Hugo web stranicu pokretanjem

hugo new site myblog 

Predlažem da ovo pokrenete u wwwmapu u direktoriju Home, jer će naredba stvoriti novu myblogmapu u kojoj je pokrenete.

Odaberite temu

Prije nego što započnete, morate odabrati temu. Volio bih da je Hugo uključio zadanu temu kako bi stvari postale izravne, ali nije.

Puno je izbora na //themes.gohugo.io. Moja osobna preporuka je započeti s //themes.gohugo.io/ghostwriter/ i naknadno ga podesiti.

Također vam preporučujem da izbjegavate git clonetijek rada koji oni predlažu na toj stranici. Sigurno ćete dotjerivati ​​temu u budućnosti, a smatram da je najbolje imati jedno spremište i za sadržaj i za temu. Pojednostavljuje implementaciju.

Dakle, idite na //github.com/jbub/ghostwriter/archive/master.zip da biste preuzeli trenutnu verziju teme.

Zatim ga raspakirajte u themes/ghostwritermapu na novostvorenoj web lokaciji Hugo:

Primijetite da se u exampleSitemapi nalazi mapa themes/ghostwriter. Otvorite ga i otvorite njegovu contentpodmapu. U tu možete vidjeti page, posti projectpodmape.

Kopirajte pagei postu contentmapi web mjesta:

Konfiguracija

Podaci uzorka također pružaju config.tomldatoteku uzorka u themes/ghostwriter/exampleSite/config.toml. Ovo je Hugo konfiguracijska datoteka koja Hugu govori neke detalje o konfiguraciji bez potrebe za tvrdim kodiranjem podataka u temi.

Preporučujem da to ne kopirate, jer ima previše stvari, i umjesto toga upotrijebite ovo:

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/" 

Informacije u ovoj datoteci možete kasnije slobodno prilagoditi.

Sada iz naredbenog retka pokrenite:

hugo serve 

Otvorite //localhost:1313u pregledniku i trebali biste moći uživo vidjeti stranicu!

Ovo je početna stranica web mjesta.

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!