Підручник Hugo: як побудувати і розмістити (дуже швидко) статичний сайт електронної комерції
- Хьюго: генератор статичного сайту FAST Golang
- Підручник Hugo: сайт, продукти, шаблони і розгортання
- 2. Створення статичного файлу JSON для продуктів нашого магазину
- 3. Створення ваших шаблонів Hugo
- layouts / index.html
- layouts / partials / product.html
- 4. Налаштування розгортання Hugo на Netlify
- Приклад сайту Live Hugo + репозиторій GitHub
- Висновок і подальші ресурси
В поспіху? Перейдіть до навчальних кроків або GitHub repo + live demo.
Пані та панове, сьогодні ми доведемо, як легко знову створити електронну комерцію на статичних сайтах. І на цей раз ми будемо використовувати поглиблений підручник по сайту Hugo для цього. :)
Наступне керівництво покаже вам:
- Як створити свій статичний сайт за допомогою генератора сайтів Hugo;
- Як (легко) інтегрувати платформу кошика Snipcart поверх неї;
- Як розгорнути сайт електронної комерції Hugo на Netlify.
Але спочатку слово про ключове інструменті, який ми будемо використовувати в усьому цьому.
Хьюго: генератор статичного сайту FAST Golang
Хьюго міг означати різні речі для різних людей. Книжкові черви можуть подумати про легендарного письменника Лез Мізебралса. Синефіли можуть подумати про маленького хлопчиську у фільмі Скорсезе в 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.
Як згадано вище, цей файл є найважливішим. Це простий 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:
Або докладний відео, але без snipcart кошика, як задеплоіть сайт, 25 хвилин:
Netlify автоматично потягне ваш код на GitHub і розгорне ваш сайт. От і все.
Приклад сайту Live Hugo + репозиторій GitHub
Отже, час, щоб відкрити шедевр «Зоряного шляху», люди:
Хіба ваш розум підірваний або що? Тепер спробуйте перевірити як сайт, так і код для себе:
Дивіться демо-версію Snipcart + Hugo
Див. Репозиторий коду GitHub
Висновок і подальші ресурси
Я думаю, що наша робота тут, друзі!
Якщо вам цікаво, якщо кінцевий результат досить швидкий, ви можете використовувати ще один класний інструмент Netlify: Testmysite.io. Ми забили 87/100 з демо; не дуже потертий.
BTW, якщо ви створюєте серйозний / клієнтський сайт JAMstack, ви можете подумати про моніторинг його продуктивності за допомогою цього безкоштовного інструменту з відкритим вихідним кодом. Крім того, високотехнологічні команди можуть захотіти вивчити цей процес публікації за допомогою Hugo.
клієнти
Подумайте про те, як працювати з файлами статичного контенту, заснованими на Markdown, не скорочуватиме його для клієнтів? Деякі корисні інструменти можуть допомогти редагувати і управляти контентом поверх Hugo. Ми пропонуємо кинути одну з наступних статичних CMS в мікс:
Для подальшого ознайомлення з інструментами JAMstack для клієнтів, лімітами і перевагами ознайомтеся з цим докладним керівництвом.
Гра з Хьюго була радістю. Його документація була на місці, і її майже миттєва швидкість змусила інженера в мені посміхатися кожен раз, коли я розбудовував свій сайт. Створення цього підручника по сайту Snipcart + Hugo зайняло у мене близько двох годин. І це включає в себе стилізацію сайту за допомогою MaterializeCSS і розміщення його на Netlify.
Мені завжди приємно бачити, наскільки гарні сучасні сучасні генератори сайтів для нашої кошика покупок HTML / JS. :)
Тепер перестаньте читати цей блог і вирушайте будувати щось приголомшливе.
_У вас є питання по цьому підручнику Snipcart + Hugo? Будь-які інші генератори статичних сайтів, які ви хотіли б нам накрити в блозі? Хіт коментарі з будь-яких питань, пропозицій або випадковим розмовам Клінгонов._ І якщо вам сподобався цей пост, візьміть секунду, щоб поділитися ним в Twitter!
(С) переклад статті https://snipcart.com/blog/hugo-tutorial-static-site-ecommerce
Наші попередні повідомлення про обробку електронної комерції зі статичними генераторами сайтів, такими як Middleman і Jekyll, були досить успішними, тому навіщо зупинятися на досягнутому?Чому Зоряний шлях, запитаєте ви?
Com / icon?
У вас є питання по цьому підручнику Snipcart + Hugo?
Будь-які інші генератори статичних сайтів, які ви хотіли б нам накрити в блозі?