Sådan oprettes din første Hugo-blog: en praktisk guide

Hugo er et godt værktøj at bruge, hvis du vil starte en blog.

Jeg bruger Hugo selv til min blog, flaviocopes.com, og jeg har brugt den i mere end to år. Jeg har et par grunde til at elske Hugo.

Først og fremmest er det enkelt , kedeligt , fleksibelt og hurtigt .

Hovedårsagen er, at det er simpelt . Der er ikke meget, du skal lære at komme i gang.

Du skriver indhold i Markdown, et format, der lader mig bruge min yndlingsredaktør (Bear) til at skrive indlæg.

Hugo er kedelig . Gør mig ikke forkert, det er en meget positiv ting. Som udvikler er jeg fristet til at tilpasse tingene her og der hele tiden. Der er ingen fancy teknologi bag Hugo. Det er bygget ved hjælp af Go, et af de sprog, jeg elsker mest, men det betyder ikke, at jeg vil dykke ned i Hugo's indre og ændre, hvordan det fungerer.

Og det overflader ikke nogen seje eller næste generations ting som mange JavaScript-rammer har tendens til at gøre.

Derfor er det kedeligt, hvilket giver mig meget tid til at gøre det, der virkelig er nyttigt, når jeg arbejder på en blog: at skrive indhold . Jeg fokuserer på indholdet, ikke på indholdsbeholderen.

Når det er sagt, er Hugo temmelig darn fleksibel . Jeg startede min egen blog med et open source-tema og ændrede det derefter over tid. Nogle gange vil jeg gøre ting på min hjemmeside, der er uden for rækkevidden af ​​en simpel blog, og Hugo giver mig mulighed for at oprette disse ting.

Endelig er en anden grund til, at jeg elsker Hugo, at det er hurtigt . Hvorfor? For det første har det Go i kernen, hvilket er kendt for at være et meget hurtigt sprog. Og i Go-økosystemet er der intet koncept for 100 megabyte afhængigheder. Tingene er lavet til at være så hurtige som muligt. Plus, Hugo behøver ikke at lave nogle af de smarte ting, der er nødvendige, når du bruger fancy teknologi. Dette er et biprodukt af at være kedeligt.

Alligevel nok med ord.

Hugo er fantastisk, især hvis du er en udvikler, og du er villig til at skrive i Markdown. Ikke-teknologiske mennesker nægter måske bare at bruge Markdown, og det er helt forståeligt.

Du skal også være forberedt på en Git-centreret arbejdsgang for at få tingene til at klikke.

Dette er processen til at skrive en blog:

  • skriv et indlæg ved hjælp af Markdown,
  • Foretag derefter dine ændringer i et Git-arkiv, oftest på GitHub,
  • og derefter implementerer nogle limteknologier ændringerne på den server, der er vært for webstedet.

Hosting af et Hugo-websted

En Hugo-blog er helt statisk . Dette betyder, at du ikke behøver at være vært for din egen server eller bruge en særlig tjeneste til den.

Netlify, Now og GitHub Pages er tre fantastiske steder, hvor du kan være vært for en Hugo-blog gratis.

Den eneste pris er den, du skal opretholde for domænenavnet. Jeg kan ikke understrege nok vigtigheden af ​​at have dit eget domænenavn. Nej .github.ioeller .netlify.comeller .now.shwebsteder, tak.

Mine egne Hugo-websteder er hostet på Netlify.

Vælg et domæne

Sæt din blog under dit eget domæne. Vælg en. Brug dit eget navn. Og brug .comeller .blog. Forsøg ikke at være klog ved at bruge et lokaliseret domæne - brug for eksempel ikke .io. .comgiver bare et bedre indtryk, og det kan genbruges til alle dine fremtidige projekter, ikke kun for at være vært for din blog. Jeg valgte den ene.

Åh, og hvis du har et gammelt domæne, skal du bare bruge det. Hvorfor? Jo ældre dit domæne er, jo bedre.

Bemærk om underdomæner: hvert underdomæne til Google er et andet websted. Så hvis dit domæne er flaviocopes.com, og du opretter din blog i blog.flaviocopes.com, så er det et helt nyt websted for Google, og det vil have sin egen placering adskilt fra hoveddomænet.

Mit forslag er at undgå subdomæner fuldstændigt.

Installer Hugo

For at installere Hugo på macOS fra din terminalkørsel

brew install hugo 

Den brewkommando findes ikke på din Mac? Tjek Homebrew-guiden .

For Windows og Linux, se den officielle installationsvejledning.

Opret et Hugo-sted

Når Hugo er installeret, kan du oprette et Hugo-sted ved at køre

hugo new site myblog 

Jeg foreslår, at du kører dette i en wwwmappe i din hjemmekatalog, fordi kommandoen opretter en ny myblogmappe, hvor du kører den.

Vælg et tema

Nu før du kan starte, skal du vælge et tema. Jeg ville ønske, at Hugo inkluderede et standardtema for at gøre tingene ligetil, men det gør det ikke.

Der er mange valg på //themes.gohugo.io. Min personlige anbefaling er at starte med //themes.gohugo.io/ghostwriter/ og tilpasse det senere.

Jeg anbefaler også, at du undgår den git clonearbejdsgang, de foreslår på denne side. Du vil helt sikkert tilpasse temaet i fremtiden, og jeg finder det bedst at have et enkelt arkiv til både indhold og tema. Det forenkler implementeringen.

Så gå til //github.com/jbub/ghostwriter/archive/master.zip for at downloade den aktuelle version af temaet.

Pak det derefter ud i themes/ghostwritermappen på dit nyoprettede Hugo-websted:

Bemærk, at der er en exampleSitemappe i themes/ghostwriter. Åbn den, og åbn contentundermappen. Derinde kan du se page, postog projectundermapper.

Kopiér pageog posti webstedets contentmappe:

Konfigurationen

Eksempeldataene giver også en prøvefil config.tomli themes/ghostwriter/exampleSite/config.toml. Dette er Hugo-konfigurationsfilen, som fortæller Hugo nogle detaljer i konfigurationen uden at du behøver at hardcode-oplysninger i temaet.

Jeg anbefaler, at du ikke kopierer det, fordi det har for mange ting, og i stedet bruger dette:

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

Du kan frit tilpasse oplysningerne i denne fil senere.

Kør nu fra kommandolinjen:

hugo serve 

Åbn //localhost:1313i din browser, og du skal kunne se siden live!

Dette er hjemmesidens startside.

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.

Vælg din favorit. Efter min mening betyder platformen ikke så meget som dit indhold gør. Så vælg en og start med at skrive!