Как да създадете своя първи Hugo блог: Практическо ръководство

Hugo е чудесен инструмент за използване, ако искате да създадете блог.

Аз самият използвам Hugo за моя блог, flaviocopes.com и го използвам повече от две години. Имам няколко причини да обичам Хюго.

На първо място, той е прост , скучен , гъвкав и бърз .

Основната причина е, че е проста . Не е нужно много да се научите, за да започнете.

Пишете съдържание в Markdown, формат, който ми позволява да използвам любимия си редактор (Bear), за да пиша публикации.

Хюго е скучен . Не ме разбирайте погрешно, това е много положително нещо. Като разработчик се изкушавам да настройвам нещата тук и там през цялото време. В основата на Hugo няма изискана технология. Изграден е с помощта на Go, един от езиците, които обичам най-много, но това не означава, че искам да се потопя във вътрешността на Hugo и да променя начина му на работа.

И той не показва никакви страхотни неща или неща от следващо поколение, каквито са склонни да правят много JavaScript рамки.

Следователно е скучно, което ми дава много време да направя това, което е наистина полезно при работа в блог: писане на съдържание . Фокусирам се върху съдържанието, а не върху контейнера за съдържание.

Въпреки това, Уго е доста гъвкав . Започнах собствен блог с тема с отворен код, след което го промених напълно с течение на времето. Понякога искам да правя неща в уебсайта си, които са извън обхвата на един обикновен блог и Hugo ми позволява да създавам тези неща.

И накрая, друга причина, поради която обичам Хюго, е, че е бърз . Защо? Първо, в основата му е Go, което е известно, че е много бърз език. И в екосистемата Go няма концепция за зависимости от 100 мегабайта. Нещата са направени да бъдат възможно най-бързи. Плюс това, Hugo не е необходимо да прави някои от фантастичните неща, които са необходими при използването на фантастична технология. Това е страничен продукт от това да бъдеш скучен.

Както и да е, стига с думи.

Hugo е невероятен, особено ако сте разработчик и сте готови да пишете в Markdown. Нетехнологичните хора може просто да откажат да използват Markdown и това е напълно разбираемо.

Освен това трябва да сте подготвени за Git-ориентиран работен процес, за да накарате нещата наистина да щракат.

Това е процесът за писане на блог:

  • напишете публикация с помощта на Markdown,
  • след това ангажирайте промените си в Git хранилище, най-често на GitHub,
  • и след това някои лепилни технологии внедряват промените на сървъра, който хоства сайта.

Хостинг на уебсайт на Hugo

Блогът на Hugo е напълно статичен . Това означава, че не е нужно да хоствате собствен сървър или да използвате специална услуга за него.

Netlify, Now и GitHub Pages са три чудесни места, където можете да хоствате безплатно блог на Hugo.

Единствената цена е тази, която трябва да поддържате за името на домейна. Не мога да подчертая достатъчно важността да имате собствено име на домейн. Не .github.ioили .netlify.comили .now.shсайтове, моля.

Моите собствени сайтове на Hugo се хостват в Netlify.

Изберете домейн

Поставете вашия блог под вашия собствен домейн. Изберете един. Използвайте собственото си име. И използвайте .comили .blog. Не се опитвайте да бъдете умни, като използвате локализиран домейн - например не използвайте .io. .comпросто създава по-добро впечатление и е многократно за всички ваши бъдещи проекти, а не само за хостване на вашия блог. Аз избрах този.

О, а ако имате стар домейн, просто го използвайте. Защо? Колкото по-стар е вашият домейн, толкова по-добре.

Забележка за поддомейни: всеки поддомейн, за Google, е различен уебсайт. Така че, ако вашият домейн е flaviocopes.comи създадете своя блог blog.flaviocopes.com, това е напълно нов уебсайт за Google и той ще има собствено класиране, отделно от основния домейн.

Моето предложение е да избягвате напълно поддомейните.

Инсталирайте Hugo

За да инсталирате Hugo на macOS, от вашия терминал

brew install hugo 

В brewзаповедта не съществува на вашия Mac? Проверете ръководството Homebrew .

За Windows и Linux проверете официалното ръководство за инсталиране.

Създайте сайт на Hugo

След като Hugo е инсталиран, можете да създадете сайт на Hugo, като стартирате

hugo new site myblog 

Предлагам ви да стартирате това в wwwпапка във вашата домашна директория, защото командата ще създаде нова myblogпапка, където ще я стартирате.

Изберете тема

Сега, преди да започнете, трябва да изберете тема. Иска ми се Хуго да включва тема по подразбиране, за да направи нещата ясни, но не го прави.

Има много възможности за избор на //themes.gohugo.io. Моята лична препоръка е да започнете с //themes.gohugo.io/ghostwriter/ и да го промените по-късно.

Също така препоръчвам да избягвате git cloneработния процес, който те предлагат на тази страница. Със сигурност ще променяте темата в бъдеще и намирам за най-добре да имаме едно хранилище както за съдържание, така и за тема. Опростява внедряването.

Така че, отидете на //github.com/jbub/ghostwriter/archive/master.zip, за да изтеглите текущата версия на темата.

След това го разопаковайте в themes/ghostwriterпапката на новосъздадения уебсайт на Hugo:

Забележете, че в exampleSiteпапката има папка themes/ghostwriter. Отворете го и отворете contentподпапката му. В там, можете да видите page, postи projectподпапки.

Копирайте pageи postв contentпапката на сайта:

Конфигурацията

Примерните данни също предоставят примерен config.tomlфайл в themes/ghostwriter/exampleSite/config.toml. Това е конфигурационният файл на Hugo, който съобщава на Hugo някои подробности за конфигурацията, без да се налага да кодирате информация в темата.

Препоръчвам ви да не копирате това, защото има твърде много неща и вместо това използвайте това:

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

По-късно можете свободно да персонализирате информацията в този файл.

Сега от командния ред изпълнете:

hugo serve 

Отворете //localhost:1313в браузъра си и бихте могли да видите сайта на живо!

Това е началната страница на сайта.

Има списък с публикации, който се взема от content/postпапката на вашия уебсайт:

Щракнете върху първата, наречена „Създаване на нова тема“:

Можете да отворите файла, за content/post/creating-a-new-theme.mdда промените нещо в публикацията.

Ако запишете, уебсайтът автоматично ще се актуализира с новото съдържание.

Това е доста страхотно, нали?

Можете да създадете нова публикация, като създадете нов .mdфайл, като го добавите с префикс с всичко, което искате. Можете да използвате допълнителни числа, ако предпочитате. Или използвайте дата.

Ако нещо не изглежда така, както искате, можете да отворите themes/ghostwriter/layoutsпапката и да я промените.

Шаблонът „публикуване“ е дефиниран в themes/ghostwriter/layouts/post/single.html:

Hugo използва Go шаблони. Синтаксисът може да бъде доста непознат, но уебсайтът на Hugo върши много добра работа, като ги обяснява в това въведение в шаблоните на Go.

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!