Как создать сайт на Gatsby.js

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-модулей.

1. Создайте файл src/components/layout.module.css и добавьте стили для заголовка:

.title {
  font-size: 2rem;
  color: darkblue;
}

2. Импортируйте стили в компонент Layout:

import * as styles from "./layout.module.css";

3. Примените стиль к элементу заголовка:

<h1 className={styles.title}>{props.title}</h1>

Теперь заголовок на вашем сайте будет иметь заданный стиль.

Заключение

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

Если вы заинтересовались веб-разработкой и хотите углубить свои знания, рекомендую обратиться в эту замечательную школу: .

Тест на профориентацию

За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии

Подробнее