Кращі статичні генератори сайту

Кращі статичні генератори сайту


Процес створення веб-сайту складається з двох частин: ви надаєте вміст, а потім ваша CMS – WordPress або все, що ви вирішите використовувати – приймає цей контент, поєднує його з обраною вами темою та вибраними шаблонами та робить веб-сайт із нього щоб ваші клієнти чи ваші читачі могли прочитати. Але ці дві частини не потрібно робити разом: їх можна розділити один від одного, і ось що генератор статичного сайту (SSG) робить.

У цьому посібнику ми пояснимо, що таке генерація статичних сайтів та переваги цього, та перерахуємо десять найкращих генераторів статичних сайтів, щоб дати певні рекомендації щодо вибору між ними.

Як працює генератор статичного сайту? І навіщо використовувати один?

Як згадується, більшість CMS мають дві речі: вони перетворюють ваш вміст у HTML, поєднуючи його з вашими темами та шаблонами, а потім роблять цей HTML доступним як веб-сайт. Статичний генератор сайту розбиває цей процес на два: частина, де ваш вміст перетворений на HTML, відбувається на вашому власному комп’ютері, надаючи вам папку, повною HTML-файлів. Потім ви завантажуєте ці HTML-файли в Інтернет, де вони стають доступними як веб-сайт для всіх.

Але навіщо це робити? Є ряд переваг.

Перший – це безпека. Тому що ваш веб-сайт, з яким люди взаємодіють, – це простий HTML, і його набагато складніше зламати. А оскільки статичний генератор сайту, який містить увесь комп’ютерний код, який працює, працює лише на власному комп’ютері і взагалі не піддається впливу широкого світу, його також не можна зламати. Це означає, що оновлення безпеки є в основному непотрібними; вам більше не потрібно турбуватися з регулярними спливаючими вікнами, котрі розповідають про оновлення CMS, оновлення плагінів, оновлення свого сайту.

Для деяких це може бути достатньо самою причиною, але для генерації статичних сайтів є друга основна перевага: виконання.

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

Краща ефективність приносить користь вашому веб-сайту всілякими способами. Ваші клієнти, швидше за все, продовжують переглядати та показники відмов нижчі,  Швидші часи завантаження сторінки чудово підходять для SEO, оскільки Google та інші пошукові системи цінують швидку ефективність та покращують ваш рейтинг.

Стрибки руху не є проблемою; якщо у вас раптом спостерігається колосальна кількість відвідувачів, це буде справлятися чудово, і ви ніколи не побачите жодного з таких повідомлень “502 Bad Gateway”, коли сайт перевантажений саме в той момент, коли він стає популярним..

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

Це розділення «стадії генерації» та «етапу публікації» потрібно розуміти, а генератори статичних сайтів, як правило, мають на увазі дещо більше технічної бази знань, ніж стандартного роду динамічної CMS. Зокрема, більшість генераторів статичних сайтів вимагають принаймні трохи ознайомлення з командний рядок: ці програми, як правило, керуються командами, а не вказівниками та клацанням.

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

Давайте подивимося на десять найкращих генераторів статичних сайтів, а потім про те, як вибрати між ними.

10 найкращих генераторів статичних сайтів

1. Гюго

логотип hugo

Hugo знаходиться на більш легкому кінці термінальних генераторів статичних сайтів для налаштування та використання. Їх документація, особливо на як встановити Hugo і запустити його, досить всеохоплююче, і вам не потрібно спочатку встановлювати новий магазин пакунків, а потім встановлювати Hugo з.

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

Внесення змін до вашого сайту шляхом додавання чи редагування вмісту або зміни теми вимагає “перебудувати” сайт: тобто провести процес поєднання вмісту з темою в HTML для кожної сторінки. Навіть невелика різниця в швидкості складання може змінити ваші секунди очікування та хвилини очікування, щоб побачити результат зміни, яку ви внесли, і Hugo наполегливо працює над тим, щоб бути найшвидшим у цьому.

Якщо ви створюєте сайт із існуючих даних, тоді “Вміст, керований даними“Функція дозволяє порівняно легко розміщувати вміст сайту у форматах CSV або JSON. Це може бути корисним способом більш зручного використання деяких існуючих даних, які ви хочете викрити в світі, щоб вони могли переглядати та переходити по ньому, не потребуючи запуску Excel або Google Sheets.

2. Одинадцять, або 11ти11ти логотип

11ty – це одна з новіших SSG, але це все більший список популярності. Він зараховує себе як “простіший генератор статичних сайтів”. Однак для цього потрібна розумна кількість технічного ознайомлення (і його документація відображає це), але для тих, хто може зрозуміти це, це робиться на елегантний спосіб.

11ty написано на JavaScript, і так потрібно node.js працювати; вам потрібно буде встановити це спочатку, якщо ви цього ще не зробили, а потім встановити 11ти з командного рядка.

11ty чітко поглядає на ефективність веб-сайту, до того, як вони з гордістю показують: продуктивність веб-сайтів, побудованих за допомогою нього, і він дуже популярний серед веб-професіоналів та тих, хто курирує та створює відкриту мережу загалом.

3. Пеліканотримати логотип пелікана

Pelican має досить позбавлену естетику, але використання Python в якості основної мови програмування може розширюватися майже в будь-якому напрямку, яке вам потрібно, за допомогою додаткового додаткового програмування.

У ньому є підтримка імпорту даних із WordPress, що дозволяє легше, ніж деякі інші SSG, переходити з існуючого сайту WordPress у статичну генерацію сайту, не втрачаючи поточну настройку. І як і кращий клас SSG, він розроблений так, щоб мати можливість працювати з усім веб-сайтом, а не в першу чергу для ведення блогів.

У Пелікана спочатку є трохи крута крива навчання, що робить його більш підходящим для когось, хоча б трохи знайомого з Python. Так само вам вже знадобиться встановлення Python на вашому комп’ютері, і не даються вказівки для не розробників, у яких цього немає … але якщо ви тип розробника, який вже використовує Python, тоді Pelican – хороше місце для початку.

4. Микола

nikola логотип

Нікола застосовує дуже «підключений акумулятор» підхід до створення статичних сайтів, надаючи дуже детальні шаблони для блогів та повних веб-сайтів, а також галереї зображень та пошук серед іншого.

Він має досить широкий перелік плагіни і теми теж. Хоча Нікола і справді прагне до більш технічного кінця ринку; Вам потрібно буде бути досить впевненим у розробці Python, щоб зробити тут більше, ніж основи, але якщо ви тоді, то Nikola пропонує більшу розширюваність, ніж багато альтернативних варіантів.

Список тем не дуже вичерпний, тому якщо ви шукаєте щось красиве, а не інформативне, то краще буде шукати в іншому місці. Однак швидкість відновлення швидша, ніж у більшості інших можливостей.

Як і Пелікан, Нікола припускає, що у вас вже є доступний Python, і не пояснює, як зробити це можливим, тому якщо ви цього не маєте і не працюєте в Windows, то, можливо, ви захочете переглянути одну з інших альтернатив.

5. ГетсбіЛоготип Гетсбі

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

Для тих, хто знайомий з React, бібліотека веб-компонентів, Гетсбі може стати хорошим вибором, оскільки вона побудована навколо неї, так що ви можете повторно використовувати звичне середовище, яке ви вже знаєте – справді, Власний веб-сайт будується з Гетсбі.

Гетсбі вимагає як node.js, так і системи управління версіями git бути встановленим. Вони мають досить детальний набір сторінки документації про те, як налаштувати середовище Гетсбі, в тому числі в Windows, але це досить пов’язаний процес, якщо ви не знайомі з командним рядком. Крім того, документація поєднує вказівки Windows і Linux та Mac разом, що робить її трохи важкою.

6. Джекілл

Логотип Джекілла

Jekyll – один із найстаріших генераторів статичних сайтів, але він все ще знаходиться в активному розвитку, і його популярність значною мірою спричинила паводку інновацій SSG, які дали все інше в цьому списку.

Однією з його претензій на славу є те, що він вбудований у службу хостингу коду Github: можна зберегти свій вміст у Github сховище, хмарний диск для коду таким чином, що Github запустить код Джекілла для ви перетворюєте вміст на веб-сайт, без того, щоб взагалі запускати будь-який код.

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

Однак це все одно потребуватиме певного ознайомлення з git система управління кодом. Звичайно, також можна запустити Jekyll самостійно на власному комп’ютері, і вони надають набір інструкцій з установки Windows, хоча офіційно Windows не підтримується.

7. Statiq.web

statiq логотип

Web Statiq є досить новим доповненням до ряду SSG, і досі знаходиться в досить важкому розвитку. Тож найкраще підходити для тих, хто бажає долучитися до цього процесу та приєднатись до спільноти, надаючи відгуки про те, що добре, а що ні..

Його унікальною точкою продажу є те, що він побудований за допомогою .NET, тому ті, хто має певні знання цього стека програмування, знайдуть, що Statiq Web добре відповідає їх наявному досвіду. Це приклад проекту більш загальної рамки Statiq, тому більш досвідчений програміст може мати можливість використовувати більш широкі рамки, щоб створити щось більш комплексне.

8. Публій

Логотип Publii

Publii, на відміну від більшості інших генераторів статичних сайтів, тут не є інструментом командного рядка. Натомість це настільний додаток, доступний для Windows, Mac та Linux.

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

Існують вбудовані інструменти для публікації для переміщення статичного веб-сайту до різних існуючих хостів, таких як Netlify та хмарні місця розміщення. Він має систему імпорту для перетворення існуючого сайту WordPress в Publii та ринок платних тем професійного рівня.

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

9. WP2Static

wp2static логотип

WP2Static застосовує досить інший підхід, ніж інші генератори статичних сайтів: він не є строго самим менеджером сайтів. Натомість він працює рука об руку з WordPress, щоб зробити статичну версію сайту, яким керує сам WordPress.

Мовою описаного вище опису WP2Static залишає WordPress відповідальним за ваше редагування та перетворення вмісту в HTML, поєднуючи його з вашими темами та шаблонами. Потім перейдіть до WP2Static, щоб взяти цей HTML і опублікувати його як звичайний HTML десь в Інтернеті.

У цьому є кілька очевидних переваг: ви можете продовжувати використовувати знайомий вам інтерфейс WordPress і матимете доступ до всієї широкої бібліотеки тем та плагінів WordPress.

Однак і в цьому є свої недоліки: важливо перенести установку WordPress кудись інше, інакше ви втратите більшість переваг статичного генерування сайту.

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

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

Однак якщо ви дуже звикли до користувальницького інтерфейсу WordPress або сильно прив’язані до конкретних плагінів або тем WP, які важко знайти або зробити доступними для іншого SSG, WP2Static може бути ідеальним рішенням.

10. Далі.js

Логотип Nextjs

Next.js – це менше генератор для статичних сайтів і більше рамка для побудови статичних додатків за допомогою React. Він підтримує генерацію статичних сайтів (і оновив цю підтримку, щоб значно покращити її у версії 9.3 на початку 2020 року), і якщо ви хочете створити додаток за допомогою React та хочете, щоб це створило найкраще в класі класичне покоління веб-сайтів, .js – гарне місце для пошуку.

Він передбачає хороші знання як JavaScript, так і React, тому це не для нетехнічних, а документація схиляється до середовища Linux або Mac, а сервіс lip надається користувачам Windows.

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

Як правильно вибрати?

Там у вас є: список, що вибрати.

Але як вибрати той, який найкраще підходить для тебе?

Ну а якщо вам не цікаво потрапляти в командний рядок, то дивіться, звичайно, Publii. Якщо ви експерт WordPress, який прагне стати статичним, то WP2Static ґрунтується на тих широких навичках, які ви вже маєте. Якщо ви дбаєте про швидкість, то 11ty або Hugo – це ваші місця для пошуку.

Якщо у вас є досвід роботи з певною мовою програмування чи середовищем, виберіть генератор статичного сайту, написаний цією мовою, щоб найкраще використовувати наявні навички: для Python використовуйте Pelican або Nikola; для Ruby, Jekyll, для .NET, Statiq, для React дивіться на Next.js та Gatsby, а також на JavaScript, 11ty.

Якщо ви переходите з існуючого веб-сайту WordPress, переконайтеся, що ваш інструмент вибору має імпортер вашого вмісту WordPress (більшість), і пам’ятайте, що експериментувати дешево і просто. Ви можете створити тестовий статичний сайт з деяким прикладом вмісту та генерувати його просто на власному комп’ютері, без того, щоб хто-небудь ще міг його бачити.

Спробуйте інструменти, які вам подобаються за звучанням – всі вони безкоштовні та з відкритим кодом – і тоді, коли ви будете готові, почніть шукати місця для розміщення статичного вмісту.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map