Как я быстро сделал свой веб-сайт портфолио с помощью Гэтсби

kak ya bystro sdelal svoj veb sajt portfolio s pomoshhyu getsbi

Если вы думаете создать статический сайт с помощью React и хотите, чтобы он работал так же быстро, как гепард, вам следует рассмотреть возможность использования GatsbyJS.

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

drwxddrKcWMNLOQ0Vc0Th9-DH2BAtln6DfzA
После обновления моего веб-сайта с помощью Gatsby и React?

Проблемы с производительностью оригинального веб-сайта

Я хотел оптимизировать изображение на сайте своего портфолио, который был одним из моих первых проектов FreeCodeCamp Frontend Development.

ZAKgKErGeMpDsVyLQi9MUYZeV6nchQeK95Z3
К помощи Гэтсби -_-

Ой! Оценку оптимизации Google 33/100 было больно видеть. Да, мне нужна была помощь от богов оптимизации. Мой веб-сайт содержал не менее 17 скриншотов проекта. Я не хотел сжимать каждое изображение, генерировать несколько размеров и разрешения каждого изображения и лениво загружать их.

Когда я впервые создал этот веб-сайт, Bootstrap 3 img-responsive class позаботился о масштабировании изображений, чтобы они соответствовали разным размерам экрана, но я не думал о том, что он все еще загружал некоторые мои снимки экрана размером около 1400 x 860 пикселей на мобильных устройствах!

Мой результат также был низким, поскольку я не минимизировал свой CSS или не настроил кэширование браузера для него, а также не асинхронно загружал внешние ресурсы CSS.

Гетсби во спасение

Я действительно хотел перестроить этот проект с помощью React. Я мог бы использовать приложение create-react-app, которое предоставляет готовый сценарий сборки и сервер разработки, но это все равно не позаботилось о долгой задаче обрезать изображения разных размеров для всех моих изображений.

К счастью, я слушал эпизод Syntax «Почему генераторы статических сайтов отличные», и они говорили о нескольких генераторах статических сайтов из списка StaticGen.com. Если вы не слышали, что производят генераторы статических сайтов, они превращают ваш сайт в каталог с одним HTML-файлом и статическими активами. Не требуется код базы данных или сервера.

Гетсби покорил меня благодаря сходству с программой create-react-app, которая включает горячую перезагрузку, легкую настройку среды разработчика и сценарий сборки. Gatsby идет дальше, предлагая рендеринг на стороне сервера, разумную загрузку изображений и преданность производительности.

Поскольку Gatsby построен на стеке React, GraphQL и Webpack, мы можем записать наше содержимое как компоненты React! Победа! Gatsby заботится о воспроизведении при составлении в DOM как статический HTML, CSS и JavaScript.

Компонент изображения Гетсби – BAE

А теперь прежде чем я действительно хотел с вами поделиться. Гетсби-образ! Gatsby-image — это компонент React, разработанный для работы с запросами Gatsby GraphQL, чтобы полностью оптимизировать загрузку изображений для сайтов.

Подход заключается в использовании запросов GraphQL, чтобы получить изображение оптимального размера, а затем отобразить их с помощью компонента gatsby-image.

Как я использовал этот компонент для автоматического создания 3 миниатюр для каждого из 17 изображений проекта? Магия! Не очень, но такое чувство!

В своем файле src/pages/index.js я спросил все изображения проекта и дал ему псевдоним ProjectImgs. Поскольку запрашиваемые данные теперь доступны через объект данных в качестве сопротивления, я смог передать projectImgData data (который является списком узлов с изображениями моего проекта) к my <Projects /> компонент:

//imports
const HomePage = ({ data }) => {
  const siteTitle = data.site.siteMetadata.title;
  console.log(data.ProjectImgs); 
  const { edges: projectImgData } = data.ProjectImgs;
  const { edges: iconImgData } = data.iconImgs;
  return (
    <div>
     <Helmet
      title={siteTitle}
      link={[{ rel: "icon", type: "image/png", href: `${favicon}`}]}
     />
     <Cover coverImg={data.coverImg} />
     <div className="container-fluid main">
      <Navigation />
      <AboutMe profileImg={data.profileImg} iconImgs={iconImgData} 
      />                
     <Projects projectImgs={projectImgData} />
     <Contacts />
     <Footer />
     </div>
    </div>
  );
};
export const query = graphql`
  query allImgsQuery {
    //additional queries
    ...
    ProjectImgs: allFile(
      sort: { order: ASC, fields: [absolutePath] }
      filter: { relativePath: { regex: "/projects/.*.png/" } }
    ) {
      edges {
        node {
          relativePath
          name
          childImageSharp {
            sizes(maxWidth: 320) {
              ...GatsbyImageSharpSizes
            }
          }
        }
      }
    }
//additional queries
...
  }
`;

Примечание. У меня возникли проблемы с тем, чтобы мои запросы graphQL работали, и мне пришлось немного порыться, чтобы понять, как спрашивать несколько изображений в папке. Мне помог просмотр других сайтов портфолио, созданных с помощью Гэтсби.

Используя консоль, мы можем увидеть, что data.ProjectImgs возвращается, чтобы дать вам лучшее представление о том, что я получаю по запросу и что я передаю своему компоненту Projects:

Console.log(data.ProjectImgs) возвращает массив ребер:

{edges: Array(17)}
edges
:
(17) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
__proto__
:
Object{edges: Array(17)}

Расширение одного из ребер показывает объект узла, содержащий a childImageSharp собственность. Он содержит объект sizes, содержащий источники эскизов изображения. Этот объект размеров – это то, что мы в конечном счете хотим передать нашим изображениям Гэтсби. <Img /> компонент.

Расширение края для отображения информации в узле:

{edges: Array(17)}
 edges: Array(17)
 0:
  node:
   childImageSharp: {sizes: {…}}
   name: "CamperLeaderboard"
   relativePath:"projects/CamperLeaderboard.png"
   __proto__:Object
   __proto__:Object
 1:{node: {…}}
//more nodes
...

В моем <Projects /> компонент, я получаю список узлов с изображениями проекта как опорный элемент и для каждого проекта я извлекаю файл childImageSharp.sizes объект (переименован в Размеры изображений), и передайте его в изображение Gatsby <Img /> компонент:

import React, { Component } from "react";
import Img from "gatsby-image";
//more imports
...
class Projects extends Component {
  constructor(props) {
    super(props);
  this.state = {
      selectedType: "front-end"
   };
  this.onSelectChange = this.onSelectChange.bind(this);
  }
 
  onSelectChange(e) {
    this.setState({ selectedType: e.target.value });
 }
render() {
    const projectImgs = this.props.projectImgs;
    const { selectedType } = this.state;
    return (
      <section id="projects" className="section projects">
        <h2 className="text-center">PROJECTS</h2>
        <div className="section-content">
          <div className="subheader">
            <FormGroup controlId="formControlsSelect">
             ...
            </FormGroup>
          </div>
          <div className="project-list">
            {projectList.map(project => {
              const isSelectedType = selectedType === project.type;
              const singleCardClass = classNames("single-card", {
                hide: !isSelectedType
               });
              const image = projectImgs.find(n => {
                return n.node.relativePath === 
                       `projects/${project.img}`;       
              });
              const imageSizes = image.node.childImageSharp.sizes;
              return (
                <a
                  href={project.url}
                  key={project.url}
                  className={singleCardClass}
                  target="_blank"
                >
                  <div className="card-img">
                    <Img
                      title={project.name}
                      alt="Screenshot of Project"
                      sizes={imageSizes}
                      className="card-img_src center-block"
                    />
                  </div>
                  <div className="blue-divider" />
                  <div className="card-info">
                    <h4 className="card-name">{project.name}</h4>
                    <p>{project.description}</p>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>
    );
  }
}
export default Projects;

И вот конечный результат:

01dWYR9uwENmj6xQcoA-5uhSqdXywSDUMCyH
Пример отложенной загрузки и эффекта размытия с использованием изображения Гетсби в медленной сети 3G

Это! The <Img /> компонент заботится об использовании правильного размера изображения, создании эффектов размытия и ленивой загрузке изображений моих проектов, поскольку они расположены ниже на экране. Приведенный выше запрос был несколько сложнее запроса отдельного изображения.

Если вы новичок в GraphQL, ниже представлено несколько ресурсов, которые лучше объясняют, как использовать запросы GraphQL и компонент gatsby-image:

Хостинг для Netlify был легок

Поскольку Gatsby генерирует статические файлы, вы можете использовать любой хостинг-провайдер. Я решил сменить своего хостинг-провайдера с Github Pages на Netlify. Я слышал о том, как легко развернуть веб-сайт на Netlify, и они не лгали. Их бесплатный уровень предоставляет отличные функции, облегчающие процесс развертывания и обеспечения безопасности веб-сайта. Он обеспечивает HTTPS одним щелчком, глобальную CDN, непрерывное развертывание, и список можно продолжать.

Процесс настройки был настолько прост. Я вошел в Netlify, нажал кнопку «Новый сайт Git» на своей информационной панели и выбрал репозиторий Git для этого проекта. Я настроил сайт для развертывания из главного и нажал «Развернуть сайт». Это было! Netlify заботится о процессе сборки и публикует его в Интернете.

Как я уже упоминал, Netlify предлагает непрерывное развертывание, поэтому теперь, когда я вношу изменения в свою главную ветку GitHub, это автоматически запускает новую сборку на Netlify. После завершения сборки мои изменения будут опубликованы в Интернете.

sslrobbMI6Gv3V0fhuG0AQyX6wpBjKY9Fmqy
В настройках развертывания установлена ​​автоматическая публикация

Будущее выглядит ярким

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

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

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

Давайте дружить в Twitter. Счастливого кодирования 🙂

Добавить комментарий

Ваш адрес email не будет опубликован.