Существует множество 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/ и видим главную страницу нашего блога:
Разработка примера сайта завершена.
Теперь перейдем к размещению блога в интернете.
Размещаем сайт в интернете
Для этого нам понадобится 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 Pages (для хостинга)
- Middleman (SSG) + S3 (простой сервис хранения) + Netlify