Створення веб-сайтів – це завжди захоплююча перспектива, що відкриває розробникам можливості вибору власного шляху. Вони можуть вільно визначати структуру, технології, інструменти та підхід до створення веб-програм.
Однією з таких концепцій є Jamstack, яка пропонує гнучкий метод для вирішення задач веб-розробки.
У цій статті ми розглянемо, як створити свій перший додаток Jamstack. Давайте почнемо.
Що являє собою Jamstack?
Jamstack – це сучасна філософія веб-розробки, яка надає розробникам зручну веб-архітектуру. Вона дозволяє використовувати різноманітні фреймворки та інструменти для досягнення поставлених цілей.
Якщо придивитись уважніше:
Джем + Стек = JAMstack.
Jamstack складається з трьох основних компонентів:
- J – JavaScript
- A – Application Programming Interface (API)
- M – Markup (Розмітка)
Цей підхід відокремлює бізнес-логіку від даних, створюючи чітке розділення на рівні веб-доступу. Основні переваги включають:
- Прискорений час завантаження (майже миттєво).
- Гнучкий та динамічний процес розробки.
- Покращену масштабованість та зручність у підтримці.
Для більш детального ознайомлення з Jamstack, рекомендуємо ознайомитись зі статтею “Jamstack для новачків”.
Історія виникнення Jamstack
Jamstack є відносно новою концепцією. У 2016 році Метт Білман вперше презентував Jamstack, продемонструвавши альтернативний підхід до створення веб-сайтів, відмінний від традиційних методів.
Суть рішення полягає у відокремленні логіки програми від серверної залежності. Здебільшого контент подається через статичні файли, розміщені на CDN, тоді як динамічні можливості забезпечуються через API. У випадку, коли потрібна серверна обробка динамічних дій, вони компілюються та надсилаються на CDN до того, як кінцевий користувач отримає до них доступ.
Для глибшого розуміння історії Jamstack, варто розглянути відмінності між статичними та динамічними веб-сайтами.
- Статичний веб-сайт: це сайт, який розміщується на сервері без динамічних функцій. У перші роки Інтернету більшість сайтів були статичними, використовуючи HTML, CSS та зображення, які зберігалися на сервері. Такий підхід відрізняється високою швидкістю, оскільки сервер не витрачає час на обробку запитів користувача, файли завжди готові. Проте, відсутність можливості змін обмежує інтерактивність.
- Динамічний веб-сайт: динамічні сайти забезпечують інтерактивність, обробляючи запити користувачів та генеруючи необхідний HTML для показу. Цей підхід, хоч і повільніший, додає можливості інтерактивності. Більшість сучасних веб-сайтів є динамічними, і яскравим прикладом є сайти на платформі WordPress.
Існує також третій тип – веб-сайти Jamstack. Розгляньмо, як вони поєднують переваги статичних і динамічних сайтів.
Веб-сайти Jamstack: принцип роботи
Jamstack вирішує дві ключові проблеми:
- Повільний час завантаження динамічних сайтів.
- Відсутність інтерактивності статичних сайтів.
Веб-сайт Jamstack подає статичні файли, що забезпечує високу швидкість. Крім того, він містить JavaScript, який взаємодіє з API для показу динамічного контенту.
Для створення статичних веб-сторінок використовується генератор статичних сайтів.
Ці генератори використовують Markdown для створення статичних веб-сайтів, генеруючи статичні файли з наявних HTML, CSS та JavaScript. Після завершення розробки, статичний сайт розміщується на CDN.
Оскільки подаються статичні файли, сайти завантажуються майже миттєво. JavaScript підключається до API для додавання динамічного контенту через зв’язок із базою даних.
Створення першого веб-сайту на Jamstack
Jamstack надає велику свободу вибору, тому можна використовувати будь-який фреймворк або генератор статичних сайтів, як-от Hugo, Gatsby, Next.js, Hexo та інші.
Рекомендуємо також ознайомитись зі статтею про найкращі фреймворки для Jamstack.
Для розгортання можна використовувати GitHub Pages, Netlify, Azure Static Web Apps тощо.
У цьому посібнику ми будемо використовувати Hugo для розробки Jamstack та Netlify для розміщення нашого сайту.
Вважається, що читач має базові знання про веб-технології, розуміння принципів роботи Інтернету, а також досвід використання Git.
Розпочинаємо.
#1. Встановлення необхідного: Go та Git
Для встановлення Hugo потрібно мати Git та Go. Git необхідний для спрощення процесу збірки (що буде показано при використанні Netlify), а Go потрібен, оскільки на ньому базується Hugo.
У нашому випадку ми використовуємо Ubuntu на базі WSL 2 у Windows 11, що забезпечує доступ до ядра Ubuntu безпосередньо з Windows.
Рекомендуємо також статтю про Windows 11 та Linux: глибоке занурення в можливості WSL2.
Ви можете використовувати Windows, Linux або macOS.
Встановлення Git
В Ubuntu, для встановлення Git, виконайте наступні команди:
$ sudo apt update $ sudo apt install git
Для Windows потрібно завантажити інсталятори Windows. Детальну інструкцію ви можете знайти у нашому посібнику з встановлення Git.
Щоб перевірити правильність встановлення Git, введіть наступну команду:
[email protected]:~$ git --version git version 2.34.1
Встановлення Go
Тепер потрібно встановити Golang. Для цього потрібно виконати кілька команд у Linux, які наведемо нижче.
Крок 1: Видалення попередніх версій Go та створення локального дерева Go.
$ rm -rf /usr/local/go && tar -C /usr/local -xzf go1.20.4.linux-amd64.tar.gz
Крок 2: Налаштування змінної середовища PATH.
export PATH=$PATH:/usr/local/go/bi
Крок 3: Перевірка коректності встановлення Golang.
$ go version. #output go version go1.18.1 linux/amd64
Готово, тепер ми готові до встановлення Hugo!
Встановлення Hugo
Залежно від того, чи використовуєте ви Homebrew або Chocolately, вам потрібно скористатися однією з наведених команд.
Для Homebrew:
$ brew install hugo
Для Chocolately:
$ brew install hugo -confirm
Якщо ви не використовуєте жодного з них, можна встановити безпосередньо з джерела:
$ mkdir $HOME/src cd $HOME/src git clone https://github.com/gohugoio/hugo.git cd hugo go install --tags extended
Щоб перевірити, чи успішно встановлено Hugo, виконайте команду:
$ hugo -version
Start building sites …
hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1
INFO 2023/05/05 12:20:38 syncing static files to /home/nitt/techukraine.net/public/
| EN
-------------------+-----
Pages | 35
Paginator pages | 0
Non-page files | 0
Static files | 23
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Total in 117 ms
#2. Створення сайту Hugo
Hugo надає простий спосіб створення сайту. Для цього виконайте команду:
$ hugo new site techukraine.net-jamstack
Congratulations! Your new Hugo site is created in /home/nitt/techukraine.net-jamstack. Just a few more steps and you're ready to go: 1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/ or create your own with the "hugo new theme <THEMENAME>" command. 2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>". 3. Start the built-in live server via "hugo server". Visit https://gohugo.io/ for quickstart guide and full documentation.
#3. Вибір теми Hugo
Hugo надає доступ до великої кількості тем, які є відправною точкою для вашого проекту. Для створення сайту Jamstack з Hugo, вам потрібна тема.
#4. Створення сайту для малого бізнесу за допомогою Jamstack
В якості прикладу ми використаємо тему Hugo Hero. Ця універсальна тема має такі можливості, як розділи на всю ширину та створення портфоліо за допомогою Markdown.
Щоб встановити тему, скопіюйте її посилання з репозиторію та клонуйте її. Переконайтеся, що ви знаходитесь у кореневому каталозі перед тим, як продовжити.
git clone https://github.com/zerostaticthemes/hugo-hero-theme.git themes/hugo-hero-theme
#output Cloning into 'themes/hugo-hero-theme'... remote: Enumerating objects: 1141, done. remote: Total 1141 (delta 0), reused 0 (delta 0), pack-reused 1141 Receiving objects: 100% (1141/1141), 28.17 MiB | 58.00 KiB/s, done. Resolving deltas: 100% (489/489), done.
Копіювання стандартного контенту
Щоб використовувати стандартний контент, виконайте наступну команду:
$ cp -a themes/hugo-hero-theme/exampleSite/. .
Ця команда скопіює контент з папки exampleSite у кореневу папку вашого сайту.
Оновлення файлу Config.toml
Далі потрібно відредагувати файл Config.toml, у якому зберігається конфігурація проекту. Його потрібно правильно налаштувати для коректної роботи вашого сайту Jamstack.
Наразі потрібно відредагувати такі рядки:
baseURL = "/" themesDir = "themes" theme = "hugo-hero-theme"
Примітка: Файл Config.toml потрібно оновлювати постійно у міру розвитку проекту. Оскільки ви використовували стандартний контент, ваш файл Config.toml вже оновлений для розміщення зразкового контенту.
Тестування нашого сайту Jamstack
Для запуску сайту потрібно згенерувати сайт Hugo знову за допомогою команди hugo:
$ hugo
Далі запускаємо сервер, використовуючи команду hugo serve:
$ hugo serve
#output [email protected]:~/techukraine.net$ hugo server port 1313 already in use, attempting to use an available port Start building sites … hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1 | EN -------------------+----- Pages | 35 Paginator pages | 0 Non-page files | 0 Static files | 23 Processed images | 0 Aliases | 0 Sitemaps | 1 Cleaned | 0 Built in 71 ms Watching for changes in /home/nitt/techukraine.net/{archetypes,content,data,layouts,static,themes} Watching for config changes in /home/nitt/techukraine.net/config.toml Environment: "development" Serving pages from memory Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender Web Server is available at //localhost:42229/ (bind address 127.0.0.1) Press Ctrl+C to stop
Примітка: Ваш сайт зараз розміщено та доступний за адресою 127.0.0.1. Якщо з якоїсь причини він не відкривається, спробуйте відкрити альтернативну адресу, яка вказана поруч, наприклад localhost:42973
Редагування стандартного контенту теми
Тепер ви можете редагувати стандартний контент, перейшовши у папку Content. Розглянемо редагування контенту індексної сторінки, перейшовши до Content > Work > Index.md
Ось, як виглядає код після редагування:
Створення блогу
Якщо ви хочете створити блог, потрібно вибрати відповідну тему. Для цього використаємо тему Hyde.
Аналогічно створенню нового сайту, виконайте наступні команди:
$ hugo new site techukraine.net-jamstack $ cd techukraine.net-jamstack/themes $ git clone https://github.com/spf13/hyde /themes/hyde
Далі відредагуйте файл Config.toml, додавши значення theme = ‘hyde’.
Створення нової публікації
Щоб створити нову публікацію, потрібно виконати команду hugo new, а потім створити файл Markdown.
$ hugo new hellogeekflare.md
#output [email protected]:~/geefklare-jamstack$ hugo new hellogeekflare.md Content "/home/nitt/geefklare-jamstack/content/hellogeekflare.md" created [email protected]:~/geefklare-jamstack$
Редагування публікації
Щоб редагувати щойно створений допис hellogeekflare.md, відкрийте файл hellogeekflare.md у будь-якому текстовому редакторі.
Він міститиме наступне:
--- title: "Hello techukraine.net" date: 2023-05-04T11:39:10+05:30 draft: true ---
Тут ви можете додати будь-який контент у Markdown.
Додамо такий контент у Markdown:
### Hello, World! This is a new post created to show how easy it is to create **Jamstack website**. We’re using Hugo and Netlify to create our *basic Jamstack site*.
Після додавання цього вмісту у файл .md, він буде виглядати, як показано нижче (в залежності від вашого редактора, ми використовуємо Visual Studio Code):
Однак, при показі, він буде виглядати зовсім по іншому.
Примітка: Обов’язково змініть значення “draft” з “true” на “false”.
Чудово! Ми створили два веб-сайти Jamstack: один для малого бізнесу, а інший – блог.
Після редагування сайту, можна згенерувати файли, виконавши команду hugo. Він створить файли та розмістить їх у папці /public.
$ hugo
#5. Розміщення сайту Jamstack на Netlify
Після створення сайтів їх потрібно розмістити. Для цього використаємо Netlify.
Netlify – це сервіс з підтримкою CDN, який пропонує розміщення швидких сайтів. Netlify можна підключити до Github для автоматизації процесу. Це безкоштовний сервіс, але деякі функції доступні за платною підпискою.
Наше завдання полягає у відправці коду до Netlify, який виконує всю роботу за нас.
Налаштування Git-репозиторію локально
Потрібно налаштувати Git-репозиторій.
Для створення Git-репозиторію, виконайте наступну команду у корені вашого проекту:
$ git init
Потім налаштуйте тему як підмодуль. Це важливо, оскільки створюються підрепозиторії у вашому репозиторії (пам’ятаєте, як ви робили git-clone теми Hugo?). Це надасть більшого контролю над сайтом Jamstack.
Наприклад, ви зможете завантажувати оновлення теми. Це потрібно зробити тому, що Netlify необхідні теми як підмодулі для їхнього розміщення.
Отже, щоб додати тему як підмодуль, виконайте наступну команду:
$ git rim --cached themes/hyde $ git submodule add https://github.com/spf13/hyde themes/hyde
#output [email protected]:~/techukraine.net-jamstack$ git submodule add https://github.com/spf13/hyde themes/hyde Adding existing repo at 'themes/hyde' to the index [email protected]:~/techukraine.net-jamstack$
Створення репозиторію на GitHub
Після завершення локального налаштування, час створити новий репозиторій GitHub.
Після створення потрібно додати джерело до локального репозиторію.
$ git remote add origin https://github.com/logan99/techukraine.net-jamstack-tutorial.git
Тепер стягніть його:
$ git branch -M main $ git pull origin main
Створення нового комміту
Прийшов час створити новий комміт. Виконайте наступну команду, щоб додати всі файли до головної гілки:
$ git add .
Тепер виконайте команду commit для збереження змін:
$ git commit -m “First commit”
#Output [email protected]:~/techukraine.net-jamstack$ git commit -m "First commit" [main (root-commit) fa69ab2] First commit 21 files changed, 1135 insertions(+) create mode 100644 .gitmodules create mode 100644 .hugo_build.lock create mode 100644 archetypes/default.md create mode 100644 config.toml create mode 100644 content/hellogeekflare.md create mode 100644 public/404.html create mode 100644 public/apple-touch-icon-144-precomposed.png create mode 100644 public/categories/index.html create mode 100644 public/categories/index.xml create mode 100644 public/css/hyde.css create mode 100644 public/css/poole.css create mode 100644 public/css/print.css create mode 100644 public/css/syntax.css create mode 100644 public/favicon.png create mode 100644 public/hellogeekflare/index.html create mode 100644 public/index.html create mode 100644 public/index.xml create mode 100644 public/sitemap.xml create mode 100644 public/tags/index.html create mode 100644 public/tags/index.xml create mode 160000 themes/hyde
Нарешті, відправте зміни на GitHub:
$ git push --set-upstream origin main
Примітка: Для виконання операції потрібно ввести ім’я користувача та пароль GitHub.
#6. Робота з Netlify
Наш репозиторій створено, тепер переходимо до Netlify. Якщо у вас вже є обліковий запис, увійдіть або створіть новий.
Для нових облікових записів одразу запуститься майстер налаштування. В іншому випадку ви потрапите на панель керування вашим обліковим записом. Якщо ви потрапили на панель, натисніть опцію “Додати новий сайт” в розділі “Сайти”.
У розділі “Додати новий сайт” виберіть “Імпортувати існуючий проект”.
Потім вам запропонують вибрати постачальника Git. Оскільки ми використовуємо GitHub, обираємо його. Також можна вибрати Bitbucket, GitLab або Azure DevOps.
Потім буде показано список усіх ваших проектів. Виберіть репозиторій GitHub, який ви створили для цього проекту. У нашому випадку це “techukraine.net-jamstack-tutorial”. Також можна вибрати інший проект, який ви створили.
Далі потрібно вибрати гілку для розгортання та основні параметри збірки. Залишимо всі налаштування за замовчуванням.
Натисніть “Depoy Site” для розгортання.
Тепер потрібно почекати, поки Netlify виконає свою роботу. Після розгортання ви отримаєте повідомлення “Ваш сайт розгорнуто”.
Тепер натисніть на сайт у верхньому лівому куті.
Ви помітите, що сайт не завантажується належним чином. Це тому, що базова URL-адреса у файлі Config.toml встановлена неправильно. Netlify згенерував нову URL-адресу проекту, тому потрібно додати її до файлу Config.toml.
У нашому випадку, сайт знаходиться за адресою https://animated-beijinho-2baa8b.netlify.app/
Тому потрібно додати базову URL-адресу до файлу.
Змініть відповідне значення у локальних налаштуваннях:
baseURL = 'https://animated-beijinho-2baa8b.netlify.app/' languageCode="en-us" title="My new Jamstack site" theme="hyde"
Для застосування змін виконайте наступну команду:
$ git add . $ git commit -m “changed baseURL to make it work on Netlify”
Netlify автоматично перезапустить розгортання при виявленні нового коміту