Цели:
В этой статье я нацелен на достижение следующих четырех (4) целей за 24 шага. Они есть:
- Преобразование базового шаблона веб-сайта Bootstrap в веб-сайт на базе Gatsby
- При необходимости разработать кастомный компонент
- Разверните веб-сайт Gatsby на Netlify CMS
- Проведение обзора скорости загрузки страниц в Google
Так что же такое Гэтсби? Чтобы понять, нам нужно немного понять современный стек веб-разработки.
Первоначально, когда Интернет только появился, все веб-сайты были статическими и состояли из статических файлов HTML, CSS с изображениями и ссылками. Затем появилась тенденция создания динамических веб-сайтов (например, клиент / сервер), где сценарий (например, PHP, ASP и т. Д.) Будет считывать данные из базы данных и на лету генерировать HTML. По той же тенденции возникла концепция CMS (систем управления контентом), таких как Wordpress, Drupal, Sitecore и так далее. Современная тенденция веб-разработки заключается в использовании JAMStack, где сайты разрабатываются с использованием Javascript для извлечения данных с использованием многократно используемых API-интерфейсов, где контент предварительно создается с помощью языка разметки. Эти сайты компилируются и встраиваются в статические страницы с использованием любых генераторов статических сайтов и развертываются на статических веб-хостах, таких как Netlify, Amazon S3, страницы Github и т. Д.
Гэтсби
Gatsby - это генератор статических сайтов, который разделяет данные, разработку и редактирование контента. Gatsby - это плагин, богатый различными источниками данных, где разработчики используют GraphQL для получения данных и React.JS для представления этих данных. Создатели контента могут создавать / редактировать контент в любой автономной CMS, такой как Contentful, Ghost CMS или даже Wordpress. Сайт состоит из нескольких скомпилированных статических файлов, которые можно развернуть на любом статическом веб-хосте Netlify, Amazon и т. Д.
Прежде чем мы пройдем по шагам, убедитесь, что вы установили:
- Узел и NPM: посетите страницу загрузки node.js и установите узел и npm. Выполните следующую команду в командной строке, чтобы убедиться, что у вас установлены Node и NPM:
узел -v && npm -v
- Git: посетите Github и зарегистрируйте бесплатную личную учетную запись. Также скачайте и установите Git на свой локальный компьютер.
- Интерфейс командной строки Gatsby: установите инструмент командной строки Gatsby с помощью следующей команды
npm install - глобальный gatsby-cli
Итак, теперь давайте начнем с шагов:
Шаг 1
Создайте новый веб-сайт Gatsby по умолчанию в папке «Скоро»
Гэтсби скоро приедет
Это должно создать новый базовый веб-сайт Gatsby и установить модули npm. Если установка прошла успешно, все, что вам нужно сделать, это запустить следующую команду в терминале для обслуживания веб-сайта по умолчанию.
Гэтсби разработать
Теперь откройте браузер и перейдите по адресу http: // localhost: 8000, чтобы посетить основной веб-сайт Gatsby.
Примечание. Я использовал свой компьютер с Windows для этого проекта. В моем случае я получил следующую ошибку. Если вы получите то же самое, есть способ обойтись.
Итак, из ошибки вы можете видеть, что это ошибка разрешения, которая произошла при попытке установить пакеты npm.
Итак, я сделал следующие шаги, чтобы решить проблему:
- Закройте окно терминала
- Откройте новое окно терминала от имени администратора (т. Е. «Запуск от имени администратора»).
- Перейдите в папку вашего проекта (в моем случае «скоро»)
- Затем установите пакет npm с помощью команды
npm install
- По завершении запустите gatsby develop, чтобы запустить сайт Gatsby в режиме разработки.
- Откройте браузер и перейдите по адресу http: // localhost: 8000 », чтобы просмотреть исходный сайт Гэтсби (тот же сайт, что и фиолетовый выше).
Структура сайта Гэтсби
Теперь перейдите в эту папку (т.е. скоро) или откройте ее в любом редакторе (я использовал Visual Studio Code)
Там довольно много папок. Но мы сконцентрируемся на папке «src», над которой мы будем работать больше. Под исходным кодом есть три папки:
- Компоненты: Содержит все пользовательские компоненты, созданные для этого сайта.
- Изображения: содержит все изображения.
- Страницы: здесь хранятся все страницы этого веб-сайта. Компилятор Gatsby будет искать файлы JS внутри этой папки и компилировать их в доступные ссылки на страницы.
На странице /pages/index.js вы можете увидеть компонент-оболочку ‹Layout /›, который обертывает содержимое этой страницы.
Если вы проанализируете page-2.js, вы увидите, что тот же компонент ‹Layout /› оборачивает содержимое page2 внутрь. Просто имейте это в виду, и мы поговорим об этом позже.
Большой. И что теперь? Что ж, сейчас начинается основная разработка, которая заключается в преобразовании веб-сайта Bootstrap в веб-сайт на базе Gatsby. Выполните следующие шаги:
Шаг 2
Я выбрал простую тему Bootstrap с сайта startbootstrap.com. Скачайте исходный код темы Скоро в продаже.
После распаковки папка выглядит следующим образом:
Шаг 3
Теперь откройте папку сайта Gatsby (то есть папку скоро) и создайте новую папку с именем dist в / src на том же уровне, что и папка components.
Шаг -4
Скопируйте следующие папки из папки Bootstrap в папку / src / dist вашего веб-сайта Gatsby:
- css
- img
- mp4
- продавец
Шаг -5 (интеграция CSS)
Давайте откроем файл index.html темы Bootstrap, чтобы увидеть, какие CSS там интегрированы:
Вы увидите три типа CSS:
1. Загрузочный CSS
2. Google Font CSS
3. Пользовательский CSS
Откройте файл /comingsoon/src/components/layout.css, удалите все и добавьте следующие две строки:
@Import ‘../dist/vendor/bootstrap/css/bootstrap.min.css’;
@import ‘../dist/css/coming-soon.css’;
Что будет включать в проект Bootstrap CSS и Custom CSS.
Теперь, чтобы добавить шрифт Google, мы можем использовать готовый плагин Gatsby «gatsby-plugin-google-fonts».
npm install –save gatsby-plugin-google-fonts
для установки плагина.
Откройте файл gatsby-config.js в корневой папке вашего проекта (т.е. вне папки src) и добавьте следующий элемент в массив плагинов:
{
resolve: `gatsby-plugin-google-fonts`,
параметры: {
шрифты: [
` Source Sans Pro \: 200,200i, 300,300i, 400,400i, 600,600i, 700,700i, 900,900i`,
`Merriweather \: 300,300i, 400,400i, 700,700i, 900,900i`
]
}
},
Это завершает интеграцию CSS для этого сайта.
Шаг -6
Теперь нам нужно поработать над компонентом оболочки ‹Layout /›
1. Откройте /comingsoon/src/components/layout.js
2. Удалите коды, связанные с компонентами заголовка (например, строки 5 и 21).
3. Удалите встроенный CSS (строки 22–29)
4. Удалите нижний колонтитул (строки 31–35)
Теперь оболочка с Bootstrap CSS готова, и мы можем начать работу над домашней страницей шаблона «Скоро в продаже».
Шаг -7 (Интеграция контента)
Откройте /src/pages/index.js и удалите текущее содержимое (т.е. строки 11–17, все, что находится между тегами макета, кроме тега SEO).
Скопируйте все содержимое между тегами ‹body› из index.html шаблона Bootstrap. Исключите теги ‹script›.
Я думаю, у вас довольно много ошибок. Пока не обращайте на них внимания. Мы скоро их решим. Теперь в коде index.js
1. Замените все «class =» на «className =».
2. Добавьте / ›для любого отдельного элемента HTML-тегов, таких как ввод, источник и т. Д.
3. Создайте переменную const для связанных изображений и видео (т.е. все, что связано с помощью src, должно ссылаться на переменную).
Итак, мы создали ссылку на наш файл bg.mp4:
const bgVideo = require (‘../ dist / mp4 / bg.mp4’)
и обновил источник, как показано ниже:
‹Video playsinline =” playsinline ”autoplay =” autoplay ”muted =” muted ”loop =” loop ”›
‹source src = {bgVideo} type =» video / mp4 / ›
‹/video›
В этом шаблоне нет изображения. Таким образом, больше не нужно создавать ссылку.
Шаг -8
Теперь мы видим значки Twitter, Facebook и Instagram, которые нам нужно интегрировать. Мы собираемся использовать для этого модуль npm «react-icons». Находясь внутри папки «пришествие скоро», выполните
npm install react-icons –save
для установки модуля react-icons.
Посетите https://react-icons.netlify.com/#/icons/fa, чтобы найти свой значок.
Нам нужно добавить следующую строку для импорта иконок для Twitter, Facebook и Instagram:
импортировать {FaTwitter, FaFacebookF, FaInstagram} из «react-icons / fa»
затем замените
‹i className =” fab fa-twitter ”› ‹/i› С ‹FaTwitter /›
Проделайте то же самое с двумя другими значками.
Шаг -9
Запустите gatsby develop, чтобы скомпилировать сайт в режиме разработки.
Посетите http: // localhost: 8000, чтобы увидеть, как выглядит сайт.
Выглядит идеально, за исключением того, что синяя часть не имеет стопроцентной высоты.
Я добавил следующее исправление CSS в layout.css, чтобы решить эту проблему.
#___ gatsby, # bodycontent, # ___ gatsby ›div {
height: 100%;
width: 100%;
}
.masthead {
height: 100%;
min-height: 0;
width: 40,5rem;
padding-bottom: 0;
}
Теперь выглядит идеально.
Шаг -10 (Раздел информационного бюллетеня)
Теперь нам нужно поработать над разделом рассылки.
Создайте новый файл newsletter.js в папке / src / components, в котором будет храниться код для нашего компонента информационного бюллетеня.
Шаг -11
Теперь в файле index.js добавьте компонент Newsletter.
импортировать информационный бюллетень из ‘../components/newsletter’
и замените код рассылки
‹Div className =” input-group input-group-newsletter ”›
‹input type =” email ”className =” form-control ”placeholder =” Enter email… ”aria-label =” Enter email… ”aria -describedby = ”basic-addon” / ›‹ div className = ”input-group-append” ›
‹ button className = ”btn btn-secondary” type = ”button” ›Уведомить меня! ‹/button› < br /> ‹/div›
‹/div›
С участием
Я использую MailChimp в качестве платформы для рассылки новостей. Таким образом, этот компонент должен добавить адрес электронной почты в список MailChimp по моему выбору. К счастью, у Гэтсби есть готовый плагин для этого. Это «gatsby-plugin-mailchimp».
npm install - сохранить gatsby-plugin-mailchimp
для установки плагина.
Теперь добавьте плагин в файл gatsby-config.js, как показано ниже:
{
resolve: ‘gatsby-plugin-mailchimp’,
параметры: {
конечная точка: ‘’,
},
},
Теперь нам нужно добавить URL-адрес конечной точки моего списка.
Проверьте URL-адрес https://www.gatsbyjs.org/packages/gatsby-plugin-mailchimp/, чтобы узнать, как получить конечную точку списка MailChimp. Это будет что-то вроде (возьми свой):
https://example.us10.list-manage.com/subscribe/post?u=b9ef2fdd3…
Шаг -12
Запустите gatsby develop и протестируйте подписку на информационный бюллетень. В соответствии с вашей подпиской на MailChimp вы должны иметь возможность получать электронные письма.
Развертывание в Netlify
Перед тем, как приступить к этим шагам, убедитесь, что вы создали свою учетную запись Github.
Шаг -13
Посетите https://github.com/muntasirjoarder/gatsby-comingsoon-bootstrap
Шаг -14
Нажмите кнопку «Развернуть в Netlify».
Шаг -15
Теперь подключитесь к своей учетной записи Github
Шаг -16
Дайте ему имя репозитория, которое вы предпочитаете. Вы можете оставить его таким же. Теперь сохраните и разверните.
Шаг -17
Вы увидите «Выполняется развертывание сайта». Вы увидите «Ошибка развертывания сайта». Не волнуйся. Это потому, что нам нужно определить некоторые переменные среды в Netlify, а затем повторно развернуть их.
Шаг -18
Перейдите в «Настройки сайта» «Сборка и развертывание» и найдите «Переменные среды сборки». Добавьте следующие переменные (с вашей информацией)
Шаг -19
Теперь перейдите в «Обзор»
Шаг -20
Нажмите «Ошибка развертывания сайта».
Шаг -21
Нажмите на главную ГОЛОВУ, которая вышла из строя последней.
Шаг -21
Нажмите «Очистить кеш и развернуть».
Шаг -22
Через некоторое время вы увидите, что ваш сайт работает. Теперь щелкните URL-адрес, чтобы получить доступ к статическому сайту Gatsby.
Шаг -23
И ваш сайт доступен по ссылке, созданной Netlify. Вы можете изменить его на удобочитаемое имя. Кроме того, вы можете указать свой собственный домен на этот веб-сайт Netlify. На этом этапе вы преобразовали свою тему Bootstrap в веб-сайт Gatsby.
Шаг -24
Теперь перейдите на страницу Google Page Speed Insight и введите адрес своего веб-сайта, чтобы проверить результат. Я обнаружил, что для Desktop я набрал 100/100, даже ничего не делая. Это оптимизация "из коробки" от Гэтсби.
В настоящий момент ваш веб-сайт Netlify развернут как «Непрерывное развертывание» и указывает на ваш репозиторий Github.
Любое изменение кода в вашем репозитории Git приведет к автоматической сборке и развертыванию веб-сайта Netlify. Отлично, не правда ли?
На сегодня моя статья заканчивается, а URL-адрес моего сайта:
Https://ledgerchain.netlify.com/
У вас будет что-то еще.
Теперь вы можете делать несколько вещей:
- Изменить URL: перейдите в раздел Сведения о сайте → Изменить имя сайта и попробуйте указать свое имя. Если имя не занято, вы можете это получить. Получил https://ledgerchain.netlify.com. Не стесняйтесь посетить мой список рассылки и подписаться на него. Я вернусь к вам с интересными статьями и предложениями.
- Добавить собственный домен: я не обсуждаю это сегодня.
- Добавьте карту сайта, посещение офлайн-страницы, добавление схемы и т. Д.
- Вы также можете создать несколько страниц на своем сайте.
Я перенес свой личный сайт https://muntasirjoarder.net/ в Gatsby, что дало мне огромный прирост скорости.
Сегодня до этого. Я планирую написать более подробные статьи о разработке веб-приложений в Gatsby. Так что следите за обновлениями.
