JAMstack - история о том, как разрабатывать статичные сайты в 2019

Существует множество 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?

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

• hugo
• github
• netlify

Дальнейший процесс я показываю для операционной системы 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/ и видим главную страницу нашего блога:



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

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

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

Первый путь

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

hugo

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

Второй путь

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

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

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

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

Заключение

Данная статья была написана под вдохновением статьи Nuxt.js — введение и здесь я хотел рассказать про подход отличающийся от привычного процесса разработки сайтов, а также рассказать про сервис Netlify, который я использую чаще всего для показа верстки заказчику =)
Всем спасибо за внимание!
Фух… Наконец-то написал свою первую статью для modx.pro ?