diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..79dbbce Binary files /dev/null and b/.DS_Store differ diff --git a/css/main.css b/css/main.css index b317587..a1bf75f 100644 --- a/css/main.css +++ b/css/main.css @@ -428,14 +428,116 @@ body { margin-top: 16px !important; } -.text-box { +.text-box, .blue-border { border: 1px solid #1ED9E7; border-radius: 25px; margin-bottom: 60px; padding: 0 15px; +} + +.without-border { + border: none !important; +} + +.install-page-header { + padding-top: 50px; +} + +.blue-border ul { + list-style: decimal; + padding-left: 28px; + font-family: "Inter", sans-serif; + font-style: normal; + font-weight: normal; + line-height: 136.5%; + color: #FFFFFF; +} + +.blue-border ul li { + list-style: decimal; + + font-family: "Inter", sans-serif; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 136.5%; + color: #FFFFFF; +} + +.blue-border a, +.blue-border a:hover, +.blue-border a:active, +.blue-border a:link, +.blue-border a:visited { + color: #1ED9E7; +} + +.code-p { + background: #1ED9E7; + color: #1D2934; + padding: 5px; + border-radius: 4px; +} + +.blue-border-img { + border: 1px solid #1ED9E7; + border-radius: 25px; + padding: 15px; + max-width: max-content; + margin: 0 auto 30px; +} + +.pb-25 { + padding-bottom: 25px !important; +} + +.blue-border img { width: 100%; } +.blue-border-img img { + width: 100%; +} + +.header-p { + font-family: "Inter", sans-serif; + font-style: normal; + font-weight: bold; + font-size: 16px; + line-height: 136.5%; + color: #ffffff; + padding: 10px; +} + +.top-header-p { + font-family: "Inter", sans-serif; + font-style: normal; + font-weight: bold; + font-size: 18px; + line-height: 136.5%; + color: #ffffff; + padding: 10px; + text-align: center; + margin-bottom: 24px; +} + +.color-blue { + color: #1ED9E7; +} + +.blue-border img { + + width: 100%; + max-width: 500px; + margin: auto; + display: block; +} + + +.blue-border .bottom-p { + text-align: left; +} + .top-p { font-family: "Inter", sans-serif; font-style: normal; @@ -574,6 +676,18 @@ footer a { @media (min-width: 992px) { + .top-header-p { + font-size: 28px; + } + + .blue-border ul li { + font-family: "Inter", sans-serif; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 136.5%; + color: #ffffff; + } .margin-16, .hero { padding: 0 80px; } diff --git a/img/AWS.gif b/img/AWS.gif new file mode 100644 index 0000000..9743b6c Binary files /dev/null and b/img/AWS.gif differ diff --git a/img/CloudFlare.gif b/img/CloudFlare.gif new file mode 100644 index 0000000..749f514 Binary files /dev/null and b/img/CloudFlare.gif differ diff --git a/img/GitHub Logo.svg b/img/GitHub Logo.svg new file mode 100644 index 0000000..aed567d --- /dev/null +++ b/img/GitHub Logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/img/GitHub-Logo.png b/img/GitHub-Logo.png new file mode 100644 index 0000000..aeb7e20 Binary files /dev/null and b/img/GitHub-Logo.png differ diff --git a/img/Hetzner.gif b/img/Hetzner.gif new file mode 100644 index 0000000..632492f Binary files /dev/null and b/img/Hetzner.gif differ diff --git a/img/Server.gif b/img/Server.gif new file mode 100644 index 0000000..869f84e Binary files /dev/null and b/img/Server.gif differ diff --git a/img/Telegram Logo.svg b/img/Telegram Logo.svg new file mode 100644 index 0000000..b41d5a0 --- /dev/null +++ b/img/Telegram Logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/Telegram-Logo.png b/img/Telegram-Logo.png new file mode 100644 index 0000000..0901ae5 Binary files /dev/null and b/img/Telegram-Logo.png differ diff --git a/img/Twitter Logo.png b/img/Twitter Logo.png new file mode 100644 index 0000000..1efd516 Binary files /dev/null and b/img/Twitter Logo.png differ diff --git a/img/Twitter Logo.svg b/img/Twitter Logo.svg new file mode 100644 index 0000000..7eba74a --- /dev/null +++ b/img/Twitter Logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/Twitter-Logo.png b/img/Twitter-Logo.png new file mode 100644 index 0000000..3294a8f Binary files /dev/null and b/img/Twitter-Logo.png differ diff --git a/img/Twitter-Logo.svg b/img/Twitter-Logo.svg new file mode 100644 index 0000000..30f653b --- /dev/null +++ b/img/Twitter-Logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/img/Vector.png b/img/Vector.png index 0c925e0..8681b2f 100755 Binary files a/img/Vector.png and b/img/Vector.png differ diff --git a/img/Vector.svg b/img/Vector.svg new file mode 100644 index 0000000..fffec1d --- /dev/null +++ b/img/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/add-domain-to-cf.gif b/img/add-domain-to-cf.gif new file mode 100644 index 0000000..b307e81 Binary files /dev/null and b/img/add-domain-to-cf.gif differ diff --git a/img/nc-buy-domain-1.gif b/img/nc-buy-domain-1.gif new file mode 100644 index 0000000..19cf42c Binary files /dev/null and b/img/nc-buy-domain-1.gif differ diff --git a/img/nc-buy-domain.gif b/img/nc-buy-domain.gif new file mode 100644 index 0000000..19cf42c Binary files /dev/null and b/img/nc-buy-domain.gif differ diff --git a/img/nc-to-cf.gif b/img/nc-to-cf.gif new file mode 100644 index 0000000..e2c9732 Binary files /dev/null and b/img/nc-to-cf.gif differ diff --git a/index.html b/index.html index 3b0f83b..c10bf48 100644 --- a/index.html +++ b/index.html @@ -27,32 +27,34 @@ -
-
-
-
- + +
+
+
+
+ +
-
-
- -
-
- - - - - - +
+
+ + + + + + +
-
+
@@ -350,15 +352,16 @@
+ diff --git a/second.html b/second.html new file mode 100644 index 0000000..6358701 --- /dev/null +++ b/second.html @@ -0,0 +1,322 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ +
+
+
+ +
+
+
+ + + + + + +
+
+
+
+ + + +
+
+

+ Установка и настройка +

+ +
+

+ +

+ SelfPrivacy-сервер создается поэтапно в течение часа. Звучит страшно, но уверяю, ученая степень не понадобится. Процесс не сложнее покупки в интернет-магазине. +

+ +
    +
  • Поиск паспорта и карты с балансом $10-15 и $5 в месяц
    • +
  • Регистрация учёток
    • +
  • Защита учёток
    • +
  • Покупка домена
    • +
  • Подключение домена к DNS-серверу
    • +
  • 🔑 Создание ключей
    • +
  • Установка
    • +
  • Подключение к сервисам 🎉
    • +
+

+ Если кому-нибудь поручите эту задачу — лишитесь приватности. Для 100% независимости и контроля всё делать самому. +

+
+ +
+

+ Регистрация учёток +

+

+ SelfPrivacy для устойчивости и приватности требует много учёток. Если всё держать в Google или Amazon получаем то, от чего бежали — все данные у одной компании 🤦‍♀️ +

+

+ Поэтому разные части системы будут в разных компаниях. Регистрируемся: +

+
    +
  • + Hetzner — хостинг виртуального сервера. Здесь будут жить наши данные и SelfPrivacy-сервисы. +
    • +
  • + NameCheap или любой другой регистратор, для покупки личного адреса в интернете — домена, который будет указывать на сервер. +
    • +
  • + CloudFlare — DNS-сервер, где работает ваш домен. +
    • +
  • + Amazon AWS — IaaS-провайдер, для бесплатного хранения резервных копии ваших данных в зашифрованном виде. +
    • +
+

+ Регистрация заурядна, но иногда проверка аккаунта длится несколько дней или требуют дополнительных документов. Поэтому используйте настоящие документы и заполняйте все аккуратно. Провайдеры так защищаются от спамеров, ничего личного ) +

+
+ +
+

+ Защита учёток +

+

+ Взламывают системы через самое слабое звено. Чтобы учётки не были таким звеном, пароли на всех аккаунтах делаем разные и сложные. MamaMilaRamu как ни странно плохой пароль, а отличные 🌈 — это парольная фраза: +

+

+ expert repose postwar anytime glimpse freestyle liability effects +

+

или

+

+ }Rj;EtG:,M!bc4/| +

+

+ Как такой пароль запомнить? Никак! Пароли не нужно запоминать, их надо создавать и хранить в менеджере паролей. Хотя один помнить придется — пароль от менеджера паролей. +

+

+ Обязательно включите дополнительную защиту аккаунтов. Называется второй фактор (MFA, 2FA). Без этого простого шага ваши данные не будут в безопасности. +

+

+ Я знаю, было сложно, но теперь вы защищены лучше, чем у 95%. Можете собой гордится! Я вот вами горжусь 🤗 +

+
+ +

+ Покупка домена +

+ +

+ Включили второй фактор? Я серьезно! Тогда переходим к интересному! +

+
+ + gif + +
+ +

+ Домен — это кусочек интернета, которому вы даете имя. Простор для творчества огромен, у вас есть 63 символа + .com .org .icu и еще несколько сотен доменов после точки. Можно просто по фамилии выбрать ivanov.live или ivanov.health, а можно что-то творческое shit-happens.shop +

+ +
+

+ Рекомендации +

+
    +
  • Обязательно смотреть на цену ежегодного продления, она может в разы превышать стоимость покупки.
    • +
  • Нормальная цена домена $8-10 в год. Самые дешевые — китайские .icu и .cyou — $4-6.
    • +
  • Хорошее имя удобно и по телефону диктовать и на деловой визитке писать.
    • +
  • Фамилия в домене хороша тем, что можно раздать почту всем однофамильцам, типа: name.secondname@surname.com или ns@surname.com или name@surname.com
    • +
  • При регистрации домена обязательно указывать реальные почту и телефон, иначе регистрацию могут аннулировать. И если вы не сможете продлить домен, у вас все сломается.
    • +
  • Я уже говорил про второй фактор?
    • +
+
+ + +

+ Подключение домена к DNS-серверу +

+ +

+ После покупки домен добавляем в CloudFlare: +

+ +
+ gif +
+ +

+ На примере домена ruleit.stream мы выбрали бесплатный тариф и получили серверы имен: gail.ns.cloudflare.com и mattns.cloudflare.com, которые надо прописать у своего регистратора. В нашем случае NameCheap: +

+ +
+ gif +
+ +

+ Заодно проверяем, что у нас включено автопродление и защита персональных данных — WhoisGuard. Через несколько минут или в худшем случае до 2-ух суток настройки применятся. +

+ + +

+ 🔑 Создание ключей +

+ +
+ +

+ API-ключи +

+ +

+ API-ключи — это почти тоже самое, что и логин с паролем, только для программы, а не человека. SelfPivacy-manager с их помощью управляет сервисами во всех учётках вместо вас. Удобно! +

+ +

+ Ключи хранить в менеджере паролей +

+ +

+ Для NameCheap нам ключ не нужен, мы уже все сделали. А домен будет управляться в CloudFlare. +

+ +

+ CloudFlare +

+ +
    +
  • Переходим по ссылке
    • +
  • В правом углу, кликаем на иконку профиля(человечек в кружочке). Для мобильной версии сайта, в верхнем левом углу, нажимаем кнопку Меню (три горизонтальных полоски), В выпавшем меню, ищем пункт My Profile
    • +
  • Нам предлагается на выбор, четыре категории настройки: Communication, Authentication, API Tokens, Session. Выбираем API Tokens.
    • +
  • Самым первым пунктом видим кнопку Create Token. С полной уверенностью в себе и желанием обрести приватность, нажимаем на неё.
    • +
  • Спускаемся в самый низ и видим поле Create Custom Token и кнопку Get Started с правой стороны. Нажимаем.
    • +
  • В поле Token Name даём своему токену имя. Можете покреативить и отнестись к этому как к наименованию домашнего зверька :)
    • +
  • Далее, у нас Permissions. В крайнем левом поле выбираем Zone. В самом длинном поле, по центру, выбираем DNS. В крайнем правом поле выбираем Edit
    • +
  • Далее, прямо под этой строчкой, нажимаем на Add More. Появиться аналогичная строка, такая же как та, которую мы только что заполняли.
    • +
  • В крайнем левом поле новой строки, выбираем, аналогично прошлой строке — Zone. В центральном - немного по другому. Тут мы выбираем то же самое что и в левой - Zone. В крайнем правом поле - выбираем Read.
    • +
  • Далее смотрим на Zone Resources. Под этой надписью есть строка с двумя полями. В левом должно быть Include, а в правом - Specific Zone. Как только вы выберете Specific Zone, справа появиться ещё одно поле. В нём выбираем наш домен.
    • +
  • Листаем в самый низ и нажимаем на синюю кнопку Continue to Summary.
    • +
  • Проверяем, всё ли мы правильно выбрали. Должна присутствовать подобная строка: ваш.домен - DNS:Edit, Zone:Read.
    • +
  • Нажимаем Create Token.
    • +
  • Копируем созданный токен, и сохраняем его в надёжном месте (желательно - в менеджере паролей).
    • +
+ + gif + +

+ Hetzner +

+ +
    +
  • Переходим по ссылке и авторизуемся в ранее созданном аккаунте.
    • +
  • Заходим в созданный нами проект. Если такового - нет, значит создаём.
    • +
  • Наводим мышкой на боковую панель. Она должна раскрыться, показав нам пункты меню. Нас интересует последний — Security (с иконкой ключика).
    • +
  • Далее, в верхней части интерфейса видим примерно такой список: SSH Keys, API Tokens, Certificates, Members. Нам нужен API Tokens. Переходим по нему.
    • +
  • В правой части интерфейса, нас будет ожидать кнопка Generate API token. Если же вы используете мобильную версию сайта, в нижнем правом углу вы увидите красный плюсик. Нажимаем на эту кнопку.
    • +
  • В поле Description, даём нашему токену название (это может быть любое название, которые вам нравиться. Сути оно не меняет.
    • +
  • Под полем Description видим возможность выбрать разрешения permissions. Выбираем Read & Write.
    • +
  • Нажимаем Generate API Token.
    • +
  • После этого, нам покажет ваш ключ. Записываем его в надёжном месте, или ещё лучше, сохраняем в менеджере паролей.
    • +
+ + gif + +

+ Amazon AWS +

+ +
    +
  • У Amazon AWS отсутствует мобильная версия сайта, поэтому, процесс создания ключей у пользователей мобильных и настольных устройств - отличаться не будет. Переходим по ссылке.
    • +
  • В правом верхнем углу, возле иконки колокольчика, нажимаем на своё имя пользователя. В выпавшем списке, выбираем My Security Credentials.
    • +
  • Далее, выбираем пункт Access Keys (access key ID and secret access key).
    • +
  • Нажимаем на синюю кнопку Create New Access Key
    • +
  • Во всплывающем окне, нажимаем на ссылку Show Access Key.
    • +
  • Сохраняем Access Key ID и Secret Access Key в надёжном месте, например менеджере паролей :)
    • +
+ + gif + +

+ Установка +

+ + gif + +

+ 🎉 Подключение к сервисам +

+ +
+ +
+
+ + + + + + + + + + + + + + + +