Я мигрировал из Джекилла в Гэтсби недавно и до сих пор у меня было действительно аккуратное время. Весь процесс занял около недели повседневного кодирования (несколько часов здесь и там). Экосистема GATSBY позволила мне быстро добавить несколько функций в мой блог, который я подумал, что не хватает; Темный режим, лучший синтаксис подсветки и способность дизайна с компонентами.
GATSBY PELTERS – сайты Boilerplate GATSBY поддерживается сообществом Отказ Одна из причин, по которым я люблю их, это то, что они используют Семантический HTML . Это здорово, потому что:
- Он помогает с поисковой оптимизацией – веб-скалы могут понимать, какие части ваших страниц важны.
- Это помогает с доступностью – для людей, которые используют нетрадиционные браузеры и ScreeneeDers.
- Это помогает с техническим обслуживанием – я смог подобрать стартер и понять, какие разные части шаблона упоминаются из-за семантических меток.
Возьми этот пример из GATSBY-Starter-Blog
– самый популярный стартер и база для моего Текущий блог (встроенный стиль удален).
{post.frontmatter.title}
{post.frontmatter.date}
Я видел довольно несколько ресурсов для новичков веб-разработки, которые пропускают семантические HTML и поощряют то, что я позвоню «Div-Spamming». HTML5 SPEC весит на этом Выпуск Отказ
Авторы настоятельно рекомендуются просмотреть элемент div в качестве элемента последней курорта, потому что ни один другой элемент не подходит. Использование более подходящих элементов вместо элемента DIV приводит к лучшему доступности для читателей и более простых удобств для авторов.
Исходя из Джекилла
Я начал вести блог с Jekyll год назад, потому что я разместил свой блог на страницах GitHub, и это был статический генератор сайта с наименьшим трением. Это был отличный выбор в то время, когда он позволил мне встать и бежать сразу.
Я видел, как многие люди предупреждают других (в частности, инженеров), чтобы избежать качения своих собственных растворов для блога. Совет заключается в том, что вы должны сначала начать писать и публиковать. Это связано с тем, что построение блога может функционировать как промедление и кто знает, если вы на самом деле наслаждаетесь блогом (деятельностью) или идеей в блоге (достижение).
С Jekyll я использовал базовую усадьбу и передаю письменное содержание в GATSBY было не слишком сложно. Изображения должны были быть перемещены из одной дезорганизованной папки в отдельные папки. URL-адреса были немного боли и заняли 1,5 час ручной работы. Я хотел, чтобы все мои старые сообщения сохраняли свое местоположение в Интернете, поэтому я добавил бирку передней материи под названием дорожка
Чтобы переопределить схему именования по умолчанию. Мои старые URL были слишком длинными и включены категории (которые я все еще предпринимаю), поэтому схема пути отныне будет только заголовка.
Я протянул Oncreatenode
в gatsby-node.js.
. Я не уверен, что это лучший путь для реализации этой функции Но это отлично работает.
exports.onCreateNode = ({ node, actions, getNode }) => { const { createNodeField } = actions if (node.internal.type === `MarkdownRemark`) { // Check to use legacy path const slug = node.frontmatter.path || createFilePath({ node, getNode }) createNodeField({ node, name: `slug`, value: slug, }) } }
Синтаксис выделения
Кодовые выдержки отображаются во многих моих сообщениях, и мне нравится, чтобы они были легко разбираться.
Я установил ГАТСБИ-ЗАМЕЧАНИЕ-ПРИМИСЫ Для синтаксиса выделения и поднялись и запущены примерно через час с другим часом, потраченным в стилях, чтобы соответствовать моим ложке света/темного режима. Я использую Тема новой луны Tania Rascia для моих выдержков кода. Я не мог найти версию темы для Prismjs, поэтому я извлек укладку из Тани (MIT-лицензирован) блог . Генеральная цветная тема сайта таможенная.
Одной из причин, по которым я упоминаю плагины, состоит в том, что мне трудно интегрировать их с Джекиллом, и я чувствую, что это не только мое неопытость с Рубином, который удерживал меня обратно. Возможно, это связано с ошеломляющим GATSBY, что означает, что есть современные ресурсы. Я внес один (маленький) исправление с открытым исходным кодом в проект Jekyll, и я все равно порекомендую это для тех, кто ищет разумную систему для HTML/CSS, имеющих широкую поддержку сообщества E.g., страницы GitHub, NetLify и т. Д. Если вы хотите избежать JavaScript, Jekyll – это путь.
Для моего света/темного режима я использую Гэтсби-плагин-темный режим
который работает хорошо из коробки и имеет хорошую (но не большую) документацию. Для тематического переключения я исследовал и обнаружил, что общий шаблон должен был объявить переменные CSS в объеме организма, а затем переопределить эти переменные в класс объем. Таким образом, темный
Класс может быть добавлен в
Тег, который означает
темный Переменные CSS принимают приоритет из-за специфичности CSS. Занятия затем переключаются и выключены
body { --bg: #eaeaeb; --textNormal: #414158; } body.dark { --bg: #21212c; --textNormal: #eaeaeb; }
Проектирование с компонентами
Первый компонент реагирования, который я написал для моего блога, был для упаковки <Темаetoggler/>
от Гэтсби-плагин-темный режим
в компонент. Он переключается между солнцем и луной, чтобы сообщить пользователю, на какую тему можно переключить. База для этого является примером кода из документы .
{({ theme, toggleTheme }) => ( )}
Я никогда не использовал реагирование как часть раствора блога. Мне нравится иерархический подход UI, который поощряется. В том числе CSS-In-JS имеет смысл для масштаба моего сайта. Мне легче рассуждать и быстро и быстро
Как я развернул
Мой источник веб-сайта существует в репозитории Github. Я пишу в Markdown в VS Code, Commit и push. NetLify подключается к репозитории и создает и развертывает каждый коммит для освоения. Процесс сборки занимает 2М50 (30-е годы).
Я ранее использовал NetLify для Jekyll и устанавливая либо статический генератор сайта, вовлеченный около 10 кликов и ввод одну или две команды сборки. Прохождение покрывает все.
В целом, опыт GATSBY был очень приятным. Везде я смотрю в мой онлайн пузырь (Twitter, dev, lobste.rs), говорят о GATSBY. Приятно быть частью толпы.
Я также счастлив, что мой сайт (несмотря на то, что на основе реагирования) работает нормально без JavaScript (запрещая тему переключатель, что я могу спрятаться с
Styling).
Присоединяйтесь к 200+ людям зарегистрировано на мой рассылка О программировании и личном росте!
Я чирикаю о коде @healecodes Отказ
Оригинал: “https://dev.to/healeycodes/gatsby-sparks-joy-409k”