Генератор сайтов: Лучшие статические генераторы сайтов

Лучшие статические генераторы сайтов

Процесс создания веб-сайта состоит из двух частей: вы предоставляете контент, а затем ваша CMS – WordPress или все, что вы решите использовать, – берет этот контент, объединяет его с выбранной вами темой и выбранными вами шаблонами и делает веб-сайт из него. для ваших клиентов или ваших читателей, чтобы читать. Но эти две части не нужно делать вместе: они могут быть отделены друг от друга, и вот что генератор статических сайтов (ССГ) делает.

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

Как работает генератор статического сайта? И зачем использовать один?

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

Но зачем это делать? Есть ряд преимуществ.

Первый безопасность. Потому что ваш сайт, с которым взаимодействуют люди, – это простой HTML, и его гораздо сложнее взломать. А поскольку генератор статического сайта, который содержит весь компьютерный код, выполняющий эту работу, работает только на вашем собственном компьютере и вообще не открыт для более широкого мира, его также нельзя взломать. Это означает, что обновления безопасности в основном не нужны; Вам больше не нужно беспокоиться о регулярных всплывающих окнах, предлагающих обновить CMS, обновить плагины, обновить сайт.

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

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

Лучшая производительность приносит пользу вашему сайту всеми возможными способами. Ваши клиенты, скорее всего, будут продолжать просматривать и показатель отказов ниже,  Более быстрое время загрузки страницы отлично подходит для SEO, потому что Google и другие поисковые системы ценят высокую производительность и повышают ваш рейтинг.

Скачки трафика не являются проблемой; если у вас внезапно будет всплеск количества посетителей, он будет обработан очень хорошо, и вы никогда не увидите одно из этих сообщений «502 Bad Gateway», когда сайт перегружен в тот момент, когда он становится популярным.

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

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

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

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

10 лучших генераторов статических сайтов

1. Хьюго

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

Имеет большое количество готовые темы что облегчает выбор нужного вам стиля для вашего сайта, и одна из ключевых особенностей, которыми обладает команда Hugo, – это скорость сборки.

Чтобы внести изменения в свой сайт, добавив или отредактировав контент или изменив тему, необходимо «перестроить» сайт, то есть выполнить процесс объединения контента с темой в HTML для каждой страницы. Даже небольшая разница в быстродействии сборки может изменить разницу между секундами ожидания и минутами ожидания, чтобы увидеть результат внесенных вами изменений, и Хьюго усердно работает над тем, чтобы быть самым быстрым в этом..

Если вы создаете сайт на основе существующих данных, тогда HugoКонтент, управляемый данными»Позволяет относительно легко размещать контент сайта в форматах CSV или JSON. Это может быть полезным способом использовать некоторые существующие данные, которые вы хотите представить миру, более удобным способом, чтобы они могли просматривать и перемещаться по ним без необходимости запуска Excel или Google Sheets..

2. Одиннадцать или 11

11ty – один из новых SSG, но он набирает популярность. Он объявляет себя «более простым генератором статических сайтов». Тем не менее, это требует разумного количества технических знаний (и его документация отражает это), но для тех, кто может понять это, он делает вещи элегантным способом.

11ty написан на JavaScript и поэтому требует Node.js работать; сначала вам нужно установить его, если вы этого еще не сделали, а затем установить 11ty из командной строки.

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

3. Пеликан

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

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

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

4. Никола

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

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

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

Как и в случае с Pelican, Никола предполагает, что у вас уже есть Python, и не объясняет, как это сделать, поэтому, если вы этого не делаете и работаете в Windows, вы можете рассмотреть одну из других альтернатив..

5. Гэтсби

Гэтсби называет себя статическим генератором PWA. PWA это термин искусства для Прогрессивные веб-приложения, которые могут работать в автономном режиме, быть добавлены на домашний экран на мобильном телефоне и так далее. Это можно сделать на любом веб-сайте, включая веб-сайты, созданные с помощью других SSG, но Gatsby предоставляет такую ​​поддержку «из коробки»..

Для тех, кто знаком с React, библиотекой веб-компонентов, Gatsby может быть хорошим выбором, поскольку она построена на ее основе, так что вы можете повторно использовать знакомую среду, которую вы уже знаете – на самом деле, Собственный веб-сайт React построен с Гэтсби.

Гэтсби требуется как node.js, так и система контроля версий мерзавец быть установленным. У них есть довольно подробный набор страницы документации о том, как настроить среду Gatsby, в том числе в Windows, но это довольно сложный процесс, если вы не знакомы с командной строкой. Кроме того, документация объединяет инструкции Windows, Linux и Mac, что делает ее немного трудной для выполнения..

6. Джекилл

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

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

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

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

7. Statiq.web

Statiq Web – довольно новое дополнение к рядам SSG, и оно все еще находится в стадии разработки. Так что это лучше всего подходит для тех, кто хочет участвовать в этом процессе и присоединиться к сообществу, предоставляя информацию о том, что работает хорошо, а что нет..

Его уникальным преимуществом является то, что он построен на .NET, так что те, кто немного знаком с этим стеком программирования, найдут Statiq Web хорошо подходящим для своего существующего опыта. Это пример проекта более общей платформы Statiq, поэтому более опытный программист может использовать более обширную среду для создания чего-то более всеобъемлющего.

8. Publii

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

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

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

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

9. WP2Static

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

На языке описания выше WP2Static оставляет WordPress ответственным за ваше редактирование и превращает ваш контент в HTML, комбинируя его с вашими темами и шаблонами. Затем перейдите в WP2Static, чтобы взять этот HTML и опубликовать его. в виде обычный HTML где-то в сети.

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

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

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

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

Однако, если вы очень привыкли к пользовательскому интерфейсу WordPress или сильно привязаны к конкретным плагинам или темам WP, которые трудно найти или сделать доступными в другом SSG, WP2Static может стать идеальным решением..

10. Next.js

Next.js – это не столько генератор статических сайтов, сколько платформа для создания статических приложений с использованием React. Он поддерживает генерацию статического сайта (и обновил эту поддержку, чтобы значительно улучшить его в выпуске 9.3 в начале 2020 года), и если вы хотите создать приложение с React и хотите получить лучшую в своем классе статическую генерацию сайтов с резервным копированием, далее .js это хорошее место для поиска.

Он предполагает хорошее знание как JavaScript, так и React, так что это не для нетехнических лиц, а документация ориентирована на среду Linux или Mac с платным сервисом для пользователей Windows..

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

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

Вот вам и список: из чего выбрать.

Но как выбрать тот, который лучше для вас?

Ну, а если вам не интересно входить в командную строку, то посмотрите на Publii, конечно. Если вы являетесь экспертом по WordPress, который хочет стать статичным, то WP2Static опирается на те обширные навыки, которые у вас уже есть. Если вам небезразлична скорость, то 11ty или Hugo – ваши места для поиска.

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

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

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

Sorry! The Author has not filled his profile.

От CMS к генераторам статических сайтов — Джино • Журнал

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

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

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

Jekyll

Наиболее широко используемый генератор. Jekyll предназначен для работы на Markdown, легком языке разметки для форматирования текста. Поддержка Sass встроена в него для тех, кто предпочитает предварительную обработку CSS, и будет хорошо работать с такими библиотеками, как Bootstrap. В Jekyll также входит HTTP-сервер, который можно использовать для простого развертывания и тестирования ваших статических страниц локально. Одним из ключевых преимуществ Jekyll является возможность легкого переноса существующего сайт в Jekyll. Например, если у вас есть сайт WordPress, вы можете переключиться на использование Jekyll с помощью одного из импортеров.

Hexo

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

Gatsby

Как и Hexo, Gatsby работает на базе Node.js. Во время сборки этот генератор использует GraphQL для извлечения данных и контента из источников, что обеспечивает современный согласованный интерфейс, гарантирующий, что каждая страница получит точные данные, необходимые при ее построении. Особенность Gatsby заключается в том, что он будет создавать сайты в виде прогрессивных веб-приложений (PWA), а это означает, что весь сайт будет загружаться в кэш и затем будет открываться моментально, как привычные мобильные приложения.

Hugo

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

NUXT

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

Читайте также: Статические сайты любят пользователи и поисковики — почему?

MkDocs

MkDocs более специализирован, чем перечисленные выше генераторы. Он ставит перед собой одну очень простую задачу: обеспечить быстрый и простой в использовании способ создания HTML-сайтов для проектной документации. И в этом вопросе ему нет конкурентов. MkDocs построен на Python, а процесс сборки из командной строки настолько прост, насколько это возможно. Страница MkDocs в GitHub содержит ряд тем, специально разработанных для документации, но вы можете создать HTML и для своей собственной темы.

Pelican

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

Metalsmith

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

Middleman

Middleman был выпущен примерно в то же время, что и Jekyll, и будет хорошо знаком разработчикам, которые работали с Ruby on Rails. Его стандартным механизмом шаблонов является ERB (Embedded RuBy). Ведущие производители статических сайтов в значительной степени ориентированы на блоги, но Middleman расширяет возможности и стремится обеспечить гибкость при разработке любого типа сайта. Это становится минусов, если вы стремитесь реализовать в Middleman простой блог: в этом случае вам придется больше работать с настройкой, чем в других генераторах.

Spike

Spike создан той же командой, что и программа Roots, которая пользовалась большой популярностью, пока активно поддерживалась. Этот генератор предоставляет знакомую экосистему для разработчиков JavaScript, использующих webpack, Postcss, Reshape и Babel. Как и Metalsmith, Spike разработан для того, чтобы составить очень простую структуру и позволить плагинам обрабатывать преобразования при создании сайта.

Cogear.JS – современный генератор статических сайтов / Хабр

Привет, Хабр!

Хочу представить вниманию хабровчан генератор статических сайтов с открытым исходным кодом, написанный на Node.JS, в основе которого лежит Webpack.

Проект вдохновлён тем же Jekyll, но в основе своей использует современный технологический стек. Например, предоставляет возможность «горячей подгрузки» (без перезагрузки страницы) изменённых скриптов и стилей.

Проект ориентирован на международную аудиторию, поэтому официальный сайт, документация и видеоролики — на английском языке.

Особенности

• Современный технологический стек
  
  Создавайте современные сайты, с хорошо упакованными (минифицированными, сжатыми, в т.ч. gzip) скриптами и стилями.
  
  Можно быстро разработать прототип сайта и задеплоить его на сервер.
  
  Используйте любой современный фронтэнд фреймворк (Webpack внутри) – Vue.JS, React, Angular, Ember и т.д.
• Супер быстрый и надёжный
  
  Обрабатывает ~1000 страниц в секунду (зависит от содержимого страницы, а также мощности процессора).
  
  Ясное дело, что процесс отдачи статического HTML в разы быстрее любого интерпретируемого языка.
• Подойдёт любой хостинг
  
  Не требует базы данных (информация хранится в файлах) и работает на любом хостинге (поскольку на выходе — статические html-файлы и ассеты).
• Встроенный деплой
  Создайте пресет и разверните сайт на сервере через FTP, SFTP или даже rsync.
  
  Недавно вышел материал, как бесплатно задеплоить сайт на now.sh.
• Безопасный. Никаких обновлений
  
  Можно забыть про необходимость регулярных обновлений, как, например, в том же WordPress.
  
  Безопасноcть на уровне 100%, т.к. никому ещё не удавалось взломать статический HTML (фича).
• Бесплатный. Open Source
  
  Пользуйтесь на здоровье. Ни копейки не платите.

Для каких целей подойдёт:

• Быстрое прототипирование (сделали шаблон, показали рабочий прототип, а потом уже натянули на движок)
• Портфолио
• Сайт компании
• Сайт продукта
• Персональный блог

Подойдёт для любого сайта, где нет контента, генерируемого пользователем.

Можно сделать даже коллективный блог, при помощи Pull Requests на Github.

При помощи Firebase или любого другого API, написанного на любом языке (PHP, Ruby, Python, Node.JS) или даже с помощью WordPress (JSON-API), и современного фронтэнд фреймворка типа Vue.JS или React, можно сделать динамический сайт под более сложные задачи: интернет-магазин, каталог продукции и так далее.

Для чего не подойдёт:

• Форум
• Социальная сеть
• Чат

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

Надобно иметь установленные Node.JS (9.x или выше) и NPM (обычно идут вместе).

Скачать и установить (если ещё этого не сделали).

Рекомендуется последняя (v10.12.0) верися Node.JS.

С Node.JS < v9.x не работает, потому как из коробки идёт компиляция SASS, Less, Stylus, а node-sass требует 9 версии.

Также можно использовать Yarn вместо NPM.

Cogear.JS работает на:

Можете использовать модный нынче VSCode для разработки.

Простая, без ухищрений:

$ npm install cogear -g
# or
$ yarn global add cogear

Вот и всё. Установка прошла успешно.

Cogear.JS после установки доступен через консольную команду cogear.

Теперь можно сгенерировать первый сайт.

Перейдите в директорию, где хранятся Ваши веб-сайты.

$ cd ~/Sites

Вызовите комнаду на генерацию нового сайта:

$ cogear new site.io # где "site.io" – это имя папки нового сайта

После чего проследуйте в данную директорию:

$ cd ~/Sites/site.io

Запустите Cogear.JS в режиме development (разработка) или production(подготовка к продакшену) (больше о режимах работы).

$ cogear # по-умолчанию запускает режим разработки с «горячей подгрузкой» обновленных ассетов и страниц

$ cogear production # построить сайт и запустить локальный сервер — посмотреть как сайт будет выглядеть в продакшне

Увидеть список опций командной строки можно путём добавления флага --help.

Если тема вызовет интерес хабровчан, могу сделать серию туториалов, что да как.

P.S. Не стал размещать в Я пиарюсь, т.к. open source.

Задавайте вопросы, постараюсь ответить.

Опыт использования генератора статических сайтов Hugo / Хабр

Делюсь 2-х летним опытом использования генератора статических сайтов Hugo. Заметка ориентирована на начинающих, но в этой заметке не будет инструкций «как установить Hugo» или «как создать первый пост». Эта заметка будет полезна тем, кто выбирает и сравнивает альтернативы для ведения блога.

Генератор статических сайтов — программа, которая обрабатывает структурированные исходные файлы (тексты, картинки, шаблоны) и генерирует статический HTML-сайт, который можно загрузить на сервер.

Исходники сайта — это набор папок на компьютере:

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

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

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

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

Для статических сайтов легко найти и настроить хостинг

Хостинг статики, пока у сайта нет объёмов траффика, как у Гугла, настраивается проще, чем для динамических сайтов, и во многих случаях бесплатен.

Держу исходники и сам блог на GitLab. Вот как все работает:

1. В приватном git-репозитории GitLab содержатся исходники блога.
2. GitLab CI при обновлении репозитория самостоятельно запускает генерацию новой версии сайта и выкладывает её на GitLab Pages.

Схема, как это работает:

На конце стека используется Cloudflare для организации SSL сертификата для https версии блога.

Обновление сайта от внесения изменений до доступности онлайн новой версии блога в конфигурации Hugo-GitLab занимает 0,5-1 минуту. Основное время тратится Gitlab CI на подготовку к сборке сайта. Непосредственно генерация сайта занимает 1-2 секунды. У других генераторов сайтов скорость обновления будет другой. Например, у другого популярного генератора сайтов Jekyll построение страниц новой версии сайта может быть в разы медленнее.

Исходники и хостинг можно разделить — генерировать страницы сайта на локальном компьютере, а загружать на хостинг только получившиеся HTML-файлы. Для статики есть удобные хостинги, например, Netlify. По такому принципу ранее работал GitHub Pages. Некоторое время назад GitHub ввели инструменты автоматизации CI, как у GitLab.

Не нужно думать о поддержке работоспособности блога

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

Сохраняется полный контроль над исходниками

Каждый пост — это отдельная папка с Markdown текстом и тут же лежащими файлами изображений.

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

Вот так выглядит папка с данными для 1 поста в блоге:

А это уже редактирование самого поста в Sublime Text и страница на выходе:

Если внести исходники в систему контроля версий, то можно смотреть историю изменений в блоге. На скриншоте ниже показан просмотр истории изменений от мая 2018 года в Sublime Merge:

Среди разных генераторов выбрал Hugo из-за его популярности, скорости и простоты установки

Hugo входит в топ-3 популярным генератором сайтов в интернете по количеству звезд на GitHub.

Сама программа представляет из себя 1 exe-файл. Запуск генератора не требует установки, но чтобы вызывать его командой «hugo» надо прописать путь к нему его в системную переменную PATH.

Про скорость работы уже писал выше — Hugo существенно быстрее многих других генераторов, что становится важно по мере роста объема сайта.

Нужно хотя бы немного разбираться в программировании или скриптах

HUGO и другие генераторы не имеют привычного пользовательского интерфейса. Запуск обновления сайта делается через набор команд или один bat-файл.

«Интерфейс»:

Если загружать сайт через GitLab CI, то нужно уметь слегка править конфигурационный файл CI.

GitLab предлагает ряд готовый файлов под разные генераторы, которые можно взять за базу:

Но все равно приходится погружаться в конфиг, чтобы что-поправить. Например, в стандартном конфиге (на скриншоте ниже) рекомендую, как минимум, сменить выбор версии Hugo (причины разберу позже):

Приходится вручную править выбранную тему оформления под себя, нужны знания HTML

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

Даже если вы не front-end разработчик, добро пожаловать в мир HTML шаблонов с вставками на Go:

В Hugo не было до недавнего времени не было такого понятия, как плагины. Все правки надо делать в исходниках темы. Например, если нужно поправить текст в подвале страницы — придётся править HTML-шаблон темы.

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

На скриншоте ниже ~1/3 перечня изменений:

Сложно разобраться, как работает движок генератора

Не старался, но за все время использования так и не смог полностью разобраться в том, как именно работает генератор. Самостоятельно сделать тему или сложную структуру блога с нуля не смогу.

Не всегда можно найти решение проблемы

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

Например, после обновления GitLab стал конвертировать неанглийские символы в пути к файлам в web-encode. Это в разы увеличивало пути к файлам, если в них были неанглийские буквы. Из-за слишком длинных путей процесс построения сайта падал с ошибкой. Упоминания конкретно этой проблемы я не смог найти. Завёл тикет на issue-трекере GitLab, но по нему не было движения. Предполагаю, что проблема была связанна с более крупным багом в GitLab CI, который был исправлен где-то через месяц. В этот месяц временно решил свою проблему через перенос хостинга.

Опасность обновлений и причины фиксировать версию Hugo

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

Например, в Hugo версии 0.57.0 перестала правильно собираться главная страница. Так и не смог понять, в чем проблема: в багах новой версии генератора, в необновлённой теме или в моей структуре исходников. Решил остановиться на версии 0.56. Потом оказалось, что разработчики внесли ломающие совместимость изменения в конфигурацию алгоритма генерации страниц.

Актуальным становится вопрос, а стоит ли в принципе обновляться, если не для использования новой функциональности. Ведь на безопасность отсутствие обновлений не влияет, а совместимость может поломаться. Пример с официального форума Hugo:

На GitLab CI в настройках скриптов рекомендую жёстко фиксировать, какую версию Hugo использовать.

По умолчанию пользовался «последней актуальной», но несколько раз столкнулся с тем, что новая версия меняла важные параметры рендера сайта. Вплоть до того, что ломался процесс построения блога, или в RSS появлялись ненужные записи. Узнавал об этом, только после обновления сайта на хостинге или после попадания в RSS. На скриншоте ниже история RSS из Feedly с навсегда сохранёнными ошибочными записями:

Подводим итоги

Генератор статических сайтов — подходит тем, кто уже немного разбирается во front-end, хочет при ограниченном погружении в технические аспекты получить технически несложный сайт/блог.

Hugo — хороший выбор, если в приоритете скорость работы и простота установки.

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

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

Достаточно часто можно услышать про существование определенного «дуализма» при планировании будущего сайта – или делаем «руками» статический сайт, т.е. php/html, или берем динамическую CMS – WordPress, Joomla и т.д. и делаем в ней.

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

В чем основная проблема с использованием динамических платформ? В их нагрузке на систему. Само слово «динамическая» означает, что конкретная страница сайта, которую видит пользователь, генерируется на стороне сервера. И это происходит каждый раз, когда кто-то обращается к данной странице. То есть в недрах системы CMS существует специальная запись, которая говорит о том, что при обращении на страницу блога нужно:

а) показать меню, состоящее из неких пунктов (их перечень и ссылки – взять из базы)

б) найти в базе десять самых свежих записей из категории «блог» и вывести их заголовки и первые абзацы

в) вывести завершающую часть сайта – футер (его содержимое, что туда попадает, текст, ссылки, также достать из базы)

Это конечно очень упрощенно, чтобы была понятна суть. Таким образом CMS система при обращении к определенной странице сайта, сначала «дергает» из базы различные компоненты содержимого страницы – что там должно быть показано – какие тексты, ссылки, картинки и т.д., затем с использованием действующей темы оформления, которая содержит информацию о том, что каким стилем показывать, формирует уже собственно ту страничку в виде реального html, которую показывает веб-сервер пользователю.

В статическом же сайте все намного проще. На сервере лежат сами страницы html, которые веб-сервер и показывает пользователю. Проблема же здесь заключается в том, что при необходимости что-то поправить в html – нужно залезть «руками» в этот файл. И простейшая операция типа добавления новой записи блога (1 минута в динамической CMS при наличии готового контента) – в обычном html – это достаточно простая, но рутинная и раздражающая работа минут на 30. Надо сверстать новую страничку с этой записью. В списке статей блога надо вставить дополнительную строчку с заголовком и ссылкой, ведущей на новую запись, и возможно удалить что-то старое или перенести на другую страницу архива.

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

На сервере лежат специально размеченные файлы с контентом, а также шаблон сайта и различные файлы с настройками или плагинами

Каждый раз при «генерации» сайта, эта CMS создает уже готовые, статические страницы html, которые показываются пользователю. То есть – она «ищет» файлы с контентом, «собирает» из них структуру сайта и сами страницы, применяя к ним шаблон дизайна.

Разница в том, что генератор статических сайтов создает сайт один раз, и этот сайт будет работать (и лежать на сервере в неизменном html-виде) до тех пор, пока вы не внесете в него каких-то изменений – например, не добавите новую статью, новый товар, или просто какую-то новую страницу, пункт меню, и т.д. Запускать очередную генерацию сайта можно либо вручную, после внесения изменений, либо по времени – система определит сама наличие нового контента или других изменений в исходных файлах и пересоздаст сайт.

Главным преимуществом здесь является низкая требовательность к ресурсам за счет того, что сайт лежит в статическом виде, готовый к тому, чтобы показываться веб-сервером. Очевидно, что заDDOSить статический сайт, это радикально более сложная задача, чем динамический – который при каждом обращении лезет к базе данных и собирает странички для показа пользователю «на лету».

Даже если исходные компоненты для сборки статического сайта хранятся в базе данных, а не в текстовом виде (бывают и такие решения) – то в любом случае, пользователю показывает статический, собранный вариант. Даже падение SQL-сервера (катастрофа для динамических CMS типа WordPress) не нарушит работоспособности сайта.

Какие есть недостатки у генераторов статических сайтов? Возможно сюда следует отнести недостаточную (пока!) дружественность к пользователю. В какой-то мере у этой технологии сохраняется налет «гиковости», и научиться работать с такой системой «обычному человеку» все-таки сложнее, чем с WordPress.

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

Генераторы статических сайтов. Краткий обзор | GeekBrains

Продолжаем разговор о SSG.

https://d2xzmw6cctk25h.cloudfront.net/post/1121/og_cover_image/f3c14a96f584bead8ac84a64d0ed2780

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

Это не самый популярный генератор статических сайтов в мире, его делает особенным одна важная деталь — он написан на Python, а значит от нулевых знаний до использования Pelican потребуется пройти короткий путь. Также он прост и понятен, работает на любой ОС (Linux, MacOS, Windows), поддерживает шаблонизатор jinja2 и имеет массу приятных мелочей, среди которых:

• подсветка синтаксиса;
• взаимодействие с WordPress, Dotclear, RSS-каналами, Twitter, Google Analytics и т.д.;
• возможность мультиязычных публикаций;
• плагины для комментариев и быстрого модерирования.

Генератор Hugo написан на языке Go, отсюда его преимущества: стремительно растущее сообщество и общее быстродействие. Основная область применения — массивные ресурсы, которые и без динамического содержимого перегружены данными. Согласно тестам, он способен сгенерировать 5000 страниц всего за 6 секунд. Плюс ко всему он достаточно прост в установке и работе, а обновления и фиксы выпускаются каждую неделю. Именно поэтому Hugo — идеальный выбор для обеспечения максимальной производителности..

В большинстве рейтингов популярности Jekyll занимает первую строчку. Причины:

1. Разработчик. Над продвижением и развитием работает команда GitHub.
2. Сообщество. Популярность продукта означает беспроблемное знакомство с новым инструментом.
3. Развитая экосистема. Свыше 150 плагинов только на официальном сайте, которые переманят публику с WordPress и Drupal на Jekyll.

Генератор, построенный на платформе Node.js, также обладает превосходной скоростью сборки страниц, хотя и не такой большой, как в случае с Hugo. Главной отличительной чертой является поддержка большого числа плагинов, заимствованных у Jekyll и Octopress. Также есть миграция с WordPress, что делает Hexo востребованным.

Octopress является не самодостаточным генератором статических сайтов, а ответвлением Jekyll «для продвинутых». Управлять им ничуть не сложнее , но количество доступных пользовательских настроек здесь увеличено в разы. Плагины Jekyll совместимы с Octopress и наоборот, поэтому каких-либо трудностей при переходе вы не испытаете, а вот преимуществ найдете много.  

Ещё один представитель семейства Ruby, а также один из старейших генераторов статики. Подойдёт тем, кто хочет сделать динамический сайт максимально привлекательным для клиента, поэтому его часто используют в маркетинговых и коммерческих организациях. Middleman поддерживает Sass, CoffeeScript, HAML и многие другие инструменты. Но есть один существенный минус: мигрировать блог с WordPress, Drupal, Joomla или любой другой CMS практически невозможно.

Крайне хардкорный генератор, за который лучше не браться новичкам. Все основные функции исполняются здесь при помощи сторонних плагинов. Для того, чтобы разобраться в каждом потребуется определённая база знаний. Есть и обратная сторона — итоговые возможности безграничны. Jekyll составит конкуренцию Metalsmith по диапазону решений, а Octopress по количеству пользовательских настроек, но ни один из них его не превосходит. Так что если вы зубр в статике, Metalsmith не должен пройти мимо вашего взора.

Один из самых молодых представителей рейтинга пошёл отличной от большинства дорожек, используя вместо готовых шаблонов решения Webpack. Работа полностью построена на взаимодействии с ReactJS и его компонентами, в результате чего получаются крутые сайты с мгновенными переходами между отдельными страницами. Из интересных настроек в Gatsby стоит отметить регулирование последовательности и скорости перехода для придания динамики вашему блогу.

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

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

10 лучших генераторов статических сайтов, которые вы должны использовать в 2019 году

Есть ряд причин, по которым кто-то может использовать генератор статического сайта для своего сайта. Статические сайты проще в обслуживании (без баз данных, без серверных сценариев) и более безопасны, учитывая тот факт, что пользователям предоставляются только файлы HTML, CSS и Javascript. Хотя вы можете напрямую писать код в HTML для создания статического сайта, этот процесс может быть немного напряженным, и именно здесь в игру вступают генераторы статических сайтов.

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

Лучшие статические генераторы сайтов 2019 года

1. Джекилл

Jekyll основан на Liquid Template Engine от Shopify. Он полностью работает на Ruby, поэтому его легко установить вместе с зависимостями с помощью rvm или bundler. Jekyll также имеет простые варианты миграции, если вы хотите перейти с WordPress, Blogger или любого другого сайта блогов. Он превосходит все остальные генераторы статических сайтов, с точки зрения размера пользователя, и самое приятное то, что он находится в стадии активной разработки.

Чтобы установить Jekyll, просто введите эту команду в Ruby: драгоценный камень установить Джекилл

Посетите Джекилл

2. Гекса

Hexo — это легкая статическая платформа для блогов, которая гордится своей невероятно быстрой скоростью генерации сайтов. Hexo отлично подходит для блоггеров с большим количеством контента, которым нужен простой статический генератор сайтов. Он предлагает простые варианты миграции с других блоговых платформ, таких как WordPress, Joomla, Jekyll, Octopress и RSS.

Одна из замечательных особенностей Hexo заключается в том, что вы можете использовать большинство плагинов, созданных для Octopress, и, соответственно, плагинов, созданных для Jekyll, с очень незначительными изменениями.

Hexo поддерживает Markdown, YAML для внешнего вида и конфигурации, Сохраняя свою быструю природу, Hexo позволяет развертывать на таких сайтах, как GitHub, Heroku и Rsync, всего одной командой.

Чтобы установить Hexo с помощью Node.js, просто введите эту команду: npm установить hexo-cli -g

Посетите Hexo

3. Пеликан

установка пеликана

Посетите Пеликан

4. Гэтсби

npm install –global gatsby-cli

Посетите Гэтсби

5. Посредник

гем установить посредник

Посещение посредника

6. Металлист

$ npm установить металлист

Посещение Металлистов

7. Хьюго

заварить установить Гюго

Посетить Хьюго

8. Октопресс

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

Для настройки кода Octopress позволяет пользователям модифицировать код и писать собственный код. Что действительно здорово, так это то, что несколько плагинов для Octopress совместимы с Jekyll (и наоборот), поэтому вы можете попробовать обе службы, не беспокоясь о проблемах совместимости.

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

• Клонировать репозиторий GitHub
  • мерзкий клон
  • мерзавец: //github.com/imathis/octopress.get
  • octopress
  • cd осьминог
• Установить зависимости
  • gem install bundler
  • rbenv rehash; # Если вы используете rbenv, перепишите, чтобы иметь возможность запустить команду bundle
  • комплектация
• Установите тему Octopress по умолчанию

Посетить Октопресс

9. Докпад

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

Докпад имеет родной споддержка предварительных процессоров, таких как Coffeescript, Stylus и LESSи использует плагины для поддержки шаблонизаторов, препроцессоров и языков разметки, поэтому вы можете выбирать любые комбинации, какие захотите, используя необходимый плагин. Docpad также поддерживает импорт страниц из внешних источников, таких как Tumblr, GitHub и Dropbox через плагины.

Docpad — это многофункциональная платформа с множеством плагинов и отличной документацией, а также встроенная в Node.js для взаимодействия с сервером.

Чтобы установить Docpad, используйте следующую команду, используя npm: npm install -g npm; npm install -g [email protected]

Посетить Докпад

10. Арфа

Арфа — еще один отличный генератор статических сайтов, который поставляется с встроенная предварительная обработка для Jade, Markdown, LESS, Sass, Coffeescript, EjS и Stylus без каких-либо дополнительных настроек. Сервис позволяет вам использовать макеты / частичную парадигму с Jade и EjS, которые нуждаются в специальных плагинах для других генераторов статических сайтов.

Harp также построен на Node.js и может работать рука об руку с платформами Harp, что позволяет создавать веб-страницы из папки Dropbox. Сервис также может компилировать страницы для использования на страницах GitHub, PhoneGap и Heroku.

Чтобы установить Harp, используйте npm и выполните следующую команду: sudo npm install -g harp

Посетите Арфу

СМОТРИТЕ ТАКЖЕ: 10 лучших альтернатив Squarespace для создания вашего сайта

Попробуйте эти статические генераторы сайтов прямо сейчас

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

Гэтсби | Jamstack

Создавайте быстрые современные приложения и веб-сайты с React

Характеристики

• Быстрое изменение страницы без перезагрузки
• Создание сайтов с использованием компонентов React.js
• Редактирование горячей перезагрузки. Настраивайте страницы, шаблоны и стили и просматривайте изменения в режиме реального времени.

Современные веб-технологии без головной боли

Наслаждайтесь мощью новейших веб-технологий — React.js, Webpack, современного JavaScript и CSS и многого другого — все настроено и ждет, когда вы начнете создавать.

Принесите свои данные

Богатая экосистема подключаемых модулей данных

Gatsby позволяет создавать сайты с данными, которые вы хотите — из одного или нескольких источников: извлекать данные из автономных CMS, служб SaaS, API, баз данных, вашей файловой системы и т. Д. Прямо на ваши страницы с помощью GraphQL.

Масштабирование на весь Интернет

Gatsby.js — это Интернет-масштаб. Забудьте о сложных развертываниях с базами данных и серверов, а также об их дорогих, длительных затратах на установку, обслуживание и опасения масштабирования.Gatsby.js создает ваш сайт как «статические» файлы, которые можно легко развернуть на десятках сервисов.

Сделайте свой веб-сайт перспективным

Не создавайте веб-сайт с использованием технологий прошлого десятилетия. Будущее Интернета — за мобильными устройствами, JavaScript и API — Jamstack. Каждый веб-сайт — это веб-приложение, и каждое веб-приложение — это веб-сайт. Gatsby.js — это универсальный JavaScript-фреймворк, которого вы так долго ждали.

Статические прогрессивные веб-приложения

Gatsby.js — это генератор статических PWA (прогрессивных веб-приложений).Вы получаете готовый код и разделение данных. Гэтсби загружает только критически важные HTML, CSS, данные и JavaScript, поэтому ваш сайт загружается как можно быстрее. После загрузки Gatsby предварительно выбирает ресурсы для других страниц, поэтому переход по сайту выполняется невероятно быстро.

Скорость вне конкуренции

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

Showcase: Forestry.io

С самого начала было ясно, что нам нужно использовать генератор статических сайтов. Статические сайты безопасны, производительны и дают вам 100% гибкость. В Forestry.io мы предоставляем решения по управлению контентом для веб-сайтов, созданных с помощью генераторов статических сайтов, поэтому мы можем быть немного предвзятыми. Единственный вопрос: какой генератор статических сайтов был для нас правильным?

Почему Хьюго?

В начале нашего исследования мы заглянули на сайт Ionic, чтобы почерпнуть вдохновение.Они использовали Jekyll для создания своего веб-сайта. Хотя Jekyll — отличный генератор, время сборки для больших сайтов может быть очень медленным. Наш веб-сайт с более чем 150 страницами и множеством настраиваемых конфигураций и надстроек больше не относится к категории малообъемных. Наши разработчики хотят беспрепятственно работать над веб-сайтом, а нашим редакторам контента нужна возможность быстрого предварительного просмотра контента. Короче говоря, нам нужно, чтобы наши сборки были молниеносными.

Мы знали, что Хьюго был быстрым, но мы провели дополнительные тесты, прежде чем принять решение.Увидеть Хьюго в действии — это совершенно другой удивительный мир. На создание нашего 150-страничного сайта у Хьюго уходит меньше одной секунды! Взгляните:

  | EN
+ ------------------ + ----- +
  Страницы | 141
  Страницы пагинатора | 4
  Нестраничные файлы | 0
  Статические файлы | 537
  Обработанные изображения | 0
  Псевдонимы | 60
  Карты сайта | 1
  Очищено | 0

Всего за 739 мс
  

На самом деле нам так понравился Хьюго, что наш волшебник Крис опубликовал свой рабочий процесс, и мы начали проект с открытым исходным кодом Create-Static-Site.Это простой способ развернуть сайты и настроить современный рабочий процесс веб-разработки с помощью одной строчки кода. По сути, он добавляет конфигурации сборки как зависимость для JS, CSS и обработки изображений.

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

Какие инструменты мы использовали?

• Наш норвежский дизайнер Николас влюблен в Sketch . Судя по тому, что мы слышим, мечта дизайнера сбылась.
• Некоторые говорят, что наша основная графика завораживает.Николас создал его с помощью 3DS Max .
• Hugo — конечно.
• Крис не может думать о современной веб-разработке без Gulp и Webpack . Мы использовали их для добавления дополнительных шагов сборки, таких как оптимизация Browsersync, CSS, JS и SVG.
• Говоря о добавлении шагов в нашу сборку, наша жизнь была бы намного сложнее без CircleCI для непрерывного развертывания и автоматизированного тестирования.
• Мы не можем перестать бредить о Algolia .Крису это нравится, и он даже написал руководство о том, как реализовать Algolia на статических сайтах с помощью Custom Outputs от Hugo.
• Cloudinary , вероятно, один из самых простых способов разместить адаптивные изображения на вашем веб-сайте.
• Мы можем быть немного предвзяты в отношении этого — мы думаем, что Forestry.io — отличный способ добавить систему управления контентом с чистым пользовательским интерфейсом поверх вашего сайта, не отвлекая вас от работы в качестве разработчика.
• Для хостинга мы используем всемогущий AWS .
• Formspree.io управляет нашей поддержкой и корпоративными запросами.
• Мы также используем файлы cookie браузера и JS, чтобы настроить взаимодействие с пользователем и придать ему более динамичный вид.

Что такое генератор статических сайтов? Как мне найти лучший для использования?

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

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

Генераторы статических сайтов (SSG) делают то же самое.Они применяют данные и контент к шаблонам и создают представление страницы, которое может быть предоставлено посетителям сайта.

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

Думайте о генераторе статического сайта как о сценарии, который принимает данные, контент и шаблоны, обрабатывает их и выводит папку, полную всех полученных страниц и ресурсов.

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

Почему сейчас так популярны генераторы статических сайтов?

Это может показаться возвращением к «старым способам» создания сайтов, но есть несколько ключевых отличий:

Генераторы статических сайтов стали хорошими!

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

Генераторы статических сайтов бывают всех видов

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

Автоматизация стала мейнстримом

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

Зачем нужен генератор статических сайтов?

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

• Безопасность
• Масштаб
• Производительность

Давайте поговорим о них немного.

Безопасность

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

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

Нет более безопасного сервера, чем несуществующий.

Масштаб

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

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

Производительность

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

Когда мы создаем наши сайты с помощью генератора статических сайтов, посетителям вообще не нужно взаимодействовать с какими-либо механизмами, участвующими в создании каждого представления! Мы можем доставить результат всей этой предыдущей работы непосредственно из распределенной сети кешей (CDN), сокращая расстояние, на которое проходят запросы, и полностью избегая взаимодействия с какой-либо из систем.

Производительность может взлететь. И уходит головная боль, связанная с планированием и составлением бюджета инфраструктуры, необходимой для поддержания этой производительности при запланированных (и внеплановых!) Уровнях трафика.

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

Как найти лучший генератор статических сайтов

«Хорошо, я убежден.Какой лучший? »

При поиске лучшего генератора статических сайтов для вас и вашего следующего проекта необходимо учитывать ряд ключевых факторов. Давайте посмотрим на 3 из самых важных.

1. Что вы строите?

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

Вы строите….

• Сайт, основная функция которого — доставлять контент? Если это так, то инструмент, который устанавливает приоритеты для создания страниц и URL-адресов, давая вам прямой контроль над тем, что именно выводится, может быть вашим лучшим выбором. Такие инструменты, как Jekyll, Hugo, Nuxt и Eleventy, действительно очень хорошо с этим справляются.
• Сайт с более сложной прикладной функцией? Некоторые сайты не столько о «просмотре», сколько о «действиях». И хотя большинство SSG можно использовать в качестве основы для веб-приложений, другие поставляются с более продвинутыми клиентскими функциями, готовыми к использованию.GatsbyJS, NextJS и SapperJS могут предоставить некоторые полезные возможности.
• Большой сайт с несколькими тысячами страниц? Генераторы статических сайтов обеспечивают все более быструю и быструю скорость построения. Но на это может уйти немного времени. Если вам нужно сгенерировать очень много страниц, подумайте об этом. Некоторые инструменты имеют невероятно впечатляющее время генерации. Хьюго особенно впечатляет. Как и Eleventy, и последние обновления Jekyll.

2. Как вы строите?

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

Какие языки и фреймворки подходят вашей команде разработчиков? Существуют сборки SSG с использованием чего угодно, от Ada до Vue. (Прошу прощения, я не смог найти ни одного языка, основанного на языках, начинающихся с букв W-Z. Если вы знаете один, возможно, вы добавите его в StaticGen и дадите мне знать!)

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

Опять же, если они предпочитают JavaScript, есть много SSG, которые могут им подойти. Существуют варианты, в которых используются различные фреймворки JavaScript, такие как React, Vue, Angular или, возможно, ванильный JavaScript без фреймворка.

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

3. Насколько сложны ваши потребности в создании шаблонов?

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

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

Фреймворки

, такие как Vue и React, позволяют использовать модели компонентов, которые логически фиксируют не только визуальный стиль и контент, но также поведение и функциональность. Поэтому, если ваш проект больше похож на приложение, чем на сайт («выполняющий» сайт, чем «просматривающий» сайт), то, возможно, выбор SSG на основе одной из этих структур будет выгодным.

Есть ли у вашей команды или клиента уже определенные навыки и предпочтения в отношении существующего языка шаблонов? Продолжение поддержки этой возможности может быть вам выгодно.

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

Куда дальше?

Вы можете найти длинный список генераторов статических сайтов и узнать о каждом из них на staticgen.com. Многие из них связаны с примерами шаблонов проектов, которые вы можете использовать для быстрого клонирования и развертывания типового проекта в Netlify, чтобы помочь вам начать экспериментировать в рекордно короткие сроки.

Вы также можете изучить ряд примеров шаблонов с каркасами проекта для различных целей и инструментов на сайте templates.netlify.com.

Чтобы получить более подробные объяснения этого способа создания сайтов, а также некоторых инструментов и методов, вы можете погрузиться в это обширное введение в Jamstack, в котором исследуются генераторы статических сайтов и другие инструменты.Доступна разбивка контента с прямыми ссылками на отдельные части этого 3,5-часового видео.

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

Генераторы статических сайтов | Contentful

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

Посредник

Генератор статических сайтов Middleman — это инструмент командной строки, использующий Ruby и Ruby Gems.
Это один из наиболее часто используемых статических инструментов для крупных компаний. Этот плагин поможет вам управлять своим Contentful content

Посмотреть на GitHub

Посмотреть примеры

Джекилл

Jekyll — это генератор статических сайтов на основе Ruby. Это простой и удобный вариант для небольших проектов и личных сайтов.Этот плагин извлекает контент из Contentful.

Посмотреть на GitHub

Посмотреть примеры

Гэтсби

Gatsby — генератор статических сайтов на основе React. Gatsby и Contentful хорошо работают вместе — вы можете установить приложение Gatsby, которое позволит вам видеть обновления. У Gatsby также есть пакет, который позволяет Contentful быть источником данных для проекта Gatsby.

Посмотреть на GitHub

Metalsmith — это генератор статических сайтов на основе JavaScript, и этот плагин извлекает и отображает данные из Contentful.

Посмотреть на GitHub

Посмотреть примеры

Учебники

Автоматическая перестройка и развертывание с помощью CircleCI и Webhooks

В этом руководстве показано, как настраивать и автоматически развертывать статические сайты с помощью Jekyll или Middleman с CircleCI.

Хотя перечисленные ниже инструменты официально не поддерживаются нашей статической системой управления контентом, они могут помочь расширить функциональность Contentful

.

Корни

Roots — это генератор статических сайтов на основе JavaScript.У него нет обширной экосистемы, но он отлично подходит, если вы используете интерфейсные инструменты на основе Node.js. Этот плагин помогает вам управлять контентом из Contentful.

Посмотреть на GitHub

Посмотреть примеры

Textalk

Textalk — это простой генератор статических сайтов, инструмент интерфейса командной строки (CLI) для создания сайта из шаблонов и данных в пространстве Contentful.

Посмотреть на GitHub

AWS Lambda

Вот пример статического сайта, использующего Amazon Web Services (AWS) Lambda.

Посмотреть пример

Eleventy — более простой генератор статических сайтов.

Eleventy — более простой генератор статических сайтов.

Quick Start #

Eleventy v0.12.1 требует Node 10 или новее. Используйте node --version в командной строке, чтобы найти локальную версию Node.

  npm install -g @ 11ty / eleventy 
 echo '# Заголовок страницы'> README.md 
 eleventy  

При этом будут скомпилированы все файлы, соответствующие допустимым расширениям файлов входных шаблонов (.md является одним из них) в текущем каталоге в папку вывода (по умолчанию _site ).

  Запись _site / README / index.html с ./README.md. 
 Записал 1 файл за 0,11 секунды (v0.12.1)  

Запустите eleventy --serve , чтобы запустить веб-сервер. Затем откройте http: // localhost: 8080 / README / в выбранном веб-браузере, чтобы увидеть вывод Eleventy.

➡ Продолжайте! Прочтите более подробное руководство по началу работы или ознакомьтесь с полной документацией для v0.12,1 .

Присоединяйтесь к Eleventy Super Professional Business Network (26 февраля 2021 г.)

Документация для Eleventy v0.12.1Тодд и Брюс сказали, что эта кнопка должна быть больше, и, как вы можете видеть, они были правы

Built With Eleventy #

Просмотреть все 517 места.

Не верьте мне на слово 🌈 #

Послушайте, что эти счастливые разработчики говорят об Eleventy:

«Как раз из тех простых и здравых инструментов, которые я люблю. Механизм иерархии данных / папок очень очевиден и элегантен.- Хейдон Пикеринг

«Не говори Заку, что я это сказал, но Eleventy пока выглядит чертовски свежо» — Мэт Маркиз

«Eleventy почти потрясающе проста». —Chris Coyier

«Eleventy и веб-компоненты действительно хорошо сочетаются друг с другом». —Джастин Фаньяни

«Eleventy — это просто замечательно. Это, безусловно, лучший генератор статических сайтов, который я когда-либо использовал ». —Адди Османи

«Серьезно, не могу вспомнить, чтобы так нравилось пользоваться генератором статических сайтов.Да Хьюго быстр, но все это так логично. Такое ощущение, что он был разработан кем-то, кто пережил много боли и успешно использовал другие SSG ». —Фил Хоксворт

«Я фактически впервые использовал Eleventy на этой неделе. Очень понравилось. » —Пол Льюис

«Думаю, причина того, что все так любят [Eleventy] (включая меня), заключается в том, что в ней нет предписания об источниках данных или рендеринге шаблонов». —Брайан Леру

«Eleventy + Netlify стал моим новым рабочим процессом для статических сайтов.Я думаю, я влюбился.» —Mina Markham

«Eleventy — потрясающий генератор статических сайтов. Это все.» —Sara Soueidan

«Я изучал и активно пробовал использовать различные генераторы статических сайтов для этого проекта. Eleventy был единственным, что мне удалось найти, что дало мне детальный контроль, который мне был нужен при невероятно быстром времени сборки ». —Матиас Байненс

… и многое другое!

7 причин НЕ использовать генератор статических сайтов

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

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

• Статический сайт — это набор страниц, содержащихся в основных файлах HTML. Вы можете написать их от руки в текстовом редакторе, но управление активами и повторяющимися элементами, такими как навигация, может стать проблематичным.
• Система управления контентом хранит контент страницы в базе данных и предоставляет средства для редактирования и применения тем. Управление становится проще за счет гибкости, производительности, требований к серверу, безопасности и резервного копирования.
• Генератор статических сайтов — это компромисс между использованием статического сайта с ручным кодированием и полной CMS. Вы создаете полный сайт один раз, используя необработанные данные (например, файлы Markdown) и шаблоны. Полученный набор файлов передается на ваш действующий сервер.
• Термин «Jamstack» (JavaScript, API и разметка) используется по отношению к статическим сайтам. Это относится к росту фреймворков, бессерверных функций и связанных инструментов, которые генерируют статические файлы, но позволяют добавлять сложную интерактивность.

Популярные генераторы статических сайтов включают Jekyll, Eleventy, Gatsby, Hugo и Metalsmith. SSG доступны для большинства языков; см. StaticGen для многих других.

Кажется, что

SSG предлагают преимущества как CMS, так и статических миров, но они могут не подходить для каждого проекта…

1. Ты сам по себе

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

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

2. Паралич выбора

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

Существует много CMS, но есть один очевидный выбор: WordPress . Он поддерживает более 40% Интернета, поэтому помощи много. Опять же, это поможет, если у вас есть некоторый опыт работы с PHP, но даже не разработчик может создать разумный веб-сайт, используя готовые темы и плагины.

3. Время начальной настройки

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

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

4. Нет административного интерфейса

Клиенты могут быть осторожны, столкнувшись со сложным интерфейсом CMS. Просить их создать и отредактировать набор файлов Markdown многих может напугать.Вы можете упростить процесс, возможно, используя:

• с использованием существующей CMS в качестве источника данных SSG, или
• , обеспечивающий более простые рабочие процессы, такие как редактирование файлов на основе Git в StackEdit или Hackmd.io.

Но это еще больше повлияет на ваше начальное время разработки.

5. Согласованность веб-сайта

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

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

6. Управление большими сайтами

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

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

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

7. Функциональность на стороне сервера

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

1. Добавление стороннего клиентского компонента, такого как поиск Angolia или комментарии Disqus.
2. Создание собственных серверных (или бессерверных) API, которые могут использоваться клиентским JavaScript для добавления необходимых функций.
3. Создание страниц, содержащих или аналогичные блоки кода на стороне сервера.
4. Переключение на платформу, такую ​​как Next.js, которая отображает статический контент там, где это возможно, но также допускает обработку на стороне сервера.

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

Подходит ли вам статический сайт?

Прежде чем принимать какое-либо решение, изучите:

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

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

Для практических демонстраций строительных площадок со статическим генератором сайтов см .:

Генератор статических сайтов

| Gatsby

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

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

Генератор статических сайтов — это программное приложение, которое создает HTML-страницы из шаблонов или компонентов и заданного источника контента.Большинство генераторов статических сайтов, включая Gatsby, принимают текстовые файлы в формате Markdown в качестве источника, хотя Gatsby не ограничивается Markdown.

Генераторы статических сайтов являются альтернативой системам управления контентом, управляемым базами данных, таким как WordPress и Drupal. В таких системах контент управляется и хранится в базе данных. Когда сервер получает запрос на конкретный URL-адрес, программный уровень извлекает данные из базы данных, объединяет их с файлами шаблонов и генерирует HTML-страницу в качестве ответа.

Генераторы статических сайтов, с другой стороны, генерируют HTML-страницы в процессе сборки. Гэтсби, например, загружает JSON из GraphQL и объединяет эти данные с компонентами для создания HTML-страниц. Эти сгенерированные страницы затем развертываются на веб-сервере. Когда сервер получает запрос, он отвечает обработанным HTML. Статические страницы устраняют задержку, которую создают базы данных.

Примечание. Gatsby также можно использовать без GraphQL, используя API createPages .

Вы также можете использовать генераторы статических сайтов для создания сайтов JAMStack. JAMStack — это современная архитектура веб-сайта, которая использует JavaScript, API-интерфейсы контента и разметку. Гэтсби, например, может использовать WordPress REST API в качестве источника данных.

Преимущества генераторов статических сайтов

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