Ⓖ Как создать блог с помощью Gatsby и Netlify CMS
Генераторы статических сайтов довольно часто используются программистами. В этой статье мы построим блог с помощью Gatsby и Netlify CMS и посмотрим, как использовать Gatsby для быстрой разработки.
Перевод публикуется с сокращениями, автор оригинальной статьи Mohammed Asker.
Вы узнаете, как добавить Netlify на свой хостинг, настроить права доступа к файлам и подключить систему аутентификации пользователей.
Полный код проекта можно найти по ссылке.
Приступим!
Кто такой Gatsby?
Gatsby – основанный на React бесплатный и открытый инструментарий, который способен быстро создавать сайты и веб-приложения. Это также генератор статических сайтов, вроде Next.js, Hugo и Jekyll.
Gatsby включает в себя SEO и оптимизацию производительности без плагинов, что позволяет создавать готовый к работе софт за меньший срок, чем на чистом React.
Netlify CMS
Netlify CMS – еще один генератор статических сайтов. Он написан разработчиками Netlify и позволяет создавать/редактировать контент, почти как в WordPress, но проще и удобнее.
Главное преимущество Netlify заключается в отсутствии необходимости каждый раз создавать файлы markdown перед написанием поста. Это полезно для авторов, которые не хотят иметь дело с кодом, текстовыми редакторами, репозиториями и прочими подобными вещами.
Настройка среды
Установка Node.js
Node.js – среда, позволяющая запускать JavaScript вне веб-браузера и писать бекенд вместо использования других ЯП: Python, Java или PHP. Gatsby построен на Node.js, поэтому мы должны его установить.
Для установки перейдите на страницу загрузки и скачайте версию для вашей ОС. Когда завершите, откройте терминал и запустите node -v, чтобы проверить правильность установки – версия должна быть 12.18.4 или выше.
Установка Git
Git – распределенная система управления версиями с открытым исходным кодом, которая помогает эффективно работать со своими проектами. Gatsby starter использует Git для загрузки и установки необходимых файлов.
Чтобы инсталлировать Git, следуйте инструкциям для вашей ОС:
Установка Gatsby CLI
Gatsby CLI – инструмент для создания сайтов на базе Gatsby. С его помощью можно установить любые плагины для Gatsby.
Для установки откройте терминал и выполните следующую команду:
npm install -g gatsby-cli
Как только все будет готово, переходим к созданию сайта.
Создаем сайт
В этом туториале используется стандартная тема Gatsby starter, но можно выбрать любую другую из библиотеки.
В терминале выполните следующую команду, чтобы установить новый блог:
gatsby new foodblog https://github.com/gatsbyjs/gatsby-starter-blog
Что означает описанная выше команда:
- new – создание нового проекта.
- foodblog – название проекта. Назвать можно как угодно.
- URL-адрес (https://github.com/gatsbyjs/gatsby-starter-blog) – адрес репозитория с исходным кодом.
Как только установка будет завершена, перейдите в папку проекта:
cd foodblog
Затем запустите проект:
gatsby develop
Откройте новую вкладку в браузере с адресом http://localhost:8000/.
Блог готов.
Добавляем Netlify CMS
Настройка файловой структуры приложения
Когда вы откроете текстовый редактор, вас будет ждать множество файлов. В следующей статье описан каждый из них.
├── node_modules ├── src ├── static ├── .gitignore ├── .prettierrc ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-node.js ├── gatsby-ssr.js ├── LICENSE ├── package-lock.json ├── package.json └── README.md
Нам интересна папка Static, в которой формируется основная структура CMS. Если у вас этой папки нет, то создайте ее в корневом каталоге проекта.
Внутри папки Static создайте папку admin, а в ней два файла: index.html и config.yml:
admin ├ index.html └ config.yml
Файл index.html, является точкой входа в админку. Вам не нужно создавать стили или что-то еще – все уже сделано с помощью тега script:
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Content Manager</title> </head> <body> <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script> </body> </html>
Настраиваем серверную часть
Добавьте все фрагменты кода из этого раздела в файл admin/config.yml.
Начнем со следующего куска:
backend: name: git-gateway branch: master
Код описывает внутренний протокол и Git-ветку. Git Gateway – это открытый API, действующий как прокси между аутентифицированными юзерами и репозиторием.
Далее добавим media_folder: "images/uploads". Это позволит добавлять фотографии, непосредственно в CMS и больше не нужно будет использовать текстовый редактор для добавления вручную.
media_folder: "images/uploads"
Убедитесь, что в папке admin есть папка images. Внутри нее создайте папку uploads – тут вы будете размещать свои изображения.
Настройка коллекций
Коллекции определяют структуру различного типа контента на статическом сайте. Поскольку сайты могут быть разным, способы настройки параметров коллекции будет различаться.
Например, на вашем сайте есть блог, в котором посты хранятся в content/blog, а файлы имеют следующий формат: 2020-09-26-how-to-make-sandwiches-like-a-pro.md. Каждый пост начинается с настройки в формате YAML:
--- layout: blog title: "How to make sandwiches like a pro" date: 2020-09-26 11:59:59 thumbnail: "/images/sandwich.jpg" --- Съешь ещё этих мягких французских булок, да выпей же чаю.
В примере выше процесс добавления параметров коллекции в ваш config.yml:
collections:
- name: "blog"
label: "Blog"
folder: "content/blog"
create: true
slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
fields:
- {label: "Layout", name: "layout", widget: "hidden", default: "blog"}
- {label: "Title", name: "title", widget: "string"}
- {label: "Publish Date", name: "date", widget: "datetime"}
- {label: "Body", name: "body", widget: "markdown"}
Рассмотрим, что делает каждая строка:
- name: используется для путей, как /admin/collections/blog;
- label: большое слово «Блог» в верхней части экрана – это и есть label;
- folder: указывает на путь к файлу, где хранятся посты блога;
- create: позволяет пользователю с правами админа создавать новые документы;
- slug: это шаблон для имен файлов. {{year}}, {{month}} и {{day}}, которые извлекаются из поля даты записи или даты сохранения.
Включаем аутентификацию
Для этого добавьте код HTML в два файла:
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
Файлы находятся по пути: admin/index.html и public/index.html. Поместите код между тегами <head>.
Когда пользователь входит в систему с помощью виджета Netlify Identity, токен направляет его на главную страницу сайта. Для того чтобы завершить вход в систему и вернуться к CMS, перенаправьте пользователя обратно в /admin/. Для этого добавьте следующий код перед закрывающим тегом body в файлике public/index.html:
<script>
if (window.netlifyIdentity) {
window.netlifyIdentity.on("init", user => {
if (!user) {
window.netlifyIdentity.on("login", () => {
document.location.href = "/admin/";
});
}
});
}
</script>
Разворачиваем сайт с помощью Netlify
Процесс развертывания не вызовет затруднений, а главное, у вас будет бесплатный SSL.
Если вы еще не зарегистрировались на платформе, можно сделать это здесь. Развертывание состоит из 3 шагов:
- Нажмите кнопку «New site from Git», чтобы создать новый сайт.
- Выберите репозиторий, который необходимо подключить к Netlify и выберите свое название проекта.
- На последнем из них оставим все как есть и нажмем кнопку «Deploy site».
После завершения развертывания вы можете перейти на сайт, нажав зеленую ссылку в левом верхнем углу экрана. Например: https://random_characters.netlify.app.
Если хотите заменить странный URL-адрес своим доменом, изучите эту документацию.
Включаем Identity и Git Gateway
Сервисы Netlify Identity и Git Gateway помогают управлять админами сайта без необходимости иметь учетную запись Git.
Чтобы активировать эти службы, перейдите в админку и выполните следующие действия:
1. Перейдите в раздел Settings > Identity и выберите Enable Identity service.
2. В разделе Registration выберите Open или Invite only. В большинстве случаев необходимо, чтобы доступ к CMS получали только приглашенные пользователи, но если вы просто экспериментируете – оставьте Open.
3. Прокрутите вниз до Services > Git Gateway и кликните по Enable Git Gateway. Эта штука проверяет подлинность Git-узлов и генерирует токен доступа к API.
В этом случае мы оставляем поле Roles пустым, что означает, что любой вошедший в систему может получить доступ к CMS.
Мы связали Gatsby с Netlify CMS. Все, что осталось – получить доступ к админке и создать сообщение в блоге.
Получаем доступ к CMS
Существует два способа войти в админку, в зависимости от того, какие параметры доступа были выбраны в Identity.
Если Invite only – вы можете пригласить себя и других пользователей, нажав кнопку «Invite user». Вам придет письмо со ссылкой для входа.
Если доступ к админке получить не удается, добавьте в конец адреса сайта следующую строку: #confirmation_token=random_characters, например: https://yoursite.com/admin/#confirmation_token=random_characters.
Если все хорошо сложилось, вы уже должны видеть панель администратора:
Создать новый пост можно нажав на кнопку «New post».
Когда будете готовы его опубликовать – нажмите «Publish Now». После нажатия данной кнопки пост создастся автоматически, изменения закоммитятся с датой и временем публикации, а потом все будет запушено в главный репозиторий.
Заключение
Из этого туториала вы узнали, как можно сделать несколько вещей:
- создать блог на Gatsby;
- прикрутить Netlify к Gatsby;
- настроить аутентификацию с помощью Identity и Git Gateway;
- пользоваться админкой;
- опубликовать первый пост в рабочей системе.
Есть еще масса незатронутых моментов в связке Gatsby и Netlify CMS. Если это вам интересно, обратитесь к официальной документации.
Библиотека программиста надеется, что вы нашли это руководство полезным. Удачи в обучении!
Дополнительные материалы:
- Настольный справочник по базовым принципам React
- 12 бесплатных ресурсов для изучения React
- Изучение React. С чего начать?
- Kubernetes, Python, React, AI... Что в трендах разработки в 2020 году?