Учебник Hugo: как построить и разместить (очень быстро) статический сайт электронной коммерции

Учебник Hugo: как построить и разместить (очень быстро) статический сайт электронной коммерции

snipcart магазин на статическом сайте

В спешке? Перейдите к учебным шагам или GitHub repo + live demo .

Время снова погрузиться в быстро развивающийся мир JAMstack и статического веб-разработки! Наши предыдущие сообщения об обработке электронной коммерции со статическими генераторами сайтов, такими как Middleman и Jekyll, были довольно успешными, поэтому зачем останавливаться на достигнутом?

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

Следующее руководство покажет вам:

  1. Как создать свой статический сайт с помощью генератора сайтов Hugo;
  2. Как (легко) интегрировать платформу корзины Snipcart поверх нее;
  3. Как развернуть сайт электронной коммерции Hugo на Netlify.

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

Хьюго: генератор статического сайта FAST Golang

gohugo logo

Хьюго мог означать разные вещи для разных людей. Книжные черви могут подумать о легендарном писателе Лез Мизебралса. Синефилы могут подумать о маленьком мальчишке в фильме Скорсезе в 2011 году. Но если вы разработчик (если вы читаете это, вероятно, есть), вот что вы должны думать *: быстрый и современный статический движок сайта .

Написано в книге Steve Francia aka spf13 , Hugo отрывается как один из самых эффективных способов, с помощью которых мы могли создавать, управлять и обновлять современные статические сайты. Его легко установить на любой платформе, плюс вы можете разместить его где угодно - мы предлагаем Netlify , как вы увидите позже. И время его сборки находится за пределами диаграмм (~ 1 мс на страницу).

Если вам нравится веб-производительность столько, сколько мы делаем, мы предполагаем, что вам понравится этот генератор сайта Golang.

Сегодня я покажу вам, как использовать Snipcart и Hugo для создания старой школы Star Trek на статическом сайте. Почему Звездный путь, спросите вы? Потому что мы уже сделали «Звездные войны» .

Psst : все еще интересно, что такое статические генераторы сайтов и почему они имеют значение? Дайте вступительный пост Эдуардо Буса .

Учебник Hugo: сайт, продукты, шаблоны и развертывание

1. Установка Hugo и создание нового статического веб-сайта

Прежде всего, вам нужно установить генератор на свой компьютер и создать новый веб-сайт. Вам понадобится 10 минут, следуя документации Hugo Quickstart . Или, если вы так же быстро, как Дэн Херсам, 2 минуты :

После того, как вы загрузите соответствующую версию в репозиторий GitHub от Hugo , установка будет ветерок (как описано в документах выше). Поэтому давайте сосредоточимся на создании нового сайта Hugo.

Мы будем использовать соответствующую команду CLI, чтобы сделать именно это:

hugo new site snipcart-hugo

Архитектура

Эта команда создаст базовый скелет для вашего проекта. У вас должен быть каталог сайта, который выглядит так:

│   config.toml
│   
├───archetypes
├───content
├───data
├───layouts
├───static
└───themes

Файл config.toml будет содержать настройки сайта. Для нашей демонстрации нам не нужно будет слишком много изучать это, так как мы будем делать что-то довольно простое с самим сайтом.

Здесь нет необходимости слишком углубляться во внутренние работы Хьюго . В принципе, во время этого урока мы будем создавать файлы в папке с data , которая используется для хранения дополнительных данных, которые могут быть использованы для создания сайта.

Мы также собираемся добавить некоторые шаблоны в папку layouts , которая является местом по умолчанию для хранения шаблонов Hugo.

static папка может использоваться для хранения любых статических активов, таких как CSS, файлы JavaScript или изображения. В нашей демонстрации мы добавим папку с images содержащую изображения наших продуктов.

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

Темы

Мы также решили не устанавливать какую-либо конкретную тему для этой демонстрации (мы будем использовать CSS-структуру для дальнейшего создания нашего сайта), но есть много открытых исходных тем. В этом сообщении обсуждается, как настраивать темы на своем веб-сайте Hugo, чтобы вы могли прочитать его. Он также исследует создание базового сайта с Hugo более подробно (Hello World, блог, фотогалерея и т. Д.).

Вы также можете посмотреть официальный репозиторий для некоторых из лучших тем Hugo.

2. Создание статического файла JSON для продуктов нашего магазина

Хорошо! Теперь давайте создадим наши продукты: словарь клингонов и фазер. Мы могли бы использовать безголовую или статическую CMS для этой части (мы это делалираньше ). Но для скромной цели этого поста мы собираемся создать статический файл .json чтобы содержать наши продукты.

Hugo обеспечивает очень аккуратную функцию, называемую getJSON . Это может быть очень удобно, когда некоторые ваши данные поступают либо из безглавой CMS, либо из любого API, который возвращает JSON.

Hugo обеспечивает очень аккуратную функцию, называемую getJSON. Это может быть очень удобно, когда некоторые ваши данные поступают либо из безглавой CMS, либо из любого API, который возвращает JSON. Поскольку наш JSON-файл находится непосредственно в папке с данными, мы могли бы использовать .Site.Data.Products вместо вызова метода getJSON, но здесь мы хотели показать, что также можно взаимодействовать с удаленным API.

Нам нужно будет поместить новый файл с именем products.json в папку с data .

[{
   "id": "1",
   "name": "Klingon dictionary",
   "price": 34.87,
   "image": "/images/dictionary.jpg",
   "description": "nIvbogh tlhIngan dictionary qaStaHvIS veng SuvwI'",
   "url": "http://snipcart-hugo.netlify.com"
}, {
   "id": "2",
   "name": "Captain Kirk Phaser",
   "description": "The Original Series Phaser comprises a small, hand-held Type I Phaser, which slots into a larger Type II Phaser body with a removable pistol-grip.",
   "price": 145.98,
   "image": "/images/phaser.png",
   "url": "http://snipcart-hugo.netlify.com"
}]

3. Создание ваших шаблонов Hugo

Следующий шаг - настроить различные макеты для нашего сайта. Наиболее важным является шаблон заголовка, в котором мы добавим зависимости Snipcart .

Мы также создадим основной шаблон, в котором мы будем зацикливаться на наших продуктах, чтобы показать сводку и добавить кнопку покупки «Snipcart».

_Примечание. Продукты Snipcart определяются непосредственно в HTML-разметке с помощью простых атрибутов данных._Подробности здесь .

В папке макетов мы поместим новый шаблон index.html. Этот файл будет использоваться по умолчанию и будет первым, сгенерированным Hugo.

layouts / index.html
{{ partial "header.html" . }}

{{ $products := getJSON "/data/products.json" }}

<section class="container">
    <div class="row">
        {{ range $products }}
            {{ partial "product.html" . }}
        {{ end }}
    </div>
</section>

{{ partial "footer.html" }}

В начале сообщения мы писали о методе getJSON . Мы будем использовать это в нашем шаблоне index.html .

Мы будем получать продукты из файла JSON, определенные ранее. Затем мы прокрутим продукт и произведем частичный шаблон product.html .

Как вы можете видеть, мы также импортируем файл header.html , footer.html и product.html. Давайте подробно рассмотрим их. Прежде чем идти дальше, мы снова отправимся в папку макетов и создадим «частичные». Если файл с частицами не помещается в эту папку, Hugo не сможет распознать их как частичные шаблоны, а синтаксис {{partial …}} не будет работать вообще. Другая важная вещь, которая должна знать об этом файле, - это точка "." после product.html . Это означает, что вы включаете текущие данные product.html шаблон product.html .

layouts / partials / header.html

Как упомянуто выше, этот файл является самым важным. Это простой HTML-заголовок с зависимостями Snipcart. Поместитееговпапку partials:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">  
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

 <title> Snipcart integration in Hugo! </title>

 <link id="snipcart-theme" type="text/css" href="https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
 <div class="container">
   <nav>
     <div class="nav-wrapper">
       <a href="#" class="brand-logo">Star Trek shop</a>
       <ul id="nav-mobile" class="right hide-on-med-and-down">
         <li class="snipcart-summary">
           <a href="#" class="snipcart-checkout">
             View cart (<span class="snipcart-total-items">0</span>)
           </a>
         </li>
       </ul>
     </div>
   </nav>
 </div>

Мы решили использовать среду MaterializeCSS для создания этой статической демонстрации для электронной коммерции, но вы можете использовать любую другую структуру CSS. Я нашел это довольно легко интегрировать, и он обеспечил достаточно встроенных компонентов, чтобы собрать что-то, что выглядит аккуратно!

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

Так! Следующий шаг: составление частичного шаблона нижнего колонтитула, чтобы заполнить ядро ​​нашего HTML-файла.

<div class="container">
           <footer class="page-footer">
               <div class="footer-copyright">
                   <div class="container">
                       Snipcart integration with Hugo
                   </div>
               </div>
           </footer>
       </div>

       <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

       <script type="text/javascript" id="snipcart" src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" data-api-key="M2E5YjA3NjMtYzRiYS00YzVjLWEyYWYtNDY5ZDI0OWZhYjg5"></script>

       <script>
           Snipcart.execute('registerLocale', 'en', {
               powered_by:
               "HoS 'ej pong ngaQ "
           });
       </script>
   </body>
</html>

Наконец, нам нужно создать шаблон, отображающий информацию о продукте Star Trek. Назовите файл product.html.

layouts / partials / product.html
<div class="col s6">
    <h2 class="header">{{ .name }}</h2>
    <div class="card horizontal">
        <div class="card-image">
        <img src="{{ .image }}">
        </div>
        <div class="card-stacked">
        <div class="card-content">
            <p>{{ .description }}</p>
        </div>
        <div class="card-action">
            <button
                class="snipcart-add-item waves-effect waves-light btn"
                data-item-id="{{ .id }}"
                data-item-name="{{ .name }}"
                data-item-price="{{ .price }}"
                data-item-url="{{ .url }}">
                    <i class="material-icons right">shopping_cart</i>
                    Add to cart
            </button>
        </div>
        </div>
    </div>
</div>

Поскольку мы передали текущий продукт в нашем шаблоне index.html , теперь мы можем использовать все поля данных в нашем файле JSON. Здесь я использовал их, чтобы заполнить кнопку покупки Snipcart и добавить название продукта + описание.

Время, чтобы запустить наш сервер Hugo и протестировать этот модный веб-сайт!

 hugo server

(Я сохраняю скриншот магазина Star Trek для конца, приготовьтесь)

4. Настройка развертывания Hugo на Netlify

И последнее, но не менее важное: хостинг всего!

Мы решили развернуть нашу демонстрационную версию Hugo, используя удивительные услуги наших друзей в Netlify .

Прежде чем делать что-либо в Netlify, я предлагаю создать файл .gitkeep в вашей папке content . Эта папка требуется сборщику Netlify. И поскольку мы не размещали никаких файлов в этой папке, Git собирается ее отклонить.

Как .gitkeep файл .gitkeep будет установлен, вы можете использовать свой интерфейс, чтобы легко развернуть свой веб-сайт за несколько секунд. Вот краткий обзор нашей старой школы Star Trek:

развертывание сайта на Netlify

Или подробное видео, но без snipcart корзины, как сделать сайт, развернуть готовый шаблон 25 минут:

Netlify автоматически потянет ваш код на GitHub и развернет ваш сайт. Вот и все.

OMG

Пример сайта Live Hugo + репозиторий GitHub

Итак, время, чтобы открыть шедевр «Звездного пути», люди:

магазин на статическом сайте

Разве ваш ум взорван или что? Теперь попробуйте проверить как сайт, так и код для себя:

Смотрите демо-версию Snipcart + Hugo

См. Репозиторий кода GitHub

Вывод и дальнейшие ресурсы

Я думаю, что наша работа здесь, друзья!

Если вам интересно, если конечный результат достаточно быстрый, вы можете использовать еще один классный инструмент Netlify : Testmysite.io . Мы забили 87100 с демо; не слишком потертый.

BTW, если вы создаете серьезный / клиентский сайт JAMstack, вы можете подумать о мониторинге его производительности с помощью этого бесплатного инструмента с открытым исходным кодом . Кроме того, высокотехнологичные команды могут захотеть изучить этот процесс публикации с помощью Hugo .

клиенты

Подумайте о том, как работать с файлами статического контента, основанными на Markdown, не будет сокращать его для клиентов? Некоторые полезные инструменты могут помочь редактировать и управлять контентом поверх Hugo. Мы предлагаем бросить одну из следующих статических CMS в микс:

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

Игра с Хьюго была радостью. Его документация была на месте, и ее почти мгновенная скорость заставила инженера во мне улыбаться каждый раз, когда я перестраивал свой сайт. Создание этого учебника по сайту Snipcart + Hugo заняло у меня около двух часов. И это включает в себя стилизацию сайта с помощью MaterializeCSS и размещение его на Netlify.

Мне всегда приятно видеть, насколько хороши современные современные генераторы сайтов для нашей корзины покупок HTML / JS. :)

Теперь перестаньте читать этот блог и отправляйтесь строить что-то потрясающее.

(с)перевод статьи https://snipcart.com/blog/hugo-tutorial-static-site-ecommerce

Поделиться Комментарии

Поделиться новостью

comments powered by Disqus