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

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

Зачем понадобился сайт

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

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

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

Как я допёр сделать сайт на Notion

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

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

Очень клёвый сайт на Notion собрало себе агентство Optemization

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

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

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

Стой, а почему не Tilda или ReadyMag?

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

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

Набросал страницу в Notion

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

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

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

Мой сайт marfitsin.com

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

Как выбирал сервис для проброса страницы на кастомный домен

Я попробовал 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 прикладываю ссылку на свой Телеграм-канал, где делюсь рабочими кейсами и наблюдениями. Да и просто ворчу и восхищаюсь всем подряд.

0
38 комментариев
Написать комментарий...
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Саша Марфицин
Автор
Ответить
Развернуть ветку
Жаналинов Ильяс

Ужасный сайт получился 

Ответить
Развернуть ветку
Anastasia Antonova

это не сайт

Ответить
Развернуть ветку
Жаналинов Ильяс

Ужасная страница получилась. 

Ответить
Развернуть ветку
Саша Марфицин
Автор

Ужасный ужас

Ответить
Развернуть ветку
Teriberka

Ну хоть ссылку на телеграм-канал не забыли.

Ответить
Развернуть ветку
Ksenia Tsvetkova

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

Ответить
Развернуть ветку
буква Ю

Ну, новый уровень - это только сайт http://trackybirthday.com/

Ответить
Развернуть ветку
Viktor Mann
Ответить
Развернуть ветку
Саша Марфицин
Автор

Даа!

Ответить
Развернуть ветку
Леонид Цветков

Твёрдо, чётко и главное честно. 

Ответить
Развернуть ветку
Khabib96

как будто прочитал пересказ 'как установить фронтпейдж без страданий' из 2004го в современном изложении

Ответить
Развернуть ветку
Леонид Цветков

Какая-то хрень если честно. Лучше бы наняли кого-то нормального. 

Ответить
Развернуть ветку
Daria Kopylova

Минималистично и лаконично - все как я люблю)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Виктор Овчаров

Он не понимает смысл того, о чем говорит, это просто модные словечки которые нужно любым словом впихнуть в текст...

Ответить
Развернуть ветку
Anastasia Antonova

Это просто портфолио, миллион людей уже давно через notion публикуют свой опыт и контакты. Если автор только сейчас об этом догадался, то это даже смешно

Ответить
Развернуть ветку
Valera Valera

Человек, который "помогает с контентом", сделал вот такое CV. Но вообще дефицит кадров в отрасли всё простит. 

Ответить
Развернуть ветку
Михаил Ходус

Лооол) Шаблон?))

Ответить
Развернуть ветку
Кружочек

А разве не видно?)

Ответить
Развернуть ветку
Александр Сергеев

Уже как 10 лет такие сайты пилят без кода... Это из того, что мне известно. Допускаю, что есть много инструментов более старых о которых я не слышал. 

Ответить
Развернуть ветку
Виктор Овчаров

А если вспомнить бородатые времена, Dreamweaver и сайты им порожденные... Прям как у автора поста 💯

Ответить
Развернуть ветку
Artem Dzyuba

А вообще, есть отличное бесплатное решение для доменов и скриптов на Notion, рецепт находится на  http://fruitionsite.com. Я в своем курсе подробно расписал на примере. Придется заморочиться немного, это делается через Cloudflare, но в целом, ничего сложного.

Ответить
Развернуть ветку
Иван Петров

отлично!
- нах дизайнеров-дармоедов, которые только и делают, что мозги выносят

Ответить
Развернуть ветку
Виктор Овчаров

И ваши конкуренты стоя вам аплодируют - ВАШ клиент будет наслаждаться ИХ сайтом/продуктом, а не брезгливо давиться вашей поделкой... 😁

Ответить
Развернуть ветку
Sergey Klochko

Странно, что знание как сделать несколько столбцов в ношене есть только в роликах на ютубе. Несерьезно как-то со стороны ношена.

Ответить
Развернуть ветку
Саша Марфицин
Автор

Может и ещё где-то есть, но я нашёл именно там :) 

Ответить
Развернуть ветку
Sergey Klochko

Похоже, что это и правда тайное знание. Сходу в самом ношене не удалось найти решение.

Ответить
Развернуть ветку
Саша Марфицин
Автор

Не совсем очевидно, да

Ответить
Развернуть ветку
Viktor Mann

Не нужно.

Ответить
Развернуть ветку
Gleb Klinov

Задачу решает = работает. 

Знаю ещё сервис для проброса Notion на домен, вдруг пригодится: https://super.so/

Ответить
Развернуть ветку
Sergey Gosha

Ну и хрень

Ответить
Развернуть ветку
Eugene

Так вот как теперь выглядит приличный сайт, буду знать. 

Ответить
Развернуть ветку
Виктор Овчаров

'По моему опыту для классических станиц... несколько спринтов для GPH 95+'...
Ваш опыт вызывает сомнения... По моему опыту (frontend разработка, 6 лет) при кривизне рук чуть ниже среднего такие показатели получаю сразу... В 10% случаев тратится пара часов на правки и... 95, 98, 100...

Ответить
Развернуть ветку
Иван Петров

минус в репу (ответка)
- неписанное правило: ИЛИ комментируй ИЛИ минусуй

Ответить
Развернуть ветку
Artem Dzyuba

Вот этот шаблон: https://marfitsin.com/template не работает как шаблон, поскольку Notion его не "распознает" из-за кастомизации. Надо давать ссылку на чистый Notion-шаблон.

Ответить
Развернуть ветку
Ilya Novoselya

За шаблон спасибо. Для новичков вряд ли пойдет Potion, он стоит 10 баксов в месяц минимум.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
35 комментариев
Раскрывать всегда