Используйте генератор статического сайта для создания быстрого сайта

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

Это руководство доступно для скачивания в формате PDF. Загрузить Используйте генератор статического сайта для создания быстрого веб-сайта сейчас. Не стесняйтесь копировать и делиться этим со своими друзьями и семьей.

Оглавление

1. Введение в генераторы статических сайтов (SSG)
   Почему вы должны использовать SSG? | Как работают SSG? | Какие популярные SSG доступны? | Выбор SSG
2. Подготовка к установке Jekyll
   Преимущества локальной установки | Преимущества удаленной установки | Предпосылки
3. Установка Джекила
   Установка Ruby в Linux | Установка (обновление) Ruby на macOS | Установка Ruby в Windows | Установка Джекила
4. Настройка проекта и структура
   Создание проекта Jekyll | Знакомство со структурой Джекила
5. Jekyll Content Authoring
   Предварительный просмотр вашего сайта | Обновление О странице | Обновление конфигурации сайта | Создание нового контента в уценке
6. Построение и Развертывание
   Построить | развертывание
7. Джекил Теминг
8. Плагины Джекила

Введение в генераторы статических сайтов

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

(CMS), которая включает в себя сочетание сценариев и содержимого базы данных для создания своих страниц динамично.

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

Почему вы должны использовать SSG?

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

• Во-первых, многие нетехнические писатели, которые работают с сетью (например, блоггеры), создали легкие языки разметки, такие как Markdown.

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

• Во-вторых, сложность систем CMS иногда вызывает проблемы с производительностью и безопасностью.

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

Есть и другие преимущества для SSG

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

или даже создавать свои собственные страницы, SSG может быть не лучшим вариантом. Аналогично, если вы хотите продавать товары

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

Как работают SSG?

Современные CMS используют поток, подобный следующему:

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

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

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

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

Какие популярные SSG доступны?

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

,

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

• Язык программирования: Это описывает язык, на котором написан сам инструмент SSG

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

• Язык шаблонов: Язык шаблонов — это язык, используемый для построения структуры страниц, а также для выполнения некоторой автоматизации (например, отображения тегов, назначенных конкретной странице). Это может быть важно, если вы уже знакомы с одним, а не с другим.
• (Собственный) Форматы ввода: Какие форматы текстовой разметки вы можете использовать для черновика вашего контента.
• (Собственные) выходные форматы: Мы сосредоточены на создании веб-сайтов, поэтому HTML (плюс CSS / Javascript) приведен здесь. Но некоторые генераторы могут выводить и другие форматы, такие как PDF.
• Особенности: Есть и другие полезные функции, которые может содержать SSG. Одним из распространенных примеров является то, что он «осведомлен о блоге», который позволяет вам добавлять теги и даты в файлы содержимого, а полученные страницы организовывать в виде блога.

Эта таблица суммирует вышесказанное для пяти ведущих SSG:

Выбор SSG

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

Jekyll является самым популярным из них и наиболее широко поддерживается с точки зрения доступных тем, плагинов и т. Д. С другой стороны, мне нравятся большие модели контента в Hugo, а также возможность использования Org-Mode в качестве входных данных. , Возможность экспортировать сайт в виде PDF-книги через GitBook также привлекательна.

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

Подготовка к установке Jekyll

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

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

• в местном масштабе (т.е. на той же машине (ах), где вы создаете контент)
• удаленно (то есть на сервере, где живет ваш сайт)

Преимущества локальной установки

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

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

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

,

Преимущества удаленной установки

С другой стороны, вы можете установить SSG на сервере. В этом случае ваш рабочий процесс выглядит примерно так: 1) записывать необработанное содержимое, 2) перемещать необработанное содержимое на сервер и 3) запускать SSG для преобразования необработанного содержимого в HTML. Некоторые из преимуществ этого подхода следующие:

• Один набор предпосылок: Установка SSG в одном месте означает, что вам нужно будет выполнить установку только один раз.
• Одна установка для администрирования: Как и все программное обеспечение, SSG будут выпускать новые версии, и вам придется обновлять их, если вам нужны эти приятные новые функции. Если вы работаете с SSG на нескольких компьютерах, вам придется обновлять каждую из них по отдельности. Но основание вашей SSG на центральном сервере означает, что вам придется обновляться только один раз.
• Независимость платформы в авторинге: Если вы работаете на разных устройствах, удаленный SSG означает, что все, о чем вам нужно беспокоиться, — это авторинг. А поскольку вы пишете в виде простого текста, вы можете использовать практически любое устройство, которое вам нравится. Например, вы можете чертить сообщения с помощью текстового редактора на своем телефоне Android, а затем проверять их и добавлять графику на компьютер с Windows. И вы могли бы даже синхронизировать все с одним из многих кросс-платформенных решений для синхронизации файлов

  там

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

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

Предпосылки

Чтобы использовать SSG в целом, вам потребуется следующее:

• Редактор, способный писать контент в виде простого текста. Отвлечение свободного

  редакторы — хороший выбор (Lightpaper для Mac

  изображено на изображении выше).

• Среда веб-хостинга

  ,

• Доступ в Интернет для передачи контента в среду вашего хостинга.

Если вы относитесь к тому типу людей, которые рассматривают SSG в рамках одной из услуг по созданию сайтов «наведи и нажми»

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

• Ruby версия 2.2.5 или выше
• RubyGems, формат для упаковки приложений на основе Ruby
• GCC и make, компилятор программного обеспечения с открытым исходным кодом (не беспокойтесь, вам вообще не нужно об этом беспокоиться, но Jekyll использует его в фоновом режиме)

Установка Джекила

Установка Ruby в Linux

В операционных системах на основе Unix, таких как Linux, предварительные условия очень просты: пара простых установок из командной строки. На Ubuntu и его производных, следующая команда APT

настроит для вас язык Ruby:

sudo apt install ruby ruby-dev

Это установит язык Ruby, а также инструменты разработки, которые необходимы для работы с некоторыми Драгоценные камни. Gems — это формат пакета Ruby, и установка некоторых из них фактически создаст их на месте. Но не волнуйтесь, все это позаботятся установщики.

После установки Ruby вы можете установить Jekyll, как описано в разделе «Установка Jekyll» ниже.

Установка (обновление) Ruby на macOS

MacOS поставляется с Ruby, установленным из коробки. К сожалению, эта версия (по крайней мере, для High Sierra) — 2.0.0, и поэтому ее недостаточно для запуска Jekyll.

Самый простой способ установки — через Доморощенный проект, который предоставляет инструмент командной строки

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

,

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

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Далее используйте заваривать Команда для установки обновленной версии Ruby, которая будет поддерживать Jekyll:

brew install ruby

На этом этапе убедитесь, что вы закрыли и снова открыли Терминал — он подберет обновленную версию Ruby (показано на рисунке ниже). Затем выполните установку с помощью команды в разделе «Установка Jekyll» ниже.

Установка Ruby в Windows

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

• Во-первых, вы можете установить с помощью стандартного установщика .EXE. Проект RubyInstaller поддерживает последнюю версию 2.5.0. Двойной щелчок по файлу (показанному на рисунке выше) запустит знакомый мастер установки.
• Также вы можете использовать Chocolatey, менеджер пакетов для Windows, для установки Ruby. Следуйте нашему предыдущему руководству по установке Chocolatey

  , затем установите Ruby с помощью команды чоко установить рубин.

• Наконец, если у вас установлена ​​последняя версия Windows 10, вы можете установить Ubuntu из Магазина Windows.

  , Затем вы можете установить Ruby с помощью команды APT, упомянутой выше, в дополнение ко всему, что обеспечивает Ubuntu с открытым исходным кодом.

Установка Джекила

После того, как вы установили Ruby, вы можете использовать драгоценный камень Команда на всех трех платформах для установки Jekyll и всех его зависимостей (всего около 25):

gem install jekyll

Замечания: В Ubuntu добавьте вышеупомянутое с помощью sudo для установки в масштабе всей системы. Хотя установка возможна только для пользователя, я обнаружил, что это проблематично.

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

jekyll -v

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

Настройка проекта и структура

Создание проекта Jekyll

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

jekyll new awesome-site

Это создаст новый каталог с именем удивительный сайт. Давайте копаться и знакомиться с ним.

Знакомство со структурой Джекила

Структура проекта Jekyll содержит несколько ключевых файлов и подкаталогов:

• _posts: Как следует из названия, здесь вы будете размещать сообщения в блоге. Сообщения блога отличаются от «обычных страниц» тем, что они будут содержать дату, которая поможет отсортировать их, а также дополнительные категории для их организации. в Создание контента В разделе мы рассмотрим это более подробно.
• _config.yml: Это файл конфигурации вашего сайта, написанный в формате YAML. YAML — это язык разметки, используемый для структурированной информации, и распространенный формат для конфигов. Мы изменим некоторые из них, когда придет время создавать наш контент.
• 404.html: Как и в других системах, страница 404 отображается, когда посетители запрашивают неизвестные URL-адреса.
• Gemfile: Это файл конфигурации Ruby. Мы добавим это позже при установке дополнительных компонентов, но пока не вносите в это никаких изменений.
• index.md: Если вы знакомы с веб-серверами в целом, это должно выглядеть знакомо. Когда пользователь переходит на URL (например, «www.makeuseof.com»), типичный веб-сервер пытается загрузить «index.html» или «index.php». Этот файл Markdown будет преобразован в «index .html »нашего статического сайта.

Вы можете заметить одну вещь, отсутствующую в этом списке … страницы! Как вы можете иметь сайт без страниц?

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

Jekyll Content Authoring

Предварительный просмотр вашего сайта

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

Замечания: Важно выдавать команды Jekyll из каталога вашего проекта (например, «/ home / aaron / Documents / awesome-site /» в приведенном ниже примере). В противном случае вы получите всевозможные ошибки о пропущенных вещах, которые только так выглядят, потому что вы находитесь не в нужном месте.

Как говорится в выводе, мы можем открыть это сейчас в браузере, используя http://127.0.0.1:4080. И теперь есть сайт, приветствующий нас в Джекилле, как показано на рисунке ниже.

Обновление О странице

На изображении выше мы видим ссылку «О программе» в верхнем меню. Нажатие на это приводит к появлению страницы с кучей мусора о Jekyll и его теме Minima.

Но это мой сайт! Давайте изменим это, чтобы персонализировать это. Мы можем добавить некоторую Markdown в файл about.md в корне нашего проекта. Обратите также внимание на «передний план» в верхней части файла, где указан URL «/ about /».

Обновляя нашу вкладку браузера (сервер Jekyll примет наши изменения в режиме реального времени), наше приветственное сообщение появляется прямо вверху. Отлично!

Но теперь другие вещи становятся заметными. Название сайта: «Ваш потрясающее название »вместо«мой потрясающий заголовок. »И есть некоторая чушь о« _config.yml »в описании сайта. Давайте исправим их.

Обновление конфигурации сайта

_config.yml (это действительно важно, а не бессмысленно) файл содержит некоторую важную информацию о нашем сайте, как показано на рисунке ниже:

Здесь легко найти и настроить вещи, давайте 1) изменим название, 2) изменим описание и 3) удалим ссылку на Github. В отличие от изменений страницы, нам нужно перезапустить сервер, чтобы получить обновленный файл конфигурации с Ctrl + C (остановить) и Джекилл служить (чтобы начать это снова):

Но возиться с YAML — это не то, к чему мы стремились. Нет, нам нужна возможность создавать контент в таких форматах, как Markdown.

Создание нового контента в уценке

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

и солидные редакторы для Windows

, Mac и Linux

, Но если вы совершенно не знакомы с Markdown, обзор Майкла о супер Markdown

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

Как только вы успеете собрать несколько Markdown, мы можем приступить к созданию вашего первого поста. Создайте новый текстовый файл с именем «YYYY-MM-DD-your-title.md» любым способом, который вам нравится, где первая часть имени представляет дату. Поместите файл в каталог «_posts», затем откройте его в вашем любимом текстовом редакторе.

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

---
title: "Testing Out Some Headings"
layout: post
---

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

С этого момента вы можете начать накапливать сообщения. Если все, что вы хотите от своего сайта Jekyll, — это простой блог в стиле журнала, то вы его получили. Некоторые дальнейшие шаги, которые вы можете рассмотреть, включают в себя (ссылки приведут вас к ресурсам с более подробной информацией):

• Создание других статических страниц, таких как страница «О программе», которую мы пересмотрели ранее Помните, вы можете поместить исходные файлы для них либо в корень проекта, либо в определенные вами подпапки.
• Категоризация страниц в начале с ключевым словом «категория». Затем создайте целевые страницы, которые фильтруют каждую из ваших категорий.
• Организовать страницы в дерево сайта с помощью ключевого слова «постоянная ссылка» в начале статьи. Это позволяет вам, например, указать, что «about.md» в корне вашего проекта фактически получает адрес «awesome-site.com». /около/«.

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

Построение и Развертывание

строить

Взгляните на приведенный выше снимок экрана — в пятой строке вы увидите вывод «Генерация…»

Чтобы обслуживать ваш сайт, Jekyll сначала нужно строить Это. Это влечет за собой преобразование всей уценки в HTML

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

Мы также можем построить проект вручную с помощью следующей команды:

jekyll build

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

В ходе строительства проекта Jekyll предпримет шаги, в том числе:

• Преобразование уценки в HTML.
• Добавление «включенных» элементов, таких как верхние и нижние колонтитулы, на страницы сайта.
• Замена динамических фрагментов в шаблонах их значениями. Примером является создание страницы путем поиска всех сообщений в блоге и заполнения списка с их датами и заголовками.
• Создание навигации, где это необходимо, например, папки для категорий сообщений («jekyll» на изображении выше) или пункт меню для «About», указывающий на «awesome-site.com». /около/«.

В конце этого процесса вы можете просто отправить содержимое каталога «_site» в среду веб-хостинга.

развертывание

Сайты, созданные Jekyll, не требуют какой-либо сложной установки базы данных для работы. Все, что вам нужно сделать, это получить все содержимое каталога «_site» на ваш веб-хостинг. Есть несколько методов, которые вы можете использовать для этого, в том числе:

• Прямое ручное копирование. Нет суеты, нет суеты. Просто не забудьте использовать SFTP

  и не обычный (небезопасный) FTP.

• Синхронизация файлов. Если вы можете найти инструмент синхронизации

  который поддерживает SFTP (или обычный FTP, если вы должен), вы можете настроить его для синхронизации каталога «_site» с вашим веб-корнем. Помните, что это должна быть односторонняя синхронизация от вашего компьютера до веб-хостинга. Rsync — это опция, доступная на всех платформах, а Grsync

  Пользовательский интерфейс также облегчает использование.

• Управления источником. Наконец, для чего-то, что меняется так же быстро и часто, как блог, вы должны управлять «сырым» контентом с контролем источников

  , Одним из вариантов развертывания является также установите каталог «_site» под управлением исходного кода. Это позволяет вам «git push» обновлять среду вашего хостинга всякий раз, когда вы создаете или редактируете контент. Или, если вы действительно умны, вы можете попробовать хук post-commit в вашем исходном каталоге, который использует rsync для копирования обновленного контента на ваш веб-хост.

На данный момент у вас есть все необходимое для создания веб-сайта. Но это не значит, что мы все рассмотрели. Например, стандартная тема Minima немного, ну … не хватает. Давайте добавим что-то немного острее.

Джекил Теминг

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

Замечания: Многие темы упакованы как гемы Ruby, что означает, что вы можете воспользоваться командой «gem install», которую мы использовали ранее. Однако это все еще в стадии разработки. Кроме того, некоторые темы могут быть установлены вручную.

Поскольку большие вертикальные меню на боковой панели — это круто, мы установим тему Hydeout. (Вы найдете много ссылок на классический роман во всей экосистеме Jekyll.) Он упакован как драгоценный камень Ruby, поэтому вы можете установить его с помощью той же команды, которую мы использовали для установки Jekyll:

gem install jekyll-theme-hydeout

Затем создайте новый сайт Jekyll и измените следующие два на 1) примите во внимание драгоценный камень содержащий тема, и 2) на самом деле применять тема для текущего сайта. Сначала измените следующую строку в Gemfile:

Теперь измените настройку в _config.yml использовать Hydeout (используя название гема «jekyll-theme-hydeout»), обозначая активную тему сайта:

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

Плагины Джекила

Темы — не единственный способ улучшить ваш сайт. Плагины Jekyll помогают добавлять функциональность, начиная от новых опций ввода и вывода, автоматической генерации оглавлений или встраивания веб-плеера Spotify.

, Он может даже обеспечить некоторые из функций, которые мы выделили как недостатки из SSG, как комментарии (например, гем «disqus-for-jekyll» включает службу Disqus).

Мы установим панель администрирования для нашего сайта, превратив ее в нечто вроде «статической системы управления сайтом сайта». Драгоценный камень «jekyll-admin» обладает этой функциональностью… все, что нам нужно сделать, это установить ее:

gem install jekyll-admin

А затем включите его в нашем Gemfile согласно инструкциям разработчиков:

Готово! Перейдите на новую панель администрирования вашего сайта по адресу: 4080 / admin:

Резюме

Напомним, что в этом руководстве мы узнали:

• Как SSG берет простой текстовый контент и превращает его в красиво отформатированные веб-страницы
• Каковы важные атрибуты SSG и как выбрать тот, который работает для вас
• Как установить генератор статического сайта Jekyll в Windows, Mac и Linux
• Как начать свой первый проект Jekyll, и как выглядит его структура
• Как создать контент для вашего сайта, используя язык разметки, и просмотреть результаты
• Как взять вывод Jekyll и перенести его с локального компьютера на веб-хостинг
• Как установить и выбрать новую тему Jekyll для вашего сайта
• Как установить и использовать дополнения для добавления функциональности в Jekyll

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

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

Что вы думаете о сайтах на основе SSG? Это правильно для вас? Или все это звучит слишком сложно, и вы бы предпочли просто придерживаться WordPress? Дайте нам знать об этом в комментариях!