В этой статье я расскажу вам о том, как я полностью обновил свое портфолио с помощью статического генератора JavaScript под названием Gatsby.js и нескольких других библиотек. Если вы подумываете о создании веб-сайта на замечательном React.js, но все же хотите молниеносной скорости, вам обязательно стоит подумать об использовании Gatsby.js. Сам этот блог был построен на Гэтсби.
Мое портфолио: Щелкните здесь.
Исходный код для портфолио: Щелкните здесь
Эта статья не совсем техническая, в ней не так много кода.
Почему я хотел обновить сайт своего портфолио.
Было несколько причин, по которым я хотел изменить и переделать свой веб-сайт личного портфолио:
- Скорость: время загрузки и производительность моего веб-сайта были невероятно, мучительно, совершенно невыносимыми. На загрузку контента ушло много времени. (Вы можете видеть на изображении выше ..)
- Дизайн: моя целевая страница была слишком темной и отображала для меня негативный образ (я понятия не имею, почему я решил, что это хорошо)
- Отзывчивость: мой веб-сайт был отзывчивым, но не на 100%. Он выглядел неплохо в Firefox Desktop / Mobile, Google Chrome Desktop / Mobile, но не работал в Safari.
Мой личный веб-сайт с портфолио был первым передовым проектом, который я предпринял, просто используя HTML / CSS / Javascript. Возможно, именно поэтому он был не на таком высоком уровне, как другие веб-сайты портфолио в сети. Целью было: увеличить скорость и улучшить дизайн.
Gatsby.js - самая лучшая и моя любимая технология в использовании.
Впервые я наткнулся на Gatsby.js два месяца назад, когда хотел завести собственный блог. Исследуя, какие технологии используют люди для создания блогов, я наткнулся на статьи о React.js и Gatsby.js. Поскольку у меня было несколько проектов с React, мне было довольно комфортно использовать эту технологию, но Гэтсби был для меня совершенно новым. Фактически, я не был полностью знаком с концепцией генераторов статических сайтов. Но я решил попробовать себя в этом, потому что для меня это был отпуск, и мне почти нечего было делать.
Работая над своим блогом и портфолио, я ОЧЕНЬ влюбился в Gatsby.js. Это полностью меня купило. Позвольте мне поделиться несколькими причинами, почему.
1. Работает на React.js / GraphQL / Webpack.
Одной из основных причин, по которой меня полностью перекупили, было то, что он был основан на React.js. Мне нравится React, разработка на основе компонентов, управление состоянием и все такое. Gatsby полностью включил React в свой стек, что значительно упростило мне разработку. Привет Gatsby Link, чтобы упростить маршрутизацию страниц.
Для меня GraphQL был технологией, которую слышал раньше, но никогда не использовал. Я потратил некоторое время на изучение основ GraphQL с YouTube (Shoutout Net Ninja для руководства), и это было здорово. Гибкость формирования запросов на стороне клиента, не беспокоясь о реализации на бэкэнде, действительно потрясающая.
И наконец, Webpack. Я люблю и ненавижу отношения с webpack. Мне нравится то, что он делает для меня, но я ненавижу его настраивать. Гэтсби позаботился о конфигурации для меня, что было потрясающе (теперь они делают, как заставить меня полюбить это).
2. Изображение Гэтсби.
Когда я впервые делал свое портфолио, мне было очень трудно сделать свои изображения адаптивными, и мне не нравился тот факт, что оно загружалось так долго. Было очень тревожно видеть пустое белое пространство для изображения. Опять же, Gatsby предлагает отличное решение этой проблемы - Gatsby Image.
С простой строкой запроса GraphQL, например:
query ImageQuery {
allFile {
edges {
node {
childImageSharp {
fluid(maxWidth:2600) {
...GatsbyImageSharpFluid originalName
}
}
}
}
}
}Он будет генерировать набор изображений, который ПОЛНОСТЬЮ реагирует и допускает эффект замедленной загрузки / размытия при загрузке изображения. ЧУДЕСНО. Меня поразило, насколько просто создать полностью отзывчивое изображение с эффектом размытия. Изображение, возвращенное из этого запроса, можно использовать путем рендеринга объекта fluid с помощью компонента Img, предоставленного Gatsby-Image:
<Img fluid={node.childImageSharp.fluid} />
И вуаля! Изображение можно показать сейчас!
3. Плагины Gatsby.
Gatsby предоставляет СОТНИ плагинов для нас, от процессоров Markdown до плагина Google Analytics, вы называете это, они, скорее всего, будут иметь это. Сделать веб-сайты интерактивными и мощными с помощью плагинов было совсем несложно. Создание файлов Sitemap для целей SEO, Robots.txt с использованием шрифтов Google и аналитики, с предоставленными ими плагинами было очень просто.
4. Хостинг на Netlify.
Гэтсби компилирует ВСЕ ваши файлы CSS и JS в папку public как статическую страницу. Поскольку ваше веб-приложение технически является статической страницей, хостинг уже довольно прост, вы можете разместить его где угодно. Моя предыдущая версия портфолио размещалась на Github Pages, но я решил использовать Netlify как вариант.
С Netlify разместить ваш веб-сайт на базе Gatsby - это больше, чем просто. Их бесплатный уровень, которым я сейчас пользуюсь, сам по себе был потрясающим. Для подключения к репозиторию GitHub потребовалось всего несколько щелчков мышью, чтобы развернуть веб-сайт. Он также обеспечивает непрерывное развертывание (потрясающе) за счет автоматической сборки из последней фиксации в репозиторий Github и обслуживания новых статических страниц из этой сборки. Для этого потребовалось всего несколько щелчков мышью и очень простая настройка.
Результаты, достижения.
Как видно из изображения выше, результаты были отличными. Молниеносная скорость, ленивая загрузка изображений и хороший рейтинг SEO.
Конечно, чтобы сайт выглядел лучше, требовалось больше, чем просто Гэтсби. React-Reveal и React-Spring широко использовались для создания анимации на сайте. Это определенно добавило ему пикантности. Материализовать CSS - это тоже то, что я использовал на своем веб-сайте, чтобы помочь мне легко справиться с отзывчивостью веб-сайта. Если бы не все эти технологии, мой веб-сайт не выглядел бы хоть сколько-нибудь близко к тому, как он выглядит сейчас.
Использование Gatsby.js было определенно забавным опытом, и я определенно буду использовать его в своем следующем проекте. Перестроив свой веб-сайт с помощью Gatsby, я смог изучить новую технологию (очевидно), попрактиковаться в навыках React.js, наконец, изучить GraphQL, а также попутно освоил еще несколько библиотек. Кроме того, было интересно узнать, как использовать Netlify, их правило перенаправления, непрерывное развертывание.
Если кто-то хочет создать веб-сайт, попробуйте Gatsby.js. Это действительно потрясающе.
Узнайте больше на learnwars.com!
Первоначально опубликовано на сайте learnwars.com.
