1

П​о​и​с​к​ Новая запись Войти

IT-инфраструктура для бизнеса и творчества

Популярное

Свежее
Разработка Валерий Алексеев 3 июн 2020

Компании
Notion на максималках: как я
Вакансии
открыл для себя бесплатную CMS
Мероприятия
Не так давно я познакомился с Notion — приложением для заметок с
Подписки поддержкой встроенных баз данных и удобным интерфейсом. С тех
пор Notion — инструмент №1 в моей повседневной рутине. Я научился
привязывать страницы Notion к собственному домену, с тех пор
Разработка
использую его как примитивную CMS для некоторых своих проектов.

Личный опыт 62 22 145 просмотров

Маркетинг Делюсь опытом и подробной инструкцией в данной статье.

Дизайн Одна из крутых фишек приложения — возможность поделиться

заметкой (и всеми вложенными в неё страницами) в интернете. По
Техника умолчанию Notion размещает пользовательские заметки на
собственном домене, что логично. Далее в этой статье размещена
Еще 2
инструкция, которая поможет вам:
Заказать рекламу

О проекте Вакансии
Использовать Notion с любым собственным доменом.

Правила Помощь Отключать логотип Notion на домене.

Спонсоры vc.ru
Потенциально — дорабатывать скрипт, добавлять Google
Analytics, метрику и другие сервисы (например, Disqus для
поддержки комментирования).

Данный метод придуман не мной. Он найден на просторах GitHub и

адаптирован для собственных нужд. Если моя инструкция покажется
вам сложной, можете обратиться к оригиналу.

Я использую Notion как базу знаний для своей образовательной

платформы, а также веду крутую коллекцию ресурсов для веб-
дизайнеров.

Notion — один из лучших инструментов для фанатов структурированной

информации

Что нам потребуется?

Сам по себе Notion не позволяет подключить сторонний домен.
Поэтому для достижения желаемого эффекта нам придётся немного
поплясать с бубном. Что нам потребуется:

1. Домен + доступ в панель регистратора;.

2. Аккаунт на CloudLare — бесплатно.

3. Базовые знания о работе с доменами.

4. Прямые руки.

Шаг 1. Регистрируемся на Cloud*are

CloudLare — одна из ведущих компаний, предоставляющих ряд
автоматизированных сервисов для владельцев сайтов (CDN, защита
от DDoS и прочее). Если подключиться к CloudLare (это бесплатно),
работать с зоной домена (об этом ниже) станет намного проще и
приятнее.

Первым делом создаём аккаунт на CloudLare по этой ссылке. Сразу

после регистрации добавляем свой сайт и выбираем бесплатный
тарифный план. Если всё сделано правильно, вы увидите что-то
вроде «Scanning for existing DNS records» — это значит, что система
проверяет, куда «привязан» ваш домен на данный момент.

После сканирования CloudLare отобразит все существующие

настройки вашего домена. Обычно они редактируются и изменяются
на стороне регистратора. Наша задача — перенести домен на
CloudLare, чтобы в будущем работать с настройками быстрее.

Именно поэтому система проверяет ваши текущие параметры, чтобы

после переноса ничего не отвалилось. Смело прокручиваемся в
самый низ и нажимаем «Continue».

На следующем этапе вы увидите краткую инструкцию от самого

CloudLare о том, как перенести домен. Необходимо перейти в панель
регистратора вашего домена, найти раздел редактирования NS-
серверов и вместо существующих (обычно их от двух до четырёх)
указать те, которые предоставил CloudLare.

У каждого регистратора своя панель управления и свои особенности.

Можете набрать в поиске «как изменить ns-сервера на X», подставив
вместо Х название своего регистратора. Ловите готовые мануалы
для самых популярных регистраторов: Reg.ru, RuCenter (NIC), GoDaddy,
NameCheap. Также подробная инструкция от самого CloudLare.

После внесения изменений необходимо в интерфейсе CloudLare

завершить процедуру, нажав кнопку «Done, check nameservers» и
снова «Done» в самом низу. Далее остаётся только ждать: скорость
делегирования домена зависит от регистратора и может занимать до
24 часов.

Шаг 2. Пишем Worker

Сервис CloudLare Workers представляет собой среду для выполнения
кода без использования стороннего сервера. То есть благодаря
данной технологии вам не обязательно приобретать отдельный VDS,
устанавливать на него Node и связывать с доменом. Уважаемые
разработчики и DevOps-специалисты, прошу, не кидайтесь камнями за
такое примитивное объяснение.

Таким образом, всё, что нам необходимо сделать, — это написать

скрипт, подгружающий нужную страницу из Notion и связать
получившийся Worker с нашим доменом. Вот сам скрипт, описание —
в виде комментариев в коде, а также чуть ниже в данной статье.

// Здесь указываем свой домен

const MY_DOMAIN = "va-promotion.ru"

// Здесь указываем адрес начальной страницы в Notion

const START_PAGE = "https://www.notion.so/129ba7e23f214b0eafbe7bfb908e45b7"

addEventListener('fetch', event => {

event.respondWith(fetchAndApply(event.request))
})

const corsHeaders = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, HEAD, POST,PUT, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type",
}

function handleOptions(request) {
if (request.headers.get("Origin") !== null &&
request.headers.get("Access-Control-Request-Method") !== null &&
request.headers.get("Access-Control-Request-Headers") !== null) {
// Handle CORS pre-flight request.
return new Response(null, {
headers: corsHeaders
})
} else {
// Handle standard OPTIONS request.
return new Response(null, {
headers: {
"Allow": "GET, HEAD, POST, PUT, OPTIONS",
}
})
}
}

async function fetchAndApply(request) {

if (request.method === "OPTIONS") {
return handleOptions(request)
}
let url = new URL(request.url)
let response
if (url.pathname.startsWith("/app") && url.pathname.endsWith("js")) {
// skip validation in app.js
response = await fetch(`https://www.notion.so${url.pathname}`)
let body = await response.text()
try {
response = new Response(body.replace(/www.notion.so/g, MY_DOMAIN).replace(/notion.so/g, M
response.headers.set('Content-Type', "application/x-javascript")
console.log("get rewrite app.js")
} catch (err) {
console.log(err)
}

} else if ((url.pathname.startsWith("/api"))) {
// Forward API
response = await fetch(`https://www.notion.so${url.pathname}`, {
body: request.body, // must match 'Content-Type' header
headers: {
'content-type': 'application/json;charset=UTF-8',
'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTM
},
method: "POST", // *GET, POST, PUT, DELETE, etc.
})
response = new Response(response.body, response)
response.headers.set('Access-Control-Allow-Origin', "*")
} else if (url.pathname === `/`) {
// 301 redrict
let pageUrlList = START_PAGE.split("/")
let redrictUrl = `https://${MY_DOMAIN}/${pageUrlList[pageUrlList.length - 1]}`
return Response.redirect(redrictUrl, 301)
} else {
response = await fetch(`https://www.notion.so${url.pathname}`, {
body: request.body, // must match 'Content-Type' header
headers: request.headers,
method: request.method, // *GET, POST, PUT, DELETE, etc.
})
response = new Response(response.body, response)

// Delete CSP to load disqus content

response.headers.delete("Content-Security-Policy")
// add disqus comment component for every notion page
return new HTMLRewriter().on('body', new ElementHandler()).transform(response)

}
return response
}

class ElementHandler {
element(element) {
// An incoming element, such as `div`
element.append(`
<script>
// if you want to hide some element, add the selector to hideEle Array
const hideEle = [
"#notion-app > div > div.notion-cursor-listener > div > div:nth-child(1) > div.notion-topbar
"#notion-app > div > div.notion-cursor-listener > div > div:nth-child(1) > div.notion-topbar
"#notion-app > div > div.notion-cursor-listener > div > div:nth-child(1) > div.notion-topbar
".notion-topbar > div:nth-child(1) > div:nth-child(5)",
]
// if you want to replace some element, add the selector and innerHTML to replaceEle Object
const replaceEle = {
"#notion-app > div > div.notion-cursor-listener > div > div:nth-child(1) > div.notion-topbar
}
function hideElement(qs) {
let eles = document.querySelectorAll(qs)
eles && eles.forEach(ele => ele.style.display = "none")
}
function replaceElement(qs, _html) {
let ele = document.querySelector(qs)
if (ele) {
ele.innerHTML = _html
}
}
let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMu
let body = document.querySelector('body');
let observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
let pageContent = document.querySelector("#notion-app div.notion-page-content"
if (pageContent) {
// Do nothing club
}
hideEle.forEach( hideE => hideElement(hideE) )
Object.entries(replaceEle).forEach( item => {
let [qs,_html] = item;
replaceElement(qs,_html)
})
});
});
observer.observe(body, { subtree: true, childList: true });
</script>
`, { html: Boolean })
console.log(`Incoming element: ${element.tagName}`)
}

comments(comment) {
// An incoming comment
}

text(text) {
// An incoming piece of text
}
}

По сути, всё, что нужно изменить — две переменных: нужно

подставить свой домен и адрес стартовой страницы в Notion. С этим
кодом можно играться сколько угодно долго: добавлять аналитику и
прочие фишки. Если хоть немного разбираетесь в JavaScript, вам не
составит труда «вклинить» нужный код в нужное место. Например, в
оригинальной версии на Github на страницы Notion добавляется
система комментирования Disqus.

Шаг 3. Собираем всё вместе

Остаётся только собрать воедино данный пазл: добавить Worker в
CloudLare и связать его с доменом. Первым делом переходим на
вкладку Workers в самом CloudLare.

Нажимаем кнопку «Manage workers» в самом начале страницы.

Далее устанавливаем любой поддомен (он может быть не связан с
вашим основным сайтом, это внутренняя настройка CloudLare),
выбираем бесплатный тарифный план и подтверждаем почтовый
адрес, если ещё этого не сделали.

Если всё прошло успешно, вы увидите кнопку «Create worker».

Нажимаем её и в появившийся слева редактор вставляем наш код,
заменив предварительно необходимые переменные в самом верху.

Нажимаем кнопку «Save & Deploy» и подтверждаем. Через несколько

секунд анимация загрузки сменится на стрелочку — значит ваш
Worker запущен и работает без ошибок.

CloudLare по умолчанию запускает Worker на собственном домене. На него можно

кликнуть, если всё настроено правильно, откроется ваша страница в Notion

Финальный этап — связь воркера и домена. Нам необходимо

вернуться в раздел Workers. Для этого переходим на стартовый экран
CloudLare, далее — Workers. На уже знакомом нам экране жмём «Add
route».

Во всплывающем окне указываем параметры:

Route — по какому адресу будет запускаться наш Worker.

Рекомендую указывать здесь запись в формате domain.com/* —
то есть, исключить звёздочку в самом начале, дабы воркер не
запускался на поддоменах.

Worker — выбираем созданный нами ранее Worker.

Сохраняем, и на этом всё. Чаще всего изменения отображаются

мгновенно (при условии, что регистратор уже сменил DNS-записи).
Иногда необходимо немного подождать.

Если у вас возникнут трудности с применением данного метода на

практике, пишите в Telegram: @valery_alexeev — постараюсь помочь
советом.

Всем хорошего дня!

#notion

62 1 76

Валерий Алексеев +791 Подписаться

Создать объявление Отключить рекламу

Маркетинг

Как «Яндекс» забирает «хлеб» у рекламных агентств —

алгоритмы «Директа» в b2b-тематике
Стоит ли использовать автостратегии «Яндекс.Директа» при малом
количестве конверсий, да еще в b2b-тематике? История про роботов,…
научившихся продавать подшипники. Кейс интернет-магазина PodTrade.

Вакансии Разместить

Показать ещё

Псс...
Мы тут собрали умную камеру для наблюдения
за котиками. Хотите научим?

Хочу А что ещё есть?

62 комментария

Популярные По порядку

Написать комментарий...

Denis Step 23
3.06.2020

Что-то многовато на vc статей про Notion в последнее время

<kiselev_face></kiselev_face>
Ответить

Сергей Некрасов 11
3.06.2020

Тоже заметил и недавно сам установил его. Сторителлинг

делает свое дело))
Ответить

Гриша Булыжников 8
3.06.2020

ага, поставил, посмотрел, удалил

Ответить

Сослан Сакшин 1
4.06.2020

а как "поставить" и "удалить" ноушн? ))

Ответить

Tony Sedniov 1
4.06.2020

Есть десктопное приложение.

Ответить

Гриша Булыжников 1
4.06.2020

руками
Ответить

Читать все 62 комментария

Приёмная Дмитрий Б. вчера Подписаться

«М.Видео» привезли мне разбитый телевизор за 110

тысяч и отказали в замене
10 октября 2021 года купили телевизор LG OLED55C14LB стоимостью 110
тысяч.

15 октября привезли разбитый телевизор.

Курьерская служба обещала позвонить за час. Однако позвонили за 15

минут до прибытия. Пришлось срочно отпрашиваться и уезжать с работы,
бросив все дела во время рабочего дня. Также не предупредили о
необходимости предоставить…

233 163

Личный опыт Сергей Коваленко вчера Подписаться

«Она тебя сожрет, *****!» Или, что такое работать с

огромным заказчиком, если ты маленький стартап
В рамках недели искренности хочу поведать историю, как к нашему
небольшому, но гордому стартапу пришел клиент с мировой аудиторией
150M+ (MAU), и что из этого вышло.

67 169

Мероприятия Разместить

Показать ещё

Яндекс для бизнеса вчера Подписаться

AppMetrica начала поддерживать атрибуцию трафика

из Facebook для Android

Анализировать эффективность рекламы Facebook можно в отчёте User

Acquisition и в продуктовых отчетах с помощью сегментации.

Обсудить 2

Rambler&Co вчера Подписаться

Rambler&Okko DevOps Meetup

Встречайте! Первый совместный митап двух гигантов – Rambler&Okko
DevOps Meetup.

Обсудить 0

Трибуна Vadik Sh вчера Подписаться

CoveRock.net — радио которое играет только кавер-

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

37 101

Приёмная Елена Х 1 час Подписаться

Сбербанк открывает карту на закрытое отделение и

не отдает ЗП
В октябре устроилась на новую работу и новый работодатель оформил
мне зарплатную карту (Мир голд). Оформил, и в личном кабинете начала
отражаться ее судьба. После того как карта прибыла в отделение, мне
пришло оповещение, что ее можно забирать. В понедельник 8 ноября я
поехала за картой в отделение г. Владивосток, пр Красного Знамени 59

6 1