Я думаю многие из вас видели у блогеров ссылку размещенную в описании профиля, перейдя по которой можно было бы увидеть все социальные сети данного человека!Мой YouTube и Telegram каналы.Есть очень много сервисов, которые помогут Вам сделать такую ссылку, но мы не можем достаточно кастомизировать такие страницы, выбирать домен, а также везде будет упоминание сервиса, через который мы такую ссылку делали.Поэтому мне пришла идея сделать такой сервис для себя и разместить конечный результат на сервере, а в этой статье я хочу поделиться своим проектом и рассказать Вам как его настроить и использовать!Вот как это сейчас выглядит у меня)Страница YouTube канала ТехноманьякПереходим по ссылке и попадаем на мою страничку со всеми социальными сетями разом!Все социальные сети в одном местеМой проект размещен в профиле на GitHub.В данном проекте я использовал React JS и библиотеку компонентов Chakra UI.Выбор пал на Chakra UI просто потому что я очень давно хотел попробовать данную библиотеку.Запуск проекта:1) Форкаем данные репозиторий, после чего клонируем его себе на компьютер:git clone https://github.com/FilimonovAlexey/link-bio-page.git2) Заходим в директорию проекта и устанавливаем зависимости:npm install3) Запуск проектаnpm run startПосле того как мы убедились, что локально у нас все работает можно переходим к настройке проекта под себя!Настройка проектаВ самом проекте я оставил множество комментариев, поэтому не думаю, что будут сложности с разбором и адаптацией проекта под себя. Однако на пару вещей я все таки хотел обратить внимание.Все социальные сети в одном месте! Проект на React JSДля добавления иконок я использовал библиотеку React Icons. Для того, что бы подобрать свои иконки перейдите на сайт, выберите необходимую иконку и импортируйте ее в проект.Для создания анимаций использована библиотека Framer Motion, ссылка на документацию.Также хотел обратить внимание, что у chakra UI есть библиотека готовых компонентов, которыми вы можете воспользоваться при адаптации проекта под себя и его доработки. Ознакомиться с компонентами можно по ссылке.Как разместить сайт на сервере?В этой части статьи я расскажу Вам как загрузить свое React приложение на сервер, пропишем автозапуск приложения с утилитой pm2, настроим конфиг nginx, установим ssl сертификат, пропишем переадресацию с http н https!В первую очередь необходимо арендовать сервер на Ubuntu 22.04 (все приведенные в статье команды полностью совместимы с ней), сам я уже давно использую сервера timeweb, на них у меня установлено уже достаточно много проектов от VPN до собственного сайта, эти ребята меня не подводили!Промокоды на скидку от меня:“tehnomaniak” получи 1 месяц в подарок при оплате сервера на 1 год;“super” получи 3 месяца в подарок при оплате сервера на 2 года;После того как сервер уже арендован необходимо выполнить следующее:1) Подключаемся к нашему серверу через ssh, для этого в терминале прописываем следующую команду:ssh [email protected] (root и xx.xx.xx.xxx логин и ip адрес соответственно, их мы получим на почту при аренде сервера).2) Устанавливаем node js:curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - //setup_18.x вместо 18 ставим ту версию которая стоит у вас локально, проверить версию можно командой node -v, указываем только первое числоsudo apt install -y nodejs // непосредственная установка NodeJS3) Устанавливаем git:sudo apt update //обновляем информацию о новых версиях пакетов, на всякий sudo apt install git -y //устанавливаем git4) Клонируем репозиторий нашего React приложения командой: git cloneGit clone5) Устанавливаем зависимостиnpm install6) Устанавливаем pm2 и запускаем наше приложение при старте сервераsudo npm install pm2 -g // ставим Pm2pm2 start npm -- start // из папки нашего приложенияpm2 startuppm2 save7) Настраиваем Файрвол и nginxsudo apt update //а вдруг кто новый пакет зарелизилsudo apt install nginx -y // ставим nginxsudo ufw allow 'Nginx Full' //открываем 80 и 443 порт в ufwsudo ufw allow OpenSSH // открываем 22 портsudo ufw app list // проверить что все все правила корректно добавились, вы увидите это, главное чтобы OpenSSH был в списке, иначе вы закроете доступ к серверу по ssh и другого способа попасть на сервер не будет //Available applications: // Nginx Full // Nginx HTTP // Nginx HTTPS // OpenSSHsudo ufw enable // запускаем файрволsudo systemctl enable --now nginx // добавляем в автозапуска и запускаем nginx sudo ufw status verbose //смотрим что открыто8) Настройка конфига nginxsudo nano /etc/nginx/sites-available/default //открываем конфиг и удаляем все, что там есть по умолчаниюВаш конфиг должен выглядить примерно так, можете скопировать:server { listen 443 ssl; server_name ваш_ip_адрес; root путь_до_папки_build; try_files $uri .html; ssl_certificate /etc/ssl/domain.ru.crt; ssl_certificate_key /etc/ssl/domain.ru.key; location / { proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } }9) Установка ssl сертификатаЕсли вы приобрели сертификат, то у вас должны быть на руках файл CRT и ключ, содержимое этих файлов необходимо записать в файлы: /etc/ssl/domain.ru.crt и /etc/ssl/domain.ru.key соответственно;С подробной инструкцией можете ознакомится тут.На этом все, деплой React приложения на сервер завершен успешно!В статье есть реклама ООО «ТАЙМВЭБ.КЛАУД», ИНН 7810945525, 2VtzqxL7pa2#reactjs #программирование #социальныесети
Блядь х2. Арендовать сервер для статической странички. Господа, мы проебали ойти, пора отбирать смузи и вводить в практику плети и дыбы.
Ты ебаный шиз, если для ссаной странички с парой ссылок поднял ноду. Вот такие "разрабы" идут в геймдев и потом мы получаем 10 ФПС на 4090.
А нужно было всего-то на голом хтмле и ксссе сделать пару дивов и ссылок. Я в ахуе от современной разработки нодоебланов.
Без негатива, если что. :3
То есть это "проект", который генерит страничку с десятком статических ссылок?
Это и есть современный фронтенд.
Это прям беда. Взял бы что-то вроде https://astro.build/ или https://www.11ty.dev/, если не хочешь на чистом html + css.
Да хорош ныть.
Если делать по простому, то я бы просто сделал на голом js, а ссылки просто из файлика брать. Но если ты делаешь на фреймворке, так хоть используй разделение файлов, а то у тебя простыня текста в App.