Использование CodeSandbox в качестве CMS и Live Preview для вашего блога Gatsby

В последние несколько месяцев GatsbyJS взорвался на статической сцене JS. Разработчики во всем мире используют Gatsby за его способность упростить генерацию статического контента, а также агрегацию контента и ресурсов с помощью GraphQL. Они значительно упрощают запуск нового проекта и создание невероятно быстрых статических приложений React. Я стал использовать его при работе с любыми статическими сайтами, такими как целевые страницы или блоги, где контент не очень динамичен и требует предварительной обработки.

Каким бы замечательным ни был GatsbyJS, запуск вашего первого проекта может занять некоторое время. Вам нужно загрузить и установить их интерфейс командной строки, загрузить новый проект с помощью npx или клонировать репозиторий начального проекта. Затем вы можете развернуть локальную среду разработки. Это немного, но это обязательство, особенно когда вы представляете его кому-то новому. Вы хотите результатов, и быстро.

Молниеносно быстрые сайты — в восторге 💣🔥

Что, если бы вы могли просто щелкнуть ссылку, дождаться загрузки и компиляции зависимостей и обвинить — у вас есть блог Гэтсби? Именно в таком мире мы живем благодаря таким платформам, как CodeSandbox.

Но это заставило меня задуматься, а почему бы не использовать CodeSandbox как своего рода CMS для своего блога? Поскольку он работает за пределами Github и может фиксировать код/пулл-реквесты, вы можете редактировать и создавать любой контент, который вам нравится (при условии, что он статичен — например, Markdown или JSON). Просто откройте Песочницу, создайте новый файл Markdown, сделайте запрос на вытягивание, и все готово! (в зависимости от процесса сборки)

Как это работает ⚙️

Несколько месяцев назад CodeSandbox добавил серверные платформы, такие как Gatsby, Node и Apollo. Это позволяет любому запустить (любой?) проект Gatsby в вашем браузере. Если у вас еще нет блога о Гэтсби, теперь нет оправдания.

Только требования?

  • Аккаунт на гитхабе
  • Учетная запись CodeSandbox (использует вход через Github)

Вот как это примерно работает:

  • Выберите стартовый шаблон Gatsby, который извлекает содержимое локально (например, текст, уценку, многомерные выражения и т. д.).
  • Открыть в CodeSandbox. Вы можете открыть любой репозиторий Github, используя формат codesandbox.io/s/githubuser/reponame/
  • Создайте новую страницу или файл содержимого (например, MDX). В Gatsby любой компонент React в каталоге /src/pages/ будет страницей. Для сайтов с контентом (таких как Markdown) попробуйте найти пример сообщения .MD для копирования.
  • Разветвить песочницу (нажмите кнопку сверху или происходит автоматически при сохранении изменений).
  • Сохраните новый репозиторий на Github. Щелкните значок Github слева, войдите в систему с помощью Github и сохраните там репозиторий.
  • Сохраните все изменения и зафиксируйте код (если это еще не сделано)
  • Слияние пулл-реквестов на Github
  • Используйте такой сервис, как Netlify, для создания своего кода.

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

Вы также можете использовать Netlify CMS после использования Netlify. Однако вы не получаете тех же преимуществ «локальной среды разработки», которые эмулирует CodeSandbox, таких как предварительный просмотр в реальном времени, редактирование компонентов React или конфигураций Gatsby.

Развертывание с Netlify 🚀

  1. Зарегистрируйте учетную запись Netlify
  2. Создать новый сайт из Git

Netlify должен автоматически обнаруживать Gatsby и запускать соответствующий скрипт сборки. Если нет (или если у вас есть собственный/предварительно созданный сценарий), вы можете изменить его в настройках развертывания Netlify.

Предостережения 🐛

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

Принцип работы MDX заключается в компиляции статических ресурсов, таких как файлы JS, для всех импортируемых компонентов JSX, а затем Gatsby отображает их. При каждом сохранении для любого измененного файла MDX создаются новые статические ресурсы (вместо использования горячей перезагрузки модуля, как в большинстве интерфейсов командной строки).

Это становится немного неуклюжим в CodeSandbox, и иногда вы не сразу увидите изменения (требуется обновление окна предварительного просмотра в реальном времени).

Зачем останавливаться на блогах? 👨‍💻

Если вам нужно полностью разместить быстрый статический веб-сайт в облаке, это ваше решение. Это упрощает процесс разработки: позволяет сразу переходить к коду, которым легко делиться с коллегами, синхронизировать с Git и легко повторять через форки. Независимо от того, работаете ли вы над целевой страницей или колодой для следующей конференции, у Гэтсби есть множество стартовых материалов, которые помогут вам работать еще быстрее 👍 И в сочетании с такими сервисами, как Netlify, которые развертываются из репозиториев Git, ваш рабочий процесс не может быть быстрее (или безопаснее!).

И если вы еще не изучили CodeSandbox, я настоятельно рекомендую вам это проверить. Это действительно полезный инструмент не только для написания кода с нуля, но и для загрузки любой ветки git, что делает его фантастическим для создания примеров или просмотра PR вживую. Также размещается в Zeit’s Now, если вам это нравится ▲ 🌚

Надеюсь это поможет!
Рё

Ссылки:

Первоначально опубликовано на whoisryosuke.com.