Как я построил свой блог с помощью Gatsby и Netlify

1656611053 kak ya postroil svoj blog s pomoshhyu gatsby i netlify

от Пава Сидху

SRfeyg10Foj3d2RJGC1xlPvoLnCcUrDoUV52
Фото Стэнли Дая на Unsplash

Можете ли вы назвать более культовый дуэт? ?

Много лет назад, когда я создавал статический веб-сайт, я не использовал модных фреймворков или инструментов для создания. Единственное, что я внес в свои проекты, это jQuery, или если я чувствовал себя особой фантазией, я использовал Sass.

Сейчас у нас есть такие инструменты, как Gatsby и Netlify, значительно улучшающие опыт создания статических веб-сайтов. Вместо того чтобы думать о шаблоне и конфигурации (смотря на ваш Webpack), вы можете просто сосредоточиться на своей программе.

Я бы не колеблясь сказал, что поток Gatsby и Netlify – это лучший опыт программирования, который я когда-либо имел. Позвольте объяснить почему.

Гетсби

Gatsby – генератор статических сайтов, который использует React. Все настроено из коробки, включая React, Webpack, Prettier и многое другое.

Поскольку Gatsby строит на основе React, вы получаете все преимущества React, такие как его производительность, компоненты, JSX, экосистема библиотеки React и большое сообщество (React приближается к 100 000 звездам на GitHub?).

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

Для многих статических веб-сайтов, таких как мой блог, мне нужно использовать внешние источники данных (мои фактические публикации в блоге) при создании. Gatsby оказывает поддержку многих форм данных, включая Markdown, API, базы данных и CMS, такие как WordPress. Чтобы получить доступ к этим данным, Гетсби использует GraphQL.

iM2OGEJL6tZLVWstXJ6YLcYnxcQaMCPt4Bz-
Взято прямо с сайта Гетсби

Все мои сообщения в блоге размещены в Markdown, поэтому я использую плагин Gatsby (gatsby-transformer-remark), который позволяет мне спрашивать мои файлы Markdown с помощью GraphQL. Он также превращает файл Markdown в HTML прямо из коробки как магия. Мне просто нужно использовать такой запрос GraphQL для доступа к определенной публикации:

query BlogPostByPath($path: String!) {  markdownRemark(frontmatter: { path: { eq: $path } }) {    frontmatter {      title      date(formatString: "Do MMMM YYYY")    }    html  }}

Используя этот запрос, я получал доступ к данным через свои реквизиты так:

const BlogPost = ({ props: { data: { markdownRemark } } }) => (  <div>    <h1>{markdownRemark.title}</h1>    <p>{markdownRemark.date}<p>    <div dangerouslySetInnerHTML={{ __html: markdownRemark.html }} />  </div>)

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

Если вы создаете простой блог с одним или двумя запросами, есть стартовые наборы Gatsby, которые настраивают gatsby-transformer-remark и все запросы для вас. Чтобы ускорить разработку, я использовал один под названием gatsby-starter-blog-no-styles.

Я большой поклонник стилизованных компонентов, потому старался использовать его при создании этого блога. Я сталкивался с проблемой, поскольку я не мог указать gatsby-transformer-remark, как стилизовать мои компоненты. Вместо этого мне пришлось использовать обычный CSS для стилизации. Я бы хотел увидеть что-то вроде следующего gatsby-config.js :

import styled from 'styled-components'
const Header = styled.h1`  font-size: 24px;  color: #333333;`
module.exports = {  plugins: [    {      resolve: 'gatsby-transformer-remark',      options: {        h1: Header      }    }  ]}

В дополнение к простоте фактического использования Gatsby, официальная документация очень хорошо написана и актуальна. Каждое руководство в документации так хорошо объясняет концепции Гэтсби, вероятно, что в большинстве случаев вам не нужно будет проверять любой посторонний источник информации.

Единственная сложность у меня с Gatbsy была, когда я развернул свой веб-сайт. У меня был FOUC (вспышка нестиллированного содержимого). Я обнаружил, что обновление Gatsby с 1.8.12 по 1.9.250 решило проблему. Я не очень уверен, почему это исправило это, и я предполагаю, что это, наверное, была внутренняя проблема с Гэтсби.

ifD3he8pRN4CLuiN9dYw4MxLxZdVe5KmKqH4
Я имею в виду, кто действительно хочет видеть мой лоб?

Netlify

Обычно, создавая статический веб-сайт, я использую страницы GitHub, поскольку это бесплатно и достаточно легко настроить. Хотя я все еще считаю, что страницы GitHub являются отличным инструментом, Netlify делает процесс еще более эффективным, чтобы сделать разработчика еще более эффективным.

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

Я использую Netlify только для статического хостинга сайтов. Но он также поддерживает облачные функции, управление доменом (с помощью SSL), представление форм, а/б тестирование и т.д.

Веб-интерфейс Netlify также чист и прост в использовании. Отличие от AWS – ночь и день. Хотя AWS легко настраивается, многие разработчики не используют эту функцию. Когда я впервые использовал S3 или Lambda (статические файлы и облачные функции Amazon), я потратил значительное количество времени на поиск сложной, а иногда и устаревшей документации Amazon. При использовании AWS возникает много ненужной сложности и жаргона Amazon. Для сравнения, Netlify – это глоток свежего воздуха. Это одна из тех услуг, которые просто работает.

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

TL; DR

Gatsby и Netlify – это самый простой способ создать и опубликовать статический веб-сайт. Период.

Если вам нужен пример создания блога с помощью Gatsby, код для моего блога доступен на GitHub.

Эта публикация была первоначально опубликована в моем блоге: Как я построил свой блог с помощью Gatsby и Netlify

Спасибо, что прочли, пожалуйста? если вы нашли это полезно! Я хотел бы услышать ваши мысли о Гэтсби и Netlify в комментариях.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *