Створення для Інтернету – це завжди цікава перспектива. Це дозволяє розробникам мати свій шлях до створення веб-додатків. Вони можуть вибрати структуру, технологію, інструменти та філософію, яку вони хочуть використовувати.
Однією з таких філософій є Jamstack. Він пропонує гнучкий підхід до вирішення проблеми веб-розробки.
У цій статті ви дізнаєтеся, як створити свій перший додаток Jamstack. Давайте розпочнемо.
Що таке Jamstack?
Jamstack — одна з нових веб-філософій для створення речей для Інтернету. Технічно він пропонує розробникам зручну веб-архітектуру. Ви можете вибрати рамки та інструменти для досягнення тієї ж мети.
Якщо придивитися,
Джем + стек = JAMstack.
Джемстек складається з трьох основних компонентів:
- J для JavaScript
- A for Application Programming Interface (API)
- M для розмітки
Цей підхід відокремлює бізнес-логіку від даних, відокремлюючи рівень веб-доступу. Серед переваг:
- Швидший час завантаження (майже миттєво).
- Гнучкий і швидкий робочий процес розробки.
- Покращена масштабованість і ремонтопридатність.
Щоб дізнатися більше про 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. Файли JavaScript можуть підключатися до API і додавати динамічні дані, спілкуючись із базою даних.
Створення першого веб-сайту Jamstack
Оскільки Jamtack пропонує свободу, ви можете вибрати будь-який фреймворк/генератор статичного сайту 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 або Mac.
Встановлення 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
експорт 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
Для шоколаду:
$ 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$
Редагування публікації
Щоб редагувати щойно створений допис hellogeefklare.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).
Однак, коли ми його подамо, він виглядатиме зовсім інакше.
Примітка. Обов’язково змініть значення чернетки з «true» на «false»
Чудово! Ми створили два веб-сайти Jamstack, один сайт малого бізнесу та інший блог.
Після редагування сайту ви можете створити файли, виконавши команду hugo. Він створить файл і помістить його в папку /public.
$ hugo
#5. Розгортання сайту Jamstack на Netlify
Створивши наші сайти, давайте розгорнемо їх. Для цього ми будемо використовувати Netlify.
Netlify — це сервіс із підтримкою CDN, який пропонує таким користувачам, як ви, розміщення швидких сайтів. Ви можете підключити Netlify до Github і автоматизувати процес. Це безкоштовна послуга з деякими функціями за платною стіною.
Наше завдання — надіслати код до Netlify і дозволити Netlify виконувати все за нас.
Налаштування сховища Git локально
Настав час налаштувати репозиторій Git.
Щоб запустити репозиторій Git, виконайте наступну команду в корені вашого проекту.
$ git init
Далі нам потрібно налаштувати тему як підмодуль. Це важливий крок. Технічно це створює підрепозиторії у вашому сховищі. (Пам’ятаєте, ви зробили git-клон теми 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 розумний. Коли він виявляє новий комміт, він автоматично знову розгортає ваш сайт.
Якщо ви зараз завантажите свій сайт, він завантажиться ідеально.
Вау! Ви зробили це. Я знаю, що є чому навчитися. Однак ви побачите, що весь процес інтуїтивно зрозумілий, коли ви зробите це кілька разів.
Заключні слова
Jamstack захопив нову еру розробників. Це підвищує продуктивність, а також покращує спосіб розгортання сайтів. Jamstack виріс завдяки чудовим членам екосистеми, таким як Hugo та Netlify. Безсумнівно, звідси воно буде тільки рости.
Далі перевірте, як розгорнути зовнішню програму на Netlify.