Как начать блог с помощью Hugo

Подробное руководство по созданию нового блога с использованием Hugo с нуля до развертывания

Hugo - отличный инструмент для создания блога.

Я сам использую Hugo в этом блоге уже более 2 лет. У меня есть несколько причин любить использовать Hugo.

этопросто,скучный,гибкий,быстрый.

Основная причина в том, что этопросто. Вам не так уж много нужно научиться, чтобы начать.

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

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

И в нем нет никаких интересных вещей или вещей нового поколения, как это обычно делают многие JavaScript-фреймворки.

Следовательно, это скучно, что дает мне много времени, чтобы делать то, что действительно полезно при работе над блогом:написание контента. Я сосредотачиваюсь на контенте, а не на контейнере контента.

Тем не менее, Хьюго довольно чертовскигибкий. Я начал свой блог с темой с открытым исходным кодом, но со временем полностью изменил ее. Иногда мне хочется делать на своем веб-сайте что-то, что выходит за рамки простого блога, и Хьюго позволяет мне создавать эти вещи.

Наконец, еще одна причина, по которой я люблю Хьюго, заключается в том, что этобыстрый. Почему? Во-первых, в его основе лежит Go, который, как известно, является очень быстрым языком. А в экосистеме Go нет понятия 100-мегабайтных зависимостей. Все сделано так, чтобы быть максимально быстрым. Кроме того, Хьюго не нужно делать какие-то причудливые вещи, которые необходимы при использовании модных технологий. Это побочный продукт скуки.

Во всяком случае, слов хватит.

Хьюго потрясающий, особенно если вы разработчик и хотите писать на Markdown. Нетехнические люди могут просто отказаться от использования Markdown, и это вполне понятно.

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

Что вы делаете, так это то, что вы пишете сообщение с помощью Markdown, затем фиксируете свои изменения в репозитории Git, чаще всего в GitHub, и некоторые технологии склеивания развертывают изменения на сервере, на котором размещен сайт.

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

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

Netlify, Now и GitHub Pages - 3 отличных места, где вы можете бесплатно разместить блог 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? ПроверитьРуководство по домашнему пивоварению

Для Windows и Linux проверьтеофициальное руководство по установке.

Создать сайт Hugo

После установки Hugo вы можете создать сайт Hugo, запустив

hugo new site myblog

Я предлагаю запустить это вwwwпапку в вашем домашнем каталоге, потому что команда создаст новыйmyblogпапка, в которой вы его запускаете.

Выберите тему

Теперь, прежде чем вы сможете начать, вам нужно выбрать тему. Я бы хотел, чтобы Хьюго включил тему по умолчанию, чтобы упростить задачу, но это не так.

Есть большой выборhttps://themes.gohugo.io. Моя личная рекомендация - начать сhttps://themes.gohugo.io/ghostwriter/и настройте позже.

Я также рекомендую избегатьgit cloneрабочий процесс, который они предлагают на этой странице, потому что вы наверняка будете настраивать тему в будущем, и я считаю, что лучше иметь единый репозиторий как для контента, так и для темы. Это упрощает развертывание.

Итак, идем вhttps://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 = “https://github.com/XXX”
twitter = “https://twitter.com/XXX”
email = “[email protected]”
opengraph = true
shareTwitter = true
dateFormat = “Mon, Jan 2, 2006”
[Permalinks]
post = “/:filename/”

Позже вы можете свободно изменить информацию в этом файле.

Теперь из командной строки запустите:

hugo serve

Открытьhttp://localhost:1313в вашем браузере, и вы сможете увидеть сайт вживую!

Это домашняя страница сайта.

Есть список постов, взятых изcontent/postпапка вашего сайта:

Щелкните первую под названием «Создание новой темы»:

Вы можете открыть файлcontent/post/creating-a-new-theme.mdизменить что-либо в посте.

Если вы сохраните, сайт автоматически обновится с новым контентом.

Это круто, правда?

Вы можете создать новый пост, создав новый.mdфайл, добавив к нему все, что угодно. При желании вы можете использовать инкрементные числа. Или используйте свидание.

Если что-то не так, как вы хотите, вы можете открытьthemes/ghostwriter/layoutsпапку и настройте ее.

Шаблон «пост» определен вthemes/ghostwriter/layouts/post/single.html:

Хьюго использует шаблоны Go. Синтаксис может быть довольно незнакомым, но веб-сайт Hugo очень хорошо объясняет их в этомВведение в шаблоны Go.

Однако не пытайтесь сейчас настраивать свой шаблон.

Если вы хотите настроить цвета, добавьте<style>тег с некоторым CSS вthemes/ghostwriter/layouts/partials/header.html.

Например, сделать ссылки черными:

<style>
.site-title a, .button-square {
    background: black;
}
a {
    color: black;
}
</style>

Вместо этого сосредоточьтесь на содержании.

Удалите существующие файлы и для начала напишите 2-3 сообщения.

Слишком легко попасть в ловушку, создавая вещи, идеально подходящие вам, но главное - это контент.

И чем чище ваш сайт, тем лучше для ваших читателей.

Теперь позвольте мне немного рассказать о развертывании.

Разверните сайт Hugo в Netlify

Я хочу продемонстрировать, как развернуть сайт Hugo в двух сервисах, которые мне нравятся больше всего: Netlify и Now.

Во-первых, я собираюсь создать репозиторий GitHub для размещения сайта.

Я открываю GitHub Desktop, приложение, которое использую каждый день и которое является частью моего рабочего процесса. Это самый простой способ использовать Git.

В меню «Файл» я нажал кнопку «Новый репозиторий»:

Такой же экран можно создать, просто перетащивmyblogпапку в приложение.

Я далmyblogимя в репозиторий и выбрал правильный путь для репо.

Процесс автоматически делает первую фиксацию:

Теперь мы можем нажать кнопку «Опубликовать репозиторий», чтобы отправить репо на GitHub:

Конечно, вы можете оставить репо приватным.

Как только репо будет в GitHub:

мы можем перейти на Netlify.

На панели инструментов Netlify я нажал кнопку «Новый сайт из Git»:

Нажал GitHub, разрешил Netlify доступ к моим частным репозиториям, затем я выбрал только что созданное репо:

Netlify автоматически идентифицировал его как репозиторий Hugo и автоматически ввел команду сборки:

Щелчок по «Развернуть сайт» запускает процесс развертывания:

На реальном сайте я бы установил собственный домен. Netlify имеет возможность приобрести домен через них, и это очень (ОЧЕНЬ) простой процесс. Я очень рекомендую это. Сайт может быть запущен всего через несколько минут после покупки домена.

Случайный.netlify.comподдомен привязан к сайту, в этом случаеpedantic-engelbart-500c9a.netlify.com, и HTTPS включается автоматически.

Таким образом, мы можем сразу увидеть сайт вживую:

Теперь, если вы попытаетесь что-то отредактировать в своей локальной версии, вы просто отправите изменения в GitHub, и Netlify автоматически обновит сайт. Вы можете увидеть, как он строит сайт на панели «Обзор» сайта:

Чтобы узнать больше о Netlify, я рекомендую вам проверить моиNetlify учебник.

Разверните сайт Hugo в Zeit Now

Zeit теперь называетсяVercel, и это руководство может быть устаревшим

Еще одна отличная платформа, которую вы можете использовать для своего блога Hugo, - Zeit Now.

После регистрации на панели управления вы нажимаете кнопкуНовый проекткнопка.

При первом развертывании из GitHub вам необходимо сначала установить приложение GitHub, нажав «Установить сейчас для GitHub»:

Это приведет вас к странице приложения GitHub, где вы можете авторизовать его для всех ваших репозиториев или только для некоторых:

Вернувшись, нажмите кнопку «Новый проект из GitHub»:

Выберите проект и нажмите «Импорт»:

А пока зайдите в основную папкуmysiteи добавитьpackage.jsonфайл с таким содержанием:

{
  "scripts": {
    "build": "hugo"
  }
}

Теперь это говорит о том, как развернуть сайт.

Когда вы вернетесь к панели управления, новое развертывание должно скоро начаться, и вы увидите, что сайт работает в реальном времени:

Обратите внимание, что в Now у вас есть 3 URL-адреса, которые вы можете использовать для доступа к сайту:

myblog.flaviocopes.now.sh
myblog-alpha-swart.now.sh
myblog-git-master.flaviocopes.now.sh

Вы можете выбрать тот, который вам больше нравится.

Кроме того, каждое развертывание также имеет свой собственный URL-адрес. В этом случае у меня былоmyblog-h8xks5jhn.now.shно он меняется с каждым развертыванием.

И, конечно, вы также можете добавить свой домен. Zeit предлагает отличный сервис для покупки вашего домена напрямую у них, доступный по адресуhttps://zeit.co/domains.

И если вы предпочитаете работать с командной строкой,nowтакже позволяет покупать домены оттуда.

Я очень рекомендую вам проверить мойZeit Now учебное пособие.