Блог - полезный инструмент для начинающего разработчика. Это помогает вам усвоить то, что вы узнали. Во время написания вы можете исследовать тему, которая дает более четкое понимание. Блог можно использовать в качестве справочника в будущем, когда вам нужно будет вернуться к определенной теме для разъяснения. Кроме того, вы в целом станете лучшим разработчиком и коммуникатором. Вы также можете зарабатывать деньги во время письма.

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

Это руководство призвано помочь вам легко создать блог с помощью Gatsby и добавить систему управления контентом с Netlify с наименьшим количеством кода.

Установить Гэтсби

Gatsby - это платформа с открытым исходным кодом на основе React для создания веб-сайтов и приложений.

Короче говоря, его можно использовать для создания статических сайтов, которые являются прогрессивными веб-приложениями, соответствуют последним веб-стандартам и оптимизированы для обеспечения скорости и безопасности. Чтобы узнать больше о Gatsby, вы можете обратиться к этой ссылке или к официальной документации здесь.

В этом руководстве предполагается, что у вас установлен Node и у вас есть базовые знания HTML, CSS и JavaScript.

Установите Gatsby глобально, используя команду ниже.

npm install -g gatsby-cli

Чтобы получить базовое представление о некоторых командах, вы воспользуетесь следующей командой.

gatsby help

Вы должны увидеть следующий вывод в терминале.

Usage: gatsby <command> [options]

Commands:
    gatsby develop                      Start development server. Watches files, rebuilds, and hot reloads if something changes
gatsby build                        Build a Gatsby project.
    gatsby serve                        Serve previously built Gatsby site.
    gatsby info                         Get environment information for debugging and issue reporting
gatsby clean                        Wipe the local gatsby environment including built assets and cache
gatsby repl                         Get a node repl with context of Gatsby environment, see (https://www.gatsbyjs.com/docs/gatsby-repl/)
gatsby recipes [recipe]             [EXPERIMENTAL] Run a recipe
gatsby plugin <cmd> [plugins...]    Useful commands relating to Gatsby plugins
gatsby new [rootPath] [starter]     Create new Gatsby project.
    gatsby telemetry                    Enable or disable Gatsby anonymous analytics collection.
    gatsby options [cmd] [key] [value]  View or set your gatsby-cli configuration settings.

Создайте свой сайт Gatsby

Прелесть Гэтсби в том, что вам буквально не нужно создавать свой сайт с нуля. Существуют начальные шаблоны, которые помогут вам быстро запустить и запустить ваш сайт. Ознакомьтесь с сотнями начальных шаблонов здесь. В этом руководстве будет использоваться шаблон gatsby-starter-blog. Посмотреть живую демонстрацию можно отсюда.

Продолжайте и выполните команду ниже, чтобы создать сайт из начального шаблона.

gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog
  1. gatsby new: команда для создания нового сайта.
  2. gatsby новое имя my-blog: вашего сайта / проекта.
  3. gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog: URL-адрес репо, содержащего наш начальный шаблон.

После завершения перейдите в каталог my-blog и выполните команду ниже.

gatsby develop

Приведенная выше команда собирает ваш код и запускает сервер разработки по адресу localhost: 8000. Перейдите в свой браузер и попробуйте получить доступ к http: // localhost: 8000.

Поздравляю! Вы официально создали свой новый блог.

Блогу нужны сообщения. Следующим шагом является настройка системы управления контентом, которая позволяет создавать, удалять или обновлять новые сообщения.

Добавить Netlify CMS

Netlify - это система управления контентом для генераторов статических сайтов. Он упрощает процесс добавления контента на ваш сайт с помощью простого и удобного интерфейса. Подробнее читайте в документации здесь.

Для этого раздела вам понадобятся:

  1. Репозиторий Github
  2. Аккаунт Netlify.

Сначала вы установите плагин Netlify cms, используя команду ниже.

npm install netlify-cms-app gatsby-plugin-netlify-cms

Следующим шагом будет регистрация вашего плагина. В каталоге вашего проекта откройте файл gatsby-config.js в вашем любимом текстовом редакторе и добавьте приведенный ниже код в раздел плагинов.

plugins: [`gatsby-plugin-netlify-cms`],

Настроить Netlify CMS

Последний шаг - добавление конфигураций для вашей cms. Перейдите в каталог static в файлах проекта и добавьте новую папку. Назовите папку admin. Внутри папки создайте новый файл config.yml. Здесь будет находиться ваша конфигурация.

Вы можете вставить конфигурацию ниже.

backend:
  name: git-gateway
  branch: master

media_folder: static/assets
public_folder: /assets

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"}
  1. backend: указывает протокол серверной части для аутентификации. В этом случае Github / Gitlab. Также указывает ветвь, которая будет использоваться.
  2. media_folder: здесь будут находиться все наши медиа.
  3. коллекции: описывает структуру вашего содержания. Это можно сделать разными способами. Приведенная выше структура служит примером. Вы сможете визуализировать эту структуру, как только мы запустим и запустим CMS. Для получения более подробной информации о структуре и виджетах, которыми вы можете воспользоваться, перейдите по ссылке здесь.

Не забудьте также создать в своей статической папке каталоги assets и content.

Выполнив предыдущие шаги, создайте репозиторий на GitHub и разместите свой код. Это пригодится, когда мы интегрируем Netlify.

Интеграция с Netlify

Для этого шага убедитесь, что у вас есть учетная запись Netlify.

  1. Войдите в свою учетную запись и выберите «новый сайт из Git». Выберите, где размещен ваш сайт, например, на Github.
  2. Следуйте инструкциям, если вы не авторизовали Netlify для доступа к Github.
  3. Наконец, выберите свое репо. На данный момент используйте предоставленную конфигурацию по умолчанию.
  4. После завершения развертывания вы можете перейти по URL-адресу своего сайта, используя выделенную зеленым цветом ссылку со странным названием.

Поздравляю! Ваш блог-сайт запущен! Вы еще не закончили.

Доступ к Netlify CMS

Чтобы получить доступ к cms вашего блога, добавьте ‘/ admin’ к URL вашего сайта. Однако вы обнаружите, что на самом деле вы не можете получить доступ к панели инструментов. Вам нужно будет настроить доступ администратора.

  1. Перейдите в настройки сайта.
  2. Перейдите на вкладку идентичность.
  3. Нажмите Включить идентификацию.

В разделе Регистрация вы можете выбрать, будет ли ваш сайт открытым или только по приглашению. Open, позволяет любому, кто посещает ваш сайт, зарегистрироваться и войти в панель администратора. Пригласить - рассылает по электронной почте приглашения пользователю для доступа к панели администратора.

Наконец, включите Git Gateway. Это позволяет любым добавляемым вами пользователям удостоверений иметь доступ к редактированию содержимого сайта с помощью Netlify CMS без учетной записи GitHub / GitLab или доступа к репозиторию.

  1. Перейдите к службам на вкладке идентификатор.
  2. Нажмите Включить Git Gateway.

Поздравляю! Вы успешно подключили свой сайт к Netlify cms.

Доступ к панели администратора

Вы можете получить доступ к своему сайту по адресу «mysite.netlify.com/admin».

Вам будет предложено зарегистрироваться или войти в систему. Это возможно, только если вы выбрали открыть в разделе регистрация.

Если вы выбрали вариант «Только по приглашению», вы все равно должны пригласить себя на вкладке Регистрация. Приглашение будет отправлено на указанный адрес электронной почты.

Если все в порядке, вы сможете увидеть панель администратора в своем браузере.

И страница вашей новой записи.

Добавление новой записи должно быть относительно простым. После публикации ваш пост создается автоматически, а изменения отправляются в ваш репозиторий. Netlify позаботится обо всем этом, и через несколько минут ваш пост будет опубликован.

Наконец, в каталоге проекта очистите файлы и сообщения в папке content. Не забудьте также внести изменения в свое репо.

Вывод

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

Вот и все!

Больше контента на plainenglish.io