Jamstack: Створюйте швидше, більш ефективні веб-сайти сьогодні

Sep 11, 2025
Як
JAMstack main
(Image Credit: Future / Joseph Ford)

JamStack - це спосіб створення та обслуговування веб-сайтів з мінімальним навантаженням, необхідним сервером. Він отримує назву з технологій, що використовуються в процесі збірки, JavaScript, API та розмітки. Сторінки вбудовані в мові розмітки заздалегідь і служать статичними HTML-файлами, як запитує користувач. Щоб побудувати сайт та привести ці технології разом, вам потрібні правильні інструменти. Переконайтеся, що ви перевіряєте наш Найкращі редактори коду Опублікувати, щоб допомогти вирішити найкраще середовище розробки для вас.

Традиційно, коли користувач натискає на веб-сторінці, відбудеться серія дій. Браузер користувачів надсилає запит на сервер веб-сайту, він проходить через код бекенда, генерує правильну сторінку, а дані надсилаються назад до браузера та надаються як веб-сторінка. Дуже багато, що могло б піти не так, і навіть тоді, коли він іде добре, це трохи повільніше, ніж користувач, який зручно, в молнії швидкий цифровий світ, який ми зараз живемо.

Але за допомогою JamStack означає швидше більш ефективні місця і менше, щоб піти не так. У цьому підручнику ми демонструємо, як налаштувати веб-сайт блогу в JamStack, щоб служити як вступ до концепцій. Використовувані інструменти будуть Угод Як статичний генератор сайту, Нетліфікувати як інструмент для будівництва і Гуляк як безкоштовний хостинг для файлів.

Щоб ще більше покращити свій досвід, переконайтеся, що ви виберете ідеальне веб хостинг сервіс, і краще Веб-будівельник .

01. Завантажте необхідні інструменти

Завантажте копію Віктор Гюго - Це один з декількох стартерних комплектів, щоб швидко вивести речі з землі. Також переконайтеся, що у вас є вузол встановлено на своєму середовищі розробки. 

https://github.com/netlify-templates/victor-hugo

02. Створіть робочий довідник і встановіть Hugo

Створіть каталог і назву Джемб . Ось де ми будемо працювати над нашою машиною для розвитку. Витягніть завантажені файли для Hugo у цьому каталозі та відкрийте його в командному рядку. Щоб встановити всі залежності, відкрийте командний рядок або термінал у папці Jamstack і запустити npm встановлення 

npm install

03. Запустіть сервер

JAMstack03

(Зображення кредиту: Joseph Ford)

Як тільки залежності закінчилися, запустіть початок NPM. Сервер розвитку тепер запускає місцеву копію Victor Hugo, доступну за замовчуванням у LocalHost: 3000 - Відкриття, яке посилання має показати вікно привітання, якщо все було успішно. Після перевірки натисніть Кара + C зупинити сервер.

04. Додайте сторінку та посаду

JAMstack04

(Зображення кредиту: Joseph Ford)

Змінити каталог папки сайту, потім, використовуючи Hugo New команду, додати a Page-one.md і a post-one.md . Розробники, що працюють у Windows, потрібно буде завантажити файл hugo.exe та додати шлях, щоб отримати це на роботу, але легко дотримуватися документації угод Веб-сайт. 

 Hugo New Page-one.md
Hugo New Post / Postone.md

05. Додайте вміст на сторінку та посаду

Для цілей тестування деякий вміст повинен бути доданий до нової публікації та сторінки (отримав медіа-важкий вміст? Назад до кращого хмара зберігання ). Відкрийте каталог для проекту у файловому браузері та перейдіть до JamStack / Site / Content. У цій папці файл Page-one.md тепер повинні існувати. Також названа папка пост який містить post-one.md. Відкрийте обидва ці файли, і додайте певний вміст у розмірі нижче, ніж (або в деяких випадках +++) 

 # Lorem Ipsum Dolor Sit Amet
## Consectetur Adipiscing * Elit *
Sed do eiusmod charm indididunt ut labore
et dolore Magna Aliqua.

06. Додайте тему як піддум

JAMstack06

(Зображення кредиту: Joseph Ford)

Текст, введений у попередніх файлах, не можна переглядати без теми. Як приклад, тема Ananke буде використана. Видалити вміст струму Сайт / макети Папка, залишаючи її порожньою. Зробіть новий каталог у папці "Сайт" теми , потім змініть його та запускайте наступний код, щоб імпортувати тему як підмодуль Git. Примітка: Нормальний клонування не сумісний з NetLify. 

 Mkdir теми
Теми CD
Підмодуль Git Додати HTTPS: // github
com / & lt; hemecreator & gt; / & lt; themename & gt;
https://github.com/budparr/gohugo-theme
ananke.git themes / anke

07. Налаштуйте тему та запустіть сервер

Скопіюйте вміст Сайт / Теми / Gohugo-Тема Ananke / Processionite / config.toml до над одним у папці сайту. У верхній частині сторінки замініть базову URL-адресу / ' і видалити лінію themesdir = '../ .. . Збережіть файл конфігурації, відкрийте термінал і запустіть npm починається команду. Ви також можете змінити назву веб-сайту (якщо ви хочете), замінивши заголовок значення. 

 CD-сайт
NPM Start

08. Тест у браузері

відчинено http: // localhost: 3000 / page-one / Щоб переглянути тему, яка надає марку сторінки як повністю стилізовану сторінку. Відкриття домашньої сторінки, перша пошта тепер буде видно. Це означає, що зараз функціональний генератор статичного сайту.

09. Налаштуйте меню

JAMstack09

(Зображення кредиту: Joseph Ford)

Під час перегляду веб-сайту помітно, що сторінка, зроблена раніше, не відображається в навігації. Повернення до вмісту додайте рядок у конфігурації передньої речовини, щоб розповісти Hugo, яке меню відображає сторінку. 

 Томл
+++
Меню = "Головна"
+++
Ямл
---
Меню: "Головна"
---

10. Натисніть файли до github

Далі, анімайте коло, щоб відповісти на кліки користувачів. Тепер статичний сайт є і працює, він повинен бути доступним на сервері розробки. Першим кроком є ​​натискання коду до GitHub. Створіть новий репозиторій на GitHub, а потім або використовуйте командну рядок, щоб натиснути код із папки проекту або Github Desktop App. 

 Git Remote Add Origin Https://github.com/[GithubUSername]/jamstacktorial.Git
Git Push -u Майстер походження

11. Підключення до Netlify

Netlify принесе все разом, побудуйте сайт і служить йому на тимчасовий домен. Почніть, створюючи обліковий запис Нетліфікувати і пов'язати його з обліковим записом Github. Після того, як все налаштувало натисніть кнопку Новий сайт від Git .

12. Підключення до GitHub

Для безперервного розгортання натисніть Гуляк , потім виберіть репо, що було зроблено раніше в підручнику. Netlify має автоматично виявляти найкращі варіанти побудови проекту. Вона повинна читати npm run build . Якщо все добре, натисніть розгортання.

13. Побудувати сайт та перегляду на посилання Netlify

JAMstack13

(Зображення кредиту: Joseph Ford)

Після того, як сайт побудований, з'явиться повідомлення розгорнутий . Netlify дав веб-сайт тимчасове доменне ім'я, яке може не мати сенсу - це можна змінити, просто натиснувши параметри сайту. Змініть назву, а потім натисніть посилання, щоб побачити сайт, завантажений через JamStack.

14. Зробіть зміну, щоб випробувати розгортання

Веб-сайт зараз завантажує через JamStack. Це швидко, і він автоматично оновлюється, коли здійснюється команда GitHub. Щоб перевірити це, поверніться до середовища місцевого розвитку та запустити Hugo New Page-thee.md З каталогу сайту. Потім відкрийте створений файл, додайте певний вміст, натисніть Зберегти та здійснити файл до репо. У межах моментів ви помітите, що оновлення живе на посилання Netlify.

15. Додайте CMS на свій статичний сайт

Робота в звичайній розмітки та використання командного рядка для створення сторінок не буде добре з більшістю клієнтів. Щоб зробити веб-сайт більш доброзичливим, встановіть систему управління контентом. Forestry.io це ідеально підходить для поточної установки. Перейдіть на веб-сайт та створіть обліковий запис за допомогою GitHub.

16. Налаштування лісового господарства

Натисніть кнопку Додати новий сайт, а потім виберіть Гуго як статичний генератор сайту, Git як провайдер і заповнити інформацію в наступних формах. Натисніть "Надіслати", і нова CMS буде завантажена, готова до змін вмісту. Тепер сторінки можуть бути відновлені з бічної панелі, а також посади та величезний масив інших варіантів.

Ви хочете дізнатись більше про веб-дизайн? Потім Підписатися на мережу , журнал найкращого у світі для веб-дизайнерів та розробників.

An image promoting GenerateJS on Thursday 2 April 2020 at Rich Mix, Shoreditch, London featuring Remy Sharp, Phil Hawksworth, Jeremy Keith and Nadieh Bremer.

Дізнайтеся, як побудувати кращий JavaScript на генерації (Зображення Кредит: Майбутнє / Ремі Sharp / Phil Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftiba, unsplash)

Приєднуйтесь до нас у квітні 2020 року з нашим складом JavaScript Superstars на Generatejs - Конференція, яка допомагає вам створити кращий JavaScript. Забронювати зараз generateconf.com

Читати далі:

  • 8 тегів HTML, які потрібно використовувати (і 5, щоб уникнути)
  • 25 кращих API JavaScript
  • Як приховати код JavaScript з джерела перегляду

Як - Найпопулярніші статті

Як створити інтер'єри з Eevee Blender

Як Sep 11, 2025

Атипічне-студія: містить текстури з poliigon.com - текстури не можуть бути пере�..

Кеш на підсилювачем BBC

Як Sep 11, 2025

Минулого року під час сеансу тестування користувачів для програми BBC Ne..

Як зробити 3D-напис у Illustrator

Як Sep 11, 2025

Минулого тижня Adobe випустив ще кілька відео для їх корисного, щоб зробити його зараз відтворення, дає тво..

Вступ до тестування зручності

Як Sep 11, 2025

Успішний веб-продукт відповідає не лише потребам вашої організації, а й потреби ваших користувачів. Тес�..

Створіть змішані фарби з InDesign

Як Sep 11, 2025

Page 1 з 2: Створіть змішаний зразок чорнила ..

Використання векторних інструментів: підхід веб-дизайнера

Як Sep 11, 2025

Якщо ви веб-дизайнер, то хороший шанс, що Photoshop наразі відкритий та запущений на вашому комп'ютері. Давайт..

5 способів ефективно керувати готівкою

Як Sep 11, 2025

Контроль вашого Cashflow є ключем до позаштатного успіху, і є деякі жорстк�..

15 Поради для оптимізації крос-пристроїв

Як Sep 11, 2025

Дизайн для всіх пристроїв! Anna dahlström буде говорит�..

Категорії