После первого года работы фронтенд-веб-разработчиком у меня появилась идея создать свой личный сайт. Это была бы платформа для демонстрации моей работы, обмена контентом и творческого выхода вне работы. Здесь я расскажу вам о своем опыте создания сайта с нуля до развертывания.
Покупка домена: Google Domains
Я начал с нуля, купив домен. Есть много вариантов. Я выбрал Google Domains, так как у меня уже была учетная запись, и мне не нужно было открывать другую только для этого. Это стоит 12 долларов в год (стандартная цена) и было чертовски быстро настроено. (К вашему сведению, вы также можете купить домен через Netlify.)
Прошло 3 месяца, когда мой домен был пуст. Я был слишком увлечен многими деталями запуска сайта. Сделав шаг назад, я понял, что мой сайт никто даже не увидит, пока я не решу заняться его активным продвижением. Как только я освободился от давления, я заставил себя положить что-то там, чтобы заполнить пустоту. Сняв тяжелый груз с плеч, я решил повеселиться и сделать что-то простое и веселое.
Первые шаги
При создании веб-сайта нужно учитывать многое: дизайн, пользовательский интерфейс/UX, доступность, SEO, аналитику и многое другое. Думать и планировать все сразу может быть ошеломляюще.
Чтобы было менее пугающе, я решил разбить его на этапы. Первый этап заключался в том, чтобы создать простую страницу «скоро» и развернуть ее. Затем, как только это было запущено, я мог работать за кулисами над проектированием, разработкой и совершенствованием сайта.
«Сделано лучше, чем идеально». — Шерил Сэндберг
Создание внешнего интерфейса: Gatsby.js
Впервые я узнал о Гэтсби в ReactNext конференцию, которую я посетил, и с тех пор мне было любопытно использовать ее. Альтернативой, которую я рассматривал, был Hugo, еще один очень популярный генератор статических сайтов, написанный на Go.
Gatsby.js также привлек меня, так как он основан на React.js, который мы используем в нашем стеке на Lemonade. Он также включает GraphQL, что я и собирался попробовать. Я за эффективность, поэтому мне любопытно, как GraphQL помогает более эффективно извлекать данные и позволяет интерфейсу меньше зависеть от логики сервера.
Когда пришло время выбирать шаблон, или «стартер», как их называет Гэтсби, я понял, что хочу что-то простое. Просмотрев популярные стартеры, я выбрал gatsby-starter-default за gatsby-starter-netlify-cms.
Почему? Я не хотел, чтобы сайт был прежде всего блогом. Со стартером Netlify у меня было бы много дополнительных зависимостей, в которых я не предвидел необходимости.
Первая итерация сайта представляет собой простую страницу-заполнитель «скоро» с акцентом на simple. Я черпал вдохновение из CodePen, создал свой собственный компонент React и добавил несколько пользовательских шрифтов и значков. Вот и все.
Чтобы отредактировать заголовок заголовка по умолчанию, меня аккуратно заставили (?) погрузиться в GraphQL. Вот уменьшенная версия того, как выглядит мой заголовок:
Вот основные выводы:
- StaticQuery имеет 2 реквизита:
queryиrender SiteTitleQueryэто имя операции. Думайте об этом как об имени функции. Это полезно для целей отладки и ведения журнала, позволяя вам легко искать конкретный запрос в вашей кодовой базе.- Одно из основных преимуществ
StaticQueryзаpage queryзаключается в том, что он позволяет вам настроить запрос GraphQL в компоненте, где он используется (в отличие от передачи его в качестве опоры). - Я отредактировал свой заголовок в
gatsby-config.jsфайл, в котором хранятся параметры конфигурации сайта. Это объясняет, гдеsiteindata.site.siteMetadata.titleпроисходит от.
Хостинг: Netlify
С таким количеством доступных инструментов трудно понять, что подходит для масштаба проекта. Важными критериями для меня были:
- Бесплатный хостинг для пользовательского домена
- Простота в использовании
- Возможность обслуживания динамического (а не только статического) контента
- Встроенная защита HTTPS
Netlify является хостингом и serverless серверный сервис для статических сайтов. Это дало мне все, что я искал, плюс бонусные функции, о которых я даже не думал, например:
- Возможность просмотра предварительной версии перед развертыванием в рабочей среде.
- Готовый функционал A/B-тестирования
Они как бы портят тебя таким образом, я был впечатлен.
Как только я достиг того, что вы видели выше, я решил, что он готов к развертыванию. Поскольку я не использовал Netlify в качестве провайдера DNS, мне пришлось настроить «пользовательский домен». я следовал за их tutorial, и через несколько минут он был настроен.
Мне оставалось только развернуться. Для этого есть несколько вариантов:
Continuous Deployment
Свяжите свою учетную запись Github (или другую), и Netlify автоматически создаст и развернет для вас, когда вы отправите свою новейшую версию. Вы также можете ограничить их доступ к Github только вашими общедоступными репозиториями.
Manual
Если вы решите не связывать свою учетную запись или, как и я, просто хотите попробовать это в первый раз, вы можете легко перетащить свой проект, чтобы запустить развертывание.
Я проверил это вручную для первого развертывания. Через 2 минуты (?) Сайт заработал.
Проверьте это → edenadler.com
ретроспективный
Для этого базового POC я рад, что не пытался делать причудливые вещи с GraphQL и не был слишком амбициозен с дизайном и исполнением сайта. Вы можете даже заметить такие вещи, как значок значка, которые все еще присутствуют в шаблоне Гэтсби. Я действительно хотел сделать самый минимум. Готово, а не идеально.
Создаете ли вы свой личный сайт, работаете над побочным проектом или пишете сообщение в блоге, не стремитесь к совершенству. Поставьте перед собой реалистичную, осязаемую цель и приступайте к работе. Если ваш проект предполагает опробование новых технологий, не пробуйте их все сразу. Разбейте проект на более мелкие задачи, которые вы можете выполнить за
день или даже вечер. Самое главное, получайте от этого удовольствие.
Мои следующие этапы
- Наймите дизайнера и реализуйте проекты
- Планируйте и добавляйте контент
- Поэкспериментируйте с интеграцией GraphQL
- … еще много идей?
Спасибо, что прочитали ✨ Если у вас есть вопросы, не стесняйтесь комментировать здесь или связаться со мной по Instagram ❤
