лабораторная работа №6

WSL2 в Windows 10, установка локальной версии Jekyll

Цель работы — настройка Windows Subsystem for Linux (WSL2), виртуальный сервер Ubuntu, генератор сайтов Jekyll, использование готовых сайтов

Возможности генератора Jekyll на gh-pages интересны для первого знакомства. Но 12 предлагаемых в настоящий момент тем — это капля в море от имеющегося изобилия готовых сайтов с понастоящему впечатляющими возможностями. Если зайти на сайт http://jekyllthemes.org/, этих тем там сотни, многие предлагаются бесплатно. Идея разделить дизайн сайта и его содержимое привлекла тысячи программистов, создавших и постоянно пополняющих этот ресурс.

Во многих темах для Jekyll используются API services, упомянутые в предыдущей лабораторной работе. Например, сервис рассылки, предоставляемый https://mailchimp.com/, сервис аналитики https://analytics.google.com/, встроенные комментарии, например, https://disqus.com/. Эти и другие сервисы сделают сайт современным, профессиональным, настоящим инструментом ведения бизнеса.

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

Программа Jekyll свободно доступна, кстати, её репозитарий на уже знакомом нам гитхабе, https://github.com/jekyll/jekyll, под лицензией MIT. Под ОС Линукс или MacOS он ставится запросто несколькими командами, об этом чуть позже. А вот под Windows(C) язык программирования ruby установить сложно, мне, по крайней мере, полноценно для Jekyll не удалось. Это хороший повод установить WSL2 для Windows 10 и попробовать 2 системы на одном компьютере.

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

Для установки WSL2 нужна новая версия Windows 10. Если она у вас есть, делаем как указано на https://docs.microsoft.com/ru-ru/windows/wsl/install-win10. Там же будет список готовых для WSL2 дистрибутивов Линукс — выбирайте Ubuntu 20.04 LTS. Последние буквы означают Long Term Support, т. е. это стабильная самая новая версия Юбунту с поддержкой на ближайшие 2+ года.

Прежде чем запустить и настраивать новую ОС в виртуальной машине, выберите время почитать мои сочинения об этой системе и пособия для работы с ней — https://ophilon.github.io/gomelug/. Статьи довольно старые, надеюсь, тем не менее, будут полезны для понимания философии Линукс.

Установка Jekyll подробно описана на https://jekyllrb.com/docs/installation/. Устанавливать мы будем в виртуальную машину Ubuntu, так же, как в обычный Линукс. Если у вас macOS, см. соответствующую страницу на этой же ссылке.

Ваша виртуальная машина Юбунту, после установки как рассказано выше, запускается как обычная программа Windows: Start → Run → bash. Далее вы вводите ID/password какие создали при установке, и запускаете шелл, т.е командный процессор bash. При установке созданный логин получает права sudo, т. е. может запускать программы с правами root. Более подробно, а так же основы работы в Линукс рассказаны в https://ophilon.github.io/gomelug/articles/konspect.html, или совсем кратко в шпаргалке https://www.linuxtrainingacademy.com/linux-commands-cheat-sheet/

Полезно при первом запуске Юбунту обновить систему до последних версий пакетов:

... $ sudo apt update
... $ sudo apt upgrade

Затем устанавливаем язык ruby (читается рУби) и необходимые для полноценной работы пакеты:

... $ sudo apt install ruby-full build-essential zlib1g-dev

В инструкции по установке советуют настроить руби для своего ИД такими командами:

... $ echo '# Устанавливать Ruby Gems to ~/gems' >> ~/.bashrc
... $ echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
... $ echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
... $ source ~/.bashrc

В этом случае вы сможете далее не пользоваться sudo, т. е. среда разработки руби будет полноценно настроена для вашего ИД, что правильно. Далее устанавливаем jekyll:

... $ gem install jekyll bundler

Перед запуском свежеустановленного jekyll вы могли заметить ещё пару утилит. Во-первых, это скрипт gem (читается гем) на языке руби, который очень облегчает работу с пакетами программ и библиотеками для этого языка, см. https://ru.wikipedia.org/wiki/RubyGems. Последняя наша команда, например, нашла и установила всё необходимое для генератора jekyll. Во-вторых, это утилита bundler, помогающая решать зависимости между библиотеками. Эта утилита нужна в основном разработчикам руби-гем пакетов, нам от неё понадобится пара команд.

Итак, джекилл настроен, идём выбирать самый красивый сайт для себя. На странице ресурсов джекилл есть несколько ссылок на готовые темы — https://jekyllrb.com/resources/. Начнём, пока вы не увлеклись просмотром этого паноптикума, с одной обычной темы http://jekyllthemes.org/themes/flexton/. Автор Artem Sheludko, вверху страницы ссылки на репозитарий гитхаб, демо в действии, лицензию и загрузку. Нажав на кнопку загрузки, вы получили у себя на компьютере полный дизайн этого сайта в виде файла flexton-master.zip Далее создаём каталог для сайтов, например:

... $ mkdir jekyll
... $ cd jekyll

помещаем в него этот файл и распаковываем:

... $ cp path/to/download-folder/flexton-master.zip .
... $ unzip flexton-master.zip

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

... $ cd flexton-master
... $ jekyll serve

Если всё настроено правильно, вы увидите сообщение от запущенного сервера:

Configuration file: /home/local/src/jekyll/flexton-master/_config.yml
            Source: /home/local/src/jekyll/flexton-master
       Destination: /home/local/src/jekyll/flexton-master/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 1.754 seconds.
 Auto-regeneration: enabled for '/home/local/src/jekyll/flexton-master'
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.

Пояснения к строкам выше:

• _config.yml — файл конфигурации вашего сайта, надо заменить некоторые ИД на ваши собственные
• Destination: … _site — каталог в котором находится сгенерированный сайт
• Server address: http://127.0.0.1:4000/ — адрес и порт сервера, который надо открыть в браузере
• Server running… press ctrl-c to stop. — как остановить сервер

Файлы отображаемые в браузере сгенерированы из каталога _posts, это размеченные маркдаун текстовые файлы, которые можно сразу начать править и видеть в браузере. Запущенный сервер мгновенно, за секунды, перестроит сайт и отобразит обновлённую страницу. Более подробно см. https://jekyllrb.com/docs/step-by-step/01-setup/, при необходимости, как всегда, пользуйтесь переводом на русский язык в браузере Хром.

В начале этой лабораторной работы я упомянул API services, добавляющие на сайт продвинутые возможности. Всё перечисленное, а именно сервис рассылки, сервис Гугл аналитики, встроенные комментарии — доступно в выбранном дизайне flexton. Вам только надо зайти на нужные сервисы и зарегистрироваться для их активации. После этого заменить полученные ИД в файле _config.yml

На сайте документации джекилл полезно ознакомиться со структурой каталогов, используемой в темах, и языком шаблонов (темплейтов) сайта liquid — https://jekyllrb.com/docs/liquid/. Это поможет более полно использовать возможности джекилл, вы сможете менять, или создавать новые дизайны сайта не ломая функциональность генератора.

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

Сначала установим VisualStudio code для Windows — берём здесь: https://code.visualstudio.com/download, ставим как обычно. После установки запустить, проверить, потом можно выйти. Затем открываем виртуальную машину Юбунту и в шелле (команда bash) устанавливаем git и запускаем VisualStudio code командами:

... $ sudo apt install git
... $ cd ~/jekyll/flexton-master
... $ code .

Последняя команда подключится и откроет VisualStudio code под виндой, используя установленную там версию как клиент. Он автоматически установит в ВМ Юбунту локальную линуксовую версию VS Code. В терминах Microsoft эта версия называется сервером, он обеспечивает доступ к файлам и шеллу в ВМ. Вы сможете работать в привычной виндовой среде, в настраиваемом редакторе VS code, имея в окне терминала VS доступ ко всем файлам и программам в обеих системах - Windows и Ubuntu!

вернуться обратно в блог