Share This
Связаться со мной
Крути в низ
Categories
//Ⓖ Как создать блог с помощью Gatsby и Netlify CMS

Ⓖ Как создать блог с помощью Gatsby и Netlify CMS

Генераторы статических сайтов довольно часто используются программистами. В этой статье мы построим блог с помощью Gatsby и Netlify CMS и посмотрим, как использовать Gatsby для быстрой разработки. Обсудить

kak sozdat blog s pomoshhju gatsby i netlify cms b19e2e8 - Ⓖ Как создать блог с помощью Gatsby и Netlify CMS

Перевод публикуется с сокращениями, автор оригинальной статьи 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, следуйте инструкциям для вашей ОС:

  • Git для Mac OS
  • Git для Windows
  • Git для Linux

Установка Gatsby CLI

Gatsby CLI – инструмент для создания сайтов на базе Gatsby. С его помощью можно установить любые плагины для Gatsby.

Для установки откройте терминал и выполните следующую команду:

         npm install -g gatsby-cli     

Как только все будет готово, переходим к созданию сайта.

Создаем сайт

В этом туториале используется стандартная тема Gatsby starter, но можно выбрать любую другую из библиотеки.

В терминале выполните следующую команду, чтобы установить новый блог:

         gatsby new foodblog https://github.com/gatsbyjs/gatsby-starter-blog     

Примечание для пользователей Windows: Если вы столкнулись с ошибкой при создании сайта: «Error: Command failed with exit code 1: yarnpkg», обратитесь к этой странице для устранения неполадок.

Что означает описанная выше команда:

  • new – создание нового проекта.
  • foodblog – название проекта. Назвать можно как угодно.
  • URL-адрес (https://github.com/gatsbyjs/gatsby-starter-blog) – адрес репозитория с исходным кодом.

Как только установка будет завершена, перейдите в папку проекта:

         cd foodblog     

Затем запустите проект:

         gatsby develop     

Откройте новую вкладку в браузере с адресом http://localhost:8000/.

kak sozdat blog s pomoshhju gatsby i netlify cms 3adc8c0 - Ⓖ Как создать блог с помощью Gatsby и Netlify CMS

Блог готов.

Добавляем 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.

kak sozdat blog s pomoshhju gatsby i netlify cms cbbc098 - Ⓖ Как создать блог с помощью Gatsby и Netlify CMS

Кликните на «Settings»

kak sozdat blog s pomoshhju gatsby i netlify cms 58e2a9d - Ⓖ Как создать блог с помощью Gatsby и Netlify CMS

Прокрутите вниз и слева на боковой панели нажмите на «Identity»

kak sozdat blog s pomoshhju gatsby i netlify cms a0bf6f7 - Ⓖ Как создать блог с помощью Gatsby и Netlify CMS

Кликните на «Enable Identity»

2. В разделе Registration выберите Open или Invite only. В большинстве случаев необходимо, чтобы доступ к CMS получали только приглашенные пользователи, но если вы просто экспериментируете – оставьте Open.

kak sozdat blog s pomoshhju gatsby i netlify cms 2ba1b2b - Ⓖ Как создать блог с помощью Gatsby и Netlify CMS

В подменю Identity, нажмите на ссылку «Registration», и вас перекинет в настройки регистрации.

3. Прокрутите вниз до Services > Git Gateway и кликните по Enable Git Gateway. Эта штука проверяет подлинность Git-узлов и генерирует токен доступа к API.

В этом случае мы оставляем поле Roles пустым, что означает, что любой вошедший в систему может получить доступ к CMS.

kak sozdat blog s pomoshhju gatsby i netlify cms 7218992 - Ⓖ Как создать блог с помощью Gatsby и Netlify CMS

В подменю Identity, щелкните ссылку «Services».

kak sozdat blog s pomoshhju gatsby i netlify cms 5ac6350 - Ⓖ Как создать блог с помощью Gatsby и Netlify CMS

Кликните по EnableGitGateway.

Мы связали Gatsby с Netlify CMS. Все, что осталось – получить доступ к админке и создать сообщение в блоге.

Получаем доступ к CMS

Существует два способа войти в админку, в зависимости от того, какие параметры доступа были выбраны в Identity.

Если Invite only – вы можете пригласить себя и других пользователей, нажав кнопку «Invite user». Вам придет письмо со ссылкой для входа.

Если доступ к админке получить не удается, добавьте в конец адреса сайта следующую строку: #confirmation_token=random_characters, например: https://yoursite.com/admin/#confirmation_token=random_characters.

Если все хорошо сложилось, вы уже должны видеть панель администратора:

kak sozdat blog s pomoshhju gatsby i netlify cms 9c0fdb0 - Ⓖ Как создать блог с помощью Gatsby и Netlify CMS

Админка

Создать новый пост можно нажав на кнопку «New post».

Когда будете готовы его опубликовать – нажмите «Publish Now». После нажатия данной кнопки пост создастся автоматически, изменения закоммитятся с датой и временем публикации, а потом все будет запушено в главный репозиторий.

Заключение

Из этого туториала вы узнали, как можно сделать несколько вещей:

  • создать блог на Gatsby;
  • прикрутить Netlify к Gatsby;
  • настроить аутентификацию с помощью Identity и Git Gateway;
  • пользоваться админкой;
  • опубликовать первый пост в рабочей системе.

Есть еще масса незатронутых моментов в связке Gatsby и Netlify CMS. Если это вам интересно, обратитесь к официальной документации.

Библиотека программиста надеется, что вы нашли это руководство полезным. Удачи в обучении!

Дополнительные материалы:

  • Настольный справочник по базовым принципам React
  • 12 бесплатных ресурсов для изучения React
  • Изучение React. С чего начать?
  • Kubernetes, Python, React, AI… Что в трендах разработки в 2020 году?

  • 1 views
  • 0 Comment

Leave a Reply

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Свежие комментарии

    Рубрики

    About Author 01.

    Roman Spiridonov
    Roman Spiridonov

    Привет ! Мне 38 лет, я работаю в области информационных технологий более 4 лет. Тут собрано самое интересное.

    Our Instagram 04.

    Categories 05.

    © Speccy 2020 / All rights reserved

    Связаться со мной
    Close