Чему мы научимся?
В этой статье мы узнаем, как создать собственную страницу в стиле Tplink для своего аккаунта в Instagram. Все услуги, которыми мы будем пользоваться, платные, но для достижения цели мы будем использовать только бесплатные варианты.
Проблема
Как фронтенд-разработчик, я вижу большую проблему в сервисах, которые не предоставляют полного доступа к коду, а затем берут большие деньги, чтобы у них была головная боль при настройке и ограничивалась свобода использования. Да, такого рода сервисы созданы для людей, то есть далеких от развития, но мы тут инженеры что ли? "="
Решение
Для решения этой проблемы у нас может быть несколько вариантов:
- Создайте HTML-страницу с нуля и разместите ее на любом бесплатном или частично бесплатном сервисе для размещения нашей страницы.
- Получите готовый шаблон проекта, в котором есть все для более быстрого решения проблемы.
Для этого примера мы воспользуемся вторым вариантом и воспользуемся сервисом под названием Глюк. Это удобный сервис для решения, потому что:
- Это проект Vite + Handlebars, который позволяет разбить страницу на обслуживаемые части.
- Это PWA, готовый из коробки, и ваша страница будет работать быстро и работать в автономном режиме.
- Код хранится в GitHub, поэтому мы можем легко получить к нему доступ не только с платформы пользовательского интерфейса.
Сложность использования только этого сервиса в том, что экземпляр перейдет в спящий режим, если не будет использоваться постоянно. Есть платная опция, чтобы этого избежать, но как я и обещал — для этого решения все должно быть бесплатно. Именно поэтому мы разместим код в Верселе. Vercel — это облачная платформа для размещения JS-проектов, созданных с использованием различных фреймворков, а также без фреймворков. Для проекта Vite также существует автоматически определяемая настройка.
Шаг 1. Войдите в Glitch!
Попасть в Glitch довольно просто. Зайдите на сайт Glitch, нажав здесь. Затем нажмите кнопку Войти или Зарегистрироваться. Есть возможность использовать учетную запись Google, которую я использовал для входа в систему (рис. 1).
Теперь, когда вы попадете внутрь, нажмите кнопку нового проекта вверху (рис. 2).
В выпадающем меню выберите «Найти еще», так как нужного нет в списке. Затем на странице с опциями проекта выберите «Glitch in Bio» (рис. 2). Это настройка страницы, подобная Taplink, которую мы ищем.
После нажатия «Remix your own» вы запустите среду проекта и попадете в онлайн-IDE, предоставляемую сервисом. Это действительно круто, и вы можете увидеть, как работает ваш проект, используя кнопку «Поделиться» вверху.
Следующая проблема заключается в том, что нам нужно, чтобы эта страница всегда была онлайн без сна, если проект неактивен.
Шаг 2. Получите исходный код!
Чтобы получить исходный код, нам нужно будет клонировать проект из Git на наш ПК (или Mac, или Linux. Не вините меня =)). Чтобы получить код, нажмите «Инструменты» в нижнем меню, а затем «Импорт/Экспорт», как показано на рисунке 4.
Теперь во всплывающем меню нажмите кнопку «Копировать» (рис. 5), чтобы скопировать ссылку Git в проект.
Клонируйте проект на свой компьютер в любую папку, в которой вы предпочитаете хранить проекты. Имя репозитория генерируется службой, но вы можете переименовать папку, присвоив ей любое имя.
Следующий шаг — загрузить исходный код на наш GitHub (или любую открытую платформу Git). Для выполнения этого шага — зайдите в GitHub и создайте там новый репозиторий. После этого нам нужно будет переключить источник Git с Glitch на наш репозиторий. Для этого введите следующую команду в корне репозитория вашего проекта:
git remote set-url origin https://github.com/<YOUR-USER>/<YOUR-REPO>
Эта команда переключит ваше происхождение с Glitch на ваше. И последним шагом будет размещение вашего кода в репозитории. Для этого запустите эту команду в корневой папке вашего проекта:
git push -u origin master
Теперь у нас есть исходный код в нашем git. Поскольку этот проект экспортирован из Glitch, у него будет действие по развертыванию проекта. Мы можем удалить его, так как он нам больше не понадобится (рис. 6).
Шаг 3. Разверните исходный код!
Зайдите на страницу входа в сервис Vercel, нажав здесь. Для входа в дашборд я использую аккаунт GitHub, вы можете выбрать любой другой удобный для себя способ. На панели инструментов выберите Добавить новый, а затем Проект, как показано на рисунке 7.
Поскольку я использую GitHub для входа в систему, у меня есть настройка репозитория. Если вы выбрали другой способ входа — не забудьте добавить учетную запись репозитория, чтобы продолжить, как показано на рисунке 8.
Затем нажмите кнопку «Импорт» перед названием вашего проекта, как показано на рисунке 9.
В конфигурации проекта нажмите «Переопределить» перед «Каталог вывода» и вставьте папку «build» вместо папки по умолчанию, как показано на рисунке 10.
После нажатия кнопки «Развернуть» вы увидите ошибку сборки. Это отлично. Мы исправим это сейчас. Проблема в том, что Glitch предварительно настраивает версию узла, которая конфликтует с версией узла, используемой в Vercel. Нам нужно удалить эту конфигурацию из файла package.json нашего проекта.
"engines": {
"node": "14.x"
}
Найдите и удалите эту строку из файла package.json и отправьте изменения в репозиторий. После этого Vercel автоматически пересоберет проект, и вы увидите свою ссылку на панели управления проектом (рис. 11).
Заключение
В этой статье мы выделили несколько фундаментальных вещей, которые можно использовать в процессе обучения и на следующей внештатной работе:
- Вам следует прочитать о Vite как о системе сборки для вашего проекта.
- Изменить источник репозитория — легко
- Vercel — отличное решение для реализации ваших домашних и внештатных проектов.
Это огромный путь, который нужно пройти каждый раз, когда вам нужно создать такую страницу не для себя, а для друга или в качестве небольшой внештатной работы. Я создал для вас репозиторий шаблонов ataztech910/taplink-alternative-template, чтобы вы могли сразу начать программировать и развернуть его в Vercel.
Используйте его с любовью 💞 и удачной кодировкой!
