Сделайте создание сайтов снова увлекательным с Hugo
Декабрь 9, 2018
Статические сайты популярны по многим причинам. Исключение излишних решений и простота проекта без баз данных, слишком большого количества зависимостей или определенных конфигураций на стороне сервера (без PHP, без MySQL / MSSQL, .NET, Python, Ruby и т. Д.) Делают его очень простым для развертывания и надежным против многочисленных возможных уязвимостей. В конечном счете, они становятся простыми HTML-страницами, предоставляемыми пользователю.
В этом руководстве я покажу вам, как настроить среду разработки с помощью Hugo и создать свой первый статический веб-сайт Hugo .
Новый подход к статическим веб-сайтам
Легендарную аббревиатуру дизайна KISS — Keep It Simple, Stupid — можно применить к Hugo и к тому, как он приближается к пространству статического генератора веб-сайтов.
Встроенный в Go, Hugo быстро компилирует ваши статические страницы (для компиляции небольшого сайта требуются доли миллисекунд — и может делать тысячи страниц за секунды).
Кроме того, Hugo предоставляет необходимые инструменты для статического рабочего процесса веб-сайта (в том числе инструменты развертывания и миграции), позволяя разработчикам и дизайнерам сосредоточиться на забавных деталях, таких как проявление своего творческого потенциала и реализация указанного творческого потенциала при создании веб-сайта.
Почему статические сайты?
Когда мы создаем контентные веб-сайты, мы можем предположить некоторые общие черты для всех сайтов, и Хьюго дает основу именно для этого. В частности, мы можем взять типы контента, такие как сообщения, категории, обзоры или продукты, и упорядочить данные. Затем мы можем дать каждому конкретный взгляд через шаблоны и таблицы стилей.
Продвигаясь вперед, мы можем действительно направить его куда угодно в пределах статического пространства веб-сайта HTML / CSS / JS. Когда вы думаете об этом прагматично, это большое пространство, позволяющее много места для творчества.
jQuery будет работать нормально, и ничто не мешает вам использовать сторонние сервисы на вашей статической странице, если они вам нужны. Так что не ограничивайте себя, думая, что вы не можете интегрировать другие библиотеки или приложения в ваши статические сайты. Это действительно не так — вы можете использовать любую из доступных библиотек JavaScript.
Так что для нескольких страниц веб-сайта типа компании со ссылкой на форму Google для страницы «Свяжитесь с нами». И если вам нужно отобразить другие типы данных, вы можете использовать JavaScript для этого аспекта вашего сайта.
Как это может работать для моего бизнеса и моих клиентов?
Возьмите, например, небольшой магазин или фрилансера с несколькими продуктами или услугами, которые не требуют полного решения для электронной коммерции. Вместо этого им требуется только информация о продукте и ссылка «контакт» на странице. Хьюго может сделать это к концу утра. Хостинг не имеет большого значения — на самом деле это запоздалая мысль, потому что мы просто обслуживаем основные HTML-страницы.
Хьюго также хорошо работает для проектной документации по проектам GNU. Например, подумайте о стартапах или МСП, которые нуждаются в простом присутствии.
Каковы ограничения статических сайтов?
Что Хьюго не может сделать, так это динамический контент, например, управляемые базой данных формы, поиск или пользовательские системы. Если это то, что вы ищете, то Хьюго, конечно, не то, что вы хотите. Но в другой раз, когда вы обнаружите, что говорите: «Разве мы не можем просто создать для этого базовую страницу?» Статические генераторы веб-сайтов — хороший выбор. Также следует помнить, что Хьюго не единственный генератор статических сайтов. Есть много там и были вокруг в течение длительного времени, вот список их.
Для создания блогов с живым контентом, таких как новостные сайты, Hugo может быть отличным решением для быстрой подбора страницы для этого покрытия, которая будет связана с вашим основным сайтом, и выложит ее в сеть за считанные минуты, что означает, что вы можете быстро добавлять и повторно вносить изменения очень быстро. Но для создания целого новостного сайта с поиском и многими авторами было бы действительно неуместно использовать Хьюго.
Hugo также не хватает более продвинутых инструментов для конвейера активов, таких как ES6 и Sass — если вы хотите использовать эту технологию, вам нужно будет включить Gulp или Grunt, чтобы выполнить работу; в противном случае ванильный CSS и JavaScript работают лучше всего.
Ваша среда разработки дома
Hugo написан на Go и имеет поддержку многих платформ, чтобы просмотреть все релизы, которые вы можете перейти здесь
Для пользователей MacOS с HomeBrew установка может быть выполнена следующим образом:
Как только Hugo установлен, мы можем проверить установку, запустив hugo help в командной строке или в hugo version
Создание вашего первого статического сайта с Хьюго
Теперь, когда у нас установлен Hugo, мы можем начать создавать сайт. Запустите следующую команду, заменив your-sitename-here на имя вашего проекта:
1
$ hugo new site your-sitename-here
Это создаст леса для вашего сайта, вы можете просмотреть его в вашем искателе
или в вашем терминале через команду tree
Хьюго создал 5 подкаталогов и 1 файл, который он использует для создания окончательного веб-сайта, вот что они все значат:
архетипы: здесь мы определяем, что такое наш контент, мы можем установить теги или категории по умолчанию и определить типы, такие как публикация, учебник или продукт, здесь
config.toml: основная конфигурация здесь, мы можем определить все названия сайтов, язык, URL и т. д. здесь
контент: здесь хранятся контентные страницы сайта, подкаталоги используются для разделов, помогающих организовать контент, например, для создания content/products для контента ваших продуктов.
данные: данные сайта такой конфигурации локализации идут сюда
раскладки : раскладки для библиотеки Go html / template, которые использует Hugo, идут сюда
static: любые статические файлы здесь будут скомпилированы в окончательный сайт, полная свобода разрешена, так что вы можете использовать любой файл CSS, JS или файл изображения, например.
Темы: Создавайте новые темы или клонируйте темы из github в этот каталог, чтобы использовать их на своем сайте.
«Привет, мир» в Хьюго
Нам нужно добавить сообщение, чтобы увидеть сайт, который мы только что создали, сделайте это с помощью следующей команды:
1
$ hugo new post/first-post.md
Теперь отредактируйте файл в файле content / post / first-post.md, он будет содержать что-то похожее на следующее:
1
2
3
4
5
+++
date = «2016-09-26T13:19:03+07:00»
title = «first post»
+++
Front Matter
Содержимое внутри +++ — это конфигурация TOML для поста. Эта конфигурация называется фронтом . Это позволяет вам определить конфигурацию сообщения вместе с его содержимым. По умолчанию каждый пост будет иметь свойства конфигурации, показанные выше.
Добавьте текст после +++ примерно так:
1
2
3
4
5
6
7
+++
date = «2016-09-26T13:19:03+07:00»
title = «first post»
+++
Hello world!
Обслуживание данных и живая перезагрузка
Таким образом, мы можем увидеть функциональность «живого» обновления, встроенную в Hugo, давайте внесем некоторые изменения в сайт и посмотрим, что произойдет.
Сначала запустите сервер, запустив
1
$ hugo server
Теперь, если вы внесете некоторые изменения в свой файл, вы увидите, что Хьюго мгновенно перезагрузится.
Ваш веб-сайт будет доступен по адресу http: // localhost: 1313, но подождите — на этом этапе вы все равно увидите только пустую белую страницу , потому что мы не определили тему!
Добавить тему
У Хьюго очень мощная и универсальная библиотека тем, так как он использует библиотеку Go html/template . С темами легко работать, установка выполняется простым клонированием репозитория темы в каталог тем вашего сайта Hugo.
У Хьюго нет темы по умолчанию, поэтому вы должны установить ее.
Давайте добавим множество тем на наш сайт, чтобы мы могли поиграть со всеми из них и посмотреть, что нам нравится. Сделайте это, запустив в нашем каталоге Hugo следующее:
Теперь вы увидите целую кучу тем, клонированных на ваш сайт. Их много, так что у вас будет время на перерыв, пока он клонируется …
Использование темы
Чтобы использовать тему, просто запустите Hugo с параметром -t или --theme например
1
$ hugo -t ThemeName
Или вы можете добавить в свой config.toml :
1
theme: «ThemeName»
ThemeName должно совпадать с именем каталога внутри /themes .
Когда вы выбрали название темы из каталога, запустите свой сервер с помощью hugo server --theme=ThemeName и посмотрите на http: // localhost: 1313.
Вот несколько примеров из некоторых тем, которые мы клонировали, я использовал beg , crisp и cactus , посмотрите вокруг, есть из чего выбирать!
Итак, вы создали сайт с приветственным сообщением, что еще мы можем сделать?
Создание блога
Создание простого блога действительно легко сделать с Хьюго. Во-первых, вам нужно будет определить архетип для поста по умолчанию, поэтому создайте новый файл в archetypes/default.md и добавьте следующее в первую очередь:
1
2
3
4
+++
tags = [«welding», «metal work»]
categories = [«posts»]
+++
Здесь мы устанавливаем некоторые теги по умолчанию, для блога по сварке мы можем быть уверены, что хотим использовать эти теги для всех наших сообщений, и мы создаем категорию, называемую сообщениями, именно поэтому у нас есть значение по умолчанию при создании сообщения.
Теперь добавьте свой первый пост через терминал следующим образом:
1
$ hugo new post/tig-welding-a-bike-frame.md
Это создаст сообщение с определенным ранее архетипом, теперь вы можете открыть его в текстовом редакторе и начать писать в формате уценки!
Давайте добавим еще несколько постов:
1
$ hugo new post/welding-a-roll-cage.md
Чтобы снова добавить контент, просто откройте файл, созданный Хьюго, и начните добавлять контент в конец файла после начала.
Построение фотогалереи
Для создания фотогалереи с Hugo мы будем использовать отличный инструмент hugo-gallery доступный на GitHub .
Инструмент hugo-gallery создаст новый каталог сообщений, содержащий файл уценки для каждого изображения в исходном каталоге, с возможностью упорядоченного показа слайдов. Он прочитает все файлы из каталога Source Path и сохранит их в статическом каталоге сайта Hugo.
Он создаст новый каталог внутри каталога контента на основе предоставленного Title например, content/welding
Например:
1
$ hugo-gallery static/images/welding-photos welding «Photos of my insane welding skills»
Посетите localhost:1313/welding для просмотра содержимого.
развертывание
У Hugo есть несколько инструментов для развертывания, таких как hugomac, который представляет собой приложение OSX menubar, позволяющее пользователю легко публиковать на хостинге EC2. Командная строка не требуется.
Также hugodeploy предоставляет настройку SFTP для развертывания, или вы можете просто использовать автоматические развертывания, которые поставляются с Hugo.
Вывод
Генераторы статических сайтов существуют уже давно, и Hugo действительно опирается на набор инструментов, позволяющий быстро и легко подключать сайты или даже переносить существующий сайт из WordPress в Hugo. Уго много инструментов, в том числе редакторы внешнего интерфейса проверяют их .
В будущем было бы неплохо увидеть больше модулей для Hugo, предоставляющих поддержку для таких вещей, как форма контактов и поддержка галереи, или связанные сообщения, например.
В планах Hugo есть много интересных идей, таких как динамическое изменение размера изображений, поддержка rsync и импорт изображений от хостинг-провайдеров, а также упрощенный хостинг с интеграцией AWS EC2 и GitHub.
Если вы еще не используете Hugo, не забудьте проверить проект по мере его развития!
