JAMstack - стек технологий для разработки статичных сайтов

102

Существует множество CMS, таких, как MODX, WordPress и т.д., которые организуют работу со всеми частями сайта, от пользовательского контента до администрирования данных на сайте. Процесс разработки сайтов в таких системах зачастую сводится к таким вещам как: верстка, установка и настройка CMS, организация взаимодействия визуальной части сайта с данными в бд и возможностью их редактировать из административной части. Такие сайты являются динамически генерируемые, тоесть на сервере происходит генерация страницы, а браузеру уже отдается готовый html файл. Но вспомните, как у вас начинался путь разработчика сайта? Редактор текста(блокнот) html, css, javascript и вот у вас уже готовая страница сайта. Судя по трендам веб разработки можно увидеть, что история циклична, и что новое это давно забытое старое в новом исполнение. Итак, сегодня хотелось бы поговорить про JAMstack и про сервисы которые появились вместе с этим подходом разработки сайтов.

Так что же такое JAMstack?

JAMstack - это отличный способ создания быстрых, безопасных и статичных веб-сайтов. Разберем аббревиатуру.

J - JavaScript.

JavaScript отвечает за загрузку всех данных на ваш сайт (а также за любое другое динамическое программирование, выполняемое на стороне клиента). JavaScript может быть в любом виде, который вы захотите! React, Vue.js ... ванильный JS.

А - API.

API - это способ доступа к данным. То, что обычно находится на вашем сервере, теперь абстрагируется в виде API. В большинстве случаев ваши данные будут храниться на сторонних сервисах, известных как безголовые CMS (headless CMS), таких, как Netlify CMS Contentful, Directus, Kentico Cloud и т.д.

М - Markup(разметка).

Markup — какой-то контент-генератор или "шаблонизатор", позволяющий создать разметку страниц. Разметка имеет два общих проявления - HTML и XML. Возможно возникает вопрос: "разве не на всех сайтах есть разметка? Что делает разметку в JAMstack такой уникальной?". Дело в том, что в отличие от динамических сайтов, которые создают новую страницу HTML для каждого полученного запроса (это предполагает запрос базы данных и объединение результатов с разметкой и плагинами) - страницы JAMstack создаются во время развертывания с помощью статического генератора сайта(Static Site Generators) таких, как Jekyll, Gatsby, Hugo. Это означает, что пользователь получает контент с минимальной задержкой по запросу. Это позволяет сделать сайт не только быстрыми, но и делает его гораздо более безопасными из-за отсутствия запроса к базе данных.

Для чего этим нужно пользоваться?

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

Как сделать сайт, используя JAMstack?

В данном примере разработаем блог, для этого нам понадобится:

Дальнейший процесс я показываю для операционной системы Ubuntu 18.04, но если вы хотите проделать всё тоже самое, с комфортом, в Windows 10, то думаю вам пригодится статья: Используем подсистему Linux (WSL) в Windows 10 для разработки сайтов.

Начнем разработку сайта с создания контента и генерации сайта, для этого нам поможет Hugo.

Hugo — простой и быстрый генератор статических сайтов написанный на языке Go.

Установка Hugo

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

Обновляем программные пакеты

sudo apt-get update

Устанавливаем Hugo с помощью snap менеджера пакетов (если вы используете более старую версию убунты, то вам дополнительно нужно будет установить пакетный менеджер snap).

sudo snap install hugo

Проверяем версию:

hugo version

Создаем блог

Для примера, создадим новый сайт в директории ~/projects, вы можете использовать другую директорию(в WSL Windows 10 можно хранить свои проекты например в папке projects находящейся в корне диска С, тогда путь к ней будет иметь вид /mnt/c/projects).

Если такой директории еще нет, то создаем:

mkdir ~/projects

Перейдем в директорию:

cd ~/projects

Команда hugo new site создает новый сайт. Выполняем:

hugo new site test-blog

В нашем случае генератор Hugo создал сайт в папке ~/projects/test-blog. Перейдем в нее и посмотрим какие директории там создались:

cd ~/projects/test-blog
ls

Получим такую структуру:

├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

config.toml — файл с настройками нашего сайта

themes - предназначена для размещения тем.

content - служит для хранения страниц сайта.

Фундамент нашего блога готов. Теперь добавим тему.

Для Hugo существует множество бесплатных шаблонов. Можно также создать и собственную тему, но не сегодня 😉. Переходим на официальную страницу со списком тем и выбираем понравившуюся тему, например therminal копируем ссылку, которая находится в Download и клонируем тему

git clone https://github.com/panr/hugo-theme-terminal.git themes/terminal

Теперь настроим наш сайт и применим тему.

Редактируем config.toml

nano config.toml

И изменим настройки чтобы они имели следующий вид:

baseurl = "/"
defaultContentLanguage = "ru"
languageCode = "ru-ru"
theme = "terminal"
paginate = 5

[params]
  contentTypeName = "post"
  themeColor = "orange"
  showMenuItems = 2
  fullWidthTheme = false
  centerTheme = false

[languages]
  [languages.ru]
    title = "Наш тестовый блог"
    subtitle = "Вот так и сделали блог на Hugo"
    keywords = ""
    copyright = ""
    menuMore = "Показать больше"
    readMore = "Подробнее"
    readOtherPosts = "Просмотреть другие статьи"

    [languages.ru.params.logo]
        logoText = "Наш тестовый блог"
        logoHomeLink = "/"

    [languages.ru.menu]
        [[languages.ru.menu.main]]
            identifier = "about"
            name = "Обо мне"
            url = "/about"

Сохраняем настройки и выходим из редактора.

Более подробно о настройках каждой темы можно прочитать на ее домашней странице.

Для создания страниц и постов, в Hugo используется команда hugo new.

Для начала нам необходимо создать страницу "Обо мне". Выполняем в корневой директории нашего сайта:

hugo new about.md

Данная страница находится в директории contents

Hugo имеет одинаковую структура на всех страницах. В пространстве между разделителями --- располагается информация о странице, а ниже уже содержание страницы в формате Markdown.

Приведем страницу "Обо мне" к следующему виду:

---
title: "Обо мне"
date: 2019-08-07T12:56:15+04:00
---

## И так, кто я такой?

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

- веб-дизайнер
- веб-разработчик
- веб-мастер
- веб-верстальщик
- веб-архитектор

Страницу о себе мы создали, теперь создадим наш первый пост.

hugo new post/first-post.md

В нее добавим следующее

---
title: "Первая статья"
date: 2019-08-07T13:01:31+04:00
description: "Здесь некий текст превью......."
---

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

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

hugo server --bind=0.0.0.0 --port=1313

Открываем в браузере наш сервер по адресу http://localhost:1313/ и видим главную страницу нашего блога:

главная страница localhost:1313
Главная страница localhost:1313

Разработка примера сайта завершена.

Теперь перейдем к размещению блога в интернете.

Размещаем сайт в интернете

Для этого нам понадобится Netlify, авторизовываемся на этом сайте и у нас теперь есть два путя =)

Первый путь

Генерируем сайт с помощью команды

hugo

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

Загрузка сайта на Netlify
Загрузка сайта на Netlify

Второй путь

  • Загружаем директорию с сайтом на github
  • Синхронизируем github с netlify
  • Выбираем репозиторий на котором располагается наш сайт и вводим команду для генерации сайта hugo, далее netlify сам подцепит сгенерированную директорию и выведет готовый сайт.
  • Далее можно настроить в netlify свой домен, и настроить отправку с формы через встроенный сервис.

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

В отличие от того же github pages с помощью netlify можно генерировать сайты с приватных репозиториев github.

Также приведу некоторые конфигурации, в которых вы можете использовать JAMstack:

  • Gatsby JS (SSG - статический генератор сайтов) + Contentive (безголовая CMS) + Netlify (CDN, на котором размещен сайт распределенным образом)
  • Jekyll (SSG) + Github Pages (для хостинга)
  • Middleman (SSG) + S3 (простой сервис хранения) + Netlify