Як створити свій перший блог Hugo: практичний посібник

Hugo - чудовий інструмент для використання, якщо ви хочете створити свій блог.

Я сам використовую Hugo для свого блогу flaviocopes.com і використовую його вже більше двох років. У мене є кілька причин любити Гюго.

Перш за все, це просто , нудно , гнучко і швидко .

Основна причина полягає в тому, що це просто . Для початку не потрібно багато чому вчитися.

Ви пишете вміст у Markdown, форматі, який дозволяє мені використовувати свій улюблений редактор (Ведмідь) для написання публікацій.

Гюго нудний . Не зрозумійте мене неправильно, це дуже позитивна річ. Як розробник, у мене виникає спокуса постійно налаштовувати речі тут і там. Не існує вигадливих технологій, що лежать в основі Hugo. Він побудований з використанням Go, однієї з мов, яку я найбільше люблю, але це не означає, що я хочу зануритися у внутрішню частину Гюго та змінити його роботу.

І це не відображає ніяких крутих матеріалів або матеріалів наступного покоління, як це зазвичай роблять багато фреймворків JavaScript.

Отже, це нудно, що дає мені багато часу, щоб зробити те, що дійсно корисно під час роботи в блозі: писати вміст . Я зосереджуюсь на вмісті, а не на вмісті.

Тим не менш, Гюго є дуже гнучким . Я створив власний щоденник із темою з відкритим кодом, а згодом повністю змінив його. Іноді я хочу робити на своєму веб-сайті речі, які виходять за рамки простого блогу, і Гюго дозволяє мені створювати ці речі.

Нарешті, ще одна причина, по якій я люблю Гюго, полягає в тому, що він швидко . Чому? По-перше, це ядро ​​Go, яке, як відомо, є дуже швидкою мовою. А в екосистемі Go немає концепції залежності 100 мегабайт. Все зроблено якомога швидше. Плюс, Гюго не потрібно робити деякі вишукані речі, які необхідні при використанні вигадливих технологій. Це побічний продукт нудьги.

У всякому разі, досить слів.

Hugo приголомшливий, особливо якщо ви розробник і готові писати в Markdown. Нетехнологічні люди можуть просто відмовитись використовувати Markdown, і це цілком зрозуміло.

Крім того, ви повинні бути готовими до Git-орієнтованого робочого процесу, щоб все справді клацнуло.

Це процес написання блогу:

  • написати допис за допомогою Markdown,
  • потім внесіть зміни до сховища Git, найчастіше на GitHub,
  • а потім певна технологія клею відображає зміни на сервері, на якому розміщений сайт.

Розміщення веб-сайту Hugo

Блог Hugo є абсолютно статичним . Це означає, що вам не потрібно розміщувати власний сервер або використовувати для нього спеціальну службу.

Сторінки Netlify, Now та GitHub - це три чудові місця, де ви можете безкоштовно розмістити блог 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!