Как использовать свои навыки реагирования со статическим генератором сайта GATSBY.js

Иногда динамическое одностраничное приложение – это накладки. Вам просто нужно получить привлекательную информацию в Интернете. Добро пожаловать обратно в статические сайты. С GATSBY.JS Рамки, вам не нужно оставить свои навыки реагирования позади в погоне за быстрее, лучше, слабее.

Что такое статический сайт и почему вы хотите один?

Статический сайт, в отличие от динамического сайта, это то, что A) не взаимодействует с базой данных, а B) выглядит одинаково для всех. Каждая страница статического сайта существует как отдельный файл.

Если вы работали с React или большими другими интерфейсами, вы узнаете, что это отличается от нашей текущей любимой модели «единой страницы» – вы можете нажать ссылки, но вы всегда остаетесь на одной странице “. Каждый объект реагирования в Интернете оказывается почти полностью внутри приложение Div из очень базовой HTML-страницы. Все внутри DIV генерируется динамически. Часто очень конкретно для пользователя перед компьютером.

Может быть, еще полезно понять некоторые из вещей, которые статический сайт не может сделать:

• Сделайте страницы динамически на основе информации базы данных (отображение информации о пользователе в /user/ ID>, например)
• Создать и использовать логины/аутентификацию пользователя
• Быть уверенным в любом настойчивости данных (Конечно, вы можете использовать файлы cookie, но ваши пользователи всегда свободны для их мусора)

Преимущества

Статические сайты – быстро , поскольку им не нужно говорить с любой базой данных, чтобы получить их информацию. Они также уже отображаются и построены, когда пользователь запрашивает страницу из своего браузера, поэтому он доступен мгновенно (загрузка изображений, конечно же). Весь код, необходимый для запуска вашего сайта, предоставляется браузеру, и он работает на месте.

Статические сайты могут быть принимал просто Отказ Нет, Heroku засыпает, не жует серверы. Само собой разумеется, что это самый дешевый способ получить ваш контент в мир. Большинство будут удовлетворены бесплатными вариантами для простых сайтов.

Статические сайты – Стабильный Отказ Единственный барьер для все больше и больше пользователей загрузки вашего сайта – это сервер хостинга, в котором у вас есть файлы. Не заботятся о нагрузках или обработке баз данных. Он просто отправляет через HTML, CSS и JavaScript файлы, и он может сделать это так же быстро, как позволяет ваш хост.

Недостатки

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

Я не думаю, что блог – хороший кандидат для такового инструмента, потому что это требует слишком много шагов, чтобы пойти от создания для публикации. Если вы использовали что-то вроде WordPress, он будет чувствовать себя как мешок, чтобы заставить вещи жить. Потом опять же, вы контролируете свой контент с передней к спине, и это очень привлекательно для многих людей.

Остальная часть этой статьи будет решена тем, как сделать статический сайт. Всего несколько лет назад, если вы хотели один, вам придется написать все с нуля. Затем потенциально разверните через FTP или тому подобное. Но я здесь, чтобы сказать: вы можете строить статические сайты, используя свои навыки реагирования. Давайте прыгнем.

Мой проект

Причина, по которой я попал в Gatsby.js. Во-первых, я хотел переделать свой портфолио сайта. Я использовал модифицированный шаблон, который я загрузил на мой сайт хостинга через FTP. Это была такая боль в заднице, чтобы обновить, я бы пошел буквально годы, не касаясь его. Я не хотел построить его в реакции, потому что тогда я должен был придать его на Героку. Heroku ставит свои бесплатные ярусные приложения для сна, если никто не использует их – задержка я нахожу неприемлемой. Я знал, что статический сайт будет намного быстрее и никогда не придется спать.

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

Если вы тот человек, который хочет прыгать прямо в код, вы добро пожаловать в github repo Для моего портфолио Отказ

Gatsby.js против next.js.

В ходе исследования этой статьи я нашел много людей, указывающих на Next.js Отказ У него есть возможность Экспорт статического контента , но на сервере чаще он обычно работает (войти в сон Heroku) и обычно используется для людей, которые хотят использовать рендеринг на стороне сервера. Я не могу говорить с ним как инструмент для такого инструмента, но он выглядит аккуратно, и если вам нужно сделать какой-то SSR, вы должны посмотреть.

Для меня различные межветы рекомендуются Gatsby.js. Я мгновенно влюбился, когда я должен работать на своем собственном портфолио.

Почему Гэтсби?

Одним словом: Реагировать Отказ Я уже знаю, как строить вещи в реакции и GATSBY используют этот навык для меня. Но есть больше. Еще больше.

Сообщество

GATSBY имеет верное следующее, а Scads людей разрабатывают библиотеки для использования с рамками. Как написать, есть 545 плагинов для GATSBY Отказ Кроме того, вы можете использовать множество стандартных библиотек React Bienties для создания вашего сайта.

Graphql, apis, а все данные интернет имеет

В совокупность (когда вы, разработчик, построить сайт, а не когда пользователь его посещает), GATSBY может обратиться в Интернет и взять на себя всю информацию, которую вы можете пожелать от того, куда вы хотите получить его. Здесь вы можете получить доступ к любому API, в том числе из которых вы построили. Затем GATSBY складывает эти данные в HTML, он генерирует, и создает страницы на основе этих данных.

GraphQL встроен прямо в пакет сборки, поэтому вы можете использовать инструмент, с которым вы можете быть знакомы. Если вы предпочитаете использовать что-то вроде извлекать (или более широко поддерживается Axios ) Это тоже хорошо. Потому что вы более или менее ориентированные на запись реагируют, вы можете использовать все, что React Packages плавают вашу лодку.

Конечно, потому что нет взаимодействия сервера, когда сайт находится в прямом эфире, GATSBY сбрасывает данные в файлы JSON. GATSBY тянет оттуда для рендеринга.

Встроенная ленивая загрузка изображений

Если вы когда-либо разместили изображения для веб-сайта, вы знаете, как это раздражает, чтобы иметь дело с отображением изображений на разумной скорости. Введите GATSBY-Image Отказ Этот плагин позволяет предварительно загружать ваши изображения и доставлять их в соответствующий размер для браузера, в то время.

Быстро пылающий

GATSBY включает в себя предварительный код и расщепление данных, поэтому ваш сайт взорвется из ворот. Он также предварительно выбирает данные для частей сайта, на которых вы не смотрите. Когда придет время, он готов бросить новую информацию у своих пользователей.

Вне коробки вкусности

GATSBY позволяет легко начать. Во-вторых, построенный на реакцию, моя любимая часть GATSBY – это автоматическая маршрутизация.

Маршрутизация

Есть страницы Папка, и в нем вы размещаете все ссылки на ваш сайт. Таким образом, у вас может быть указанная страница, которую вы будете по имени Конвенции index.js. . Вы также можете иметь О Страница и, может быть, Контакт страница. GATSBY хочет, чтобы ты …| Назовите файлы в вашем страницы папка такая же, как ссылки для вашего сайта .

Поэтому, когда вы делаете О.Ойс и Contact.js Вы будете генерировать маршрутизацию в /о и /контакт автоматически. В этих родительских компонентах вы будете размещать любой код, который вы хотите, включая дополнительные компоненты, которые пошли и будут жить где-то, кроме ваша страницы папка.

Если вы когда-либо настроили React Router, это чувствует себя как чертовы откровение. Там буквально не работает, чтобы сделать вообще. Вы помещаете правильно названные родительские компоненты (вы могли бы назвать их контейнеры в ваших реагированных проектах) в страницы папка. GATSBY делает всю работу для вас.

Связать между страницами, используйте простой Связаться и lt;/link>.

Инструмент

Другая великая вещь о GATSBY – насколько невероятно легко вставать и бежать. Там есть инструмент CLI, конечно, так что это простое дело:

npm install --global gatsby-cli
gatsby new site-name
gatsby develop

GATSBY заботится обо всем, как Create-raction-app Отказ У вас есть горячая перезагрузка из коробки. Когда вы закончили и готовы отправить плохого мальчика в свой хостинг-провайдер, это просто Гэтсби построит И отправьте этот статический контент где угодно.

Стартерские библиотеки

Еще одна великая вещь о сообществе – большое количество Стартерские библиотеки Доступно, чтобы вам не нужно начать каждый проект с квадратного. Если вы знаете, вы хотите блог, или сайт презентации, подобного PowerPoint, или даже то, что поставляется с дизайном, запеченным, GATSBY может быстро и эффективно отправить вам этот путь.

(Убедитесь, что вы выбираете стартер, который основан на версии 2 GATSBY! Я узнал этот один сложный путь: модернизация не было приятным.)

Код

Итак, давайте посмотрим, как выглядит код проекта GATSBY.

Макеты/index.js.

Мы начинаем там, где начинается приложение: наш Компоненты/Layout.js Отказ Вот что мой выглядит, после того как я удаляю код загрузки стартера, мне не особо не нужно или хотите:

import React from 'react'
import '../assets/scss/main.scss'

import Header from '../components/Header'
import Footer from '../components/Footer'

class Template extends React.Component {
  render() {
    return (
      

        

        {this.props.children}
        
      
    )
  }
}

export default Template;

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

(Примечание: GATSBY V1 автоматически схватил код из ваших Layouts/index.js и применил его на все страницы. GATSBY V2 ожидает, что вы управляете своими макетами вручную.)

Нам нужно импортировать нашу таблицу стилей. И посмотри – мы можем использовать Sass! Вам нужно будет добавить Узел-сасс и GATSBY-Plugin-Sass В противном случае напишите свой SASS, импортируйте его в верхнюю часть своего сайта и будьте счастливы.

Страницы/index.js.

Страницы/index.js где наше приложение действительно «начинается».

Вот весь компонент для моего сайта. Я … Ed Texts, чтобы сократить вещи, но иначе я оставил все здесь, чтобы вы могли видеть, что код GATSBY выглядит точно Как код React, потому что это так.

import React from 'react'
import me from '../assets/images/main/me.png'
import Helmet from 'react-helmet'
import Template from '../components/layout'
import Photography from '../components/Photography'
import Miscellaneous from '../components/Miscellaneous'

class IndexPage extends React.Component {
  state = {}

  ChevronLink = () => [...]

  render() {
    const { showMiscellaneous, showPhotography } = this.state

    return (
      
    )
  }
}

export default IndexPage;

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

Получение данных

Самый интересный компонент на моем сайте – Фотография Отказ Опять же, я снял какой-то код и … Ed Другие, чтобы освободить место для важных битов.

import React, { Component } from 'react'
import { StaticQuery, graphql } from 'gatsby'
import Img from 'gatsby-image'
import { CSSTransition } from 'react-transition-group'
import { travelDescriptions } from '../utilities/constants'

class Photography extends Component {
  state = {
    currentImage: this.props.data.Images.edges[0].node,
    imageIndex: 0,
  }

  changeImage = () => [...]

  render() {
    const { currentImage } = this.state
    const imageSizes = currentImage.childImageSharp.sizes
    const imageName = currentImage.name

    return (
      

       

         

           

             
Photography
           
           
             [... photo descriptions ...]
           
         
         

           

             
 this.changeImage(-1)}/>
           
          
 this.changeImage(1)}/>
        
      
    
  
)
  }
}

const query = graphql`
    query imagesQuery {
        Images: allFile(
            sort: {order: ASC, fields: [absolutePath]}
            filter: {relativePath: {regex: "/travel/"}}
        ) {
            edges {
                node {
                    relativePath
                    name
                    childImageSharp {
                        sizes(maxWidth: 1500) {
                            ...GatsbyImageSharpSizes
                        }
                    }
                }
            }
        }
    }
`
export default () =>  }
/>

export default () =>  }/>

GraphQL Data Fetching

Давайте посмотрим на последнюю часть этого компонента. Хотя ваш сайт будет статичным во время выполнения, он может потянуть все виды данных при сборке. Вот где находится наша избавление GraphQL, включена как часть основной библиотеки GATSBY. Потому что я работаю в компоненте, я должен использовать GATSBY StaticQuery , который пройдет результаты моего запроса в This.props.data Отказ

Если бы я сделал этот запрос на Страница Я мог просто бросить мой запрос в код. Это автоматически пропустит результаты к This.props.data Отказ Обратите внимание, что StaticQuery не может принимать реквизиты, но анонимные запросы на страницах могут.

Это то же самое здесь. Если вы получите более сложную структуру данных, вы можете предпочесть создать слой данных, который может пройти вниз данные опоры вместо этого. Здесь нам понадобится запрос GraphQL на странице, чтобы получить данные в реквизитах.

Это всего лишь один пример того, как GATSBY может получить данные из ваших локальных папок. Для получения дополнительной, проверьте ссылку на графику от GATSBY DOCS Отказ Есть несколько инструментов, захватывающих изображения, запеченные вправо в рамки. Больше примеров В документах На этом тоже.

Но здесь мы просто поговорим о том, что я делаю. Я ищу любые файлы в моем Путешествие папка. Тогда ChildimageHarp создаст массив размеров, которые мы передаем в IMG Компонент (от массивно популярных GATSBY-Image плагин). IMG Для нас создадим размытый заполнитель, а также обеспечивает эффективные размеры изображений на основе нашего размера браузера. Довольно аккуратно, верно?

Наконец, не забывайте это изображение ключ . Вы не сопоставляете все, но GATSBY-Image ожидает, что вы скажете, где изображение загружается, поэтому он может сделать это довольно размытым заполнителем.

Бонус: развертывание в NetLify

Еще проще получить ваш код в интернете с NetLify Отказ Эти парни позволяют пропустить шаг сборки и просто загрузить свой контент в Github. NetLify займет ваш код из REPO для доступных онлайн, а базовый уровень бесплатный и включает в себя SSL. Там даже (смешно легко) пошаговое руководство для получения страниц GATSBY вверх и работает Отказ Каждый раз, когда вы совершаете мастеру на GitHub, будет запущена сборка NetLify. Поскольку GATSBY захватывает данные из внутренних и внешних источников в соответствии с временем сборки, вы получите новые данные каждый раз, когда запускается сборка.

Бонус: автоматическое развертывание с IFTTT

В качестве дополнительного шага вы можете рассмотреть возможность создания автоматического развертывания вашего сайта, поэтому вы можете захватить новый контент из ваших внешних источников. Например, можно добавить резюме средней статьи через GATSBY-Source-Medium Плагин (который я могу свидетельствовать, волшебно легко настроен).

NetLify предоставит вам URL для создания почтовых запросов. Когда вы делаете, это будет вызвать повторное построить и развернуть ваш сайт. Вы можете при условии, что вы хотите, используя любой инструмент, который вам нравится.

Я могу чемпион IFTTT , услуга, которая сделает ваш день, если вы никогда не слышали об этом раньше. Если это Тогда это создает веб-появляющиеся для вас. Таким образом, вы можете состоять постройку, скажем, публикуя новую среднюю статью. IFTTT будет обрабатывать слушателя и действие. Если вы публикуете в Medium, он отправит этот запрос на пост. Ваш сайт GATSBY натянет новый контент через его запрос GraphQL в Medium. Ваш сайт будет воспроизведен с вашим новым резюме статьи.

Иди, друзья.

использованная литература

• Определение статического сайта
• Что такое статический генератор сайта?
• GATSBY против рядом
• GATSBY DOCS.
• Большое благодаря Maribel Duran для Создание такого отличного урока Отказ Будьте осторожны, хотя: она ссылается на стартер GATSBY V1. Вы будете ненавидеть жизнь, если вы его используете, как модернизация от GATSBY V1 до V2 – огромная пита. Я настоятельно рекомендую вам найти что-то встроенное в V2, чтобы начать.

Оригинал: “https://www.freecodecamp.org/news/how-to-leverage-your-react-skills-with-static-site-generator-gatsby-js-81843e928606/”