Вам интересно, что это за новая шумиха вокруг JAMstack? Что такое сайт JAMstack? Как мне его построить? Где мне его развернуть?

Если вы задавали какой-либо из этих вопросов в течение последних двух месяцев, эта статья для вас. Мы собираемся узнать, что такое JAMstack и как создать наш первый блог JAMstack.

Если вы уже знаете, что такое сайт JAMstack, вы можете пропустить этот раздел и сразу перейти к:

Что такое JAMstack?

JAMstack - это не фреймворк или продукт. Это способ делать что-то, и в нем нет ничего нового. Но применение этого термина к такому методу создания сайтов помогает повысить его популярность, поэтому я полностью за него. JeremyMorgan.com является сайтом JAMstack с 2010 года.

JAMstack - это:

  • JavaScript
  • API
  • Разметка

Но это мало что вам говорит. Как они работают вместе?

На мой взгляд, наиболее важным компонентом JAMstack является создание не столь статичных статических веб-сайтов. Чтобы объяснить это, нам нужно вернуться немного назад.

Какие сайты были раньше

Раньше у нас было два типа веб-сайтов. Они были статичными и динамичными.

Статические веб-сайты

Статический веб-сайт - это сайт, представляющий собой всего лишь набор текстовых файлов HTML с CSS и изображениями, отправленных через веб-сервер.

Так началась сеть. Поскольку веб-сервер просто выталкивает файлы HTML без обработки, они работают очень быстро. Обратной стороной является то, что их нельзя изменить. Независимо от того, какие данные меняются, файлы HTML остаются неизменными. Вы не можете динамически обновлять страницу при изменении данных.

Пример: большинство веб-страниц 90-х годов

Динамические веб-сайты

динамический веб-сайт запускает приложения в серверной части, которые на лету генерируют HTML и доставляют его в браузер. Вот как мы создаем веб-сайты уже около 20 лет.

Динамический веб-сайт не такой быстрый, как статический, но он интерактивен. HTML отправляется в браузер, но пользователь может взаимодействовать с ним и отправлять сообщения обратно на веб-сервер. Затем он генерирует новый HTML-код для отправки обратно.

Пример: Wordpress, Drupal, Sitecore и еще около миллиона

Веб-сайты JAMstack

Веб-сайт JAMstack - лучшее из обоих миров. Вы получаете скорость обработки статических файлов, но в этих статических файлах есть JavaScript, который взаимодействует с API.

Так что, если эта диаграмма сбивает с толку, позвольте мне объяснить, вернувшись немного назад.

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

Первая часть вашего рабочего процесса - это создание и редактирование файлов Markdown. Если вы никогда не работали с Markdown, вот основы и отличный курс.

После того, как вы закончите, вы прогоните файлы через генератор статического сайта. Он генерирует весь ваш HTML, CSS и JavaScript. Затем вы размещаете их на любом статическом файловом веб-сервере (предпочтительно CDN).

Эти файлы могут быть обработаны молниеносно, потому что они всего лишь текст. Затем файлы JavaScript могут взаимодействовать с API, чтобы вы получали динамические данные. Вы даже можете прикрепить его к базе данных.

Так, например, вместо модели Wordpress, которая представляет собой службу PHP, подключенную к базе данных и генерирующую HTML-страницы, HTML уже сгенерирован. Затем JavaScript может взаимодействовать с базой данных.

Это лучшее из обоих миров. Вы получаете невероятную скорость статических файлов с базой данных или другим API-интерфейсом.

Вот почему сейчас так много говорят о сайтах JAMstack.

Каковы преимущества?

Генераторы статических веб-сайтов и JavaScript, взаимодействующий с API, существуют уже давно. Как я уже сказал, JeremyMorgan.com работает в этом направлении уже 10 лет. Наиболее существенные различия заключаются в инструментах, рабочем процессе и моделях хостинга.

Например, сейчас мой сайт построен на Hugo. Я передаю его в репозиторий GitHub, и он автоматически извлекается и строится на Netlify. Netlify аннулирует кеш, поэтому сайт свежий и для скорости использует CDN.

10 лет назад я создавал сайт с установкой Octopress (Jekyll Wrapper) на виртуальной машине FreeBSD. Далеко от того места, где мы находимся сейчас.

Итак, вот некоторые из преимуществ:

  • Скорость - статические ресурсы обслуживаются через CDN быстро. Действительно быстро. Вы обслуживаете предварительно созданные объекты через CDN.
  • Безопасность. Площадь вашего сайта меньше, поскольку большая часть вашего сайта представляет собой статические ресурсы.
  • Рабочий процесс. После настройки рабочий процесс становится даже проще, чем Wordpress или аналогичные настройки.
  • Масштабирование. Если вы вдруг окажетесь на первой странице Hacker News, ваш сайт не исчезнет. Он будет масштабироваться (если вы используете правильные сервисы)

Итак, если вам нравится идея JAMstack, давайте посмотрим, какие инструменты вам понадобятся.

Генераторы статических сайтов JAMstack

Чтобы начать работу с JAMstack, вам понадобится генератор статических сайтов. Это то, что превращает ваши файлы Markdown в HTML. Генераторов статических сайтов слишком много, чтобы перечислить их все, но вот некоторые из лучших. Я работал со многими из них в прошлом.

  • Хьюго - я указал это первым, потому что он мой любимый. Он работает на Go, но вам не нужно знать Go, чтобы его использовать. Его преимущество - единый исполняемый файл и чрезвычайно быстрая генерация страниц.
  • Гэтсби - еще один классный генератор. Этот работает на JavaScript. Его самое большое преимущество - масса замечательных функций и растущее сообщество. (Вы можете пройти этот курс и быстро освоиться)
  • Jekyll - работает на Ruby. Я использовал это для JeremyMorgan.com в течение многих лет. Это очень просто и настраивается. Просто следите за этими зависимостями Ruby.
  • Next.js - SSG на базе JavaScript. Он поддерживает статически экспортируемые приложения React, или вы можете выполнить рендеринг на сервере.
  • Пеликан - он работает на Python, и он надежен. Он имеет простой интерфейс командной строки и легко настраивается.
  • Hexo - еще один статический генератор на базе JavaScript, популярность которого растет. Работать с ним очень быстро и легко.

Какой бы генератор статических сайтов вы ни выбрали, решать вам. Это зависит от вашего уровня подготовки и комфорта. Разработчики JS любят Hexo. Люди Python, такие как Pelican. Разработчики React, такие как Гэтсби. Выбирайте то, что вам больше всего нравится и делает вас продуктивным. Если вы хотите изучить другие генераторы статических сайтов, посетите StaticGen.com.

Какой из них я выбрал?

Я выбрал Hugo для своего сайта. И не только потому, что я разработчик Go. Фактически, я не менял код Go, чтобы он работал. Однако я потратил много времени на оценку решений и выбрал Hugo, потому что:

  • Это действительно быстро
  • Один исполняемый файл (меньше зависимостей)
  • Очень настраиваемый

Здесь я говорю о процессе глубокого выбора. Итак, теперь давайте поговорим о том, где мы можем разместить это.

Где размещать сайты JAMstack

Итак, теперь вы выбрали статический генератор, и вам нужно куда-то его поставить. Вы можете разместить его на любом статическом хосте. Вы можете создать простую виртуальную машину онлайн с помощью Nginx и разместить ее там. Однако передовой практикой с сайтами JAMstack является размещение их в сервисе с CDN.

Вот несколько отличных мест для размещения ваших сайтов JAMstack

  • Netlify - чрезвычайно быстрая служба с поддержкой CDN, которую можно подключить к GitHub. Бесплатно, если вам не нужна аналитика или ваш сайт большой.
  • Vercel - также очень быстрый и с поддержкой CDN, прикрепленный к GitHub. Также бесплатно, пока не вырастешь.
  • AWS Amplify - быстрый и мощный способ развертывания статических сайтов (и многое другое).
  • GitHub Pages - быстрый и простой способ бесплатно опубликовать статические страницы.
  • Статические веб-приложения Azure - новый сервис от Azure для размещения статических страниц. Быстрый, мощный и масштабируемый.

Доступно множество вариантов, но они популярны прямо сейчас.

Какой из них я выбрал?

После некоторых интенсивных оценок я выбрал Netlify. Я оценил все варианты выше, кроме Azure, и все они были великолепны. В моих тестах скорости Netlify стабильно показывает лучшие результаты в Африке и Индии, которые являются важными областями моей читательской базы, и я хочу хорошо им служить.

Все они были очень близки друг к другу по скорости, и их легко было подключить к GitHub.

Итак, вы готовы создать свой первый сайт JAMstack?

Создание вашего первого веб-сайта JAMstack

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

Обе эти ссылки относятся к Windows, Mac и Linux. Если вы используете Pop! _OS (я предпочитаю), вот полное руководство по настройке Hugo.

Установить Hugo

Первый шаг - установка Hugo. Вот полные инструкции с их сайта.

Это очень просто.

Домашнее пиво

brew install hugo

Шоколадный

choco install hugo -confirm

или из источника:

mkdir $HOME/src
cd $HOME/src
git clone https://github.com/gohugoio/hugo.git
cd hugo
go install --tags extended

Создать сайт Hugo

Теперь вам нужно создать новый сайт Hugo:

hugo new site hellohugo

Теперь вам понадобится тема:

Вы можете найти хороший список Темы Гюго здесь.

Как только вы найдете тот, который вам нравится, скопируйте ссылку на репо. Я выбираю «Гайд» для этого примера:

cd themes
git clone https://github.com/spf13/hyde

Затем вы должны добавить в файл config.toml следующее:

theme = "hyde"

Теперь создайте новый пост:

hugo new helloworld.md

Ваш пост будет выглядеть так:

---
title: "Post"
date: 2020-05-30T13:13:42-07:00
draft: false
---
Hello! This is the first blog post!

Добавьте контент и не забудьте изменить «draft» на false, когда будете готовы к публикации.

Чтобы проверить это:

hugo serve

И вы готовы просматривать свой блог на localhost: 1313:

Все файлы создаются в / public, поэтому, когда вы будете готовы к публикации, выполните:

hugo

И тогда все файлы в / public будут вашим новым сайтом.

Итак, он построен, давайте развернем его.

Развертывание вашего сайта JAMstack

Итак, мы собираемся развернуть этот сайт на Netlify. Во-первых, нам нужно добавить его в GitHub.

Сначала инициализируйте его в папке, в которую вы установили Hugo.

Примечание. Мы не создаем артефакты и не отправляем их в Netlify. Мы отправляем исходный код в Netlify, а Netlify создаст артефакты и разместит их.

git init

Теперь нам нужно добавить нашу тему в качестве подмодуля. В моем случае использование Hyde выглядит так:

git rm --cached themes/hyde
git submodule add https://github.com/spf13/hyde themes/hyde

Теперь перейдите в Github и создайте репозиторий.

Теперь добавим происхождение:

git remote add origin https://github.com/JeremyMorgan/HugoTestBlog.git

И потяните его:

git pull origin master

Теперь мы внесем наши новые изменения.

git add .

И совершите их.

git commit -m "initial commit"

Теперь все готово для отправки на GitHub:

git push --set-upstream origin master

Теперь перейдем к Netlify. Вы можете создать учетную запись бесплатно, если у вас ее нет.

В Netlify мы хотим создать новый сайт из git:

Затем мы создадим новое непрерывное развертывание из GitHub:

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

Отсюда вы можете выбрать основные настройки сборки. У нас есть Хьюго и публика. Вы можете нажать «развернуть сайт», и он будет развернут.

Теперь вы можете получить свой сгенерированный URL-адрес и посетить свой новый сайт!

Однако, в зависимости от выбранной темы, у вас может быть такой стиль, который не существует. Это потому, что базовый URL установлен на example.org. Мы не знали, какой был базовый URL.

В моем случае Netlify создал мой сайт по адресу https://awesome-carson-bc7cd2.netlify.app/, поэтому я просто добавлю это в свой config.toml:

baseURL = "https://awesome-carson-bc7cd2.netlify.app/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "hyde"

И я добавлю это, а затем сделаю коммит. Теперь мой сайт выглядит так:

Если вы внимательно следили за происходящим: поздравляем! Вы только что развернули сайт JAMstack !!.

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

Заключение

Надеюсь, это помогло вам понять, что такое JAMstack. В этой статье мы рассмотрели

  • Что такое JAMstack
  • Почему это круто
  • Генераторы статических сайтов, которые вы можете использовать
  • Хосты JAMstack
  • Создал собственный сайт JAMstack.

Надеюсь, это было полезно. Если вы хотите стать суперзвездой JAMstack, вот несколько отличных курсов, которые вы можете пройти, чтобы изучить его:

Если вы в конечном итоге создадите сайт JAMstack, поделитесь им со мной! Я хотел бы услышать отзывы и то, как они продвигаются.