В этом руководстве мы узнаем, как создать простой и быстрый статический блог на веб-сайте с помощью React, Gatsby JS и Cosmic JS. Gatsby - это инструмент, который позволяет вам создавать статические HTML-страницы (рендеринг на стороне сервера), что значительно повышает производительность ваших веб-приложений.
TL;DR
Блог Гэтсби
Кодовая база блога Гэтсби
Быстрый старт Гэтсби
Посмотрите демо.
Предпосылки
Перед запуском вам потребуются NodeJS, npm и Gastby CLI. Убедитесь, что они у вас уже установлены.
Что такое Гэтсби?
Gatsby - это молниеносный фреймворк для веб-сайтов на React. Это позволяет разработчикам быстро создавать веб-сайты на основе React за считанные минуты. Если вы хотите создать блог или бизнес-сайт, Gatsby будет хорошим вариантом.
Поскольку Gatsby использует React и React Router, клиентская часть становится одностраничным приложением после первоначального рендеринга. Он также сгенерирует статическую HTML-страницу для маршрута, убедитесь, что ваша первоначальная загрузка почти мгновенная.
Разработка блога
Мы должны настроить среду, чтобы начать работу над блогом.
Установить Гэтсби
Сначала установите Gatsby CLI:
npm install --global gatsby-cli
Создание шаблона Гэтсби
gatsby new gatsby-blog-cosmicjs
Введите в папку вашего проекта:
cd gatsby-blog-cosmicjs
Запускаем сервер:
gatsby develop
На этом этапе у вас уже должна быть возможность получить доступ к веб-сайту вашего блога Gatsby JS по этому адресу: http: // localhost: 8000.
Установите плагин Cosmic JS Source
В статическом блоге ваши данные могут быть получены из разных источников: файлов Markdown, файлов HTML, внешнего API (WordPress, Cosmic JS и т. Д.).
Поэтому Гэтсби реализовал независимый уровень: уровень данных. Который работает на GraphQL. Очень увлекательный материал!
GraphQL - это современный язык запросов для API, созданных в Facebook. Это позволяет клиенту определять желаемый запрос, используя объект пары ключ / значение. Пользователь отправляет ключи на сервер, и сервер отвечает соответствующими значениями.
Чтобы связать этот уровень данных с различными поставщиками данных, вам необходимо интегрировать исходный плагин. К счастью, существует множество плагинов для исходного кода, удовлетворяющих большинство потребностей.
В нашем случае мы используем Cosmic JS. Очевидно, нам нужно интегрировать плагин Source для Cosmic JS. Хорошие новости: Cosmic JS реализовал свой Source Plugin!
Установим:
npm install --save gatsby-source-cosmicjs
Нам также необходимо установить некоторые другие плагины. Давай тоже сделаем это
npm install --save gatsby-plugin-offline gatsby-source-filesystem
Эти плагины нуждаются в некоторых настройках. Итак, замените содержимое gatsby-config.js на:
Путь: gatsby-config.js
Затем перезапустите сервер, чтобы Гэтсби рассмотрел эти обновления.
Список сообщений и настройки
Во-первых, мы хотим отобразить список сообщений на главной странице. Для этого добавьте в существующий файл домашней страницы следующий контент:
Путь: src/pages/index.js
Объяснение:
В конце index.jsfile мы экспортировали pageQuery. Это запросы GraphQl, которые используются для получения важной информации о настройках и списке сообщений.
Затем мы передаем { data } разрушенный объект в качестве параметра IndexPage и переходим к его объекту allCosmicjsPosts & cosmicjsSettings для отображения данных.
Макет одного сообщения
До сих пор мы интегрировали плагин исходного кода Cosmic JS с Gatsby, и он выглядит как блог. Теперь займемся страницей с подробной информацией о записи в блоге.
Создадим шаблон:
Путь: src/templates/blog-post.js
Выглядит нормально, но на данный момент Гэтсби не знает, когда следует отображать этот шаблон. Каждому посту нужен определенный URL. Итак, мы собираемся сообщить Гэтсби о новых URL-адресах, которые нам нужны, благодаря функции createPage.
Путь: gatsby-node.js
Перезагрузите сервер Gatsby.
С этого момента вы сможете перейти на страницу с подробными сведениями, щелкнув URL-адреса, отображаемые на главной странице.
Extra Stuff!
В дополнение к этому, Мы также реализовали src/components/Bio.js для отображения информации об авторе & src/layouts/index.js для создания общего макета для блога.
Исходный код доступен на GitHub. Чтобы увидеть это вживую, клонируйте репозиторий и запустите (cd gatsby-blog-cosmicjs && npm i && npm run develop).
Наконец, перезапустите сервер и посетите веб-сайт. Выглядеть будет потрясающе!
Статический веб-сайт, созданный Gatsby, можно легко опубликовать у поставщиков хранилищ: Netlify, S3 / Cloudfront, страницы GitHub, страницы GitLab, Heroku и т. Д.
Примечание. Наша демонстрация размещена на Netlify.
Заключение
Поздравляю! Вы успешно создали супербыстрый и простой в обслуживании блог! Не стесняйтесь продолжить этот проект, чтобы открыть для себя преимущества как Gatsby, так и Cosmic JS.
Вы можете добавить мощь Cosmic JS к любой новой или существующей кодовой базе, независимо от языка программирования. Дополнительные советы по интеграции приложений смотрите в нашей базе знаний.
Cosmic JS позволяет контент-менеджерам и разработчикам лучше работать вместе. Благодаря интуитивно понятной панели управления администратора, мощным API-интерфейсам и гибким пользовательским ролям приложения создаются быстрее и легче, а вся ваша команда экономит время.
Cosmic JS - это первая облачная платформа управления контентом на основе API, которая упрощает управление приложениями и контентом. Если у вас есть вопросы о Cosmic JS API, обращайтесь к основателям в Twitter или Slack.
