Подробное руководство по созданию нового блога с использованием 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 учебное пособие.
Дополнительные лабораторные уроки:
- Стек, который я использую для ведения этого блога
- 8 веских причин стать разработчиком программного обеспечения
- SEO для разработчиков, пишущих блоги
- Рецензия на книгу 4-часовая рабочая неделя
- Создайте образ жизни
- Создайте свою собственную платформу
- Какой продукт вы должны создать как инди-мейкер?
- Создайте свою собственную безопасность работы
- Разработчики, изучите маркетинг
- Свобода продуктового бизнеса
- Создание ценности
- Имейте цель для вашего бизнеса
- Идея ничего
- Ниша
- Удаленная работа для разработчиков программного обеспечения
- Соответствие продукта / рынка
- Лучшие подкасты для веб-разработчиков
- Зачем мне создавать список рассылки?
- Отключите время от денег
- Принцип дефицита применительно к программным продуктам
- Принцип социального доказательства
- Как я добавил темный режим на свой сайт
- Мои заметки о книге Deep Work
- Плюсы использования скучного стека
- Как оценить время программирования
- Стать независимым разработчиком
- Как научиться учиться
- Почему вопросы собеседования для программирования вакансий так сложны?
- Нужна ли мне степень программиста?
- Каждый может научиться программированию
- Как быть продуктивным
- Как получить реальное количество просмотров страниц статического сайта
- Вы сегодня заполнили ведро разработчика?
- Как я записываю свои видео
- Все программные проекты, которые я делал в прошлом
- Учебное чистилище с точки зрения создателя учебного пособия
- У каждого разработчика должен быть блог. Вот почему и как этого придерживаться
- Деловое мышление для разработчиков
- Как написать неподдерживаемый код
- Что такое синдром самозванца
- Как работать из дома, не сходя с ума
- Как я перестал беспокоиться и полюбил экосистему JavaScript
- Как я создаю прототип веб-страницы
- Вы должны быть худшим разработчиком в своей команде
- Как начать блог с помощью Hugo
- Напиши то, чего не знаешь
- Как заблокировать отвлекающие факторы с помощью uBlock Origin
- Кодирование - это искусство
- Я писал по одному сообщению в блоге каждый день в течение 2 лет. Вот 5 вещей, которые я узнал о SEO
- Как справиться с огнем
- О том, чтобы быть универсалом
- Дилемма разработчика
- My plan for being hired as a Go developer. In 2017
- Повышение производительности при использовании Mac и устройства iOS
- Как перейти от обучающих программ к собственному проекту
- Это мой маленький цифровой сад
- Как начать заниматься фрилансом в качестве разработчика
- Разделить путь к созданию бизнеса по разработке программных продуктов
- Подпапка против поддомена
- Как я использую расширение текста, чтобы сэкономить время
- Программное обеспечение - это сверхдержава
- я люблю книги
- Как я решил создать новое приложение для управления проектами