Как создать первый сайт на Gatsby
Development | Комментировать запись
Gatsby – это фреймворк React, который позволяет создавать статические и бессерверные приложения. Созданные на Gatsby сайты отличаются от традиционных веб-сайтов, потому что обычно они развертываются в сети доставки контента (CDN). Преимущество CDN – меньшая задержка (то есть веб-сайты обслуживаются клиентом быстрее).
Gatsby также называют content mesh. Content mesh позволяет вам как пользователю извлекать данные из различных источников, таких как сайт WordPress, файл CSV и различных внешних API; следовательно, Gatsby не зависит от баз данных. Он отличается от традиционных систем управления контентом (CMS) типа WordPress и Drupal, где данные обычно поступают из одного источника. Значит, когда вы создаете приложение на основе Gatsby, вам не нужно беспокоиться об обслуживании БД.
Бессерверные веб-сайты, которые мы упомянули выше, также называются JAMStack. В архитектуре JAMStack по-прежнему задействован сервер, но разработчику уже не нужно заниматься его оркестровкой или обслуживанием. Некоторые разработчики предпочитают работать в бессерверной среде, поскольку они могут сосредоточить больше внимания на бизнес-логике приложений (например, при разработке e-commerce магазина это позволяет сосредоточиться на коде, который напрямую связан с продажей продуктов). JAMStack помогает быстро разрабатывать более безопасные и производительные веб-сайты, которые дешевле в развертывании, чем традиционные CMS-платформы.
В этом руководстве вы узнаете, как:
- Установить стандартный Gatsby Starter.
- Изменить метаданные в конфигурации gatsby.
- Запустить сервер разработки и просмотреть сайт Gatsby локально.
Также вы получите краткое введение в JSX и узнаете о возможностях Gatsby по оптимизации изображений.
В результате вы сможете создавать и редактировать сайты Gatsby. В мануале мы запустим свой первый коммерческий сайт Gatsby (это будет тестовый сайт на локальном компьютере, который мы пока что не будем развертывать).
Требования
- Локальная установка Node.js 10.16.0 (рекомендуем ознакомиться с инструкциями по установке для mac OS и Ubuntu 18.04).
- Умение собирать сайты на HTML и писать стили на CSS будет плюсом. Если вы хотите освежить свои знания, почитайте эту серию мануалов.
- Также будет полезно иметь базовые знания по JavaScript. Gatsby использует React, однако, чтобы начать работу, знать React вам не нужно, хотя в целом ознакомиться с основными понятиями было бы полезно. Кое-что можно найти в нашем блоге.
1: Установка Gatsby и создание нового проекта
Для начала давайте установим новый сайт Gatsby. Gatsby предоставляет пользователям исходные шаблоны, поэтому вам не нужно беспокоиться о сборке сайта с нуля.
Загрузите пакет Gatsby CLI. Это интерфейс командной строки Gatsby, с помощью которого мы сможем создать и настроить новый сайт:
npm install -g gatsby-cli
Флаг -g устанавливает пакет Gatsby глобально, а не локально, что позволит вам использовать этот инструмент в любом каталоге.
Примечание: В некоторых системах, в том числе в Ubuntu 18.04, глобальная установка пакета npm может привести к ошибке привилегий, что, в свою очередь, прервет установку. Поскольку использования sudo с npm install рекомендуется избегать, вы можете решить эту проблему, изменив каталог npm по умолчанию. Если вы столкнулись с ошибкой EACCES, следуйте инструкциям в официальной документации npm.
Если вы введете gatsby help, вы получите список команд, которые можно использовать при создании своего сайта Gatsby:
gatsby help
На экране будет следующий результат:
Usage: gatsby <command> [options] Commands: gatsby develop Start development server. Watches files, rebuilds, and hot reloads if something changes gatsby build Build a Gatsby project. gatsby serve Serve previously built Gatsby site. gatsby info Get environment information for debugging and issue reporting gatsby clean Wipe the local gatsby environment including built assets and cache gatsby repl Get a node repl with context of Gatsby environment, see (https://www.gatsbyjs.org/docs/gatsby-repl/) gatsby new [rootPath] [starter] Create new Gatsby project. gatsby plugin Useful commands relating to Gatsby plugins gatsby telemetry Enable or disable Gatsby anonymous analytics collection. ...
Самые важные команды для этого мануала:
- gatsby new создает новый сайт. Если вы используете команду gatsby new без аргументов, вы получите скелет сайта. Более распространенный способ использования gatsby new – в связке со стартовым шаблоном, (что мы и сделаем).
- gatsby develop запускает сервер разработки. В этом руководстве мы будем использовать эту команду, чтобы увидеть свой сайт локально на порту :8000.
- gatsby build объединяет статические файлы и ресурсы и создает производственную сборку вашего приложения.
Итак, инструменты командной строки Gatsby установлены, но у нас по-прежнему нет сайта. Одним из преимуществ Gatsby является то, что вам не нужно писать веб-сайт с нуля: Gatsby предоставляет несколько исходных шаблонов, которые можно использовать для запуска сайта. Таких шаблонов существуют сотни, и многие из них разработаны сообществом. В этом мануале мы будем использовать один из официальных шаблонов Gatsby по имени Gatsby Starter Default.
Первое, что нужно сделать – установить стартовый шаблон Gatsby через свой терминал:
gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default
Команда gatsby new создает новый сайт. В этом руководстве используется шаблон gatsby-starter-default, а название проекта будет соответствовать имени этого шаблона.
Следующий вывод в командной строке означает, что вы успешно установили стартовый шаблон Gatsby:
... Your new Gatsby site has been successfully bootstrapped. Time to change into the directory cd gatsby-starter-default gatsby develop
gatsby-starter-default – имя вашего нового каталога. Теперь перейдите в каталог gatsby-starter-default и просмотрите его содержимое:
cd gatsby-starter-default && ls
Вы получите такой результат:
LICENSE gatsby-browser.js gatsby-node.js node_modules public yarn.lock README.md gatsby-config.js gatsby-ssr.js package.json src
Вот важные файлы, которые мы отредактируем в этом руководстве:
- gatsby-config.js содержит настройки для всего сайта. Здесь мы изменим метаданные и добавите плагины Gatsby.
- каталог src содержит все страницы, изображения и компоненты, составляющие веб-сайт. В React компоненты – это изолированные части сайта. К примеру, домашняя страница на нашем веб-сайте состоит из компонентов layout, image и seo.
Теперь, когда мы создали новый проект Gatsby и изучили файловую структуру, пора переходить к своему проекту и настроить метаданные своего сайта.
2: Изменение стандартной конфигурации Gatsby
Если вы хотите, чтобы ваш сайт индексировался поисковыми системами, важно правильно отформатировать метаданные. В этом разделе мы настроим в приложении заголовок, описание и метаданные автора.
/gatsby config – это конфигурационный файл Гэтсби. Здесь вы найдете объект siteMetadata. Метаданные помогают повысить SEO сайта и делают его более доступным для поисковых систем.
Откройте gatsby-config.js в текстовом редакторе, чтобы просмотреть конфигурацию Gatsby. Мы будем пользоваться nano, но вы можете использовать любой другой редактор:
nano gatsby-config.js
Вот так выглядит файл gatsby-config.js, который поставляется с шаблоном Gatsby Default Starter по умолчанию:
module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `@gatsbyjs`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
Конфигурационный файл Gatsby также хранит список плагинов. Plugins – это пакеты, которые устанавливаются для добавления функционала в Gatsby. Наша установка Gatsby поставляется с плагинами gatsby-plugin-react-helmet, gatsby-transformer-sharp, gatsby-plugin-sharp и gatsby-plugin-manifest.
Каждый шаблон Gatsby Default Starter по умолчанию содержит одни и те же метаданные. Нам нужно персонализировать эти данные, чтобы начать процесс создания собственного сайта.
Замените текст title, description и author следующим выделенным кодом:
module.exports = {
siteMetadata: {
title: `Getting Started with Gatsby`,
description: `A tutorial that goes over Gatsby development`,
author: `@8host`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
Сохраните и закройте файл.
Теперь Google или другая поисковая система при сканировании вашего сайта будет извлекать данные, связанные с вашим приложением.
3: Настройка домашней страницы
В этом разделе вы узнаете о JSX, измените разметку на домашней странице, добавите изображение и запустите свой сайт Gatsby локально.
Пришло время посмотреть, как выглядит веб-сайт в браузере. Откройте в терминале новое окно и введите gatsby develop в командной строке, чтобы просмотреть локальную версию сайта:
gatsby develop
Команда gatsby develop запускает сервер разработки. Если вы перейдете в браузер, вы сможете получить доступ к своему сайту по адресу localhost:8000.
На странице будет заголовок Gatsby Default Starter, изображение космонавта и стандартное приветствие.
Нам нужно изменить разметку страницы, чтобы она больше походила на контент коммерческого сайта.
Откройте в редакторе этот файл:
nano src/pages/index.js
Вот что вы найдете внутри:
import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
const IndexPage = () => (
<Layout>
<SEO title="Home" />
<h1>Hi people</h1>
<p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p>
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
<Image />
</div>
<Link to="/page-2/">Go to page 2</Link> <br />
<Link to="/using-typescript/">Go to "Using TypeScript"</Link>
</Layout>
)
export default IndexPage
Этот код – JSX. JSX позволяет писать элементы HTML на JavaScript.
В текстовом редакторе замените стандартный заголовок <h1>Hi People</h1> на <h1>Hello Shoppers, we are open for business!<h1>. Также нужно заменить <p>Welcome to your new Gatsby site.</p> на <p>We sell fresh fruit.</p>. Удалите <p>Now go build something great.</p>.
import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
const IndexPage = () => (
<Layout>
<SEO title="Home" />
<h1>Hello Shoppers, we are open for business!</h1>
<p>We sell fresh fruit.</p>
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
<Image />
</div>
<Link to="/page-2/">Go to page 2</Link> <br />
<Link to="/using-typescript/">Go to "Using TypeScript"</Link>
</Layout>
)
export default IndexPage
Сохраните изменения. Нет необходимости запускать и останавливать сервер разработки, потому что Gatsby поставляется с функцией горячей перезагрузки, она автоматически обновит файлы в приложении, которые вы изменили.
Теперь давайте поменяем стандартное изображение с астронавтом. Мы будем использовать наш логотип, а вы можете использовать любое другое изображение. Откройте свой файл в браузере и загрузите его в папку src/images в вашем проекте Gatsby.
Примечание: Если вы тоже используете наш логотип, сохраните изображение как logo.svg. Если вы выбрали другой файл, замените logo.svg его названием.
Проверьте, что ваше изображение находится в правильной папке. Перейдите в каталог:
cd src/images
И запросите список файлов в нем:
ls
ls – это команда для отображения списка файлов. На экране появятся все файлы, найденные в папке images:
gatsby-astronaut.png gatsby-icon.png logo.svg
Теперь, когда вы подтвердили наличие файла, откройте image.js в своем любимом текстовом редакторе. Мы поменяем изображение астронавта на свое изображение.
Сначала вернитесь в каталог src:
cd ..
Теперь откройте компонент image.js:
nano components/image.js
Замените gatsby-astronaut.png на logo.svg:
import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
/*
* This component is built using `gatsby-image` to automatically serve optimized
* images with lazy loading and reduced file sizes. The image is loaded using a
* `useStaticQuery`, which allows us to load the image from directly within this
* component, rather than having to pass the image data down from pages.
*
* For more information, see the docs:
* - `gatsby-image`: https://gatsby.dev/gatsby-image
* - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
*/
const Image = () => {
const data = useStaticQuery(graphql`
query {
placeholderImage: file(relativePath: { eq: "logo.svg" }) {
childImageSharp {
fluid(maxWidth: 300) {
...GatsbyImageSharpFluid
}
}
}
}
`)
return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
}
export default Image
Для выполнения запросов к данным Gatsby использует GraphQL, и здесь файл image.js запрашивает изображение и оптимизирует его. В этом фрагменте кода Gatsby масштабирует размер изображения logo.svg. Подробнее о том, как он форматирует изображения, можно узнать здесь.
file() – это функция, которая открывает файл, где находится «logo.svg». Строка relativePath сообщает, где находится изображение относительно вашего местоположения. eq – значение фильтра для GraqhQL.
Сохраните файл. Сервер перезагрузится, и вы увидите выбранное вами изображение на странице Gatsby
Теперь ваш сайт Gatsby запущен и работает локально.
Заключение
В этом руководстве вы создали свой первый веб-сайт Gatsby. Теперь вы знаете, как создать базовый сайт Gatsby на вашем локальном компьютере. Вы уже можете самостоятельно создать и настроить приложение Gatsby, а значит, следующим шагом будет развертывание.
Tags: CSS, Gatsby, HTML, Javascript, JSX, Node.js, React