CC BY
6
УДК 004.514
Босых О.С. студент магистратуры 2 курса Хакасский государственный университет им. Н. Ф. Катанова
научный руководитель: Голубничий А.А.
Россия, г. Абакан СОЗДАНИЕ СТАТИЧЕСКИХ САЙТОВ С ПОМОЩЬЮ ТЕХНОЛОГИИ BLOGDOWN Аннотация: В статье описывается пакет blogdown, позволяющий создавать статические сайты с использованием динамических документов R Markdown. Перечисляются и раскрываются особенности пакета blogdown. Приводится поэтапная инструкция-пример создания сайта.
Ключевые слова: R Markdown, blogdown, статические сайты, грамотное программирование
Bosykh O.S. graduate student Katanov Khakass State University Russia, Abakan Scientific supervisor: Golubnichiy A.A.
CREATING STATIC SITES WITH BLOGDOWN TECHNOLOGY Abstract: This article describes a blogdown package that allows you to create static sites using dynamic R Markdown documents. The blogdown package features are listed and disclosed. A step-by-step instruction is given as an example of creating a site.
Key words: R Markdown, blogdown, static sites, literate programming
Хорошо спроектированный и поддерживаемый веб-сайт может быть чрезвычайно полезен, как для организации и развития бизнеса, так и в качестве личного инструмента для представления себя миру. В настоящее время существует множество 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].
N ew Proj е et
Back Project Type
я New Project h. R Package
R Shiny Web Application >
R Package using Repp >
R Package using RcppArmadillo R Package using RcppEigen Ф Website using blogdown >
Cancel
Рисунок 1. Создание нового сайта с использованием blogdown
New Project
Back Create a new website using Hugo and blogdown
Directory name: First blogdoqn site
Create project as subdirectory of:
Browse...
•/ Install Hugo automatically
7 Add sample blog posts
Hugo tiieme: |aerohub/hugrid |
i Add the example site of the theme
□pen in new session Create Project Cancel
Рисунок 2. Настройка проекта нового сайта
В момент создания проекта генерируются все необходимые директории и файлы, перечень файлов может несколько разниться в зависимости от выбранной темы, при этом всегда создается файл config.toml и директория public. Config.toml - файл конфигурации с минимальной семантикой, используемый для настройки проекта. Код итогового файла настроек проекта и файла, описывающего структуру сайта представлены на рисунках 3,4.
Для размещения проекта на хостинге, достаточно всего лишь полностью скопировать содержимое директории public в соответствующую папку хостинга, предварительно заменив базовый электронный адрес на имя соответствующего домена.
1 # Site settings
Z 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"
8
9 contentdir = "content"
10 datadir = "data"
11 layoutdir = "layouts"
12 publishdir = "public"
13
14* [params]
15 # Meta
16 title = "Hugrid a simple grid theme for Hugo"
17 subtitle = "A kind of boilerplate to perform anyone or anything quicl<
18 author = "Pavel Kanyshev"
19 description = "Hugrid - grid theme for Hugo with an expanding image p Z0 keywords = "Hugo, Hugo theme, grid theme, portfolio, bookmarks, colli
# Body background color bodybgcolor = "#f9f9f9"
Рисунок 3. Часть исходного кода Config.toml файла
1 [[items]]
Z title = "Hugrid Theme"
3 image = "Lmages/iull/1.png"
4 thumb = "Lmages/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/huqrid"
8 [[items]]
3 title = "Hugrid Theme"
10 image = "images/iull/Z.png"
11 thumb = "images/thumbs/Z.png" 1Z alt = "Hugrid Theme"
13 description = "A simple grid theme for Hugo. A kind of boilerplate to pe
14 url = "https://qithub.com/aerohub/huqrid" IB [[items]]
16 title = "Hugrid Theme"
17 image = "Lmages/iull/3.png"
18 thumb = "Lmages/thumbs/B.png"
19 alt = "Hugrid Theme"
ZB description = "A simple grid theme for Hugo. A kind of boilerplate to pe
Z1 url = "https://qithub.com/aerohub/huqrid"
Рисунок 4. Часть исходного кода Items.toml файла
После проведения всех необходимых манипуляций и размещения директории public на хостинге, сайт становится доступным для
пользователей сети Интернет, главная страница сайта представлена на рисунке 5.
Hugrid - a simple grid theme for Hugo
A kind of boilerplate to perform anyone or anything quickly. Portfolio, collection, bookmarks, contacts and so on.
v
A
Hugrid Theme
Asimplegrid theme for Hugo. A kind of boilerplate to perform anyone or anything quickly. Portfolio, mller.tion. bookmarks, r_ontacts and soon.
Рисунок 5. Интерфейс главной страницы сайта
Процесс создания сайта занимает небольшое количество времени. По своей сути, весь процесс сводится исключительно к конфигурированию соответствующих файлов и наполнению необходимым контентом.
Использованные источники:
1. CRAN - Package blogdown [Электронный ресурс] URL: https://cran.r-project.org/web/packages/blogdown/index.html (дата обращения: 12.01.2019).
2. The world's fastest framework for building websites | Hugo URL: https://gohugo.io (дата обращения: 12.01.2019).
3. Github - aerohub/hugrid: Hugrid (Hugo+grid) is a simple grid theme for Hugo. It's a kind of boilerplate to perform anyone or anything quickly. Portfolio, collection, bookmarks, contacts and so on. [Электронный ресурс] URL: https://github.com/aerohub/hugrid (дата обращения: 12.01.2019).
