Красивый веб-адрес с помощью fruitionsite.com

В этой статье описывается, как привязать свой веб-домен (например, fruitionsite.com) к адресу страницы Notion, с помощью сервиса Fruition

Ниже вы найдете перевод инструкции с fruitionsite.com, все авторские права принадлежат автору сайта fruitionsite.com.


Настройка доменного имени к странице Notion состоит из 4-х этапов:

1. Приготовления

  1. Откройте публичный доступ для Notion-страницы, к которой вы хотите привязать домен. Можете также включить индексацию поисковиками.
  2. Приобретите доменное имя через любого регистратора, например, Beget.

2. Настройка аккаунта в Cloudflare

  1. Зарегистрируйтесь в Cloudflare: https://dash.cloudflare.com/sign-up
    Регистрация Cloudflare
  2. Введите доменное имя, которое собираетесь использовать. Даже если вы собираетесь использовать поддомен, здесь все равно надо внести корневое доменное имя
    Cloudflare - доменное имя
  3. Выберите бесплатный Free-план
    Cloudflare - выбор плана
  4. Если у вас нет импортированной A-записи, добавьте одну. Добавьте ваш домен, например, fruitionsite.com, в поле Name, и запись 1.1.1.1 — в поле Content.

    Если вы используете поддомен — добавьте запись с ним в поле Name и 1.1.1.1 в поле Content.
    Cloudflare - записи
  5. Скопируйте 2 сервера имен (nameserver), которые заканчиваются на .ns.cloudflare.com
    Cloudf;are - nameservers
  6. Вставьте скопированные сервера имен на страничку настроек домена у вашего регистратора (например, Beget). Сохраните ваши настройки
    Cloudflare - регистратор
  7. Подождите несколько минут, а затем кликните Done, check nameservers
    Cloudflare - check nameservers
  8. Выберите Flexible SSL/TLS encryption mode
    Cloudflare - Flexible
  9. Включите Always Use HTTPS, Auto Minify, и Brotli (все три пункта опциональны, но рекомендуемы)
    Cloudflare - HTTPS
  10. Нажмите Done
    Cloudflare - Done
  11. Вы должны увидеть такой экран. Если Cloudflare не обнаружила ваш сайт, нажмите Re-check your site и обновите страницу
    Cloudflare - 11
  12. Выберите страницу Workers (один из синих блоков) и кликните на Manage Workers
    Cloudflare - 12
  13. Выберите любой доступный (специфический для Cloudflare) поддомен для вашего Worker. На самом деле, не важно, что вы выберете на этом этапе
    Cloudflare - 13
  14. Нажмите на Set Up, а затем на Confirm
    Cloudflare - 14
  15. Выберите план Free
    Cloudflare - 15
  16. Верифицируйте свой емейл, если еще не сделали этого, после чего вернитесь к странице Manage Workers
    Cloudflare - 16
  17. Нажмите Create a Worker

3. Настройка и генерация скрипта для Cloudflare

Примечание об авторстве. Следующий сниппет импортирует код с оригинальной страницы fruitionsite.com, (пункт Customize and generate the script (2 mins), скрипт https://fruition.stephenou.vercel.app). Внимание — все эти настройки вы можете изменять впоследствии и в самом Worker

Введите ваш домен в поле Your domain (e.g. example.org), и адрес вашей Notion-страницы — в поле Notion URL for example.org

Чтобы добавить подстраницы к домену (например, /about), нажмите Add a pretty link

Вы можете добавить свойства Title и Description для вашей страницы, а также выбрать шрифт и добавить любой Javascript-код для нее. Для этого нажмите TOGGLE STYLE AND SCRIPT SETTINGS

После того, как закончите, нажмите  COPY THE CODE  , чтобы скопировать код

4. Вставка кода в Cloudflare

  1. Удалите текущий код, и вставьте скопированный
    Cloudflare - 4-1
  2. Нажмите Save and Deploy
    Cloudflare - 4-2
  3. После сохранения, нажмите на имя своего сайта вверху страницы
    Cloudflare - 4-3
  4. Пройдите на страницу Workers и выберите Add Route
    Cloudflare - 4-4
  5. Если ваш красивый адрес имеет вид, например, fruitionsite.com, напечатайте fruitionsite.com/* в поле Route. Или поддомен.fruitionsite.com/*, если собираетесь использовать поддмен. Или *fruitionsite.com/*, если вы хотите использовать все другие поддомены, такие, как www. Выберите Worker‘а, которого только что создали
    Cloudflare - 4-5
  6. Нажмите Save, и вы закончили! Теперь можно запустить вашу страничку Notion на красивом адресе
    Cloudflare - 4-6
  7. Если вам нравится этот сервис, то автор будет рад ссылке на fruition.com на вашем сайте