Как я создал статический поэтический сайт с помощью GatsbyJS и авторской ленты Medium.

Оглавление

· Введение
· Технология
· Основные моменты и соображения
· Разработка
· Развертывание вашего сайта Gatsby на S3
· Обзор приложения
· Выводы

Введение

Томас Каар, также известный как Нейт Астро, пишет стихи, размышляя о временах перемен и безопасности. Его работы скрыты в его личных журналах, текстовых файлах на его компьютере и в бесконечной прокрутке Medium. Поэту нужна была платформа, отражающая голос и ритм его прозы, поэтому я и стремился построить именно это.

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

Это не строгое руководство по созданию сайта Gatsby - это больше документация для Томми, поэтому мне нечего объяснять лично.

Технологии

Почему Гэтсби?

Я знаком с React, но мне не терпелось попробовать Next или Gatsby. Вот причины, по которым я выбрал Гэтсби:

  • Без маршрутизаторов - Гэтсби настраивает реагирующий маршрутизатор и превращает все ваши компоненты из страниц / каталога в маршруты для вас.
  • Плагины. Вы можете найти плагин практически для всего, что вам нужно.
  • GraphQL - Gatsby имеет интеграцию с GraphQL.

Бесплатное хранение данных с Medium

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

У Medium нет изящного способа собирать истории пользователей. К счастью, Джон Кларк создал gatsby-medium-rss-feed, который делает это за меня. Также нет способа (насколько мне известно) фильтровать истории и ответы пользователей, поэтому я попросил автора никогда не публиковать какие-либо ответы через эту учетную запись Medium, чтобы лента стихов не смешивалась с его ответами.

Фокус и соображения

Свободно следуя дизайну

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

Отзывчивость на мобильных устройствах

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

Препроцессор CSS

Обычно я использую простой старый CSS, но мне нужно начать использовать препроцессор. Сначала я создал сайт с использованием простого CSS, но затем преобразовал свои файлы .css в .scss для более чистого и сжатого кода. Было определенно легче отслеживать фиолетовые и синие $, чем # 4A0D4A и # 398FC7 везде.

Разработка

01. Начало работы с Гэтсби

Я просто следил за руководством по быстрому запуску. Затем вы начинаете кодировать!

> gatsby develop

После того, как вы запустите это, вы можете посетить свой сайт и свой сервер GraphQL.

Вот некоторые проблемы с настройкой, с которыми я столкнулся:

  • Не включайте gatsby-cli в свои зависимости. (да, я сделал ту ошибку).
  • Существуют расхождения между запуском Node в Ubuntu bash для Windows 10 и командной строкой. Итак, если вы используете Windows, используйте командную строку.

02. Разработка страниц

Я сохранил большую часть статического содержимого в gatsby.config.js в разделе siteMetadata (сейчас он очень здоровенный) и запросил его с помощью компонента Gatsby GraphQL Static Query (см. Пример на шаге 05). ). Я создал компонент макета, который содержал мои заголовки, панель навигации, боковые изображения и заголовок для использования на каждой странице.

03. Разработка стилей

  • gatsby-plugin-web-font-loader - для импорта и использования шрифтов Google «Bowlby one» и «Noto serif».
  • gatsby-plugin-sass - для использования нахального css (scss). Если плагин не обновлен к настоящему времени (декабрь 2020 г.), убедитесь, что вы установили node-sass v14.14.1, а не v15.0.0, иначе все сломается.
  • gatsby-plugin-fontawesome-css - для импорта и использования значков «конверт», «Средний» и «Twitter» в качестве компонентов значков многократного использования.

04. Повышение отзывчивости экрана с помощью медиа-запросов

  • Заголовки и размер текста - размер шрифта рассчитывается исходя из размера экрана.
  • @ artsy / fresnel - пакет npm, используемый для запросов мультимедиа, поскольку условный рендеринг на основе размера медиа не работает должным образом при настройке рендеринга на стороне сервера. Используя этот пакет, все точки останова обрабатываются сервером. Прочтите, чтобы узнать, как я его использовал, или прочтите их документацию для получения дополнительной информации.

Чтобы использовать его @ artsy / fresnel, вы должны сгенерировать компоненты Media и обернуть приложение компонентом MediaContextProvider.

Файл media.js создает набор компонентов мультимедиа.

Файл gatsby-browser.js позволяет вам реагировать на действия в браузере. Файл gatsby-ssr.js позволяет изменять статические файлы HTML по мере их отображения. Вы должны заключить свое приложение в компонент MediaContextProvider в обоих файлах (они должны выглядеть одинаково).

Это пример того, как я использовал компоненты Media в layout.js - здесь я хотел скрыть некоторые компоненты на некоторых страницах на экранах мобильных устройств.

05. Создание стопки стихов

  • gatsby-medium-rss-feed plugin - получает и преобразует канал автора Medium в узлы JSON, доступные конечной точке GraphQL с именем ‹name› Feed. См. Следующий блок кода для примера запроса.
  • react-swipeable-cards - пакет npm для подсказок, которые можно перелистывать, как трут. Это было своего рода болью, поскольку функция смахивания устарела или не работала с Gatsby ... В любом случае, я использовал запрос GraphQL, чтобы получить информационные поля и контент, которые мне нужны, из каждого стихотворения в ленте Medium.

[ОБНОВЛЕНИЕ] Функция смахивания работает, если вы не обернули компонент карты в свой собственный компонент.

  • Отображение тела стихотворения - тело рассказа на Medium представляет собой длинную строку html, поэтому я опасно отобразил эту строку html и удалил фрагменты, которые мне не нужны (рисунок, изображение и подписи) со строкой регулярного выражения.

Развертывание вашего сайта Gatsby на S3

  • gatsby-plugin-s3 - развернуть созданное вами приложение Gatsby непосредственно в корзине S3 - это было очень просто!
  1. Установите плагин и укажите название сегмента и регион в gatsby.config.js.

2. Получите и сохраните свои AWS_ACCESS_KEY_ID и AWS_SECRET_ACCESS_KEY в своей среде.

@ windows cmd
> set AWS_ACCESS_KEY_ID = xxxxxxxxxx
> set AWS_SECRET_ACCESS_KEY = xxxxxxxxx
@ linux terminal
> AWS_ACCESS_KEY_ID = xxxxxxxxxx
> AWS_SECRET_ACCESS_KEY = xxxxxxxxx

3. Создайте, разверните и просматривайте свой сайт на http: // ‹bucket-name› .s3-website. ‹Region› .amazon.com или как там ваш сайт.

> npm run clean (optional)
> npm run build && npm run deploy

Сводка по приложению

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

Это моя структура файла (показаны только соответствующие файлы)

| src/
| | components/        // components
| | pages/             // pages(routes)
| | scss/              // scss styles
| html.js
| media.js             // Media components
| static/              // images
| gatsby-browser.js    // catch browser actions
| gatby-config.js      // Gatsby plugins & metadata
| gatsby-ssr.js        // alter static html
| package-lock.json
| package.json

Это мои установленные пакеты

Это мои плагины Gatsby

Выводы

Гэтсби стоит шумихи. Разработчики экономят много времени, пытаясь выяснить маршрутизацию, настройку GraphQL, включение множества пакетов npm, развертывание и многое другое, потому что Gatsby делает это за них. Я думаю, что создание этого сайта заняло бы вдвое больше времени без моих плагинов и предварительно работающего маршрутизатора.

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

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

Спасибо за чтение!

Ознакомьтесь с этим примером, если хотите узнать, как был разработан этот сайт.



Пример: создание уникального способа чтения стихов
Создание увлекательного и современного способа чтения стихов. medium.com



Послушайте стихи Томми - ведь это то, о чем весь сайт.



Томас Каар - средний
Попперы для вечеринок, розовые петунии, нет, розовые петунии, как будто они взволнованы больше, чем подавленный мясник в Чикаго… www. medium.com