Создание и проектирование сайта-портфолио с использованием Gatsby JS и Cosmic JS
Создание/обновление наших портфолио в наши дни является необходимым злом. Места меняются, люди меняются, и поэтому цикл создания контента и управления им постоянно меняется. Когда вы обнаружите, что вам нужно изменить дизайн портфолио, вам следует рассмотреть множество инструментов и услуг. Тот, который в настоящее время должен вызвать у вас наибольший интерес, — это Гэтсби Дж.С. генератор статического сайта вместе с безголовой CMS, например Космический JS. Сегодня с помощью этих двух инструментов мы создадим рабочий портфель, готовый к непрерывному развертыванию, с возможностью перестройки при внесении изменений в контент.
TLDR:
Демонстрация сайта портфолио Gatsby
0.0 Прежде чем мы начнем
Мы создаем сайт-портфолио в основном со статическими данными, но было бы неплохо иметь возможность легко изменять содержимое нашего сайта без необходимости изменять кучу исходного кода. Итак, мы создаем клиент, который использует содержимое, хранящееся в службе управления контентом, и программно отображает его по любому выбранному нами URL-адресу.
0.1 Инструменты, которые мы используем
Гэтсби Дж.С. — Это генератор статического сайта, который автоматически извлекает новые данные и перестраивает файлы нашего сайта при внесении изменений в наш контент. Поставляется в комплекте с волшебством извлечения данных GraphQL и вездесущей интерфейсной инфраструктурой React JS.
Космический JS — Наша служба управления контентом, в которой будет храниться вся необходимая нам информация о нашем сайте. Cosmic JS предлагает очень гибкое определение модели данных, которое позволит нам хранить все типы информации, от итераций до простых текстовых полей и содержимого HTML. ПРИМЕЧАНИЕ! — Чтобы следовать этому руководству, вам нужно создать корзину на Cosmic JS и заполнить ее соответствующими объектами данных.
RSuite — Библиотека предварительно стилизованных компонентов, которая работает с React, чтобы дать нам предварительно стилизованные компоненты. Это позволит нам использовать компоненты, которые отлично выглядят «из коробки», а также даст нам возможность вносить коррективы по мере необходимости.
Нетлайф (Необязательно) — служба развертывания, которая позволит нам подключиться непосредственно к репозиторию git. Используя это, мы можем настроить веб-книги для восстановления статических файлов, а также для автоматического развертывания при изменении исходного кода.
Давайте продолжим и начнем настройку нашей установки.
1.0 Установка и настройка
У нас есть только несколько требований к программному обеспечению, необходимых для начала сборки. В основном нам нужно Узел JS либо npm, либо yarn, и мы будем использовать git для выполнения некоторых действий по развертыванию на Netlify, если вы того пожелаете.
1.1 Инициализация нашего проекта
Как только вы их установите, мы можем приступить к настройке нашей среды разработки. Gatsby использует очень удобный денди CLI, чтобы позволить нам загрузить наш проект с каталогом проекта, готовым для сборки и обслуживания из среды Node.
Если у вас нет CLI, вы можете установить его с помощью простой команды терминала npm:
$npm install -g gatsby-cli
Установка займет некоторое время, но через несколько секунд у вас будет доступ к команде терминала gatsby, которую мы можем использовать для инициализации нашего проекта:
$gatsby new gatsby-portfolio
Теперь у нас есть каталог с именем gatsby-portfolio в том месте, где вы запускали команду gatsby, перейдите в этот каталог и перечислите его содержимое:
$cd gatsby-portfolio/ && ls -la
Вы должны увидеть список папок и файлов, похожий на этот:
.
├── node_modules
├── источник
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── ЛИЦЕНЗИЯ
├── package-lock.json
├── package.json
└── README.md
Откройте package.json, и мы увидим, что у нас есть несколько скриптов терминала, которые мы теперь можем использовать для сборки/обслуживания нашего проекта. Попробуйте запустить стартовый скрипт в терминале:
$npm start
или же
$yarn start
Через несколько секунд мы должны увидеть сообщение об успехе в нашем терминале, и мы сможем просмотреть наш первоначальный вид проекта на нашем локальный хоствы должны увидеть что-то вроде этого:
Отлично, теперь нажмите ctrl + C в вашем терминале, чтобы остановить сервер разработки, и теперь мы готовы установить наши библиотеки узлов.
1.2 Установка наших библиотек
Нам требуется несколько плагинов от Gatsby, чтобы разрешить выполнение наших запросов Graphql, а также несколько дополнений для настройки среды и нашей библиотеки компонентов RSuite. Из каталога вашего проекта нам нужно запустить несколько команд терминала, чтобы получить наши библиотеки js:
$yarn add rsuite dotenv gatsby-source-cosmicjs gatsby-plugin-sass gatsby-
plugin-less node-sass less
Давайте рассмотрим их и поговорим о том, что мы добавляем в наш проект здесь:
- сьют — наша библиотека компонентов, о которой я упоминал выше. Установив это, мы импортируем классы js и вставляем предварительно стилизованные компоненты React.
- дотенв — Позволяет нам настраивать наш исходный код с помощью конфиденциальных ключей API, токенов и всего, что может меняться между разработчиками, но должно присутствовать при сборке исходного кода.
- Гэтсби-источник-cosmicjs — плагин gatsby, который позволит нам легко делать запросы graphql к API Cosmic JS graphql.
- gatsby-plugin-sass / gatsby-plugin-less / node-sass / меньше — Плагины Gatsby и библиотеки стилей, которые позволят нам использовать файлы .scss и .less. Это позволит нам импортировать спецификации стилей rsuite и правильно связать их при сборке.
1.3 Настройка Гэтсби
Чтобы Гэтсби мог создавать наши html-файлы, нам нужно получать данные из Cosmic JS и создавать каждую страницу, используя данные, извлеченные graphql. Давайте пойдем дальше и откроем gatsby-config.js и добавляем наши установленные пакеты:
Первое, на что вы должны обратить внимание, это наше требование dotenv. Это сделает наши переменные среды доступными в этом файле конфигурации во время выполнения и позволит Gatsby настраивать наши компоненты с нашими учетными данными, необходимыми для выполнения запросов API.
Мы добавили наши плагины для дерзкий а также меньшеа также добавили наш Гэтсби-источник-cosmicjs плагин. Вы заметите, что мы используем некоторые переменные среды для настройки этого плагина, поэтому нам нужно добавить скрытый файл, в котором будут храниться эти переменные.
$touch .env
Теперь добавьте свои переменные в этот файл, и dotenv позаботится об их определении, используя строку 1 нашего файла gatsby-config.js. Вы можете найти значение для присвоения этим переменным в корзине Cosmic JS: Имя корзины > Панель инструментов > Настройки > Основные настройки:
Теперь мы готовы строить!
2.0 Создание наших компонентов
Итак, что именно мы строим. Ну в общем создадим один большой Страница компонент, который отображает ряд компонентов отображения для обработки каждого раздела нашего портфолио. Давайте разберем это:
src/pages/index.js
- Это наша домашняя страница, и все наши компоненты будут загружаться и использоваться для отображения информации о портфолио.
src/components/projects.js
- Это будет раздел наших проектов, который будет принимать данные проекта и отображать информацию о каждом проекте. Это возьмет опору, состоящую из наших портфолио проектов, и будет перебирать их для отображения данных, когда это необходимо.
src/components/work.js
- Это будет раздел, посвященный нашим навыкам и типам услуг/работ, которые мы предлагаем людям, которые могут ознакомиться с нашим портфолио.
src/components/about.js
- Это будет раздел, который рассказывает о нас, отображая любые личные данные, которыми мы хотим поделиться.
src/components/contact.js
- Наконец, у нас есть компонент, который мы будем использовать для отображения контактной формы, которая позволит пользователям отправлять нам электронные письма, если у них есть какие-либо вопросы.
2.1 Домашняя страница
Это наш основной компонент, который служит точкой входа для нашего портфеля. Его задача состоит в том, чтобы сделать несколько запросов Graphql API для данных нашего портфеля из Cosmic JS и передать эти данные в различные разделы нашего портфолио. Давайте посмотрим на компонент и поговорим о том, что происходит:
Единственный отображающий элемент, который действительно здесь присутствует, — это экран-заставка, который дает нам небольшой текст, который можно отобразить о вашей компании. Но основная часть нашего контента будет вложена в каждый компонент раздела.
Теперь давайте обновим заголовок, чтобы мы могли перемещаться по нашей домашней странице.
По умолчанию Gatsby предоставляет нам компонент Layout, который позволяет нам обернуть каждую страницу верхним и нижним колонтитулами. Мы собираемся добавить некоторую навигацию для нашего портфолио в заголовок, чтобы пользователи могли переходить к различным разделам нашего портфолио, нажимая на панель навигации, которую мы импортируем из rsuite:
Эти ссылки будут прокручивать домашнюю страницу вниз к каждому разделу с помощью свойств имени, размещенных в каждом разделе на нашей домашней странице.
2.3 Рабочий компонент
Этот компонент принимает наши данные о любых предоставляемых нами услугах, в частности, название, краткую сводку и более подробное описание, а также имя значка из rsuite и давайте покажем это нашим пользователям:
Это перебирает объекты наших сервисов. Для каждой существующей службы мы добавляем новый div в раздел рабочего компонента. Теперь мы можем изменять и добавлять данные в наши сервисы на Cosmic JS, и они будут соответствующим образом обновляться.
2.4 Проекты и компоненты
Эти разделы будут вести себя по существу одинаково, мы отображаем некоторую информацию из нашего Домашняя страница. Просто немного текста, чтобы дать пользователю некоторый контекст для каждого раздела, но после этого мы просто перебираем наши объекты списка, которые мы сохранили в нашей корзине Cosmic JS.
Вот наш компонент Projects, который будет перебирать наши проекты и отображать изображения и текст:
Компонент about будет вести себя так же. Он будет перебирать список людей и отображать некоторые изображения и информацию, хранящиеся в объектах сервисов на Cosmic JS:
2.5 Контактный компонент
Наконец, у нас есть компонент, который позволяет пользователям связываться с нами по электронной почте, которую мы указываем. Это будет обрабатывать нашу контактную форму и будет инициализировано некоторыми переменными состояния, чтобы мы могли контролировать наши пользовательские входные данные, все компоненты ввода и формы обрабатываются rsuite, поэтому нам не нужно добавлять слишком много свойств стиля к нашим полям формы и компоненты обратной связи:
По сути, мы проверяем наши поля формы, проверяя, содержат ли все поля формы значение, затем мы используем URL-адрес mailto, чтобы открыть почтовый клиент и заполнить его нашим сообщением.
3.0 Развертывание (необязательно)
Теперь мы готовы развернуть наше приложение. Самая важная часть этого процесса — убедиться, что наше приложение само перестраивается, когда мы изменяем какие-либо данные в Cosmic JS. Если мы интегрируем непрерывное развертывание с помощью git, Netlify позволит нам активировать сборочный хук для создания новых статических файлов с использованием обновленных данных, полученных из Cosmic JS API.
3.1 Развертывание из Git
Перейти к Нетлайф и создайте учетную запись, если у вас ее еще нет. На панели приложений нажмите Новый сайт от Git на панели приложения. Оттуда вы пройдете через процесс авторизации Netflify для доступа к репозиторию из службы git (github, gitlab, bitbucket).
Вам придется добавить вас COSMIC_READ_KEY и ваш COSMIC_BUCKET_SLUG как переменные окружения. Это можно найти в настройках развертывания после того, как приложение будет создано в Netlify. В той же области вы можете создать свой buildhook, чтобы Cosmic JS мог запрашивать перестроение ваших файлов после того, как будет сделано обновление:
После создания buildhook перейдите в Cosmic JS и добавьте его на вкладку webhooks в настройках вашего сегмента:
Следуйте инструкциям по добавлению веб-перехватчика, который запускает почтовый запрос на этот URL-адрес от Netlify каждый раз, когда объект обновляется, и у вас должен быть постоянно развернутый, сверхбыстрый сайт-портфолио, готовый к обновлению.
Спасибо, что следили за мной, и увидимся в следующий раз, когда я решу построить что-то классное. 
