Gatsby - это генератор статических сайтов, созданный на основе реакции.
Если вы знакомы с реакцией, вы можете легко погрузиться в ее документацию, она довольно интересная.
Одна вещь, которую вы хотите знать о gatsby, - это производительность, которую сайты создают с помощью Gatsby - это невероятная скорость и высокая производительность, даже если вы можете проверить вкладку Chrome в инструментах разработчика.
Начнем сначала с установки gatsby cli
npm i --g gatsby-cli // i for install g for global
После успешной установки cli позволяет установить стартер по умолчанию
gatsby new gatsby-intro
после установки стартера смените каталог с помощью cd gatsby-intro
Теперь запустите сервер разработки
gatsby develop // to start dev server
Похоже, что изображение выше, и сервер работает по адресу localhost: 8000.
Откройте папку gatsby-intro с вашим избранным
В папке src
Структура папок гэтсби
В папке компонентов нам нужно добавить повторно используемые компоненты, как в React.
В папке макетов нам нужно добавить наши собственные макеты
По умолчанию Гэтсби добавил компонент заголовка и некоторые теги, связанные с поисковой оптимизацией.
У Gatsby также есть собственный плагин Seo Plugin, который называется react-Helmet.
с его помощью мы можем добавить описание и ключевые слова для каждого маршрута.
В строке 26 приведенного выше кода дочерний метод сообщает о загрузке всех маршрутов ниже этого div.
Любые компоненты, которые мы создаем в маршрутизации папок страниц, автоматически добавляются с именем созданного файла, которое мы уже видели, по умолчанию мы можем получить 3 файла.
- домашний маршрут (/), который является индексом, js
- второй маршрут (/ page-2), который является page-2.js
- 404 стр.
Теперь давайте создадим новый файл в папке страниц с именем intro.js.
мы создали компонент без сохранения состояния, и наш маршрут также успешно добавлен gatsby. Теперь зайдите и проверьте в своем браузере localhost: 8000 / intro
Пакет gatsby-link доступен для навигации.
Он уже предустановлен.
Нам нужно импортировать его из пакета, чтобы мы могли использовать навигацию в нашем файле intro.js.
Теперь давайте добавим несколько тегов, связанных с поисковой оптимизацией.
Мы успешно создали компонент intro.js с seo и навигацией.
Теперь давайте создадим его для производства.
В командной строке запустите
gatsby build // to start the build process gatsby serve // to run the build files in your local environment
Давайте обсудим в следующем посте, как развернуть его на сервере.
Ресурсы
✉️ Подпишитесь на рассылку еженедельно Email Blast от CodeBurst 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ Дорожная карта веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .
