Начните свой проект с этого шаблона. Этот модуль запуска содержит самые важные файлы и настройки Gatsby, которые могут вам понадобиться, чтобы начать работу с максимальной скоростью с помощью молниеносного генератора приложений для React.
Создайте сайт Гэтсби.
Используйте Gatsby CLI, чтобы создать новый сайт, указав этот Template .
# Crie um novo site do Gatsby usando esse Template
gatsby new my-project https://github.com/solrachix/gatsby-template
Начать разработку.
Перейдите в каталог вашего нового сайта и запустите его.
cd my-project/
gatsby develop
Откройте код и приступайте к редактированию!
Ваш сайт теперь работает по адресу http://localhost:8000
!
Примечание. Вы также увидите вторую ссылку: http://localhost:8000/___graphql
. Это инструмент, который вы можете использовать для экспериментов с запросами данных. Узнайте больше о том, как использовать этот инструмент, в [учебнике Gatsby](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql).
Откройте каталог my-project
в выбранном вами редакторе кода и отредактируйте src/pages/index.js
. Сохраните изменения, и браузер обновится в режиме реального времени!
Progressive Web App — это термин, используемый для обозначения новой методологии разработки программного обеспечения. В отличие от традиционных приложений, прогрессивное веб-приложение можно рассматривать как гибридную эволюцию обычных веб-страниц и мобильного приложения.
Манифест веб-приложения (часть спецификации PWA), основанный на плагине манифеста , позволяет пользователям добавлять ваш веб-сайт на главный экран в большинстве мобильных браузеров — см. здесь. Манифест содержит конфигурацию и значки телефона.
Этот плагин предоставляет несколько функций в дополнение к настройке манифеста, которые сделают вашу жизнь проще:
Каждая из этих функций имеет обширную настройку, поэтому вы всегда все контролируете.
Где искать эти плагины? Нажмите здесь и найдите
Краткий обзор файлов и каталогов верхнего уровня, которые вы увидите в этом шаблоне Gatsby.
.
├── node_modules
├── config/
│ └── MetaData.js
├── src/
│ ├── assets/
│ │ └── images/
│ │ └── logo.png
│ ├── components/
│ ├── Pages/
| │ └── index.js
│ ├── posts/
| │ └── 2020-04-08--nosso-primeiro-post/
| │ └── index.md
│ ├── styles/
│ | ├── themes/
│ | └── GlobalStyles.js
│ ├── templates/
│ | ├── post.js
│ | └── tag.js
│ └── html.js
├── static/
│ ├── favicon.ico
│ └── robots.txt
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md
Файлы/Папки | Описание |
---|---|
/node_modules | Этот каталог содержит все модули кода, от которых зависит ваш проект (пакеты npm), которые устанавливаются автоматически. |
/источник | Этот каталог будет содержать весь код, связанный с тем, что вы увидите в интерфейсе вашего веб-сайта (то, что вы видите в браузере), например, заголовок веб-сайта или шаблон страницы. src — это соглашение об «исходном коде». |
.gitignore | Этот файл сообщает git, какие файлы он не должен отслеживать/не поддерживать историю версий. |
.prettierrc | это файл конфигурации для Prettier. Prettier — это инструмент, который помогает поддерживать единообразие форматирования кода. |
* gatsby-browser.js | Именно в этом файле Гэтсби ожидает найти применение API браузера Гэтсби (если они существуют). Это позволяет настраивать/расширять настройки Gatsby по умолчанию, влияющие на браузер. |
Гэтсби-config.js | Это основной файл конфигурации веб-сайта Gatsby. Здесь вы можете указать информацию о вашем сайте (метаданные), например название и описание вашего сайта, какие плагины Gatsby вы хотели бы включить и т. д. (Более подробную информацию можно найти в документации по конфигурации). |
Гэтсби-node.js | В этом файле Гэтсби ожидает найти любое использование API узла Гэтсби (если они существуют). Это позволяет настраивать/расширять настройки Gatsby по умолчанию, которые влияют на части процесса создания сайта. |
Гэтсби-ssr.js | Именно в этом файле Гэтсби ожидает найти любое применение API рендеринга сервера Гэтсби (если они существуют). Это позволяет настраивать параметры Gatsby по умолчанию, влияющие на рендеринг на стороне сервера. |
ЛИЦЕНЗИЯ | Гэтсби лицензируется по лицензии MIT. |
пакет-lock.json | (сначала см package.json ниже). Это автоматически создаваемый файл на основе точных версий зависимостей npm, установленных для вашего проекта. (Вы не меняете этот файл напрямую). |
пакет.json | Файл манифеста для проектов Node.js, который включает в себя такие вещи, как метаданные (имя проекта, автор и т. д.). Этот манифест позволяет npm узнать, какие пакеты установить для вашего проекта. |
README.md | Текстовый файл, содержащий полезную справочную информацию о вашем проекте. |
**** |
Ищете дополнительные рекомендации? Полная документация по Gatsby находится [на веб-сайте] (https://www.gatsbyjs.org/). Вот с чего начать:
Большинству разработчиков я рекомендую начать с нашего [подробного руководства по созданию веб-сайта с помощью Gatsby] (https://www.gatsbyjs.org/tutorial/). Он начинается с нулевых предположений об уровне ваших способностей и проходит каждый этап процесса.
Чтобы непосредственно погрузиться в примеры кода, посетите [документацию] (https://www.gatsbyjs.org/docs/). В частности, см. разделы «Руководства» , «Справочник по API» и «Дополнительные руководства» на боковой панели.