Как сделать из статического сайта динамический

Обновлено: 03.07.2024

Я порезал себе зубы как веб-разработчик, создающий динамические веб-сайты, но в последнее время все больше и больше я обнаруживаю, что мне не нужно делать так много на сервере. На самом деле, в некоторых случаях мне вообще не нужен внутренний сервер. Сегодня я решил попытаться преобразовать динамический веб-сайт в статический, используя платформу Harp .

Harp — это легкий веб-сервер со встроенными процессорами для разных языков (Markdown, Jade, EJS, LESS, Stylus и CoffeeScript). Он следует простому соглашению, которое упрощает создание простого веб-сайта. После установки вы можете начать работу в считанные секунды. Вам определенно следует проверить документацию самостоятельно (но обратите внимание — я видел некоторые проблемы с макетом в Chrome, поэтому вы можете использовать Firefox вместо этого).

Но настоящая особенность убийцы заключается в том, что, как только вы создали свой сайт, вы можете преобразовать все это в статическую версию с помощью одной команды.

Вы можете спросить — почему вы вообще беспокоитесь? Если я создаю простой 3-4-страничный сайт, какая польза?

Первый — я решил пойти с EJS для моих шаблонов. EJS в порядке, не так хорош, как руль, но я совершенно ненавижу Джейд, и Арфа пока не поддерживает руль. (Хотя это скоро произойдет.) Используя EJS, я мог бы создать простой шаблон, подобный этому.

Обратите внимание — это несколько более простая версия реального файла шаблона. В шаблоне вы можете увидеть несколько жетонов. Значение заголовка — одно, а доходность — другое. Значение yield будет заменено на HTML запрашиваемого файла. Это означает, что я могу написать страницу о программе и просто добавить содержимое, относящееся к этой странице.

Итак, хотя очевидно, откуда берется тело шаблона, как насчет этого поля заголовка? В моем приложении ColdFusion каждая страница передавала это в качестве аргумента помощнику по макету. В Harp вы используете файл _data.json для указания таких значений. Вот как я это сделал для своего сайта.

В случае, если вам интересно, значение заголовка используется моим реальным шаблоном макета для обработки изменения изображения заголовка.

Как только я собрал файлы (и покачал головой о том, насколько плох мой HTML был тогда), я перешел к командной строке:

Вот и все. Шутки в сторону. Он проанализировал мой проект и выплюнул чистый HTML. Вот папка для моего проекта. В общей папке я выполнял свою работу, а в папке www — статический вывод.

Если я открыл index.html, я увидел комбинацию моего файла макета вместе с содержимым index.ejs. То же самое и для других моих файлов. И просто чтобы понять суть — если я найду ошибку в своем макете (за исключением ужасного HTML) — я могу отредактировать файл — перестроить свой статический сайт — и все готово.

Итак, последний аспект этого путешествия был еще круче. Грег Уилсон целую вечность говорил мне, чтобы посмотреть на статический хостинг веб-сайтов с Amazon S3. Оказывается — бесплатный уровень Amazon позволяет невероятно 20000 запросов в месяц бесплатно. Это безумие! Это определенно больше, чем мне нужно для этого сайта.

Если вы еще этого не видели, Amazon делает процесс создания сайта из корзины S3 довольно щадящим. Вы начинаете в свойствах:

Я перешел от размещенного решения, работающего с Apache и ColdFusion, к полностью статическому решению на S3 … без цены. Более того, у меня все еще есть возможность динамического приложения для генерации моих файлов. Победа вокруг, я бы сказал.

Сегодня я бы хотел рассказать вам как из динамического сайта на WordPress сделать простой статический HTML сайт.

Вы можете создать практически любой тип веб-сайта с помощью WordPress. Однако вы не можете использовать его для создания простых статических HTML-сайтов. В некоторых случаях это все, что вам нужно, и вам может потребоваться использовать другую платформу для этого.

К счастью, очень не мало вы можете сделать с плагинами WordPress. В этой статье мы поговорим о том, когда имеет смысл использовать простые статические страницы WordPress. Я также познакомлю вас с плагином, который позволяет создавать статические страницы WordPress и обсудим, как их размещать.

Почему вы можете использовать простой статический веб-сайт

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

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

Однако, если вы хотите настроить веб-сайт, который вам не нужно будет часто обновлять, статические страницы будут работать отлично. Точно так же сайты с очень простой функциональностью, такие как небольшие портфолио или онлайн-архивы, могут быть лучше со статическим подходом (мой сайт-портфолио работает именно так).

Недостатком является то, что вы обычно не сможете использовать WordPress для создания этих сайтов. С premium-темами вам может потребоваться всего несколько часов, чтобы создать профессионально выглядящий веб-сайт с несколькими страницами. Однако они не будут статичными. К счастью, есть плагин, который может помочь в этом.

Знакомство с WP Static HTML Output Plugin

WP Static HTML Output Plugin существует уже долгое время и не зря. Этот плагин позволяет создавать полностью статическию копию всего вашего сайта на WordPress и развертывать их на других платформах.

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

WP Static HTML Output также упаковывает все ваши медиафайлы при экспорте вашего сайта. Вы также можете использовать его для хранения прошлой копии вашего сайта в качестве резервной копии.

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

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

Цена: бесплатно, доступна премиум-версия

Как создать статическую HTML-копию вашего сайта WordPress (и использовать ее с помощью GitHub)

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

Шаг 1 — Создайте статическую HTML-копию вашего сайта

Прежде чем создавать статическую копию своего сайта, давайте рассмотрим несколько настроек, которые предлагает плагин. Во-первых, вы увидите вариант указать URL-адрес, который вы собираетесь использовать для своего сайта, когда он появится в прямом эфире. Имейте в виду, что ваши статические страницы будут отображаться неправильно, если вы не введете правильный URL-адрес здесь, так как ваши страницы не смогут вытащить CSS, который им требуется, чтобы все выглядело красиво:

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

Продолжив, вы можете включить настройки для экспорта веб-сайта в виде zip-файла, который можно загрузить с панели мониторинга. В противном случае плагин просто экспортирует ваши новые файлы в директорию wp-content/uploads/. Здесь вы можете увидеть каталог с парой полных экспортов нашего сайта. Можно также выбрать, следует ли сохранить последний созданный экспорт для использования в качестве резервной копии:

Наконец, есть варианты, чтобы заменить ваши пути по умолчанию WordPress именами по вашему выбору. Идея заключается в том, чтобы скрыть тот факт, что ваш сайт был создан с помощью WordPress:

Теперь плагин выполнит свою работу, и вы сможете отследить его прогресс через журнал экспорта в нижней части вкладки:

Если вы скопируете и вставите эту ссылку в панель навигации, вы сможете напрямую загрузить статическую копию своего веб-сайта, поэтому вам не нужно использовать FTP. Когда у вас есть статический сайт, пришло время его протестировать и опубликовать.

Шаг 2 — Загрузите свой статический сайт на GitHub

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

Давайте сделаем это с помощью GitHub, который позволит вам создавать простые статические страницы через репозитории. Если вы еще не использовали GitHub раньше или вам нужно напоминание, вот краткое руководство, чтобы начать работу с платформой (скоро напишу).

Как только ваш репозиторий будет готов, вам необходимо загрузить файлы WordPress. Для этого вы можете использовать командную строку, если вы знакомы с управлением версиями git или используете настольное приложение GitHub. Мы будем использовать настольное приложение, так как с ним легче разобраться.

Когда вы настроите приложение GitHub, вы сможете клонировать существующие репозитории из своей учетной записи:

URL-адрес вашего сайта будет отображаться в верхней части раздела. Если вы посетите его, то вы должны увидеть свой веб-сайт WordPress, но только теперь как набор статических страниц:

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

Вывод

В некоторых случаях простой HTML и немного CSS — это все, что вам нужно для создания информационного и элегантного веб-сайта. Однако WordPress генерирует динамические страницы из коробки. Это далеко не плохо, но это означает, что вам нужно немного поработать, если вы хотите создавать статические страницы WordPress.

Вот как сделать работу и опубликовать ваши статические страницы бесплатно, всего три этапа:

Используйте плагин WP Static HTML Output для создания статической копии вашего сайта.
Загрузите свои статические страницы в GitHub.
Теперь у вас есть готовый статический сайт, который работает практически также как и на WordPress

У вас есть вопросы по созданию статических страниц WordPress? Давайте поговорим о них в разделе комментариев ниже!

До скорых встреч!

Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.

Статические онлайн-площадки уже не котируются и не способны удержать внимание пользователей. Поэтому, если вы нацеливаетесь на хорошую отдачу, то должны создать динамический сайт. Выполнить задуманное можно двумя путями: на базе CMS или же ручным способом.

Самостоятельная работа

Если вы хотите сделать все самостоятельно от начала и до конца, вам понадобятся навыки во многих областях. Сначала нужно будет разработать макет своего дизайна в Photoshop. Программа эта отличается не только развернутыми возможностями по созданию и обработке графики, но также и функцией оптимизации под Web, что немаловажно.
После того, как вы закончите этот этап, необходимо заняться версткой, где вам потребуются познания в CSS и HTML. Код страниц составляйте как можно более короткий и чистый, и тут вам на помощь придет текстовый редактор Macromedia Dreamweaver.
Чтобы создать динамический сайт, также необходимо внедрить в него нужные функции, для выполнения таковых скриптов воспользуйтесь языком программирования PHP и базами данных MySQL. Благодаря собственноручной разработке вы реализуете максимально гибкий и полностью подстроенный под вас веб-ресурс.

Система управления контентом

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

Вы сможете подобрать в Сети подходящий для вашей тематики шаблон, тем самым не утруждаясь ручным изготовлением графики. Но также можно выполнить шаблон и самому, если вы сведущи в PHP.

Различные функции можно воплотить с помощью встроенных компонентов и модулей. Но также почти каждая система управления контентом (CMS) имеет ряд внешних надстроек, которые вы сумеете скачать и установить.

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

Вне зависимости от того, каким способом вы решили создать динамический сайт, для локальной деятельности (то есть, без выхода в Интернет) придется поставить программный пакет DENWER.

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

Программирование и разработка

Производительность, безусловно, является одним из преимуществ Jamstack, наряду с лучшей безопасностью, масштабируемостью и удобством для разработчиков. Сайты, построенные на этом типе архитектуры, используют предварительно отрисованные статические страницы, обслуживаемые через сети CDN, могут получать данные из нескольких источников и заменять традиционные серверы и их базы данных API-интерфейсами микросервисов.

Что делает возможным быстрое и относительно безболезненное создание статических сайтов, так это генераторы статических сайтов (SSG).

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

Что такое генераторы статических сайтов?

Обычная CMS (система управления контентом) — например, WordPress — динамически строит веб-страницу по запросу клиента: собирает все данные из базы данных и обрабатывает контент с помощью механизма шаблонов. Напротив, хотя генераторы статических сайтов также обрабатывают страницы с помощью механизма шаблонов, они обрабатывают процесс сборки до того, как страницы будут запрошены клиентом, что означает, что они готовы к работе по запросу. Всё, что размещено в сети, — это статические ресурсы, что делает сайты намного более лёгкими и более быстрыми в обслуживании.

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

Но как насчёт всех хороших вещей, которые приходят с CMS, таких как создание и обновление контента не разработчиками, совместная работа над контентом и т.д.? Войдите в безголовую CMS.

Безголовая CMS — это та, у которой есть только бэкэнд. Нет внешнего интерфейса для отображения содержимого. Его единственная задача — управлять контентом, но он также предоставляет API, который другой интерфейс может использовать для извлечения введённых в него данных.

Таким образом, редакционная группа, например, может продолжить работу из своего знакомого, удобного интерфейса администратора, а контент, который они создают или обновляют, является лишь одним из источников данных, к которому генераторы статических сайтов могут получить доступ через открытый API. Популярные безголовые CMS-системы включают Strapi, Sanity и Contentful. Кроме того, WordPress имеет REST API, который позволяет разработчикам использовать его как автономную CMS.

Итак, современный инструментарий Jamstack позволяет создавать веб-сайт со статическим обслуживанием и при этом пользоваться преимуществами системы управления контентом.

Теперь давайте рассмотрим некоторые параметры генератора статических сайтов.

1. Gatsby

Вот некоторые из сильных сторон Гэтсби:

С Gatsby вы можете работать с новейшими веб-технологиями — с React, webpack, современным JS, CSS и т.д. — всё готово для того, чтобы вы могли просто начать кодировать свой сайт.
Богатая экосистема плагинов Gatsby позволяет вам использовать любые данные, которые вы предпочитаете, из одного или нескольких источников.
Простое развёртывание и масштабируемость, что в основном связано с тем, что Gatsby создаёт статические страницы, не требующие сложной настройки.
Gatsby — это генератор прогрессивных веб-приложений (PWA): Вы получаете готовый код и разделение данных. Гэтсби загружает только критически важные HTML, CSS, данные и JavaScript, поэтому ваш сайт загружается как можно быстрее. После загрузки Gatsby предварительно выбирает ресурсы для других страниц, поэтому переход по сайту выполняется невероятно быстро. — Сайт Гэтсби
gatsby-image сочетает в себе собственные возможности Gatsby по обработке изображений с передовыми методами загрузки изображений, чтобы легко и полностью оптимизировать загрузку изображений для ваших сайтов.
Вы можете бесплатно скачать и настроить множество начальных сайтов.

2. Next.js

Далее следует универсальная платформа для создания визуализируемых сервером или статически экспортируемых приложений JavaScript. Он построен на основе React и создан Vercel.

Чтобы создать приложение Next, выполните в терминале следующую команду:

cdв nextjs-blogваш вновь созданный каталог и введите команду, чтобы открыть сервер разработки приложения Next JS на порту 3000:

Next.js содержит отличную документацию, в которой вы можете узнать больше о создании и настройке приложений на основе Next.

Вот несколько лучших функций Next:

Next по умолчанию выполняет рендеринг на сервере, что отлично сказывается на производительности. Для обсуждения плюсов и минусов рендеринга на стороне сервера ознакомьтесь с этой статьёй Алекса Григоряна на Medium.
Не требует настройки: автоматическое разделение кода, маршрутизация и горячая перезагрузка прямо из коробки.
Оптимизация изображений, интернационализация и аналитика.
Большие Docs, учебники, викторины и примеры, чтобы вы и работает от начинающего до продвинутого пользователя.
Встроенная поддержка CSS.
Тонны примеров приложений, с которых можно начать.

3. Hugo

Документация великолепна, а на веб-сайте платформы вы найдёте фантастическое руководство по быстрому запуску, которое поможет вам быстро приступить к работе с программным обеспечением.

Вот некоторые из самых любимых функций Хьюго:

Разработан и оптимизирован для скорости: как правило, каждый фрагмент контента отображается примерно за одну миллисекунду.
Не нужно устанавливать дополнительные плагины для таких вещей, как разбивка на страницы, перенаправление, несколько типов контента и многое другое.
Богатая система тематики.
Шорткоды доступны в качестве альтернативы использованию Markdown.
С декабря 2020 года Hugo предлагает поддержку Dart Sass и новый фильтр для наложения изображения поверх другого — Hugo 0.80: последний выпуск 2020 года!

4. Nuxt.js

Nuxt.js — это фреймворк более высокого уровня, построенный на Vue.js, который позволяет создавать готовые к работе веб-приложения. С Nuxt вы можете:

Рендеринг на стороне сервера для вашего сайта, также называемый универсальным или изоморфным режимом. Nuxt использует сервер Node для доставки HTML на основе компонентов Vue.
Генерация статического сайта. С Nuxt вы можете создавать статические веб-сайты на основе вашего приложения Vue.
Одностраничные приложения (SPA). Nuxt предоставляет вам конфигурацию и платформу для создания вашего SPA на основе Vue.

Создание веб-сайтов на основе Nuxt можно сделать очень быстро. Вот пример Hello World на веб-сайте Nuxt. Вы можете загрузить его на свой компьютер или поиграть в Codesandbox, чтобы начать работу.

Вот некоторые из возможностей Nuxt.js:

5. Jekyll

Простота и неглубокая кривая обучения Jekyll сделали его популярным выбором с 42k + звёздами на GitHub на момент написания. Он существует с 2008 года, так что это зрелая и хорошо поддерживаемая программа.

Jekyll может предложить следующие замечательные функции:

простота;
бесплатный хостинг на GitHub Pages;
отличное сообщество, которое заботится об обслуживании и создании тем, плагинов, руководств и других ресурсов.

6. Eleventy

Некоторые приятные функции включают:

простота и производительность;
управляемый сообществом;
гибкая система шаблонов;
быстрое время сборки.

7. VuePress

VuePress — это генератор статических сайтов на базе Vue. Его тема по умолчанию оптимизирована для написания технической документации, поэтому она отлично подходит для этого типа сайтов прямо из коробки. Его текущая стабильная версия на момент написания — 1.8.0, но если вам интересно узнать о критических изменениях, которые находятся в разработке, ознакомьтесь с альфа-версией 2 на GitHub.

Сайт VuePress работает как SPA, который использует возможности Vue, Vue Router и webpack.

Чтобы начать работу с VuePress, вам понадобится Node.js v.10 + и, возможно, Yarn Classic.

Для быстрой настройки VuePress используйте генератор create-vuepress-site, открыв свой терминал в выбранном вами каталоге и выполнив любую из следующих команд, в зависимости от того, используете ли вы Npm или Yarn:

После того, как вы ответите на несколько вопросов о конфигурации, вы должны увидеть новую файловую структуру веб-сайта в выбранной папке.

Для получения более подробной информации перейдите к руководству по VuePress.

Вот несколько замечательных функций, которые может предложить VuePress:

Настройка сайта на основе VuePress выполняется быстро, и вы можете писать свой контент с помощью Markdown.
VuePress построен на Vue, что означает, что вы можете наслаждаться веб-интерфейсом Vue, webpack, возможностью использования компонентов Vue внутри файлов Markdown и разработки пользовательских тем с помощью Vue.
Быстрая загрузка: статические сайты VuePress состоят из предварительно обработанного статического HTML и запускаются как SPA после загрузки в браузере.
По умолчанию i18n поддерживает многоязычность.

Nuxt.js или VuePress?

И Nuxt.js, и VuePress построены на основе Vue.js и позволяют создавать статические веб-сайты. Итак, какой из них предпочтительнее другого?

Допустим, Nuxt.js может делать всё, что делает VuePress. Однако, по сути, Nuxt лучше всего подходит для создания приложений. VuePress, с другой стороны, идеально подходит для создания статических веб-сайтов с документацией, отображающих контент, написанный на Markdown.

Короче говоря, если всё, что вам нужно, это сайт документации или очень простой блог на Vue.js, подумайте о том, чтобы обратиться к VuePress, поскольку Nuxt будет излишним.

Как выбрать генератор статических сайтов

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

Требования вашего проекта должны пролить свет на функции, которые вам следует искать в SSG.

Если вашему проекту требуется множество динамических возможностей из коробки, то Хьюго и Гэтсби могут быть хорошим выбором. Что касается времени сборки и развёртывания, все перечисленные выше SSG работают очень хорошо, хотя Hugo кажется фаворитом, особенно если на вашем веб-сайте много контента.

Ваш проект — блог или персональный сайт? В этом случае Jekyll и Eleventy могут быть отличным выбором, тогда как для простого веб-сайта документации VuePress отлично подойдёт. Если вы планируете создать веб-сайт электронной коммерции, вы можете подумать, какой SSG хорошо сочетается с автономной CMS для управления магазином. В этом случае Gatsby и Nuxt вполне могли бы работать.

Ещё одна вещь, которую вы, возможно, захотите принять во внимание, — это ваше знакомство с каждым из языков SSG. Если вы программируете на Go, то, скорее всего, вы предпочтёте Hugo. С другой стороны, если JavaScript — ваш любимый язык программирования, вы избалованы выбором: Eleventy построен на чистом JS, Next и Gatsby построены на основе React, а Nuxt и VuePress созданы на Vue.

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

Читайте также: