Что такое Gatsby.js?
Gatsby.js - это фреймворк с открытым исходным кодом на основе React. На их веб-сайте он рекламируется как «Единый интерфейс для управления всеми». Вы можете спросить, зачем мне вообще использовать этот фреймворк, если я могу использовать такие вещи, как React, Angular и / или Vue.
Проще говоря, Gatsby.js - это генератор статических сайтов. Он генерирует статические HTML-файлы, которые мы можем довольно быстро загрузить на сервер.
По прихоти я решил попробовать Gatsby.js посмотреть, что он предлагает, и мой опыт работы с ним был невероятным. Менее чем за 20 минут я создал статический веб-сайт, который позволил бы мне связать несколько других страниц вместе. Давайте углубимся и посмотрим, насколько на самом деле прост и легок этот фреймворк!
Настройка:
- Убедитесь, что в вашей системе есть Node. js. Нам потребуется это для настройки Гэтсби. Если у вас нет доступа для использования npm в вашем терминале, это означает, что он не настроен. Чтобы установить его в своей системе, перейдите по ссылке.
- Нам также понадобится установленный Git. Git - это система контроля версий, предназначенная для упрощения работы с проектами. Когда мы используем шаблон Gatsby, они используют Git за кулисами! Чтобы установить Git в свои системы, нажмите здесь!
- Как только мы установим эти два в нашей системе, мы сможем использовать Gatsby!
Установка
Первый шаг - установить Gatsby и запустить его через наш терминал.
npm install -g gatsby-cli
Устанавливается служебная программа Gatsby CLI (интерфейс командной строки).
Теперь давайте создадим наш сайт «Hello World» и запустим его!
gatsby new helloWorld https://github.com/gatsbyjs/gatsby-starter-hello-world
Установка займет некоторое время, поэтому сделайте глоток воды или кофе и подождите. После установки давайте посмотрим, что было создано:
Теперь давайте запустим эту команду в нашем терминале:
cd helloWorld gatsby develop
Это развернет все на localhost: 8000
Хммм, теперь давайте зайдем в папку в нашем редакторе кода (я буду использовать VS Code):
Мы видим несколько папок вместе с некоторыми другими файлами:
.cache node_modules public src static .gitignore .prettierignore .prettierrc gatsby-config.js LICENSE package-lock.json package.json README.md
А пока мы сосредоточимся на папке src, в которой находится еще одна папка с надписью «pages». Давайте посмотрим на файл index.js, если вы измените "Hello world!" в другое место и сохраните его, наш браузер выполнит горячую перезагрузку. Это означает, что страницу не нужно обновлять, чтобы увидеть внесенные изменения (это действительно изящная функциональность, которую предлагает Gatsby.js под капотом).
Если мы хотим добавить еще одну страницу, мы можем просто добавить еще один файл .js в ту же папку, которая содержит index.js.
Давайте создадим файл с именем secondpage.js со следующим содержанием:
import React from "react"
export default function secondpage() {
return <div>Hey! This is another page!</div>
}
Давайте сохраним его и вернемся в наш браузер. Теперь давайте изменим наш URL на http: // localhost: 8000 / secondpage, что, по вашему мнению, мы увидим? Нет уж, это было бы так просто!
Бум! Сделать еще одну страницу действительно так просто….
Но вам может быть интересно ...
«Можем ли мы связать страницы?»
Ага, мы определенно можем! Нам просто нужно импортировать компонент React, предоставленный Gatsby, потому что помните, что это фреймворк на основе React!
Давайте сделаем это в нашем файле index.js:
import React from "react"
import { Link } from "gatsby"
export default function Home() {
return (
<div>
Hello world!!!
<Link to="/secondpage"> Second page </Link>
</div>
)
}
Теперь сохраните его и вернемся в наш браузер:
Дальнейшие действия:
Вы можете оформить свой новый замечательный сайт Гэтсби, как хотите. Gatsby предоставляет отличную документацию по различным доступным способам стилизации вашей страницы.
Существуют также плагины, которые вы можете использовать, если решите создать более крупный проект, они помогают вам модулировать свой сайт в функциональность, специфичную для конкретного сайта.
Когда вы закончите со всем, вы можете скомпилировать свой сайт Gatsby:
gatsby build
Это подготовит его к развертыванию!
Наслаждаться!
Спасибо, что нашли время прочитать это, пожалуйста, дайте мне знать, если вы нашли это полезным!
