Як розмістити статику WordPress Сайт безкоштовно (на сторінках GitHub, Vercel, Netlify)

WordPress це потужна і популярна система керування вмістом, але хостинг динамічний WordPress сайт може бути дорогим і вимагати постійного обслуговування. Для багатьох простих веб-сайтів або блогів статична версія a WordPress сайт може стати чудовою альтернативою. Статичні сайти швидші, безпечніші та можуть безкоштовно розміщуватися на таких платформах, як GitHub Pages, Netlify або Vercel.

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

Потрібні інструменти

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

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

Крок 1: Розвивайте свій WordPress Сайт на LocalWP

Перш ніж ми почнемо, вам потрібно мати свій WordPress сайт готовий. Якщо ви ще не створили свій сайт або якщо він зараз розміщений деінде, я рекомендую використовувати LocalWP (раніше Local by Flywheel) для розробки та тестування вашого сайту локально.

1. Завантажте та безкоштовно встановіть LocalWP з localwp.com.
2. Створіть новий WordPress сайт у LocalWP.
3. Створіть свій сайт, додайте вміст і встановіть необхідні плагіни.
4. Переконайтеся, що ваш сайт виглядає та функціонує саме так, як ви хочете, щоб у його статичній формі.

Розуміння обмежень статичного сайту

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

1. WordPress Форми: Традиційний WordPress форми, які покладаються на обробку на стороні сервера, не працюватимуть. Це включає контактні форми, форми підписки та інші інтерактивні форми.
2. WordPress Коментарі: Системи динамічних коментарів, які дозволяють взаємодіяти з користувачем у реальному часі, не підтримуються на статичних сайтах.
3. Доступ до адміністративної зони: Будь-які посилання на /wp-admin або подібні внутрішні WordPress маршрути не працюватимуть, оскільки вони потребують обробки на стороні сервера.
4. Оновлення вмісту в реальному часі: на відміну від динамічних, статичні сайти вимагають регенерації та повторного розміщення, щоб з’явилися будь-які зміни вмісту WordPress сайти, де зміни відбуваються негайно.
5. Аутентифікація користувача: Функції, які вимагають входу або членства користувачів, не підтримуються в базових статичних налаштуваннях сайту.
6. Функціональність електронної комерції: динамічні кошики для покупок і обробка платежів зазвичай не працюють у статичному середовищі.
7. Функціональність пошуку: WordPressВбудована функція пошуку не працюватиме, хоча можна реалізувати альтернативи (як зазначено в функціях Simply Static Pro).
8. Динамічні бічні панелі та віджети: Віджети, які отримують дані в реальному часі або потребують обробки на стороні сервера, не працюватимуть належним чином.

Можливі обхідні шляхи

Хоча ці обмеження існують, є способи пом’якшити деякі з них:

• Для форм ви можете використовувати сторонні служби, такі як Formspree або Netlify Forms.
• Коментарі можна обробляти через такі служби, як Disqus або Facebook Comments.
• Функції пошуку можна реалізувати за допомогою рішень на стороні клієнта, таких як Lunr.js або Algolia (пропонованих у Simply Static Pro).
• Для електронної комерції подумайте про використання зовнішніх служб, таких як Snipcart або Gumroad.

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

Крок 2: Встановіть і налаштуйте Simply Static

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

1. в вашому WordPress інформаційної панелі, перейдіть до Плагіни > Додати новий.
2. Знайдіть «Simply Static», установіть плагін і активуйте його.
3. Перейдіть до Simply Static > Settings у вашому WordPress приладова панель.
4. На вкладці «Загальні» встановіть наступне:
   • Цільові URL-адреси: виберіть «Зберегти для використання в автономному режимі». Якщо у вас уже є власний домен, виберіть «Абсолютні URL-адреси», як показано на знімку екрана нижче:

5. Локальний каталог: встановіть для цього каталог за межами вашого WordPress встановлення, напр. /Users/yourusername/Documents/StaticSite

6. На вкладці «Включити/виключити» переконайтеся, що включено всі необхідні URL-адреси.
   • У більшості випадків використовуйте /wp-content/ і /wp-includes/

7. Збережіть налаштування.

існує також професійна версія SimplyStaticОсь короткий перелік професійних функцій плагіна Simply Static:

1. Розширене розгортання:
   • Розгортайте статичні сайти на кількох платформах, включаючи SimplyCDN, GitHub, Amazon AWS S3, Digital Ocean Spaces і BunnyCDN.
2. Прості оновлення сайту:
   • Ефективно керуйте оновленнями вмісту, як для окремих публікацій, масових оновлень, так і для окремих URL-адрес.
3. Інтеграція форм і коментарів:
   • Легко інтегруйте форми з популярних плагінів, таких як Contact Form 7, Gravity Forms і Elementor Forms, у свій статичний сайт.
4. Функціональність пошуку:
   • Застосуйте базовий пошук за допомогою Fuse.js або перейдіть на більш повний пошук за допомогою Algolia.
5. Підтримка WP-CLI:
   • Використовуйте WP-CLI для налаштування, експорту та керування функціями Simply Static безпосередньо з командного рядка.
6. Багатомовна підтримка:
   • Пропонуйте вміст кількома мовами за допомогою інтеграції WPML, Polylang і TranslatePress.
7. Мініфікація:
   • Оптимізуйте продуктивність сайту, зменшивши файли CSS, JavaScript і статичні HTML.
8. WordPress Приховування:
   • Замінити за замовчуванням WordPress шляхи, щоб приховати той факт, що WordPress використовується як система керування контентом.

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

Крок 3: Ініціалізація сховища Git

Тепер, коли ми налаштували генератор статичних сайтів, давайте підготуємо наш локальний каталог для контролю версій:

1. Відкрийте термінал або командний рядок.
2. Перейдіть до каталогу, який ви вказали в Simply Static (наприклад, cd /Users/yourusername/Documents/StaticSite).
3. Ініціалізуйте нове сховище Git, виконавши:

 git init

Крок 4: Створіть репозиторій GitHub

Ми будемо використовувати GitHub Desktop для створення та керування нашим репозиторієм:

1. Завантажте та встановіть GitHub Desktop з desktop.github.com якщо ви ще цього не зробили.
2. Відкрийте GitHub Desktop і ввійдіть у свій обліковий запис GitHub.
3. Натисніть «Файл» > «Новий репозиторій» або скористайтеся кнопкою «Створити новий репозиторій на жорсткому диску».
4. Встановіть наступне:
   • Ім’я: виберіть ім’я для свого сховища (наприклад, «my-static-wordpress»)
   • Локальний шлях: встановіть для нього той самий каталог, який ви вказали в Simply Static
   • Ініціалізуйте це сховище за допомогою README: не встановлюйте позначку
   • Git ignore: виберіть «None» (ми створили свій власний на кроці 3)
   • Ліцензія: виберіть відповідну ліцензію або залиште «Немає»
5. Натисніть «Створити репозиторій»

Крок 5: Зафіксуйте репозиторій

Тепер, коли ми налаштували наше сховище, давайте зробимо наш перший комміт:

1. У GitHub Desktop ви повинні побачити всі файли на вашому статичному сайті в списку змін.
2. Введіть підсумок для вашого коміту (наприклад, «Початковий коміт статичних файлів сайту»).
3. Натисніть «Закріпити за основним» (або «Закріпити за основним» у старих версіях).
4. Натисніть «Опублікувати репозиторій», щоб перемістити локальне сховище на GitHub.

Крок 6. Запустіть простий статичний експорт

Тепер настав час створити наш статичний сайт:

1. Поверніться в WordPress приладова панель.
2. Перейдіть до Simply Static > Generate. (Ви можете ігнорувати сповіщення про помилку діагностики, оскільки ви розгортаєте лише локальний каталог).
3. Натисніть «Створити статичні файли».
4. Дочекайтеся завершення процесу. Це може зайняти кілька хвилин залежно від розміру вашого сайту.
5. Після завершення поверніться до GitHub Desktop.
6. Ви повинні побачити щойно створені або оновлені файли в списку змін.
7. Зафіксуйте ці зміни за допомогою повідомлення на зразок «Оновити статичні файли сайту».
8. Надішліть зміни на GitHub, натиснувши «Надіслати джерело».

Крок 7: Підключіть репозиторій до платформи хостингу

Тепер, коли наш статичний сайт розміщено на GitHub, ми можемо легко підключити його до безкоштовної хостингової платформи. Я надам інструкції для GitHub Pages, Netlify і Vercel:

Сторінки GitHub

1. Перейдіть до свого репозиторію на GitHub.com.
2. Натисніть «Налаштування» > «Сторінки» на лівій бічній панелі.
3. У розділі «Джерело» виберіть «Розгорнути з гілки».
4. Виберіть гілку, яку ви хочете розгорнути (зазвичай «main» або «master»).
5. Виберіть кореневу папку (/) і натисніть «Зберегти».
6. Ваш сайт буде працювати за адресою https://yourusername.github.io/repository-name/.

netlify

1. Зареєструйтеся для безкоштовного облікового запису за адресою netlify.com.
2. Натисніть «Новий сайт від Git» на інформаційній панелі Netlify.
3. Виберіть GitHub як постачальника Git і авторизуйте Netlify.
4. Виберіть своє сховище зі списку.
5. Залиште команду збірки та каталог публікації порожніми.
6. Натисніть «Розгорнути сайт».
7. Ваш сайт буде працювати в субдоміні Netlify, який ви можете налаштувати в налаштуваннях сайту.

Версель

1. Зареєструйтеся для безкоштовного облікового запису за адресою vercel.com.
2. Натисніть «Новий проект» на інформаційній панелі Vercel.
3. Імпортуйте свій репозиторій GitHub.
4. Залиште налаштування збірки без змін (Vercel має автоматично визначити, що це статичний сайт).
5. Натисніть «Розгорнути».
6. Ваш сайт буде працювати в субдоміні Vercel, який ви можете налаштувати в налаштуваннях проекту.

Підсумки

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

Деякі додаткові поради:

• Спробуйте налаштувати власний домен для більш професійного вигляду.
• Регулярно оновлюйте свій WordPress установку та плагіни, щоб гарантувати, що ви працюєте з останніми функціями та оновленнями безпеки.
• Ознайомтеся з розширеними функціями Професійна версія Simply Static, ніби ховається WordPress і налаштування форм або функцій пошуку для вашого статичного сайту.