Создание статических сайтов с помощью технологии blogdown

Хорошо спроектированный и поддерживаемый веб-сайт может быть чрезвычайно полезен, как для организации и развития бизнеса, так и в качестве личного инструмента для представления себя миру. В настоящее время существует множество CMS для создания и ведения сайтов. В рамках данного исследования нами будет рассмотрен пакет blogdown [1], позволяющий создавать сайты при помощи динамических документов R Markdown и генератора сайтов Hugo [2].

Само наименование пакета включает объединение слов Blog и Markdown (R Markdown). Как следует из описания технологии в репозитории CRAN, [1] данный пакет предназначен как для создания постов блогов, так и веб-страниц, с использованием R Markdown.

Blogdown отличается от основных инструментов, используемых при создании веб-сайтов, как минимум двумя особенностями:

• 1.    Blogdown создает статические сайты , то есть сайт может состоять исключительно из статических файлов: HTML, CSS, JavaScript, изображений и т.д. Таким образом сайт можно разместить на любом вебсервере, так как не требуется поддержка PHP, баз данных и других технологий, т.е. сайт представляет лишь папку с файлами. Такой подход имеет ряд преимуществ и ряд ограничений, рассмотрение которых выходит за рамки данного исследования.

• 2.    Сайт создается из документов R Markdown (можно также использовать и стандартные файлы Markdown). R Markdown дает преимущества динамических документов – все результаты и расчеты, представленные на сайте (графики, таблицы и т.д.), могут быть вычислены и визуализированы динамически из кода языка R. Также использование Markdown позволяет быстро конвертировать записи в блоге и другие материалы в разные форматы за счет технологии «связывания» (knitr).

На первом этапе создания собственного сайта необходимо установить пакет blogdown и включить его, используя команду library(blogdown). В случае успешной установки, при создании нового проекта появится вариант «Website using blogdown», с соответствующей иконкой генератора статических сайтов Hugo (рис.1.) и возможность настроить проект (рис. 2.). Перед созданием сайта рекомендуется изначально выбрать тему из перечня вариантов на официальном сайте Hugo [2]. Выбор темы влияет не только на внешний вид проекта, но и на принципиальное структурирование сайта, большинство тем так или иначе построено по типу стандартного блога, в том числе и стандартная тема, появляющаяся по умолчанию в пункте «Hugo theme» при создании нового проекта. В рамках рассматриваемого нами проекта мы выбрали стандартную сетчатую тему Hugrid [3].

Рисунок 1. Создание нового сайта с использованием blogdown

New Project

Back         Create a new website using Hugo and blogdown

Directory name.

First blogdoqn site

Create project as subdirectory of: | Browse...

0 Install Hugo automatically iz Add sample blog posts

Hugo theme: |aerohub/hugrid                | z Add the example site of the theme

• □ Open in new session create Project Cancel

Рисунок 2. Настройка проекта нового сайта

В момент создания проекта генерируются все необходимые директории и файлы, перечень файлов может несколько разниться в зависимости от выбранной темы, при этом всегда создается файл config.toml и директория public. Config.toml – файл конфигурации с минимальной семантикой, используемый для настройки проекта. Код итогового файла настроек проекта и файла, описывающего структуру сайта представлены на рисунках 3,4.

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

• 1    # Site settings

• 2    baseurl = " http://example.org/ "

• 3    languageCode = "en-us"

• 4    title = "Hugrid - Grid Theme For Hugo"

• 5    theme = "hugrid"

• 6    # Enter your tracking code to enable Google Analytics

• 7    googleAnalytics = "UA-XXXXXXXX-Y"

• 9    contentdir = "content"

• 10    datadir = "data"

• 11    layoutdir = "layouts"

• 12    publishdir = "public"

14” [params]

• 15      # Meta

• 16    title = "Hugrid - a simple grid theme for Hugo"

• 17    subtitle = "A kind of boilerplate to perform anyone or anything quick

• 18    author = "Pavel Kanyshev"

• 19      description = "Hugrid - grid theme for Hugo with an expanding image p

• 20      keywords = "Hugo, Hugo theme, grid theme, portfolio, bookmarks, colle

• 22      # Body background color

• 23      bodybgcolor = "#f9f9f9"

• 1    [[items]]

• 2    title = "Hugrid Theme"

• 3    image = "images/full/1.png"

• 4    thumb = "images/thumbs/1.png"

• 5    alt = "Hugrid Theme"

• 6    description = "A simple grid theme for Hugo. A kind of boilerplate to pe

• 7    url = " https://github.com/aerohub/hugrid "

• 8    [[items]]

• 9    title = "Hugrid Theme"

• 10    image = "images/full/2.png"

• 11    thumb = "images/thumbs/2.png"

• 12    alt = "Hugrid Theme"

• 13    description = "A simple grid theme for Hugo. A kind of boilerplate to pe

• 14    url = " https://github.com/aerohub/hugrid "

• 15    [[items]]

• 16    title = "Hugrid Theme"

• 17    image = "images/full/3.png"

• 18    thumb = "images/thumbs/3.png"

• 19    alt = "Hugrid Theme"

• 20    description = "A simple grid theme for Hugo. A kind of boilerplate to pe

• 21    url = " https://github.com/aerohub/hugrid "

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

Рисунок 5. Интерфейс главной страницы сайта

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