Как я за несколько часов сделал себе приличный сайт на Notion без кода

После 4 лет мучений без дизайнера и верстальщика.

Я помогаю с контентом в университете «Зерокодер» и с интересом читаю статьи Паши Молянова про автоматизацию рутины в агентстве «Сделаем». Тоже захотел себе что-нибудь назерокодить, тем более, у меня давно была идея переделать личный сайт, который давно не обновлял.

Старый сайт я сверстал 4 года назад. Был доволен, потому что сделал своими руками на Bootstrap с помощью Артура Белостоцкого:

Время шло, появились хотелки по дизайну и верстке, а чтобы воплотить всё, нужны дизайнер и верстальщик. У меня хорошие знакомые, которые могут помочь, но мое внимание и их руки никак не доходили. Мы даже начали набрасывать макет, но дальше второго драфта дело не двинулось.

Я давно пользуюсь Notion как личной базой знаний, но не воспринимал его как конструктор простых посадочных страниц и сайтов-визиток. Но как-то просматривая ProductHunt, увидел сервисы, которые пробрасывают страницы в Notion на кастомный домен, вроде моего marfitsin.com.

Посмотрел примеры таких страниц — мне понравилось, как они свёрстаны. Да и примерно понятно, как это сделать в Notion:

Увидел ещё несколько важных для себя пунктов: у таких страниц прописывается мета-описание, есть OpenGraph-картинка, хороший скоринг по Google PageSpeed Insights, всё как у «серьёзных» сайтов.

Меня озарило: вот оно, решение моей проблемы с сайтом. Да, не хитромудрая вёрстка, зато всё быстро, понятно и задачу свою решает. И отношения со знакомыми дизайнерами и фронтендерами нытьём про сайт не испорчу.

Схема простая: в качестве конструктора использовать Notion, а для проброса на кастомный домен один из сервисов-прокладок. Первым делом пошёл делать страницу на Notion.

Это отличные платформы, но с Notion я знаком больше, его логика мне ближе. Да и оказалась не нужна мне сложная вёрстка, замудрёные блоки, анимации и другие возможности Tilda и Readymag.

Я сделал простой сайт, как топор, который легко собирается и работает. А Tilda и Readymag дают столько, что подходят для более сложных страничек.

Это оказалось проще всего: если давно пользуешься сервисом, несложно наполнить и проставить нужные блоки. Ну а если что-то непонятно, то в интернете куча информации и шаблонов для Notion, включая посадочные страницы.

Было смешно, когда я полчаса не мог понять, как сделать в Notion несколько колонок, а потом кааак понял — достаточно ролика на YouTube. Даже форму можно добавить.

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

Теперь оставалось выбрать сервис для проброса страницы на кастомный домен. На это ушло больше всего времени.

Я попробовал Notelet, Hostnotion и Potion. Они работают по одному принципу: вставляешь ссылку на страницу в Notion, указываешь домен, добавляешь информацию о DNS в настройки Godaddy, готово. Но дьявол в деталях.

Notelet на тестовой странице не показывал галерею с кейсами. Hostnotion нормально всё пробрасывал, да ещё и стоил дешевле всех, но показывал катастрофические 25 баллов по скорингу Google PageSpeed Insights и не умел менять мета-описание страницы, что для меня критично.

В итоге остановился на Potion: он умеет менять мета-описание страницы и хорошо оптимизирует скорость загрузки страницы для поисковиков:

Без усилий добился 94 баллов в скоринге Google PageSpeed Insights:

С Google Analytics Potion тоже работает, при желании можно добавить и чат-бота вроде Crisp или Carrot Quest — достаточно вставить код счётчика или чата в разделе Snippet Injection. Мне пока не надо, но приятно, что есть задел.

Личный сайт, содержимое которого могу менять за секунды с телефона без кода, дизайнера и верстальщика. Со счётчиком Google Analytics, нужным мне мета-описанием и хорошей скоростью загрузки.

Да, Notion — не конструктор личных страниц и лендингов, но он закрыл мою боль с личным сайтом. Радует, что от задумки до воплощения прошёл всего один день. Можете посмотреть на видео, как всё просто работает.

Для читателей vc.ru на основе своей страницы сделал шаблон, который вы можете копировать в Notion и менять как угодно, и тоже сделать на его основе простую личную страницу. Чтобы забрать к себе, нажмите Duplicate:

Так что если вы хотели сделать себе сайт, а времени в обрез, то вот он, знак судьбы. А я уже думаю, чего бы ещё себе назерокодить.

Ну и по традиции для vc прикладываю ссылку на свой Телеграм-канал, где делюсь рабочими кейсами и наблюдениями. Да и просто ворчу и восхищаюсь всем подряд.