Учебное пособие по Jekyll: как создать статический веб-сайт

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

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

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

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

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

Что такое Джекил?

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

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

Вот что выделяет Jekyll среди SSG:

1. Простота в использовании : Jekyll использует простые текстовые файлы и синтаксис уценки для создания контента и управления им, что означает, что вам не нужно знать HTML или CSS, чтобы начать работу.
2. Быстро и безопасно: Jekyll не работает с какой-либо серверной базой данных или сценариями, что означает меньший риск уязвимостей и атак. Он генерирует статические файлы HTML, что делает ваш сайт невероятно быстрым и безопасным.
3. Настраиваемость: Jekyll обладает широкими возможностями настройки, что позволяет вам использовать макеты и шаблоны или даже создавать плагины для расширения функциональности.
4. Простота развертывания : Jekyll создает статические HTML-файлы, которые можно развернуть на веб-сервере или у хостинг-провайдера без использования системы управления динамическим содержимым.
5. Поддерживается большим сообществом: у Jekyll большое сообщество пользователей и разработчиков, а это означает, что доступно множество ресурсов, если вам нужна помощь или вы хотите расширить функциональность своего сайта.

Как установить Джекил

Сначала вам нужно установить Ruby на свой компьютер, прежде чем вы сможете приступить к установке Jekyll, как указано в документации Jekyll.

Как установить Jekyll на macOS

По умолчанию Ruby предустановлен с macOS, но не рекомендуется использовать такую ​​версию Ruby для установки Jekyll, поскольку она устарела. Например, в Ventura, последней операционной системе Apple, предустановленной версией Ruby является 2.6.10, из которых последняя версия — 3.1.3 (на момент написания этой статьи).

Чтобы исправить это, вам нужно правильно установить Ruby с помощью менеджера версий, такого как chruby. Сначала вам нужно установить Homebrew на свой Mac, используя приведенную ниже команду в терминале:

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

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

 brew doctor

Если вы получили сообщение « Ваша система готова к работе» , теперь вы можете перейти к установке chruby и ruby-install с помощью следующей команды:

 brew install chruby ruby-install

Теперь вы можете установить последнюю версию ruby ​​3.1.3, используя только что установленный пакет ruby-install :

 ruby-install 3.1.3

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

 echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc echo "chruby ruby-3.1.3" >> ~/.zshrc

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

 ruby -v

Должно быть рубин 3.1.3 .

Теперь на вашем компьютере установлена ​​последняя версия Ruby. Теперь вы можете приступить к установке последней версии Jekyll и сборщика:

 gem install jekyll bundler

Как установить Джекилл в Windows

Чтобы установить Ruby и Jekyll на компьютер с Windows, вы должны использовать RubyInstaller. Это можно сделать, загрузив и установив версию Ruby+Devkit из RubyInstaller Downloads и используя параметры установки по умолчанию.

На последнем этапе мастера установки запустите шаг ridk install , который используется для установки гемов. Подробнее читайте в документации RubyInstaller.

Из вариантов выберите цепочку инструментов разработки MSYS2 и MINGW. Откройте новое окно командной строки и установите Jekyll и Bundler, используя следующую команду:

 gem install jekyll bundler

Как проверить правильность установки Jekyll

Чтобы убедиться, что Jekyll правильно установлен на вашем компьютере, откройте терминал и выполните следующую команду:

 jekyll -v

Если вы видите номер версии, это означает, что Jekyll установлен и правильно работает в вашей системе. Теперь вы готовы использовать Jekyll!

Команды и конфигурация Jekyll

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

Команды интерфейса командной строки Jekyll

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

• jekyll build : создает статический сайт в каталоге _site .
• jekyll serve : создает сайт и запускает веб-сервер на вашем локальном компьютере, что позволяет вам просмотреть сайт в браузере по адресу http://localhost:4000.
• jekyll new [site name] : создает новый сайт Jekyll в новом каталоге с указанным именем сайта.
• jekyll doctor : выводит любые проблемы с конфигурацией или зависимостями, которые могут присутствовать.
• jekyll clean : удаляет каталог _site , в котором хранятся сгенерированные файлы сайта.
• jekyll help : выводит справочную документацию для Jekyll.
• jekyll serve --draft : Создает и обслуживает ваш сайт Jekyll, включая все сообщения, которые находятся в каталоге _drafts .

Вы также можете добавить некоторые параметры к этим командам. См. полный список команд и параметров Jekyll в документации по Jekyll.

Файл конфигурации Jekyll

Файл конфигурации Jekyll — это файл YAML с именем _config.yml , который содержит настройки и параметры для вашего сайта Jekyll. Он используется для настройки различных аспектов вашего сайта, включая название сайта, описание, URL-адрес и другие параметры.

Вот некоторые из наиболее часто используемых параметров конфигурации:

• title: Название вашего сайта.
• описание: краткое описание вашего сайта.
• URL-адрес: базовый URL-адрес вашего сайта.
• baseurl: подкаталог вашего сайта, если он размещен в подкаталоге домена.
• постоянная ссылка: структура URL для ваших сообщений и страниц.
• исключить: список файлов или каталогов, которые следует исключить из процесса создания сайта.
• include: список файлов или каталогов, которые необходимо включить в процесс создания сайта.
• paginate: количество сообщений, отображаемых на странице при использовании нумерации страниц.
• plugins: список подключаемых модулей Jekyll для загрузки.
• тема: По умолчанию установлено значение minima . Вы можете использовать любую другую тему, указав ее имя и внедрив другие настройки, о которых мы узнаем позже в этой статье.

Вы также можете создавать пользовательские переменные в файле конфигурации и использовать их в шаблонах, макетах и ​​включениях вашего сайта. Например, вы можете создать переменную с именем author_name и затем использовать ее в своих шаблонах следующим образом: {{ site.author_name }} .

Чтобы изменить файл конфигурации Jekyll, откройте файл _config.yml в каталоге проекта Jekyll в текстовом редакторе и внесите изменения.

Примечание. Любые изменения, внесенные в файл конфигурации, вступят в силу при следующем создании сайта с помощью jekyll build или jekyll serve .

Как создать статический сайт на Jekyll?

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

 jekyll new joels-blog

Убедитесь, что вы заменили «joels-blog» на предпочитаемое вами имя сайта.

Далее перейдите в папку веб-сайта. Вы заметите базовую структуру сайта Jekyll, которая включает такие каталоги и файлы:

 ├── _config.yml ├── _posts ├── Gemfile ├── Gemfile.lock ├── index.md └── README.md

Вот для чего предназначен каждый из этих каталогов и файлов:

• _config.yml: файл конфигурации Jekyll, содержащий настройки и параметры вашего сайта.
• _posts: каталог, содержащий контент вашего сайта (может быть сообщения в блоге). Это могут быть файлы Markdown или HTML с определенным соглашением об именах файлов: ГОД-МЕСЯЦ-ДЕНЬ-название.РАЗМЕТКА .
• Gemfile и Gemfile.lock: Bundler использует эти файлы для управления драгоценными камнями Ruby, от которых зависит ваш сайт.
• index.md: домашняя страница по умолчанию для вашего сайта, созданная из файла Markdown или HTML.

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

• _includes: каталог, содержащий многократно используемые фрагменты HTML, которые можно включать в макеты и страницы. Например, панель навигации, нижний колонтитул и т. д.
• _layouts: каталог, содержащий шаблоны макета HTML, которые определяют структуру ваших страниц.
• активы: каталог, содержащий любые файлы, используемые вашим сайтом, такие как изображения и файлы CSS.
• _sass: каталог, содержащий файлы Sass, которые можно использовать для создания CSS для вашего сайта.

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

Вариант быстрого старта: используйте наш шаблон GitHub

В качестве альтернативы запуску проекта с использованием интерфейса командной строки Jekyll вы можете создать репозиторий Git, используя шаблон Jekyll «Hello World» от Kinsta на GitHub. Выберите Использовать этот шаблон > Создать новый репозиторий , чтобы скопировать начальный код в новый репозиторий в вашей собственной учетной записи GitHub.

Как просмотреть сайт Jekyll

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

 jekyll serve

Это создаст папку _site , содержащую все статические файлы, сгенерированные из вашего проекта. Он также запустит сервер Jekyll, и вы сможете просмотреть свой сайт через http://localhost:4000 .

Если вы посетите URL-адрес в своем веб-браузере, вы должны увидеть свой сайт Jekyll с темой minima:

Как настроить сайт Jekyll

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

Как Front Matter работает в Jekyll

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

Это формат метаданных, используемый в Jekyll для хранения информации о странице или публикации — он может быть записан как в YAML, так и в JSON.

 --- title: "Welcome to Jekyll!" description: "Introduction to what Jekyll is about and how it works" date: 2023-03-07 16:54:37 +0100 ---

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

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

Как настроить лицевую часть по умолчанию

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

То, как это структурировано, немного сложно, но вот как это будет выглядеть. Вставьте это ниже последней конфигурации в файле _config.yml :

 defaults: - scope: path: "posts" # empty string means all files values: layout: "post" author: "John Doe"

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

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

Создание страниц в Jekyll

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

Например, если вы хотите создать страницу с URL-адресом https://example.com/about , создайте файл с именем about.html или about.md . Расширение файла определяет язык разметки для содержимого страницы (HTML или Markdown).

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

Создание макетов в Jekyll

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

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

Лучше всего определять общую структуру макетов с помощью HTML или другого языка разметки.

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

 <!DOCTYPE html> <html> <head> <title>{{ page.title }}</title> </head> <body> <header> <!-- Navigation menu goes here --> </header> <main>{{ content }}</main> <footer> <!-- Footer content goes here --> </footer> </body> </html>

В этом примере заполнители {{ page.title }} и {{ content }} будут заменены фактическим заголовком и содержимым отображаемой страницы.

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

Как работает папка _includes в Jekyll

Папка _includes содержит повторно используемые фрагменты кода, которые вы можете включить в различные части вашего веб-сайта. Например, вы можете создать файл navbar.html в папке include и добавить его в файл макета page.html с помощью тега {% include %} .

 <!DOCTYPE html> <html> <head> <title>{{ page.title }} </title> </head> <body> <header>{% include navbar.html %} </header> <main>{{ content }} </main> <footer> <!-- Footer content goes here --> </footer> </body> </html>

Во время сборки Jekyll заменит тег содержимым navbar.html .

Папка _includes может содержать файлы любого типа, например файлы HTML, Markdown или Liquid. Основная цель состоит в том, чтобы ваш код оставался СУХИМ (не повторяйтесь), позволяя вам повторно использовать код на вашем сайте.

Перебор сообщений в Jekyll

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

Все сообщения на любом веб-сайте Jekyll хранятся в переменной site.posts . Вы можете выполнить цикл и использовать переменную {{ post.title }} Liquid для вывода заголовка каждого сообщения следующим образом:

 {% for post in site.posts %} <h2>{{ post.title }}</h2> {% endfor %}

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

 {% for post in site.posts %} <h2>{{ post.title }}</h2> <p>Published on {{ post.date | date: "%B %-d, %Y" }} by {{ post.author }}</p> {% endfor %}

Обратите внимание, что в приведенном выше примере фильтр Date Liquid форматирует дату каждого сообщения в более удобном для человека формате.

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

Как добавить тему на сайт Jekyll

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

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

Чтобы добавить тему на основе gem, откройте Gemfile вашего сайта и добавьте gem для темы, которую вы хотите использовать. Мы будем использовать тему jekyll-theme-clean-blog . Вы можете заменить минимальную тему по умолчанию в Gemfile:

 gem "jekyll-theme-clean-blog"

Запустите команду bundle install в каталоге вашего сайта, чтобы установить gem темы и его зависимости.

В файле _config.yml вашего сайта добавьте следующую строку, чтобы указать тему, которую вы хотите использовать:

 theme: jekyll-theme-clean-blog

На этом этапе ваша тема готова к использованию.

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

Затем вы можете найти имена макетов для ваших файлов в документации темы. Например, если вы используете тему jekyll-theme-clean-blog , именами макетов для файла index.html будут home , other pages — page , а все записи — post .

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

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

Настройте тему Jekyll

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

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

Теперь вы можете добавить параметр фона к основному блоку и путь к его изображению. Например, на странице «О нас» это главное:

 --- layout: page title: About description: This is the page description. permalink: /about/ background: '/assets/images/about-page.jpeg' ---

Сделайте это для всех страниц и сообщений, и ваша страница будет выглядеть так:

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

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

Когда вы сохраните свой проект, вы заметите, что параметры навигации будут изменены:

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

Создайте файл posts.html и вставьте следующий код:

 --- layout: page title: Blog description: Expand your knowledge and stay informed with our engaging blog posts. background: '/assets/images/blog-page.jpeg' --- {% for post in site.posts %} <article class="post-preview"> <a href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}"> <h2 class="post-title">{{ post.title }}</h2> {% if post.subtitle %} <h3 class="post-subtitle">{{ post.subtitle }}</h3> {% else %} <h3 class="post-subtitle"> {{ post.excerpt | strip_html | truncatewords: 15 }} </h3> {% endif %} </a> <p class="post-meta"> Posted by {% if post.author %} {{ post.author }} {% else %} {{ site.author }} {% endif %} on {{ post.date | date: '%B %d, %Y' }} · {% include read_time.html content=post.content %} </p> </article> <hr /> {% endfor %}

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

Как добавить контент на сайт Jekyll

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

Весь контент хранится в папке _posts. Каждый контент хранится в файле с аналогичным соглашением об именах ГГГГ-ММ-ДД-title.md (или .html для файлов HTML). Например, если вы хотите создать пост под названием «Мой первый пост», создайте 2023-03-08-my-first-post.md в каталоге _posts .

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

 --- layout: post title: "How to Read Books: Tips and Strategies for Maximum Learning" subtitle: "Reading books is one of the most powerful ways to learn new information, gain new perspectives, and expand your knowledge." date: 2023-03-02 23:45:13 -0400 background: '/assets/images/blog/books.jpeg' ---

Затем вы можете добавить свой контент под блоком вступительной части с помощью тегов HTML или синтаксиса уценки.

Сохраните файл, и Jekyll автоматически создаст и включит его на ваш сайт.

Как развернуть свой сайт Jekyll на Kinsta

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

Предварительные требования: настройка вашего сайта Jekyll

Проверьте свой файл Gemfile.lock и убедитесь, что он включает платформу для всех устройств. Чтобы убедиться, что все платформы настроены правильно, выполните следующую команду:

 bundle lock --add-platform arm64-darwin-22 x64-mingw-ucrt x86_64-linux

Затем вы можете приступить к созданию Procfile — в этом файле указаны команды, которые выполняются при развертывании вашего сайта. Этот файл автоматически обновляет команды, которые будут выполняться на вкладке «Процесс» MyKinsta. Это команда, которую нужно добавить в ваш Procfile:

 web: bundle exec jekyll build && ruby -run -e httpd _site

Отправьте свой сайт Jekyll на GitHub

В этой статье давайте воспользуемся командами Git для отправки ваших кодов на GitHub. Сначала создайте репозиторий на GitHub; это даст вам доступ к URL-адресу репозитория.

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

 git init

Теперь добавьте свой код в локальный репозиторий Git с помощью следующей команды:

 git add

Теперь вы можете зафиксировать свои изменения, используя следующую команду:

 git commit -m "my first commit"

Примечание. Вы можете заменить «мой первый коммит» кратким сообщением с описанием ваших изменений.

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

 git remote add origin [repository URL] git push -u origin master

Примечание. Убедитесь, что вы заменили «[URL-адрес репозитория]» собственным URL-адресом репозитория GitHub.

После того, как вы выполните эти шаги, ваш код будет отправлен на GitHub и доступен через URL-адрес вашего репозитория. Теперь вы можете развернуться в Kinsta!

Развертывание вашего сайта Jekyll в Kinsta

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

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

1. Нажмите «Приложения» на левой боковой панели.
2. Нажмите Добавить услугу
3. Нажмите «Приложение» в раскрывающемся списке.

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

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

Ваше приложение начнет развертывание. В течение нескольких минут будет предоставлена ​​ссылка для доступа к развернутой версии вашего веб-сайта. В данном случае это: https://myblog-84b54.kinsta.app/

Краткое содержание

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

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

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

Что вы думаете о Джекилле? Вы использовали Jekyll для создания чего-либо? Пожалуйста, не стесняйтесь делиться своими проектами и опытом с нами в разделе комментариев ниже.