Как я использую Cosmic для оптимизации своего сайта


Введение

В наши дни у front-end разработчиков есть так много удивительных инструментов для создания приложений. У нас есть фреймворки и библиотеки, такие как Next.js и Svelte, которые мы используем для подготовки наших приложений к производству, а также системы управления контентом, такие как Sanity и Cosmic.

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

Хорошие инструменты предоставляют возможности, а отличные дают вам суперспособности

Как разработчик, я постоянно ищу способы писать меньше кода, потому что меньше кода — меньше вероятность ошибок. Я поддерживаю идею о том, что мы можем использовать инструменты, чтобы проводить меньше времени в редакторах кода. Cosmic позволяет мне делать такие вещи. Я могу импортировать Cosmic на свой сайт, а когда все настроено, я могу просто управлять своим контентом через панель Cosmic.

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

Организация

Давайте поговорим о том, насколько важна организация, когда речь идет о CMS. Хотя я единственный, кто имеет доступ к приборной панели моего сайта, вы должны учитывать тот факт, что на многих сайтах есть команды по работе с контентом. Cosmic сияет в этом аспекте, потому что сотрудничество находится на пике интереса, когда речь заходит о его функциях.

Вот как выглядит моя приборная панель в настоящее время:

Как вы можете видеть, у всего есть свое место. В левом верхнем углу находятся все мои объекты, включая мои посты, работы (проекты), продукты, которые я отображаю на странице «О себе», а также категории постов и работ для фильтрации. Под моими объектами находится медиа. Я могу разделить свои изображения по разным папкам, чтобы оставаться организованным, и когда мне нужно использовать одно из них для статьи, я могу легко импортировать его.

Производительность

Мой сайт построен на Next.js и Cosmic, и именно эти показатели я получаю для своей домашней страницы:

Сочетание этих двух технологий действительно делает вкусное комбо. Next.js создает все эти статьи статически во время сборки. Я хотел бы сказать об этом больше, но это просто показывает, что для использования в блогах и новостных сайтах Cosmic действительно сияет с таким фреймворком, как Next.js.

Интеграция быстрая и лаконичная

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

У Cosmic есть собственный модуль NPM, поэтому запустить его довольно просто.

Хотя я использую несколько функций для получения данных из моего Cosmic Bucket, вот как просто я могу запросить данные из Cosmic и отобразить мои статьи на странице.

Установите Cosmic и получите переменные окружения из файла .env

pnpm i cosmicjs
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Импортируйте Cosmic

const Cosmic = require('cosmicjs')
const api = Cosmic()

const BUCKET_SLUG = process.env.COSMIC_BUCKET_SLUG
const READ_KEY = process.env.COSMIC_READ_KEY

const bucket = api.bucket({
  slug: BUCKET_SLUG,
  read_key: READ_KEY,
})
Войдите в полноэкранный режим Выйти из полноэкранного режима

Создание асинхронной функции для получения моих статей

export async function getAllPosts(preview, postType, postCount) {
  const params = {
    query: { type: postType },
    ...(preview && { status: 'any' }),
    props:
      'title,slug,metadata.category,metadata.excerpt,metadata.published_date,created_at,status',
    limit: postCount,
    sort: '-created_at',
  }
  const data = await bucket.getObjects(params)
  return data.objects
}
Войти в полноэкранный режим Выход из полноэкранного режима

Я даже могу задать параметры для динамического вызова этих функций. В моем случае я устанавливаю ограничение на количество статей на главной странице до трех, чтобы показать мои последние сообщения, и поскольку у меня есть два разных типа объектов в моем Bucket («Posts» и «Works»), они могут иметь общую функциональность, но вызываться для каждого случая.

export async function getStaticProps({ preview = null }) {
  const allPosts = (await getAllPosts(preview, 'posts')) || []
  const allPostCategories = (await getAllCategories('post-categories')) || []
  return {
    props: { allPosts, allPostCategories, preview },
  }
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Бам! Все эти статьи прекрасно отображаются на странице моих сообщений. Теперь мы можем начать делегировать их в реквизиты нашего фактического компонента страницы и далее в реквизиты любых других компонентов. Это волшебно.

Сообщество — это все

Несомненно, компания, имеющая хорошую связь со своими пользователями, работает лучше. Это особенно верно для компании, предлагающей программный продукт. Изучив сайт Cosmic, я быстро нашел ссылку, по которой можно присоединиться к Slack-каналу Cosmic. Я заметил, что сообщество было небольшим, но, войдя в него, я увидел, что если у кого-то возникнут вопросы, генеральный директор компании или кто-то из команды разработчиков быстро ответит на них. Это здорово, потому что для разработчиков нет ничего лучше, чем получить помощь или даже передать обратную связь непосредственно тем, кто работает над продуктом!

Хотя у меня не было никаких вопросов или отзывов, когда я только вошел, я решил представиться и просто сообщить команде Cosmic, над чем я работаю. Я был рад получить быстрый ответ от них, заверив меня, что за Cosmic стоит хорошее сообщество. Это сразу же помогло мне почувствовать себя лучше в использовании Cosmic CMS, зная, что я могу получить поддержку или обратную связь в любое время, а также зная, что есть активное сообщество, с которым можно взаимодействовать!

Переход с WordPress

Одним из моих самых больших препятствий при переходе с WordPress было то, что импорт всего моего контента будет проблемой. У меня было около 15 статей, которые я написал на WordPress, но все еще хотел разместить на новом сайте. К счастью, Cosmic имеет расширение WordPress Importer. К сожалению, оно не было идеальным. Я заметил, что многие мои материалы были импортированы в неправильные Metafields в Cosmic, и мне пришлось вручную обновлять некоторые вещи. Хотя это не конец света, учитывая, что у меня было небольшое количество статей, которые нужно было перенести, я вижу, что это может стать большой проблемой для более крупных импортеров.

Хостинг изображений

Используя Cosmic, я заметил, что стал размещать изображения на Cosmic bucket. Если вы уже используете Cosmic, это отличное решение для хранения удаленных изображений. Когда мне нужно, я могу просто взять нужные мне изображения imgix URL (поскольку Cosmic оптимизирует изображения на imgix CDN). В паре с Next Image, одной из моих любимых функций Next.js, захват удаленных изображений очень прост и эффективен.

Как вы можете видеть здесь, все мои изображения хранятся в папке ‘Media’, которая находится там по умолчанию. Конечно, я могу настроить в ней подпапки для таких вещей, как изображения бренда, портреты, изображения для конкретных проектов, над которыми я работаю, и так далее. Или я могу даже просто сделать отдельные ведра для разных проектов, так как это очень помогает мне при консультировании. Возможно, вы догадались, но даже изображения моих фотографий размещены в моем ведро-хостинге изображений. Ума не приложу.

О возможности

На данный момент я использую Cosmic для улучшения общего опыта работы в качестве разработчика. Когда я нахожусь в своей приборной панели, я нахожусь в режиме создателя контента. Когда я нахожусь в редакторе кода, я нахожусь в режиме разработчика. Мне лично не нравится управлять контентом в своей кодовой базе, но каждому свое.

Я настоятельно рекомендую подняться на борт космического корабля Cosmic, если вы:

  • Хотите писать статьи
  • Хотите простой хостинг/оптимизацию изображений
  • Любите работать с новыми технологиями, которые постоянно поддерживаются в рабочем состоянии
  • Наслаждаетесь использованием продукта, который поддерживается сообществом поддержки
  • заинтересованы в создании безголовой CMS

Вы можете создать аккаунт бесплатно и приступить к созданию своего первого ведра. Вы также можете присоединиться к каналу Cosmic Slack, если хотите взаимодействовать с растущим сообществом.

Я очень благодарен за то, что наткнулся на эту замечательную систему управления контентом. В процессе создания своего сайта и использования Cosmic я стал лучшим разработчиком. Я смог добиться ясности в эффективном использовании Next.js для генерации статических сайтов, Node.js для получения данных API и Cosmic для управления инфраструктурой моего контента.

Я только что опубликовал статью на Cosmic о создании портфолио разработчика с помощью Next.js и Cosmic. Если вы хотите создать свой собственный портфель разработчика и блог, то я настоятельно рекомендую вам прочитать эту статью!

Как всегда, удачного кодинга и создания контента!

Оцените статью
devanswers.ru
Добавить комментарий