Этим летом я прошел через большой опыт редизайна сайта нашей компании. Это было не просто упражнение по изменению некоторых шрифтов и цветов, а весь процесс переделки веб-сайта с нуля, очень сложный, я знаю, но это было возможно только благодаря ресурсам, предоставленным нашими друзьями в Centrality и, конечно же, большому количеству руководством моих коллег.
В любом случае вот ссылка на конечный результат. Красиво да? Итак, давайте посмотрим, как создать нечто подобное с наименьшим количеством трения.
Шрифты и цвета
Во-первых, при создании веб-сайта первое, что вы хотите точно определить, это то, как он должен выглядеть визуально (выбор цвета) и насколько хорошо он читается пользователями (выбор шрифтов). Поскольку они будут оставаться неизменными, вы должны убедиться, что все они дополняют друг друга. Теперь эта часть сама по себе может быть очень сложной, поэтому я рекомендую использовать ссылки ниже, чтобы ускорить вас в этой части. Это то, что я лично использовал, чтобы добавить дополнительный цвет к нашей существующей цветовой палитре бренда и поиграть с различными шрифтами.
Самое главное в выборе фирменного цвета — убедиться, что он передает правильную эмоцию (мозговая наука и блади-бла) — можно найти здесь и здесь.
JAMStack и SSG
Теперь, когда мы разобрались с основами, давайте немного поговорим о технологиях. Поэтому вы должны быть знакомы с Wordpress, платформой, используемой для создания большинства веб-сайтов в Всемирной паутине. Прошли те времена, когда Wordpress был единственным способом создания веб-сайта, поскольку для этого требовался работающий сервер, но теперь мы можем создавать бессерверные веб-сайты, которые, как следует из названия, не требуют запуска и обслуживания сервера. Одной из последних тенденций является использование JAMStack, что означает Javascript, APIs, Markup.
JavaScript: запрос/ответ обрабатывается JavaScript и поэтому полностью выполняется на клиенте.
API: все серверные функции или запросы к базе данных абстрагируются в повторно используемые API.
Разметка: разметка должна быть предварительно создана во время сборки, и именно здесь вступает в действие SSG (генератор статических сайтов).
Для чего нужен SSG? Содержимое вашего сайта применяется к шаблонам, и создается полностью структурированный сайт, который может предоставляться как статический контент. Известные из них: Гэтсби, Хьюго, Джекил и 11ty.
Короче говоря, это подход к созданию веб-сайта, в котором упор делается только на отправку статических ресурсов.
Все это звучит хорошо, но почему я все еще должен использовать какие-либо из этих SSG?
- Сниженная сложность обслуживания серверов🖥️ позволяет нам работать только с CDN, что позволяет нам просматривать все серверы, базы данных, балансировщики нагрузки и т. д.
- Низкие затраты 💵CDN дешевы или даже бесплатны. Кроме того, более низкая сложность требует меньше времени и усилий, затрачиваемых на Devops.
- Быстрая доставка 🚀Меньшее количество движущихся частей облегчает быструю и надежную доставку.
- Разработчики в восторге😃 Упрощенный стек означает, что один разработчик может с легкостью управлять проектом.
Больше преимуществ:
- Более высокий уровень безопасности. Не беспокойтесь о проблемах с безопасностью и возможном взломе, так как серверы не задействованы.
- Более высокая производительность, так как все его статические ресурсы, размещенные в CDN, загружаются буквально за несколько миллисекунд.
- Лучшая масштабируемость может обслуживать миллионы пользователей, не задумываясь о масштабируемости.
- Отличное SEO. Большинство SSG поставляются с отличным SEO из коробки, и это очень просто.
Ваузеры !! Это удивительно правильно. Мой выбор SSG — Gatsby для достижения всего этого, а их подробная документация значительно упрощает начало работы.
Развертывание вашего сайта
После того, как ваш веб-сайт разработан и готов к работе, вам может быть интересно, как заставить его работать, а также немного о том, что вам не нужны серверы, но вы все равно где-то размещаете его? Да давайте это тоже поймем.
Нетлайф
Есть вероятность, что вы, возможно, слышали о них, если нет, то все, что вам нужно знать, это то, что люди, работающие в Netlify, придумали отличные решения для размещения приложения на основе JAMStack без необходимости поворачивать какие-либо ручки, участвующие в процессе. настройка конвейеров развертывания. Все это работает как по волшебству, как только ваш сайт хранится на Github и подключен к вашей учетной записи Netlify.
Вот подробная статья о том, как настроить развертывание.
Хотя Netlify работает очень хорошо, я использовал другую службу Vercel для настройки автоматизированного процесса сборки и развертывания. Простая причина в том, что я хочу разделить свои живые (производственные) и тестовые (постановочные) процессы. Поэтому, если я работаю над новой тестовой функцией, я обычно сначала запускаю ее на Vercel, чтобы протестировать и поделиться с моей командой, и как только она получает зеленый флаг, она отправляется на Netlify.
Дополнительные ресурсы
Спасибо, если вы дочитали мою статью до сих пор. Я надеюсь, что сегодня вы узнали что-то о создании лучшего веб-сайта, и я дам вам еще несколько советов, которые могут вам помочь.
Файлы cookie/соответствие для веб-сайта —https://www.cookiehub.com/
создано на основе примеров Гэтсби— https://www.gatsbyjs.com/showcase/
Вдохновение для веб-дизайна — https://dribbble.com/shots/popular/web-design
Разверните Gatsby на Netlify — https://www.netlify.com/blog/2016/02/24/a-step-by-step-guide-gatsby- в сети/
SEO Analyzer —https://neilpatel.com/seo-analyzer/
Это, безусловно, было для меня отличным опытом, чтобы пройти от начала процесса до конца, а также вселило в меня большую уверенность в создании и доставке веб-сайта более современным способом. Больше всего мне понравилось путешествие, а не результат.
…нет путешествия, которое не изменило бы вас — Дэвид Митчелл
Автор — Акшат Джайн
