Как разместить статику WordPress Сайт бесплатно (на страницах GitHub, Vercel, Netlify)

WordPress это мощная и популярная система управления контентом, но с динамичным WordPress сайт может быть дорогостоящим и требовать постоянного обслуживания. Для многих простых веб-сайтов или блогов статическая версия 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 site, помните об этих ограничениях и соответствующим образом планируйте структуру и функции вашего сайта. Сосредоточьтесь на страницах, ориентированных на контент, и сведите к минимуму зависимость от динамических функций, которые не применимы в статической среде.

Шаг 2. Установите и настройте Simply Static

Simply Static — бесплатная программа. WordPress плагин который генерирует статическую версию вашего WordPress сайт. Вот как это настроить:

1. В вашей WordPress панели управления, выберите «Плагины» > «Добавить новый».
2. Найдите «Simply Static», установите плагин и активируйте его.
3. Перейдите в Simply Static > Настройки в вашем 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 используется в качестве системы управления контентом.

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

Шаг 3. Инициализируйте репозиторий Git

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

1. Откройте терминал или командную строку.
2. Перейдите в каталог, указанный вами в Simply Static (например, cd /Users/yourusername/Documents/StaticSite).
3. Инициализируйте новый репозиторий Git, выполнив:

   git init

Шаг 4. Создайте репозиторий GitHub

Мы будем использовать GitHub Desktop для создания нашего репозитория и управления им:

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

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

Теперь, когда у нас настроен репозиторий, давайте сделаем наш первый коммит:

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

Шаг 6. Запустите простой статический экспорт

Теперь пришло время создать наш статический сайт:

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

Шаг 7. Подключите репозиторий к хостинговой платформе.

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

GitHub Pages

1. Перейдите в свой репозиторий на GitHub.com.
2. Нажмите «Настройки» > «Страницы» на левой боковой панели.
3. В разделе «Источник» выберите «Развернуть из ветки».
4. Выберите ветку, которую вы хотите развернуть (обычно «основную» или «главную»).
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 и настройку форм или функций поиска для вашего статического сайта.