Hugo - интересный генератор статических сайтов. Он эффективный, лаконичный и мощный. Я покажу вам приятный путь создания веб-сайта с нуля.

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

Фон

Недавно я изучал IPFS и обнаружил, что этот материал идеально подходит для размещения статических веб-сайтов, поскольку он ориентирован на контент, распределен, защищен от несанкционированного доступа и устойчив к цензуре.

При этом почему бы не создать блог на IPFS для развлечения? Поэтому я решил записать процесс изучения IPFS и опубликовать заметки об исследовании на веб-сайте вместе с Хьюго.

Что такое Хьюго

Hugo - генератор статических сайтов. Он написан на Голанге и работает очень эффективно. Он утверждает, что является самым быстрым инструментом в мире для создания веб-сайтов.

Я не уверен, самый быстрый он или нет, но он без зависимостей, прост в установке, доступен для мультиплатформенности. Этих функций достаточно, чтобы меня заинтересовать.

По сравнению с Hugo, Jekyll написан на Ruby, его немного сложнее установить / поддерживать и менее эффективно запускать.

Не говоря уже о Hexo из сообщества NodeJS - да, я предвзято отношусь к NodeJS. По возможности, я предпочитаю держаться от этого подальше ».

Быстрый старт

Теперь инструмент выбран, приступим.

Создайте репозиторий исходного кода

Сначала создайте репозиторий на Github для отслеживания моего веб-сайта, а затем клонируйте этот пустой репозиторий. (вам нужно заменить URL своим собственным)

git clone https://github.com/dche423/blog.git

Установите Hugo и инициализируйте сайт

Следуйте официальной документации Hugo, процесс довольно простой.

В этой статье в качестве примера используется macOS, другие платформы не сильно отличаются.

Сначала установите с помощью Homebrew.

brew install hugo

Запустите hugo, чтобы убедиться, что установка прошла успешно.

$ hugo version
Hugo Static Site Generator v0.69.0/extended darwin/amd64 BuildDate:

Создайте новый сайт под названием «блог».

$ hugo new site blog
Error: /dche423/blog already exists and is not empty. see — force.
$ hugo new site blog --force
Congratulations! Your new Hugo site is created in /dche423/blog.
…

Если целевая папка существует и не пуста, Hugo не будет выполнять действие по созданию. Действие будет успешным, только если мы укажем параметр force

Затем мне нужна тема для веб-сайта, и я решаю использовать Ananke, который аналогичен официальному руководству. Конечно, вы можете выбрать другие темы по своему вкусу. В Hugo Theme Center есть много других вариантов.

cd blog
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml

Репозиторий git темы добавляется в проект в качестве подмодуля, чтобы его можно было постоянно обновлять. После клонирования темы отредактируйте файл конфигурации config.toml, чтобы включить эту тему для веб-сайта.

Создать статью

Хотя также возможно создать файл вручную в соответствующем каталоге, проще использовать команду hugo, которая автоматически генерирует файл и заполняет соответствующие метаданные в формате Front Matter.

hugo new posts/build-website-with-hugo.md

Ниже представлено содержимое созданного файла Markdown.

 —--
title: “Build Website With Hugo”
date: 2020–05–27T16:02:20+08:00
draft: true
 —--

Два атрибута title и date интуитивно понятны и не объясняются.

Атрибут draft указывает на то, что статья находится в состоянии. HTML-страницы не будут созданы в действии сборки по умолчанию. Когда контент уже готов, вы можете изменить значение этого атрибута на false

Запустить Hugo Dev Server

Вот как запустить сервер Hugo dev для доступа к веб-сайту локально.

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

Затем посетите http: // localhost: 1313, чтобы открыть домашнюю страницу веб-сайта (хотя пока это почти пустая страница).

Примечание. 1313 - это порт по умолчанию для сервера Hugo, если этот порт уже занят другой службой, Hugo автоматически переключится на другой доступный порт.

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

На данный момент существует базовая структура веб-сайта.

Настройте свой сайт

Несмотря на то, что структура веб-сайта доступна, некоторую базовую информацию необходимо дополнительно настроить и настроить.

Настройте основную информацию

Сначала посмотрите на config.toml файл:

baseURL = "https://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ananke"

Последняя строчка была добавлена, когда тема была только что установлена.

И title, и baseURL необходимо соответствующим образом изменить. Обновленный контент выглядит так:

baseURL = "/"
languageCode = "en-us"
title = "Che Dan"
theme = "ananke"

Обратите внимание, что мы не изменили baseURL на адрес в определенном домене (например, https://www.chedan.io/), поскольку мы хотим, чтобы одни и те же файлы HTML обслуживали как традиционные адреса домена, так и хорошо работали в распределенные веб-адреса. В следующей статье этот компромисс будет объяснен более подробно.

Выдержка из корректировочной статьи

Домашняя страница сайта представляет собой список статей, каждый элемент списка содержит название статьи и отрывок.

По умолчанию Хьюго выбирает первые 70 слов статьи как отрывки. Для восточноазиатских языков необходимо включить атрибут hasCJKLanguage в config.toml, чтобы правильно подсчитывать слова.

Число 70 можно изменить с помощью атрибута summaryLength в config.toml.

Также можно управлять поведением HTML в отрывках с помощью функций plainify и safeHTML. Для этого вам необходимо обновить шаблон веб-сайта, для получения подробной информации посетите документацию по шаблону и документацию по функциям.

В дополнение к автоматическому отрывку, Hugo также поддерживает два ручных способа.

  1. вставить <!--more--> разделитель. Текст перед разделителем становится отрывком.
  2. предоставить автономный отрывок с использованием метаданных Front Matter. Преимущества этого подхода очевидны, отрывок не привязан напрямую к контенту и очень гибок, поскольку предоставляется автором, и поддерживается любой формат HTML. Обратной стороной является увеличенная ручная нагрузка. Чтобы использовать этот подход, вам нужно добавить summary метаданные в раздел статьи.

Если для статьи задано более одного отрывка, система выберет в порядке приоритета:

Delimiter > Front Matter > Automatical Excerpt

Дополнительные настройки, связанные с отрывком, см. Здесь.

О выделении кода

Hugo имеет встроенную поддержку подсветки синтаксиса блока кода.

Он отлично работает из коробки и обеспечивает дополнительный контроль с помощью Highlight Shortcode. (Для отображения номера строки, выделения нескольких строк и т. Д.)

Показать содержание (TOC)

Чтобы отобразить оглавление, добавьте toc в Front Matter.

toc: ture

Следует отметить, что Hugo по умолчанию отображает только второстепенные и третичные заголовки в оглавлении, что эквивалентно следующим элементам, настроенным в config.toml.

[markup]
  [markup.tableOfContents]
    endLevel = 3
    startLevel = 2

Если вы хотите изменить его, вы можете соответствующим образом отрегулировать числа. Однако, согласно официальному документу, TOC не должен иметь слишком много уровней, чтобы предотвратить чрезмерное вдавливание.

Кроме того, похоже, что у Hugo 0.6.x есть проблемы с отступом TOC. Например, №6613, №6623. В общем, нам не нужно многоуровневое ТОС.

Установите фавикон, главное изображение сайта и изображение заголовка статьи

Фавикон и основное изображение можно установить в config.toml.

[params]
  favicon = “favicon.ico”
  featured_image = “/sfo.jpg”

Чтобы добавить изображение заголовка к статье, просто добавьте атрибут в раздел Front Matter.

featured_image: /hugo-logo-wide.svg

Согласно официальной рекомендации Хьюго, ресурсы изображений должны быть размещены в каталоге ./static.

Это изображение не только будет отображаться на странице сведений о статье (с автоматическим масштабированием и обрезкой), но также появится в виде эскиза в списке статей.

Строить

На этом сайт готов. Для создания статических страниц нам нужно изменить атрибут draft статьи на false и выполнить команду hugo:

Созданные веб-страницы появятся в каталоге ./public. Теперь все, что нужно сделать, - это развернуть веб-сайт. Вместо развертывания на обычном веб-сервере я разверну его в сети IPFS (подробности будут объяснены в следующей статье).

Но прежде чем углубляться в технические детали, давайте прямо сейчас попробуем использовать этот веб-сайт, размещенный на IPFS: https://www.chedan.io, мой личный веб-сайт на китайском языке. Он выглядит так же, как и другие веб-сайты, но за кадром он совершенно другой. Потому что у меня не было для этого веб-сервера.

Заключение

В этой статье описывается мой процесс обучения на практике с Хьюго.

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

Опыт создания веб-сайта с Хьюго вернул мне воспоминания о старых добрых временах, когда я впервые создал личную домашнюю страницу в 1990-х годах. С удовольствием.

В качестве вводного руководства эта статья не охватывает некоторые расширенные функции Hugo, такие как шорткоды, архетипы, механизм шаблонов и т. Д. Я считаю, что они также будут полезны в дальнейшей практике.

Эта статья является отправной точкой для моего изучения и изучения IPFS / Web3. Далее я расскажу, как опубликовать этот веб-сайт в IPFS, и покажу вам, что с легендарной IPFS легко начать работу и она может сосуществовать с традиционными веб-системами.

Будьте на связи!