JAMstack Gatsby + NetlifyCMS с oAuth видео

5 (100%) 4 vote[s]

Сегодня создать сайт-визитку или блог не составит труда практически для любого пользователя. Благо, есть уйма вариантов, шаблонов, конструкторов, работа с которыми не предполагает особых навыков в программировании. Один из таких вариантов — JAMstack, о чем мы говорили в одной из наших статей. А теперь на практике попробуем создать сайт с генератором статичных сайтов Gatsby с CMS Netlify на, собственно, Netlify.

Как вообще начать работать с JAMstack?

Для начала нужно выбрать генератор статичного сайта. В зависимости от того, с чем вы привыкли работать, можно предложить для начала такой выбор (с NetlifyCMS):

    • Hugo — на go;
    • Gatsby — генератор сайтов на react;
    • Middlemanгенератор сайтов на Ruby (если вы хотите создать онлайн-магазин Ruby, то, скорее всего, сначала наткнетесь на решения для электронной коммерции Ruby on Rails);
    • Preact CLI (на preact.js — мини альтернатива React);
    • Другие шаблоны Netlify, используя кнопку Deploy to Netlify

Будем исходить из того, что вы уже знакомы с одним из этих фреймворков. В этой статье мы будем описывать развертывание проекта с Gutsby на react.

Вы, конечно, можете использовать любой из имеющихся генераторов статических сайтов (сайт staticgen.com), но поскольку мы будем говорить о работе с сервисом Netlify, рекомендуем этот список, среди который есть много c использованием наиболее популярных (Gatsby, Hugo, Eleventy и т.д.). Для шаблонов с кнопкой «Deploy to Netlify» вы можете развернуть новый сайт одним щелчком мыши. Но именно этот список предложен не случайно: в дальнейшем нужно будет решать вопрос о способе редактирования/обновления контента. А для этих шаблонов есть возможность автоматического развертывания (в них уже есть папка admin или etc) со стартового шаблона сайта с Netlify CMS с панелью удобного редактирования контента. А для новичка это имеет большее значение, чем все остальные преимущества JAMstack.

Итак, есть несколько вариантов старта:

    1. Вначале вы можете создать свой сайт локально, используя любой из генераторов статических сайтов (сайт staticgen.com). Как опытный разработчик, вы можете менять структуру и внешний вид сайта и т.д. Как только вы все укомплектовали и протестировали, дальше есть 2 варианта действий: подключение репозитория Git (у вас он, разумеется, есть давно, «ибо как?») для непрерывного развертывания, или просто перетащить папку с сайтом для статичной публикации. Непрерывное развертывание выполняется так: загрузить свой проект сайта на GitHub (создать учетку, если еще нет), создать учетную запись Netlify, подключить к ней учетку GitHub и развернуть свой сайт. В этом случае для редактирования контента вам понадобится Git, а именно какие-нибудь удобные инструменты для редактирования .md и .mdx.
    2. Если вы «только спросить» или «только посмотреть», то можно обойтись и без предварительного создания сайта (без кодирования) и локальных развертываний: вы можете вначале создать учетку в GitHub, затем в Netlify, а потом просто выбрать на сайте Netlify CMS понравившийся вам стартовый шаблон или из шаблонов Netlify (выбирайте с +Netlify CMS – есть не у всех!) и в один клик развернуть его, нажав на кнопку «Deploy to netlify». Вся установка произойдет автоматически, шаблон будет добавлен в ваш репозиторий на Git Hub, а если вы выбрали шаблон из списка вначале статьи, то также будет доступна панель администратора Netlify CMS, в которой вы сможете сразу приступить к редактированию/созданию страниц сайта. Чтобы попасть в нее, добавьте admin в адресной строке браузера в конце адреса вашего нового сайта: https://yoursite.netlify.com /admin.

Сразу отметим, что в бесплатном тарифе Netlify предусмотрено до 300 минут развертываний (а также  до 100 активных пользователей,  до5 пользователей по приглашению), поэтому второй вариант больше подходит для небольшого блога или портфолио: вы отредактировали несколько страничек, нажали на deploy – и все, у вас есть суперскоростное портфолио/блог Jamstack! Весь смысл заключается в создании сайта под ключ локально, и только потом приступать к развертыванию. Ну, это кому как, «на вкус все фломастеры разные»…

Используя первый вариант, рекомендуется работать с репозиторием GitHub при помощи приложения GitHub Desktop, которое избавит вас от командной строки и позволит тонко контролировать все сборки и периодичность коммитов.

Для редактирования .md и .mdx есть несколько алгоритмов, в том числе и разные онлайн-конвертеры. Понятно, что для разработчиков, привыкшик к ворду или любой другой удобной панели администратора традиционной CMS, синтаксис .md и .mdx вызовет неприятие. Кроме того, для непрограммистов (копирайтеров) это становится непреодолимой задачей. Да и для себя, если честно, возиться с непривычным синтаксисом .md и .mdx – удовольствия мало. Поэтому мы сделали для себя редактор-конвертер .md в html и наоборот (на базе ckeditor), в котором можно работать, как в обычном ворде и получать на выходе .md. О его коде и возможностях мы предоставим информацию в другой статье.

Вот короткое видео, как быстро создать JAMstack сайт на Gatsby с Netlify CMS и с авторизацией oAuth:

Скорость в pagespeed:

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 Комментарий
Inline Feedbacks
View all comments
Просмотры: 127

Популярные записи