Последние пару недель я провел много часов, играя с GatsbyJS, и это был настоящий взрыв!

Gatsby - это генератор статических сайтов, использующий React в качестве языка шаблонов.

Так что, если вы занимаетесь React, это брак, заключенный на небесах!

Все вкусности

Гэтсби так сильно любить.

Позвольте мне назвать еще несколько вкусностей, которые вы найдете в этой сумке Gatsby.

Поскольку Gatsby построен на React, вы сразу получили все, что нам нравится в React, например возможность компоновки, одностороннее связывание, возможность восстановления и отличную среду.

Gatsby также построен на основе GraphQL, что позволяет вам запрашивать данные, как вы хотите.

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

У нас также есть сверхбыстрая горячая перезагрузка, которая делает процесс разработки потрясающим! 🔥

И все это вместе создается с помощью Webpack.

Ощущение продуктивности

Одно дело в том, что Гэтсби покрывает все модные слова, такие как React, GraphQL, WebPack и т. Д., Но что круто, так это то, что вы готовы к работе в кратчайшие сроки!

Быть продуктивным с самого начала действительно создает атмосферу для остальной части проекта, и это огромная причина, почему я так увлекся GatsbyJS в последнее время.

Я сидел там и думал - «Аааа, в этом есть смысл» - вместо множества - «Что это?» - и это лучшее чувство!

Хорошо, хватит шумихи, позвольте мне вместо этого показать вам, как создать и развернуть сайт Gatsby за 10!

[0 мин] Установить Гэтсби

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

npm install --g gatsby-cli

[2 мин] Создайте наш сайт о Гэтсби

Теперь, когда мы установили клиент Gatsby, мы можем использовать его для создания нашей страницы Gatsby. Назовем его my-gatsby-app.

gatsby new my-gatsby-app  
#> (...)
#> ✨Done in 47.02s.

Вот и все! Теперь у нас есть полностью функциональный сайт Гэтсби! 🎉

Если мы теперь заглянем внутрь проекта, то увидим несколько разных каталогов.

ls -la my-gatsby-app/src/  
#> /components
#> /layouts
#> /pages

Страницы

Каталог страниц содержит, как вы уже догадались, страницы.

Каждый файл становится одной страницей, и имя основывается на имени файла.

Самое интересное, что каждый из этих файлов содержит компонент React. Вот и все - никакой магии!

Например, это созданный index.js.

const IndexPage = () => (  
  <div>
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <Link to="/page-2/">Go to page 2</Link>
  </div>
)
export default IndexPage

Макеты

Каталог макетов содержит макеты, которые обертывают наши страницы.

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

Мы можем разместить нашу страницу в любом месте макета, используя опору children.

Давайте посмотрим на простой компонент макета.

const Layout = ({ children, data }) => (  
  <div>
    <Header siteTitle={data.site.siteMetadata.title} />
    <div>
      {children()}
    </div>
  </div>
)
export default Layout
export const query = graphql`  
  query SiteTitleQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`

Как видите, наш компонент Layout принимает два реквизита.

Первый - это свойство children, то есть страница, которую мы хотим обернуть.

Вторая опора - data. На самом деле это данные, которые мы получаем с помощью запроса GraphQL, который находится в конце фрагмента кода - который в этом примере извлекает заголовок из gatsby-config.

Компоненты

Последний каталог - components. В эту папку мы можем поместить другие общие компоненты, которые мы создаем.

[3 мин] Запустите наш новый сайт!

Теперь, когда мы создали наш сайт о Гэтсби и получили приблизительное представление о том, что он содержит, давайте запустим его!

gatsby develop  
#> DONE  Compiled successfully

Быстро, правда? Теперь мы готовы! Убедитесь сами в http://localhost:8000.

[4 мин] Сверхбыстрая горячая перезагрузка🔥

Мы запустили наш сайт и запустили его локально. Теперь вы можете начать вносить изменения, и, как вы быстро заметите, горячая перезагрузка работает очень быстро прямо из коробки!

[6 мин] Разместите наш новый сайт на GitHub

Мы можем продолжить улучшать наш проект, но это не тема данной публикации. Вместо этого давайте перейдем к развертыванию нашего нового сайта Gatsby.

Первый шаг - отправить наш проект на GitHub.

Прежде всего, нам нужно превратить наш проект в проект git.

git init

Затем нам нужно создать .gitignore файл со всем, что мы не хотим добавлять в git.

echo '.cache  
node_modules  
yarn-error.log  
/public' > .gitignore

Теперь, когда мы игнорируем то, что нужно игнорировать, мы можем подготовить и зафиксировать наш проект.

git commit -am "init commit"

Теперь нам нужно войти в GitHub, создать новый репозиторий с тем же именем, а затем отправить нашу страницу в удаленный репозиторий.

git remote add origin [email protected]:username/my-gatsby-app.git  
git push -u origin master

Итак, теперь у нас есть репозиторий GitHub.

[8 мин] Развертывание сайта в Netlify

Мы создали наш сайт, и он размещен на GitHub, поэтому остается только развернуть его где-нибудь.

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

Все, что вам нужно сделать, это войти в Netlify, выбрать «Новый сайт из Git», выбрать репозиторий, затем нажать Развернуть.

Тогда, примерно через минуту, ваш сайт заработает! 🚀

[10 мин] Замечательно, сайт заработал! Что теперь?

Наш сайт работает - и это всего за 10 минут! Чувство продуктивности потрясающее, правда?

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

Прежде всего хочу отметить прекрасную документацию Gatsby. Он содержит множество вариантов того, как вы можете сделать свой сайт Gatsby именно таким, каким вы хотите.

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

Typography.js, CSS-модули или любое другое удовольствие, которое вы обычно находите в проекте Gatsby, просто прекрасно работают вместе.

Так что найдите своего редактора и приступайте к работе - обещаю, это будет веселая и динамичная поездка!