Hugo Tutorial: Как создать и разместить (очень быстрый) статический сайт электронной коммерции
В спешке? Перейдите к техническому руководству или демоверсии
Работая в этой области, я часто обращаюсь ко мне с друзьями-разработчиками с вопросами о проектах электронной коммерции.
Я разговаривал с одним из них на прошлой неделе. Он казался немного расстроенным:
«У меня есть клиент, который просит луну с точки зрения производительности для своего интернет-магазина. Я действительно не знаю, как я могу оправдать его ожидания ».
Я сидел там и улыбнулся ему в ответ, потому что сразу понял ответ на его проблему.
Многие факторы будут влиять на выбор статического генератора для электронной коммерции. Но, когда скорость является основным, смотрите не дальше GOHUGO.
Этот разговор вдохновил меня выкопать нашу старую демонстрацию электронной коммерции Hugo и дать ей новый поворот , так что я здесь.
Вот что я сделаю в учебнике ниже:
Создать сайт Hugo Добавьте функции электронной коммерции с Snipcart Сопряжение статического сайта с CMS (Forestry) Развернуть на Netlify
Во-первых, давайте посмотрим, чем занимался Хьюго со времени нашего последнего визита.
Что такое Хьюго?
В двух словах, Hugo - это популярный генератор статических сайтов с открытым исходным кодом, написанный на Go. Выпущенный в 2013 году, он был одним из первых SSG, запустивших развитие «статичной» сети, какой мы ее знаем сегодня.
Узнайте больше об экосистеме электронной коммерции Golang прямо здесь.
Это по-прежнему один из самых популярных инструментов в этой области по многим причинам. Hugo считается одним из самых эффективных способов создания, управления и обновления современных статических сайтов. Его легко установить на любую платформу, плюс вы можете разместить его где угодно. Но, прежде всего, время его сборки просто вне графика.
Чтобы дать вам представление, время сборки Jekyll, другого очень популярного SSG, примерно в десять раз больше, чем у Hugo.
Другим инструментам сложно конкурировать со скоростью Хьюго, когда время сборки меньше 1 секунды.
Кроме скорости, вот почему вы должны рассмотреть Hugo для проектов электронной коммерции (или любого проекта, в этом отношении):
- Он гибкий - он позволяет вашему веб-сайту масштабироваться благодаря множеству готовых функций.
- Он поддерживается активным сообществом - это, вероятно, SSG с самым процветающим сообществом, всегда готовым помочь.
- Он поддерживает не только небольшие блоги / магазины - он имеет несколько типов вывода и многоязычные возможности; Хьюго готов для корпоративных сайтов.
Сумасшедшая вещь о Хьюго состоит в том, что она не изменилась с тех пор, как мы написали первую версию этого поста в 2016 году. Это был надежный инструмент прямо за воротами. Сообщество развилось, хотя, как и опыт разработки Hugo. Взять, к примеру, тематику; сейчас доступно гораздо больше (и лучше) тем, шаблонов HUGO, чем тогда.
Кроме того, безголовые CMS делают жизнь проще для всех.
Управление контентом с помощью автономной CMS
Варианты управления контентом
Важным событием, произошедшим в современной веб-разработке с тех пор, как мы впервые написали этот пост, стало появление безголовой CMS.
Это сделало JAMstack и статический веб способ более доступным. Если вы думаете, что работа с статическими файлами содержимого, управляемыми Markdown, не подойдет для клиентов, эти классные инструменты могут помочь редактировать и управлять контентом поверх Hugo. Это то, что я сделаю в демо ниже.
Мы предлагаем добавить одну из следующих безголовых CMS:
- Sanity.io
- DatoCMS
- Netlify CMS
- Forestry.io
Последнее, это то что я выбрал для этого урока. Это довольно хорошая штука! Давайте внимательнее посмотрим!
Есть несколько более Headless CMS вариантов для электронной коммерции. Если упомянутые здесь не подходят для вас, обратитесь к этой статье, которую мы написали на эту тему.
Что такое Forestry CMS?
Forestry.io - это статическая безголовая CMS, которая легко синхронизируется с Hugo. Это делает его идеальным выбором для сегодняшнего случая использования.
Хотя вы должны знать, что Forestry также создан для поддержки сайтов Jekyll и VuePress. Вы просто пишете код интерфейса с помощью SSG и пушите Git. Затем Forestry загружает коммиты и обновляет CMS. Редакторы, маркетинговые команды и продавцы могут легко создавать и редактировать контент с помощью богатого пользовательского интерфейса.
Этот процесс дает много преимуществ присущих традиционным CMS, таких как скорость, надежность, постоянное развертывание и объединенный рабочий процесс.
Он может хоститься где угодно. Я буду использовать Netlify ниже.
Как и многие современные CMS, forestry был построен как альтернатива WordPress. Он предоставил именно то, что было необходимо для создания и без того мощных инструментов внешнего интерфейса, таких как Hugo & Jekyll, - простое управление контентом, роли и разрешения и т. Д.
Ладно, хватит болтать, давай практиковаться.
Учебник Hugo: статическая электронная коммерция поверх Forestry.io
В этой демонстрации я создам простой интернет-магазин с помощью Hugo и Forestry.io. Я также разверну его в несколько кликов, все благодаря Netlify. Давай сделаем это!
Необходимые условия
- Базовые знания JS, HTML и CSS
- Аккаунт Snipcart (навсегда бесплатный в режиме TEST)
1. Установка Хьюго
Перед началом работы вам необходимо установить Hugo CLI.
Поскольку это полностью зависит от вашей операционной системы, вы можете обратиться к официальной документации . Просто помните, что если вы хотите использовать Sass как я, в этой демонстрации, вам нужно установить расширенную версию Hugo.
2. Создание нового сайта
Теперь, когда Hugo CLI установлен и готов к работе, вы можете создать свой новый сайт с помощью этой простой команды:
hugo new site <YOUR_PROJECT_NAME>
Это должно создать новый каталог со следующей структурой.
.
├── archetypes
├── content
├── data
├── layouts
├── static
├── themes
└── config.toml
Чтобы дать вам краткое представление о том, что делают важные каталоги, каталог data используется для хранения любых файлов конфигурации, которые мы могли бы использовать при создании нашего веб-сайта. В этом случае вы будете использовать его как средство для хранения списка продуктов.
Каталог layout хранит ваши html шаблоны. Вы создадите шаблон для домашней страницы и частички для верхнего, нижнего колонтитула и продуктов.
static папка используется для хранения любого статического содержимого, такого как изображения, таблицы стилей или файлы JavaScript.
Позже вы также внесете изменения в каталог content чтобы связать его с Forestry.io, автономной CMS, и создадите папку assets чтобы использовать Hugo Pipes для наших файлов scss .
3. Использование встроенного сервера Hugo
Чтобы запустить генератор статического сайта, используйте следующую команду:
hugo server -D
Эта команда должна генерировать ваши страницы. Следите за любыми входящими изменениями и разверните сайт локально по следующему URL: http://localhost:1313. Не беспокойтесь, если страница пуста, так как она должна выглядеть на данном этапе.
Параметр -D позволит вам отображать черновой контент. Я расскажу подробнее об этом позже, когда мы создадим для нашего сайта CMS.
4. Добавление данных
Для этой демонстрации я создам простой магазин сыров, который отображает список продуктов на главной странице.
Поэтому добавьте файл products.json в каталог data описывающий наши продукты в соответствии с определением продукта Snipcart.
[
{
"id": "GOUDA_WHEEL",
"name": "Gouda Wheel",
"price": 299.95,
"image": "/images/gouda.jpg",
"description": "Want to step up your cheese game? Try our mild, yellow Gouda Wheel. This cheese is made in the Netherlands with raw cow milk.",
"product_url": "http://snipcart-hugo-forestery.netlify.com"
},
...
]
5. Добавление новых макетов и частичных
Вы не будете использовать готовую тему здесь. Поэтому вы должны создавать шаблоны самостоятельно.
Вы также можете выбрать уже существующую тему Hugo и пропустить этот шаг.
Сначала создайте файл index.html внутри каталога layouts со следующим кодом:
{{ partial "header.html" . }}
<main class="products">
{{ range .Site.Data.products }}
{{ partial "product.html" . }}
{{ end }}
</main>
{{ partial "footer.html" . }}
Как видите, фигурные скобки ( {{ }} ) могут быть использованы для программного добавления контента на страницу.
В этом случае вы воспользуетесь этой возможностью, чтобы попросить Хьюго импортировать нижний колонтитул и верхний колонтитул, а также список всех продуктов, хранящихся в предопределенной переменной .Site.Data .
Слои\части\partials необходимо создавать внутри директории layouts/partials . Создайте имя файла header.html которое будет включать зависимости Snipcart . Кроме того, не забудьте добавить свой ключ API, если вы решите это сделать.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel='shortcut icon' type='image/x-icon' href='/images/icons/favicon.ico' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" data-api-key="YOUR_PUBLIC_API_KEY" id="snipcart"></script>
<link href="https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css" rel="stylesheet" type="text/css" />
<title>CheeseCity</title>
</head>
<body>
<header class="header">
<a class="header__branding" href="/">
<img class="header__logo" src="/images/icons/cheese.svg" alt="cheese logo">
<h1 class="header__title">CheeseCity</h1>
</a>
<div class="header__cart">
<a href="#" class="snipcart-checkout" style="text-decoration: none;">
<div class="snipcart-summary">
<img src="/images/icons/cart.svg" alt="">
<span class="snipcart-total-price"></span>
</div>
</a>
</div>
</header>
Вы также создадите файл footer.html так же, как мы создали ваш заголовок.
<footer class="footer">
Powered by <a href="https://gohugo.io/">Hugo</a> & <a href="https://www.snipcart.com">snipcart</a>
</footer>
</body>
</html>
Наконец, давайте создадим product.html которая будет отображать то, что вы хотите продемонстрировать о вашем продукте. Помните, что кнопка Add to cart опять же должна соответствовать определению продукта Snipcart.
<div class="product">
<h2 class="product__name">{{ .name }}</h2>
<img class="product__image" src="{{ .image }}" alt="">
<p class="product__description">{{ .description }}</p>
<div class="product__button-container">
<div class="product__price">${{ .price }}</div>
<button
class="snipcart-add-item buy-button"
data-item-id="{{ .id }}"
data-item-name="{{ .name }}"
data-item-price="{{ .price }}"
data-item-url="{{ .product_url }}"
data-item-description="{{ .description }}">
Add to cart
</button>
</div>
</div>
6. Добавьте стиль с Hugo pipes
На этом этапе вы можете добавить каталог assets в корне проекта. В этом каталоге будут храниться все файлы, которые должны быть обработаны Hugo Pipes. В этом случае каталог с именем scss с вашей main.scss стилей main.scss .
После завершения вы можете связать свои таблицы стилей в частичке header.html , добавив следующий код:
{{ $style := resources.Get "scss/main.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}">
Это так просто. Что если вы снова загляните в свой браузер, у вас должен быть статический интернет-магазин!
7. Сопряжение статического сайта с CMS
На этом этапе вы можете добавить CMS на ваш сайт. К счастью, Хьюго отлично подходит для большинства безголовых CMS.
Фактически, если ваша CMS предоставляет конечную точку REST, вы можете просто изменить цикл в макете index.html следующим образом:
{{ $products := getJSON "ENDPOINT_URL" }}
{{ range $products }}
{{ partial "product.html" . }}
{{ end }}
Как упоминалось ранее, я буду использовать здесь Forestry.io, который будет фиксировать новый контент в каталоге проекта, таким образом, восстанавливая страницы и предотвращая любые ненужные HTTP-вызовы.
7.1. Связывание вашего репозитория с Forestry.io
Перед началом работы с Forestry вам необходимо убедиться, что ваш каталог хранится в поставщике исходного кода, таком как Github, Gitlab или Bitbucket. После этого вы можете войти на сайт Forestry.io и следовать инструкциям на экране.
7.2. Настройка новой темы
Как только ваш репозиторий будет связан с Forestry, вы можете приступить к определению своего главного вопроса на панели инструментов. В случае, если вам интересно, что это такое, главным вопросом является то, что используется в Hugo для определения метаданных, прикрепленных к экземпляру типа контента.
Добавление JSON файла в каталог data отлично подходит для быстрого начала работы, но если вы хотите создать сайт с несколькими страницами, используя типы контента, то это путь, так как он позволяет сопоставлять типы с пользовательскими макетами .
Здесь вы будете использовать его для определения вашего продукта и передачи этих данных в ваш файл product.html . Вы можете сделать это, щелкнув «Front matter» на боковой панели, а затем нажав «Добавить шаблон» в правом верхнем углу.
Назовите его product и добавьте следующие поля: id, name, price, description, image и product_url.
Убедитесь, что если вы добавите что-нибудь еще, он не перезапишет какие-либо предопределенные переменные от Hugo. Вот почему я использовал product_url а не url.
7.3. Создание нового раздела
После того, как вы создали новую тему, вы можете зайти в settings > sidebar и добавить новый раздел. Позже вы будете использовать этот раздел, чтобы получить все наши продукты в нашем макете.
Нажмите Add section и создайте новый Directory со следующими настройками:
7.4. Добавление нового документа для каждого из ваших продуктов
Теперь вы должны увидеть новый раздел Products на боковой панели. Если вы нажмете на нее, у вас должна появиться Create new button в верхнем левом углу, которая позволит вам каталогизировать новый продукт.
Вы можете заметить, что можете сохранить документ как Draft. Если вы решите это сделать, этот новый фрагмент контента будет отображаться только тогда, когда к команде hugo server будет добавлен флаг -D.
Это отличный способ протестировать новый контент, прежде чем показывать его публике.
7.5. Обновление макета для отображения нашего нового контента
Теперь давайте обновим цикл product до следующего:
{{ range where .Site.RegularPages "Section" "products"}}
{{ partial "product.html" .Params }}
{{ end }}
Этот цикл найдет все страницы, относящиеся к разделу products вы создали ранее в панели управления Forestry. Затем вы передаете переменную .Params нашим частичкам\partials так как именно там хранится front matter.
8. Развертывание сайта с помощью Netlify
Наконец, вы развернете свой сайт с помощью Netlify. К счастью, сделать это так же просто, как войти и связать свой репозиторий.
Обычно Netlify обнаруживает, что вы создаете проект Hugo, и автоматически настраивает следующую конфигурацию:
Просто нажмите «Deploy», и все готово!
Демоверсия и репозиторий GitHub
Смотрите репозиторий Github здесь
Смотрите демо здесь
Заключительные мысли
Самым сложным было получить представление о системе типов контента, но однажды я понял: «Ага!» момент все прошло так гладко, как и ожидалось.
Мне потребовалось чуть больше дня, чтобы заставить эту демонстрацию работать и интегрировать ее с CMS. Сказав это, если бы мне пришлось сделать это снова, я вполне уверен, что это займет всего несколько часов - Хьюго очень прост в использовании.
Я думаю, что Хьюго отлично подходит для многих сайтов. Тем не менее, чтобы показать, насколько мощным является Hugo, я думаю, что было бы интересно создать веб-сайт с несколькими страницами, чтобы полностью изучить функциональность поиска шаблонов Hugo.
Перевод статьи ©https://snipcart.com/blog/hugo-tutorial-static-site-ecommerce