Ensimmäisen Hugo-blogin luominen: käytännön opas

Hugo on loistava työkalu käytettäväksi, jos haluat perustaa blogin.

Käytän itse Hugoa blogissani, flaviocopes.com, ja olen käyttänyt sitä yli kaksi vuotta. Minulla on muutama syy rakastaa Hugoa.

Ensinnäkin se on yksinkertainen , tylsä , joustava ja nopea .

Tärkein syy on, että se on yksinkertainen . Aloittamiseen ei ole paljon opittavaa.

Kirjoitat sisältöä Markdownissa, muodossa, jonka avulla kirjoitan viestejä suosikkieditorissani (Bear).

Hugo on tylsää . Älä ymmärrä minua väärin, tämä on erittäin myönteinen asia. Kehittäjänä minulla on houkutus säätää asioita täällä ja siellä koko ajan. Hugon taustalla ei ole hienoa tekniikkaa. Se on rakennettu Go: lla, yhdellä kielistä, jota rakastan eniten, mutta se ei tarkoita, että haluan sukeltaa Hugon sisäosiin ja muuttaa sen toimintaa.

Ja siinä ei ole mitään hienoja tai seuraavan sukupolven juttuja, kuten monet JavaScript-kehykset yleensä tekevät.

Siksi se on tylsää, mikä antaa minulle paljon aikaa tehdä sitä, mikä on todella hyödyllistä työskennellessäni blogissa: kirjoittamalla sisältöä . Keskityn sisältöön, en sisältösäiliöön.

Hugo on kuitenkin melko pirullinen joustava . Aloitin oman blogini avoimen lähdekoodin teemalla ja muutin sitten sitä kokonaan ajan myötä. Joskus haluan tehdä verkkosivustollani asioita, jotka eivät kuulu yksinkertaisen blogin piiriin, ja Hugo antaa minun luoda nämä asiat.

Lopuksi, toinen syy rakastan Hugoa on se, että se on nopea . Miksi? Ensinnäkin sen ytimessä on Go, jonka tiedetään olevan erittäin nopea kieli. Go-ekosysteemissä ei ole käsitystä 100 megatavun riippuvuuksista. Asiat tehdään niin nopeasti kuin mahdollista. Lisäksi Hugon ei tarvitse tehdä joitain hienoja juttuja, joita tarvitaan käytettäessä hienoa tekniikkaa. Tämä on tylsyyden sivutuote.

Joka tapauksessa, riittää sanoilla.

Hugo on hämmästyttävä, varsinkin jos olet kehittäjä ja olet valmis kirjoittamaan Markdownissa. Ei-tekniset ihmiset saattavat vain kieltäytyä käyttämästä Markdownia, ja se on täysin ymmärrettävää.

Lisäksi sinun on oltava valmis Git-keskitettyyn työnkulkuun, jotta asiat todella napsahtavat.

Tämä on blogin kirjoittamisen prosessi:

  • kirjoita viesti käyttämällä Markdownia,
  • tee sitten muutokset Git-arkistoon, yleisimmin GitHubissa,
  • ja sitten jokin liimatekniikka ottaa muutokset käyttöön palvelinta palvelevassa palvelimessa.

Hugo-verkkosivuston ylläpito

Hugo-blogi on täysin staattinen . Tämä tarkoittaa, että sinun ei tarvitse isännöidä omaa palvelinta tai käyttää siihen erityispalvelua.

Netlify, Now ja GitHub Pages ovat kolme upeaa paikkaa, joissa voit isännöidä Hugo-blogia ilmaiseksi.

Ainoa hinta on se, jonka sinun on kannettava verkkotunnukselle. En voi tarpeeksi korostaa oman verkkotunnuksesi merkitystä. Ei .github.iotai .netlify.comtai .now.shsivustoja, kiitos.

Omat Hugo-sivustot ovat isännöi Netlifyssä.

Valitse verkkotunnus

Sijoita blogisi oman verkkotunnuksesi alle. Valitse yksi. Käytä omaa nimeäsi. Ja käytä .comtai .blog. Älä yritä olla fiksu käyttämällä lokalisoitua verkkotunnusta - esimerkiksi älä käytä .io. .comantaa vain paremman vaikutelman ja se on uudelleenkäytettävissä kaikille tuleville projekteillesi, ei vain blogisi ylläpitoon. Valitsin sen.

Voi ja jos sinulla on vanha verkkotunnus, käytä vain sitä. Miksi? Mitä vanhempi verkkotunnuksesi on, sitä parempi.

Huomautus aliverkkotunnuksista: jokainen Googlen aliverkkotunnus on eri verkkosivusto. Joten jos verkkotunnuksesi on flaviocopes.comja luot blogisi blog.flaviocopes.com, se on Googlelle täysin uusi verkkosivusto, ja sillä on oma sijoitus erillään pääverkkotunnuksesta.

Ehdotan, että vältetään aliverkkotunnukset kokonaan.

Asenna Hugo

Jos haluat asentaa Hugon macOS: iin, suorita pääte

brew install hugo 

brewKomento ei löydy Macin? Tarkista Homebrew-opas .

Windows ja Linux: tarkista virallinen asennusopas.

Luo Hugo-sivusto

Kun Hugo on asennettu, voit luoda Hugo-sivuston suorittamalla

hugo new site myblog 

Ehdotan, että suoritat tämän wwwkotihakemiston kansioon, koska komento luo uuden myblogkansion sinne, missä suoritat sen.

Valitse teema

Nyt ennen aloittamista sinun on valittava teema. Toivon, että Hugo sisälsi oletusteeman, jotta asiat olisivat suoraviivaisia, mutta se ei ole.

Osoitteessa //themes.gohugo.io on paljon valintoja. Henkilökohtainen suositukseni on aloittaa osoitteesta //themes.gohugo.io/ghostwriter/ ja säätää sitä myöhemmin.

Suosittelen myös, että vältät git clonetyönkulkua, jota he ehdottavat kyseisellä sivulla. Säädät varmasti teemaa tulevaisuudessa, ja mielestäni on parasta, että sinulla on yksi arkisto sekä sisällölle että teemalla. Se yksinkertaistaa käyttöönottoa.

Joten siirry osoitteeseen //github.com/jbub/ghostwriter/archive/master.zip ja lataa teeman nykyinen versio.

Pura se themes/ghostwritersitten uuden Hugo-verkkosivustosi kansioon:

Huomaa exampleSite, että themes/ghostwriter. Avaa se ja avaa sen contentalikansio. Siellä, näet page, postja projectalikansiot.

Kopioi pageja postettä contentkansion sivuston:

Kokoonpano

Näytteen avulla voidaan myös näytteen config.tomltiedosto themes/ghostwriter/exampleSite/config.toml. Tämä on Hugo-määritystiedosto, joka kertoo Hugolle joitain yksityiskohtia kokoonpanosta ilman, että sinun tarvitsee koodata tietoja teemaan.

Suosittelen, ettet kopioi sitä, koska siinä on liikaa asioita, ja käytä sen sijaan tätä:

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

Voit muokata tämän tiedoston tietoja vapaasti myöhemmin.

Suorita nyt komentoriviltä:

hugo serve 

Avaa //localhost:1313selaimessasi, ja sinun pitäisi pystyä näkemään sivusto livenä!

Tämä on sivuston kotisivu.

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.

Valitse suosikkisi. Mielestäni alustalla ei ole väliä yhtä paljon kuin sisällölläsi. Joten, valitse yksi ja aloita kirjoittaminen!