Gatsby.js — это современный фреймворк для создания быстрых и оптимизированных веб-сайтов на основе React. В этой статье мы рассмотрим, как развернуть новый проект Gatsby и создать простой сайт.
Установка Gatsby CLI
Для начала установим инструмент командной строки Gatsby, который предоставит набор удобных команд для работы с Gatsby. Установку производим следующей командой:
npm install -g gatsby-cli
Создание нового проекта Gatsby
Теперь создадим новый проект на Gatsby.js с помощью команды gatsby new. Для этого введите в терминале:
gatsby new my-gatsby-site
Здесь my-gatsby-site — это название вашего нового проекта. Вы можете выбрать любое другое имя.
Запуск проекта
Перейдите в каталог вашего проекта и запустите его с помощью команды gatsby develop:
cd my-gatsby-site gatsby develop
После запуска проекта вы увидите сообщение о том, что сайт доступен по адресу http://localhost:8000.
🎉 Поздравляю, вы только что создали свой первый сайт на Gatsby.js!
Работа с контентом
Gatsby по умолчанию использует файлы Markdown для хранения контента. В вашем проекте уже есть несколько примеров таких файлов. Они расположены в папке src/pages.
Откройте файл src/pages/index.md и измените его содержимое:
—
title: «Главная страница»
—
Добро пожаловать на мой новый сайт, созданный с использованием Gatsby.js!
Сохраните изменения и обновите страницу в браузере. Вы увидите, что контент главной страницы изменился.
Добавление стилей
Gatsby поддерживает множество способов добавления стилей к вашему проекту. Мы рассмотрим один из наиболее популярных — использование CSS-модулей.
- Создайте файл
src/components/layout.module.cssи добавьте стили для заголовка:
.title {
font-size: 2rem;
color: darkblue;
}
- Импортируйте стили в компонент
Layout:
import * as styles from "./layout.module.css";
- Примените стиль к элементу заголовка:
<h1 className={styles.title}>{props.title}</h1>
Теперь заголовок на вашем сайте будет иметь заданный стиль.
Заключение
В этой статье мы кратко рассмотрели, как создать сайт на Gatsby.js, работать с контентом и применять стили. Gatsby предлагает множество возможностей для расширения и оптимизации вашего сайта, так что продолжайте изучать и экспериментировать!
Если вы заинтересовались веб-разработкой и хотите углубить свои знания, рекомендую обратиться в эту замечательную школу: .
Добавить комментарий