Создание сайта блога Гэтсби

Создание сайта блога Гэтсби

Привет и добро пожаловать в первый пост в моей новой серии статей о том, как создать блог о Гэтсби!🎉 Я пишу посты в блог уже более года и недавно принял решение добавить их на свой личный сайт-портфолио. Это решение проистекает из нескольких разных причин, но главная причина в том, что я рассматриваю свои сообщения в блоге как продолжение себя и своих мыслей. С моим портфолио, чтобы показать, кто я как личность, было не только правильно, но и необходимо добавить мои сообщения в блоге на мой сайт.

В этой серии мы будем использовать Gatsby в качестве платформы, GraphQL в качестве уровня данных и Netlify в качестве конвейера CI/CD. Мы расскажем обо всем, что вам нужно знать, чтобы запустить и запустить свой первый блог-сайт, включая базовое понимание того, как работают сайты Gatsby, как использовать многочисленные плагины Gatsby и включить GraphQL в качестве уровня данных. Эти решения помогут создать полнофункциональное, оптимизированное решение без базы данных, чтобы представить вашу работу миллионам.

Зачем использовать Гэтсби?

Хотя существует множество способов создать и развернуть свой собственный сайт, я хотел показать вам путь, который я выбрал для создания своего блога. Я решил использовать Гэтсби для этого сайта по разным причинам. Поскольку я хорошо познакомился с библиотекой React и хотел узнать больше о GraphQL, Gatsby был для меня легким выбором. Он объединяет эти два инструмента, чтобы помочь вам создавать быстрые и безопасные веб-сайты, где интеграция различного контента, API и сервисов помогает создать очень мощный веб-интерфейс. Они также имеют улучшенную безопасность, поскольку статически сгенерированные сайты имеют меньше уязвимостей, чем традиционные веб-сайты. Если вы хотите узнать больше о Gatsby, прежде чем продолжить, не стесняйтесь проверить их страницу Почему Gatsby для получения более подробной информации о мощности и функциональности этого фреймворка.

Все функции, предоставляемые Gatsby, делают его идеальной основой для чего-то вроде блога. В качестве генератора статических сайтов (SSG) Gatsby использует API-интерфейсы рендеринга на стороне сервера (SSR) для создания статического HTML при создании вашего сайта, а не по запросу пользователя. Это дает вам преимущества SEO и социального обмена SSR, а также скорость и безопасность SSG. Gatsby поможет создать молниеносное прогрессивное веб-приложение (PWA) прямо из коробки, предоставив вам сайт, который можно сохранить на мобильном устройстве пользователя для просмотра в автономном режиме, со страницами, загружаемыми за миллисекунды, и невероятно плавными переходами. .

Чтобы создать наш сайт, мы будем использовать интерфейс командной строки Gatsby (CLI), чтобы начать работу, а затем всего за пару шагов после этого развернуть ваш сайт в Netlify. Однако, прежде чем мы начнем, есть пара моментов, которые необходимо решить. Чтобы этот пост оставался актуальным, предполагается, что вы имеете базовое представление об основах веб-разработки. Сюда входят HTML, CSS, JavaScript, командная строка и React. Я также предполагаю, что у вас установлены Node.js (v14.15 или новее), Git, Gatsby CLI и Visual Studio Code, которые готовы к работе на вашем локальном компьютере. Если вы не уверены в какой-либо из этих тем, я бы порекомендовал пройти руководство Gatsby, чтобы Настроить среду разработки. Там есть отличная информация, чтобы убедиться, что вы готовы приступить к созданию своего сайта Gatsby. После этого ниже приведены шаги, которые мы выполним, чтобы все это произошло:

1. Создание сайта Гэтсби
2. Запуск локально
3. Настройка GitHub
4. Развертывание в Netlify

Создание сайта Гэтсби

Чтобы создать базовый шаблон для вашего сайта Gatsby, вам нужно открыть терминал и ввести команду gatsby new в CLI Gatsby. Это вызовет интерактивную подсказку, задавая вам вопросы о сайте, который вы пытаетесь создать.

Если у вас возникли проблемы с интерфейсом командной строки Gatsby, вы также можете создать сайт, запустив npm init gatsby из интерфейса командной строки. Перед созданием сайта необходимо ответить на несколько вопросов. Ваши ответы на эти вопросы — ваш выбор, но я предоставлю некоторые сведения о возможных ответах на основе моего выбора.

Как бы вы хотели назвать свой сайт?

✔ · Личный сайт

Как бы вы хотели назвать папку, в которой будет создан ваш сайт?

✔ личный сайт

Вы будете использовать JavaScript или TypeScript?

✔ JavaScript

Будете ли вы использовать CMS?

✔ Нет (или добавлю позже)

Хотите установить стайлинг-систему?

✔ Нет (или добавлю позже)

Хотите установить дополнительные функции с другими плагинами?

✔ Добавляйте адаптивные изображения

✔ Добавить автоматическую карту сайта

✔ Создать файл манифеста

✔ Добавить поддержку Markdown (без MDX)

Выбранные параметры помогут установить дополнительные функции и плагины во время создания вашего сайта, избегая необходимости делать это позже. Однако для этого сайта понадобятся только те четыре дополнительные функции из последнего вопроса. Это обновит ваш файл gatsby-config.js шаблонными параметрами для каждого плагина, чтобы вы могли начать работу.

Хотя у вас может возникнуть соблазн выбрать сценарий отслеживания Google Analytics, я бы не рекомендовал этого делать. Этот выбор установит плагин gatsby-plugin-google-analytics, который Гэтсби на самом деле не рекомендует устанавливать, поскольку он использует analytics.js, устаревшую систему тегов Google. Вместо этого вам следует установить gatsby-plugin-google-gtag, который использует глобальный тег сайта (gtag.js) для объединения нескольких систем тегов Google и замены старых, таких как analytics.js. Мы расскажем об установке и внедрении этого плагина в следующем посте в блоге Улучшение SEO, поэтому сейчас мы можем не беспокоиться об этом.

Выбор добавления адаптивных изображений, карта сайта, поддержка Markdown и создание файла манифеста — все это очень ценные элементы, которые можно добавить на ваш сайт во время создания. Хотя это можно сделать в любой момент, добавление их сейчас просто помогает отметить еще пару пунктов из списка дел. Например, при выборе варианта Добавить адаптивные изображения будут установлены gatsby-plugin-image, gatsby-plugin-sharp, gatsby-source-filesystem и gatsby-transformer-sharp, а также добавлены их в ваш gatsby. -config.js файл. Он возьмет на себя сложную часть создания изображений в различных форматах и ​​размерах. Отсюда все, что вам нужно будет сделать, это импортировать и использовать компоненты StaticImage и/или DynamicImage на ваших страницах, а Gatsby сделает все остальное. Другие варианты, выбранные вами при создании сайта, будут следовать тому же шаблону. Они установят необходимые пакеты и обновят для вас файл gatsby-config.js, чтобы вы могли начать использовать их с самого начала. Как это круто?!

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

- Добавьте адаптивные изображения:

• гэтсби-плагин-изображение
• Гэтсби-плагин-острый
• gatsby-исходная-файловая система
• Гэтсби-Трансформер-Шарп

- Добавить автоматическую карту сайта:

• Гэтсби-плагин-карта сайта

- Создайте файл манифеста:

• Гэтсби-плагин-манифест

- Добавить поддержку Markdown (без MDX):

• Гэтсби-трансформер-замечание

После того, как вся необходимая информация введена, последняя подсказка спрашивает: «Сделаем ли мы это?». Все, что от вас осталось, это ввести «Да» или «Y», и ваш новый сайт Gatsby будет автоматически сгенерирован CLI. В зависимости от вашего компьютера и скорости интернета время завершения этого процесса будет варьироваться. Вы узнаете, что создание сайта завершено, когда увидите следующее сообщение:

Вот и все! Теперь вы гордый владелец совершенно нового сайта Gatsby, на котором можно разместить все, что душе угодно. Следующий шаг — запустить его локально и посмотреть, как он выглядит!

Запуск локально

Теперь, когда у вас есть код для вашего сайта, мы можем запустить его локально, чтобы просмотреть его в вашем любимом браузере. Чтобы запустить его, вы будете использовать терминал для настройки локального сервера разработки. Когда этот сервер разработки запущен, вы сможете использовать свой веб-браузер для просмотра и взаимодействия с локальной копией вашего сайта. Это очень полезный инструмент, позволяющий вам протестировать свой код и убедиться, что он работает должным образом, прежде чем публиковать его новую версию в Интернете.

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

личный веб-сайт cd

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

Гэтсби разрабатывает

Если вам не удалось установить интерфейс командной строки Gatsby или вы предпочитаете запускать сервер без него, вместо этого вы можете использовать следующую команду, чтобы запустить свой сайт:

npm запустить разработку

Как только Gatsby сможет выполнить необходимые шаги для запуска вашего сервера, терминал должен отобразить следующее сообщение:

Теперь вы можете открыть свой любимый веб-браузер и просмотреть свой новый сайт Gatsby, перейдя по адресу http://localhost:8000.

Вы можете посетить этот сайт, перейдя по адресу, пока работает ваш сервер разработки. Если вы хотите выключить сервер, все, что вам нужно сделать, это вернуться к своему терминалу, удерживать нажатой клавишу управления и нажать «C» (ctrl-c). Если вы хотите снова запустить свой сервер, все, что вам нужно сделать, это запустить gatsby development в терминале!

Это все, что нужно для локального запуска вашего сайта, но что, если вам нужно выполнить некоторые работы по разработке на компьютере, отличном от того, который вы используете в настоящее время? Именно здесь инструменты управления исходным кодом (SCM), такие как GitHub, невероятно полезны для работы с самого начала.

Настройка GitHub

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

Если у вас еще нет учетной записи GitHub, вы можете перейти на github.com и создать свою учетную запись, нажав кнопку Зарегистрироваться в правом верхнем углу. После входа в систему вам нужно будет создать репозиторий для вашего нового сайта Gatsby. Это можно сделать, щелкнув значок + в правом верхнем углу панели навигации и выбрав Новый репозиторий.

При создании репозитория обязательно дайте ему короткое, но запоминающееся имя. Обычно я использую то же имя, которое указал при запуске команды gatsby new в терминале. Я также рекомендую добавить описание для вашего веб-сайта, но это необязательно. Что касается того, сделать репозиторий общедоступным или частным, этот выбор полностью зависит от вас. Это никак не повлияет на развертывание вашего реального сайта и разрешение его просмотра другим, но выбор общедоступного позволяет любому пойти и посмотреть фактический код вашего сайта. Последний раздел содержит параметры инициализации. Поскольку Gatsby уже включил файлы README.md и .gitignore в ваш репозиторий при создании сайта, вы можете оставить эти два параметра неотмеченными. Выбор лицензии также зависит от вас, но для целей этого поста я решил оставить ее неотмеченной.

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

Просто убедитесь, что вы используете свое фактическое имя пользователя и имя, которое вы дали своему репозиторию, при запуске команды git remote add origin в терминале. Если вы используете GitHub впервые, вы, скорее всего, столкнетесь с ошибкой в ​​терминале о разрешениях. Чтобы обойти это, вам нужно настроить токен личного доступа (PAT) для вашей учетной записи GitHub. Это делается для того, чтобы GitHub знал, что вы разрешаете своему компьютеру отправлять любые изменения кода в удаленное репо. Я бы рекомендовал следовать руководству GitHub Создание токена личного доступа, чтобы завершить эту часть процесса.

После того, как вы выполните эти три команды из терминала, вы сможете обновить GitHub и увидеть свой код на их серверах. Теперь вы можете войти в GitHub с любого устройства, чтобы просмотреть свой код, а также перенести этот код на любой компьютер, на котором хотите продолжить разработку. Это также облегчит следующий шаг нашего процесса, чтобы вы могли развернуть свой сайт в Netlify и, наконец, просмотреть свой новый сайт Gatsby в Интернете!

Развертывание в Netlify

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

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

Тем не менее, вы можете придерживаться руководства Gatsby и создать свой сайт с помощью Gatsby Cloud. Это правильный выбор, поскольку он специально оптимизирован для создания, развертывания и размещения сайтов Gatsby. Если вы решите использовать Gatsby Cloud, я бы порекомендовал следовать их учебнику по началу работы с сервисом. В противном случае продолжайте читать ниже о развертывании с помощью Netlify.

1. Зарегистрируйтесь в Netlify, нажав кнопку «Зарегистрироваться» в правом верхнем углу.
2. На странице "Обзор команды" нажмите "Добавить новый сайт" и выберите "Импортировать существующий проект".
3. В разделе Подключиться к Git Provider нажмите кнопку GitHub. Если вы впервые подключаете GitHub к Netlify, вам необходимо предоставить Netlify разрешение на доступ к вашей учетной записи GitHub. Должно открыться новое окно браузера, где GitHub спросит вас, хотите ли вы предоставить Netlify доступ к вашим репозиториям GitHub в нижней части окна. Вы можете выбрать, предоставлять ли доступ ко всем из них или к определенным репозиториям. Вам нужно только предоставить доступ к этому текущему репо, если это необходимо. Затем нажмите «Сохранить», чтобы продолжить.
4. Когда вы вернетесь в Netlify, список репозиториев должен содержать разрешенные вами репозитории GitHub. Выберите репозиторий своего блога.
5. После выбора репозитория вы сможете изменить некоторые значения конфигурации, такие как владелец в вашей учетной записи Netlify, а также ветку для развертывания. Оставьте настройки по умолчанию и нажмите кнопку Развернуть сайт.
6. Netlify автоматически начнет создание вашего сайта, и вы попадете на панель инструментов, где сможете увидеть статус своих развертываний, шаги по дальнейшей настройке вашего сайта и другую важную информацию о вашем сайте.

После создания сайта вы увидите ссылку на ваш новый сайт, который автоматически размещается на Netlify! Вот и все. Ваш сайт теперь онлайн и может быть просмотрен кем угодно!👏

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

Поздравляем!🎉 Вы только что создали сайт Гэтсби! Если бы это был первый сайт, который вы когда-либо создавали, это могло бы показаться очень громоздким процессом, но я обещаю вам, что в следующий раз это будет прогулка в парке. Давайте продолжим и резюмируем все, что мы только что сделали:

1. Мы создали сайт Gatsby на нашем локальном компьютере с помощью интерфейса командной строки Gatsby.

2. Затем терминал использовался для локального запуска сайта Gatsby, где вы могли просматривать веб-сайт по адресу http://localhost:8000.

3. Затем мы настроили репозиторий GitHub и отправили наш локальный код на их серверы, что позволило вам просмотреть свой код в Интернете и загрузить его на любой авторизованный компьютер.

4. Наконец, мы развернули ваш код в Netlify, чтобы создать размещенную версию вашего сайта, чтобы его могли просматривать любые пользователи с подключением к Интернету.

С этого момента мы продолжим использовать некоторые плагины, которые вы установили при создании сайта, наряду с GraphQL, чтобы создать все страницы, которые вам нужны для вашего блога, используя только шаблоны. Это действительно то место, где вы можете сделать сайт своим, используя React и CSS для оформления страниц по своему усмотрению. Я надеюсь, что вам понравился этот пост, и вы нашли его содержание полезным, поскольку вы продолжаете свое путешествие по веб-разработке! Ссылки на мои аккаунты в социальных сетях можно найти на контактной странице моего сайта. Пожалуйста, не стесняйтесь поделиться своим опытом создания сайта Гэтсби, общими вопросами и комментариями или даже другими темами, о которых вы хотели бы, чтобы я написал. Спасибо, и я с нетерпением жду ответа от вас! 👋