gatsby starter landing page

Стартовая целевая страница Гэтсби

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

Предварительные условия

Если у вас еще не установлен Gatsby CLI, сначала сделайте это.

npm install --global gatsby-cli

Интерфейс командной строки Gatsby использует Node и npm, которые вам также необходимо установить. Более подробную информацию можно найти на GatsbyJS.org.

Начиная

Установите стартер с помощью новой команды Gatsby.

gatsby new landing-page https://github.com/gillkyle/gatsby-starter-landing-page.git

Перейдите в каталог проекта и запустите сайт.

 cd landing-page && gatsby develop

Сайт откроется в браузере по умолчанию по адресу http://localhost:8000.

Отредактируйте код в /src , сохраните изменения, и они мгновенно перезагрузятся в браузере.

? Что внутри?

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

• ? Изображение Gatsby: изображения, добавленные в папку src/images автоматически оптимизируются плагином gatsby-image и могут быть объединены в компоненты с отложенной загрузкой и эффектами размытия.
• Аналитика: добавьте свой идентификатор отслеживания Google Analytics в gatsby-config.js чтобы автоматически начать отслеживать посетителей сайта.
• ? Карта сайта: любые новые страницы, добавляемые на сайт, автоматически собираются в карту сайта с помощью gatsby-plugin-sitemap
• ? Цветовая тема: файл src/styles/constants.js содержит набор цветов и стилей по умолчанию, которые применяются к компонентам на сайте и могут быть переопределены вашими собственными стилями.

? Эксперимент

Если вы хотите попробовать поиграть с исходным кодом на онлайн-площадке, вы можете открыть репозиторий в Codesandox с помощью этой кнопки.

? Развертывать

Если вы просто хотите быстро просмотреть сайт в Интернете, вы можете развернуть копию сайта в Netlify с помощью этой кнопки.

Чтобы создать оптимизированную сборку сайта, выполните эту команду

gatsby build

Будет собрана папка /public , которую можно будет развернуть в такой службе, как Netlify, Surge, GitHub Pages, AWS S3, хостинг Firebase или на вашем собственном файловом сервере.