{"id":14274,"url":"\/distributions\/14274\/click?bit=1&hash=fadd1ae2f2e07e0dfe00a9cff0f1f56eecf48fb8ab0df0b0bfa4004b70b3f9e6","title":"\u0427\u0435\u043c \u043c\u0443\u0440\u0430\u0432\u044c\u0438\u043d\u044b\u0435 \u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430\u043c?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"6fbf3884-3bcf-55d2-978b-295966d75ee2"}

Как создать сайт из Notion

Меня зовут Антон Сабуров, я веду канал Anton No Code где делаю обзоры на сервисы и решения в сфере визуального программирования.

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

Посмотреть видео-обзор можно тут

Любой документ в Notion можно открыть в "в веб"

Это делается через кнопку "Share"

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

Минус этого подхода в следующем:

  • Свой домен не подкрутить
  • Отсутствие SEO-адаптации

Какой "обвес" нужен Notion чтобы превратиться в сайт

  1. Улучшить дизайн заголовков, кнопок, объектов
  2. Добавить создание форм
  3. Меню, "хлебные крошки" и прочие атрибуты навигации
  4. И многое другое, что присуще классическим сайтам:
    человеческие ссылки, SSL, метатеги, sitemap, favicon.

Где можно "позаимствовать" идеи страниц

Пример шаблона посадочной страницы >> тут
Шаблон персонального сайта >> тут
Минималистичное портфолио >> тут
Расширенное портфолио >> тут
Шаблон блога >> тут
А-ля таплинк >> тут

Добавляем кнопки в Notion

Тут можно воспользоваться сервисом виджетов для Notion

Инструмент бесплатный. Делать кнопки очень легко.

  • Выберите формат кнопки (текст+иконка)
  • Вставьте надпись кнопки
  • Вставьте ссылку кнопки
  • Настройте стиль
  • Скопируйте код кнопки

Дальше через встраивание кода добавляем ссылку в нужное место

Добавляем формы в Notion

Можно добавить гуглоформу или Typeform, но в среде Notion есть специализированные решения. Одно из них:

Чтобы добавить форму проходим через 4 этапа:

  1. Регистрируемся и делаем интеграцию сервисов
  2. Создаем таблицу. Это будет база данных для нашей формы.
  3. Создаем форму и привязываем к таблице. Делаем настройку.
  4. Добавляем в нужное место на нашем документе.

Интерфейс простой и позволяет быстро создать нужное количество форм.

А при учете что сервис бесплатный (при наличии водяного знака) - это просто супер.

Внутри есть большое количество настроек по кастомизации формы, работе с уведомлениями и интеграциями. Но за расширенный функционал придется платить.

Сервисы, которые создают красивые сайты из Notion.

Мне больше всего понравился SUPER

Внутри огромный фарш из функционала

Но мне больше всего заинтересовал новый функционал - Builder.
Он позволяет перетягивать объекты на страницу и создавать функциональные сайты во главе c Notion. Это прям интересно.

Благодаря этому можно создавать более сложные структуры, типа вот этих

Сервис SUPER стоит 12$ за сайт в месяц.

Дополнительно интересно воспользоваться шаблонами. Из достаточно много. Средняя цена платного шаблона - 10-15$.

Второй игрок, который позволяет создавать из Notion-документов полноразмерные сайты Potion

Начну с того, что поделюсь с вами ссылкой на сайты, созданные через связку Notion-Potion

Пример1, пример2, пример3, пример4, пример5.
Посмотрите, в этих сайтах чувствуется какая-то своя "фишечка". Мне нравятся. Хотя свои я пока делаю на carrd.co.

Potion берет 10$ за сайт в месяц.
За эту цену вы получаете возможность:

  • добавить собственный домен
  • кастомизиировать сайт
  • получить высокую загрузку контента
  • SEO-адаптацию

А последнего игрока я недавно нашел на ProductHunt - это индийский стартап

Notion Diary позволяет создавать блоги из Notion-документа.
Механика проста, как и у предыдущих ребят.
Интегрируете сервисы - добавляете таблицу, куда добавляете новые материалы.

Сервис бесплатный и работает на Notion API, который только недавно выкатили.

0
9 комментариев
Написать комментарий...
Наумов Никита

Не работают ссылки на шаблоны!

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

Именно

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

Спасибо за статью, сам давно пользуюсь Notion, но вы открыли для меня новый взгляд на его функции

Меню, "хлебные крошки" и прочие атрибуты навигации

Хлебные крошки и сейчас уже есть, см. скрин во вложении

Сайт Notion diary не работает на утро 7 января - вместо страницы белая пустота. Даже VPN не помогает

Ответить
Развернуть ветку
Anton Saburov
Автор

Привет! Сегодня заработало, индусы включили сервак)

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

Нинада

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

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

Ответить
Развернуть ветку
Руслан Коновалов
Ответить
Развернуть ветку
Irina Velikanova

Здравствуйте, ссылочки с примером - закрытый контент, не открываются

Ответить
Развернуть ветку
Твой сайт + SEO

Может кому поможет мой план:
1. Сначала определите цель: личный блог, бизнес или портфолио
2 затем выберите доменное имя и хостинг.
3. Выбор cms платформы важен: WordPress и другие.
4. Создай уникальный дизайн, адаптивный для разных устройств.
5. Добавьте контент - тексты, изображения.
6. Обязательно удели внимание SEO: оптимизируйте тексты, заголовки.
7. Проведите тестирование и запустите сайт.
Вот, ну а если хочешь подробнее прям по полкам рассказывают или пошагово не знаю как правильно сказать, то я обычно читаю здесь dersite.ru вроде все понятно пишут про созданиюе сайтов и SEO.

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