Источник: Nuances of Programming
После года работы front-end разработчиком, я решила создать свой собственный сайт. Это должна была быть платформа, где я могла показать свою работу, чем-то поделиться. Сайт должен был помочь мне создавать что-то вне работы. Сейчас я расскажу вам, как я запустила сайт с нуля.
Покупка домена: Google Domains
Моим первым шагом стала покупка домена. Тут есть много вариантов. Я выбрала Google Domains, потому что у меня уже был там аккаунт, и мне не нужно было создавать новый. Домен обошелся в 12 долларов в год (стандартная цена) и был очень быстро настроен. (Стоит сказать, что вы также можете купить домен на Netlify).
3 месяца мой домен пустовал. Я слишком много внимания уделяла мелочам при запуске сайта. Оглядываясь назад, я понимаю, что никто бы даже и не зашел на мой сайт, пока я не начала его продвигать. Когда я смогла избавиться от напряжения, то заставила себя разместить на сайте хоть что-то, чтобы заполнить пустоту. Когда с моих плеч упал этот тяжкий груз, я решила получать от этой работы удовольствие, создав что-то простое и интересное.
Начало работы
При создании сайта нужно подумать о многих вещах: дизайне, пользовательском интерфейсе, доступности, SEO, аналитике и многом другом. Очень сложно продумать всё сразу.
Чтобы всё не выглядело так страшно, я разбила работу на этапы. На первом этапе я создала и запустила простую страничку “coming soon”. После этого, когда она была запущена, я уже могла сесть за разработку, развитие и улучшение сайта.
“Готовое лучше идеального”. — Шерил Сэндберг
Создание front-end: Gatsby.js
Впервые о Gatsby я узнала на конференции ReactNext, и с тех пор я старалась узнать о нем побольше. Альтернативой Gatsby я считаю Hugo — ещё один генератор статических сайтов, написанный на Go.
Gatsby.js был предпочтительнее для меня, так как он основан на React.js, которую использует наша команда в Lemonade. Также он включает в себя GraphQL, с которым я хотела попробовать поработать. Я люблю работать эффективно, поэтому мне было любопытно, как GraphQL помогает эффективнее собирать данные и позволяет front-end меньше зависеть от логики сервера.
При выборе шаблона, или, как они называются в Gatsby, “стартера”, я понимала, что мне нужно что-то простое. Просмотрев популярные стартеры, я отдала предпочтение gatsby-starter-default, а не gatsby-starter-netlify-cms.
Почему? Я не хотела превращать свой сайт в блог. В стартере Netlify было много дополнительных зависимостей, которые мне были не нужны.
Первой версией сайта стала простая временная страница “coming soon”, которая выглядела так:
Я делала упор на простоту. Я взяла некоторые идеи с CodePen, создала свой собственный компонент React и добавила немного пользовательских шрифтов и иконок. Вот и всё. Так выглядит основной компонент:
Чтобы изменить встроенный заголовок, мне буквально пришлось погрузиться в GraphQL. Это уменьшенная версия того, как выглядел мой заголовок:
Основные моменты, касающиеся кода:
- В StaticQuery есть два основных метода: query и render
- SiteTitleQuery — это название метода. Считайте его названием функции. Она полезна для отладки и ведения протокола, так как позволяет легко найти конкретный запрос в кодовой базе.
- Большим преимуществом StaticQuery над page query является то, что в нем можно настроить запрос GraphQL внутри того же самого компонента.
- Я редактировала свой заголовок в файлеgatsby-config.js, где хранятся настройки конфигурации сайта. Это объясняет, откуда беретсяsite в data.site.siteMetadata.title.
Хостинг: Netlify
Имея такой большой выбор инструментов, трудно найти наиболее подходящий для целей и задач проекта. Для меня важными критериями были:
- Бесплатный хостинг для пользовательских доменов
- Легкость в использовании
- Возможность поддержки динамического (а не только статического) контента
- Встроенная HTTPS защита
Netlify — это сервис, предоставляющий хостинг и бессерверный back-end для статических сайтов. Он предоставил мне все необходимые функции, а также некоторые дополнительные, о которых я даже не думала, например:
- Возможность предпросмотра сайта перед запуском
- Готовый функционал для A/B тестирования
Так они, в некотором смысле, балуют вас. Я была поражена.
Создав то, что вы видели выше, я решила, что можно уже это запускать. Так как я не пользуюсь Netlify в качестве DNS провайдера, мне пришлось настроить “пользовательский домен”. Я следовала их инструкции и настроила всё за несколько минут.
Мне оставалось только запустить. У меня было несколько вариантов для этого:
- Непрерывное развертывание
Привяжите ваш аккаунт Github (или какой-то другой), и Netlify будет автоматически создавать и запускать новую версию, как только вы разместите её. Вы также можете ограничить доступ к Github, позволив видеть только открытые репозитории.
- Вручную
Если вы решили не привязывать аккаунт, или, как я, просто хотите попробовать, вы можете просто перетащить ваш проект, чтобы начался запуск.
При первом запуске я попробовала использовать метод вручную. Уже через 2 минуты мой сайт был запущен.
Мой сайт→ edenadler.com
Итог
Я рада, что не стала в этот раз использовать крутые фишки GraphQL и слишком усложнять дизайн и работу сайта. Вы могли заметить, что некоторые вещи, например, фавикон, так и остались из шаблона Gatsby. Я действительно хотела сделать лишь необходимый минимум. Готовое лучше идеального.
Создаёте ли вы свой личный сайт, работаете ли на стороннем проекте или пишите статью в блог, — никогда не стремитесь к совершенству. Выбирайте реальные, достижимые цели и приступайте к работе. Если в вашем проекте вам нужно использовать новые технологии, не применяйте их все разом. Разбейте проект на более мелкие задачи, которые вы можете выполнить за день. И самое важное, получайте от работы удовольствие.
Мои дальнейшие шаги
- Нанять дизайнера и поработать над дизайном
- Спланировать и добавить контент на сайт
- Поиграться с GraphQL
- … и ещё множество идей💡
Читайте нас в телеграмме и vk
Перевод статьи Eden Adler: From Zero to Deploy: how I created a static website from scratch using Netlify + Gatsby