Привет, друзья!

Как вы, возможно, уже знаете, 9 сентября Notion покидает рынок РФ, и, по слухам, это может сопровождаться удалением всех аккаунтов из России. В связи с этим, нам всем стоит задуматься о том, какую альтернативу выбрать.

После тщательного анализа различных опций, я нашел, на мой взгляд, отличную и полностью бесплатную замену Notion — Wiki.JS.

Сегодня мы разберемся, как установить и настроить эту платформу. Начнем с первичной настройки и запуска системы на локальном компьютере, а затем, всего за несколько минут, развернем наш проект на удаленном хостинге, превратив Wiki.JS в полноценную замену Notion.

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

Для деплоя я буду использовать сервис Amvera Cloud. Я выбрал его за простоту развертывания и предоставление бесплатного доменного имени с HTTPS-протоколом, которое будет выделено вам сразу после создания проекта.

Для деплоя нам понадобится создать Dockerfile (этот файл будет использоваться как для локального запуска, так и для развертывания). Технически, вам достаточно будет скопировать настройки с этой статьи и все у вас заработает. Затем, просто загрузите этот файл через консоль на сайте Amvera Cloud, и ваш проект соберется и запустится автоматически!

В качестве бонуса за регистрацию вы получите 111 рублей, что позволит вам запустить проект бесплатно уже в процессе чтения этой статьи. Подробнее об этом в разделе про деплой.

Почему Wiki.JS лучшая альтернатива Notion в России?

Рассмотрев другие аналоги Notion я пришел к выводу, что WikiJS - это его лучшая альтернатива и вот почему.

Главное преимущество WikiJS — это открытый исходный код. Это обеспечит вам защиту от возможных проблем, связанных с уходом софта с рынка РФ и блокировками. Все данные будут храниться на вашем локальном компьютере или хостинге, и вы будете уверены в их безопасности.

Кроме того, Wiki.JS будет для вас абсолютно бесплатным всегда благодаря открытому исходному коду.

Возможности Wiki.JS:

• Установка на любую платформу: Совместим с PostgreSQL, MySQL, MariaDB, MS SQL Server или SQLite (демонстрацию сегодня буду делать на SQLite).

• Интуитивно понятная админка: Управляйте всеми аспектами вашего вики через удобный интерфейс.

• Высокая производительность: Работает на движке Node.js, обеспечивая быструю работу.

• Полная настройка внешнего вида: Поддержка светлой и темной тем, возможность установки своих тем.

• Гибкость в доступе: Возможность сделать вики полностью публичной, частной или смешанной.

• Масштабируемость: Работает как на маломощных устройствах, так и на высокопроизводительных серверах.

• Множество модулей: Поддержка различных модулей для аутентификации, комментариев, рендеринга, поиска и хранения данных из коробки! Просто зайдите в админку и активируйте нужный модуль.

Сравнение Wiki.JS с Notion

Notion — это мощный инструмент для создания заметок и управления проектами, который предлагает множество функций для организации информации. Однако он не поддерживает локальное хранилище данных и требует постоянного интернет-соединения.

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

• Хранение данных: Notion хранит данные в облаке и требует постоянного интернет‑соединения. Wiki.JS позволяет хранить данные локально или на удаленном хостинге, что дает вам полный контроль и независимость от внешних сервисов.

• Стоимость: Notion требует подписки для использования некоторых функций. Wiki.JS полностью бесплатен и остается таковым благодаря открытому исходному коду.

• Гибкость и модификации: Notion предоставляет ограниченные возможности для настройки и расширения функционала. Wiki.JS с открытым исходным кодом позволяет вносить изменения и добавлять новые функции по вашему усмотрению.

• Доступ и безопасность: С Wiki.JS ваши данные находятся под вашим контролем, что обеспечивает дополнительную безопасность и защиту от возможных блокировок и проблем с доступом.

Сегодня мы рассмотрим, как настроить и использовать Wiki.JS, чтобы он стал надежной альтернативой Notion и удовлетворял все ваши потребности.

Подготовка к установке WikiJS

Для запуска мы будем использовать Docker. Поэтому, для начала, выполните его установку.

Для новичков лучше всего подойдет установка Docker Desktop. Просто скачайте этот софт под свою операционную систему и запустите.

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

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

Существуют разные манипуляции с Docker, но мы сегодня будем использовать запуск через Dockerfile.

Dockerfile — это специальный файл, который содержит инструкции для создания Docker-образа. В нем описываются шаги, необходимые для установки всех зависимостей и настройки окружения для вашего приложения.

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

Для новичков, которые только что узнали о Docker или для тех кого не интересуют лишние телодвижения, для вас написана эта инструкция и прежде чем мы перейдем к написанию настроек в Dockerfile, хочу уделить внимание тем кто разбирается в теме Docker, NodeJS и VueJS. Тем кому это не интересно сразу переходите к блоку «Создаем простой Dockerfile».

Работа с исходным кодом проекта и создание собственной сборки WikiJS

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

Логика работы будет следующей: вы загружаете исходный код WikiJS на локальную машину, вносите изменения в проект (добавляете модули NodeJS, редактируете шаблоны VueJS и так далее), а затем создаете локальную сборку. После того как вы будете удовлетворены результатом, нужно будет упаковать проект с помощью Dockerfile. Важно отметить, что в Dockerfile следует использовать чистый образ Node, а не образ WikiJS.

Шаги для загрузки и сборки проекта

1. Загрузка исходного кода

Для Linux и macOS:

• Скачайте исходный код WikiJS:

wget https://github.com/Requarks/wiki/releases/latest/download/wiki-js.tar.gz

• Создайте директорию для проекта и распакуйте архив:

mkdir wiki 
tar xzf 
wiki-js.tar.gz -C ./wiki cd ./wiki

Переименуйте файл конфигурации:

mv config.sample.yml config.yml

Отредактируйте настройки в config.yml:

nano config.yml

Укажите параметры подключения к базе данных. Если выберете sqlite3, выполните команду:

npm rebuild sqlite3

Соберите и запустите проект:

node server

Откройте файлы проекта в вашем IDE и внесите необходимые изменения. Затем создайте Dockerfile или Docker-compose файл для упаковки проекта. Учтите, что для деплоя на Amvera следует использовать только Dockerfile, так как Docker-compose пока не поддерживается.

Для Windows:

• Откройте PowerShell от имени администратора и скачайте актуальную версию WikiJS:

Invoke-WebRequest -Uri "https://github.com/Requarks/wiki/releases/latest/download/wiki-js-windows.tar.gz" -OutFile "wiki-js.tar.gz"

• Создайте директорию для проекта и распакуйте архив:

New-Item -Path "C:\" -Name "wiki" -ItemType "directory"
tar xzf wiki-js.tar.gz -C "C:\wiki"
cd C:\wiki

• Переименуйте файл конфигурации:

Rename-Item -Path config.sample.yml -NewName config.yml

Продолжайте настройку по аналогии с инструкциями для Linux и macOS.

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

Создаем простой Dockerfile

Друзья, а теперь к блоку, который освоит каждый, кто просто умеет пользоваться компьютером. Надеюсь, что вы скачали и запустили Docker (Docker Desktop) на локальном компьютере.

Теперь создадим простую папку. Назовем ее, например, wiki.

Теперь необходимо создать файл Dockerfile (так и пишется, без точки). В Dockerfile добавляем следующие строки:

# Используем официальный образ Wiki.js
FROM ghcr.io/requarks/wiki:canary-2.5.304

# Устанавливаем переменные окружения
ENV DB_TYPE=sqlite
ENV DB_FILEPATH=./data/wiki.db

# Открываем порт 3000
EXPOSE 3000

# Запускаем Wiki.js от пользователя root
USER root

# Запускаем Wiki.js
CMD ["node", "server"]

Это Dockerfile для создания контейнера с Wiki.js. Он использует официальный образ Wiki.js, настраивает переменные окружения для подключения к базе данных SQLite, открывает порт 3000 и запускает Wiki.js от имени пользователя root.

Как я описывал выше, демонстрация будет идти через базу данных SQLite. Для учебного проекта этого будет более чем достаточно. В случае если вы хотите использовать другую базу данных, например, PostgreSQL, в этот файл нужно добавить следующие настройки:

ENV DB_HOST=<IP адрес хоста с базой данных>
ENV DB_PORT=<Порт базы данных>
ENV DB_USER=<username>
ENV DB_PASS=<пароль>
ENV DB_NAME=<имя базы данных>

Варианты для DB_TYPE: mysql, postgres, mariadb, mssql или sqlite.

В Dockerfile есть важный момент для тех, кто будет выполнять деплой на Amvera. Перед деплоем, путь к файлу базы данных (если он у вас есть) необходимо прописать как:

ENV DB_FILEPATH=/data/wiki.db

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

Создаем образ (шаблон для контейнеров)

docker build -t wiki:latest .

Теперь запустим контейнер

docker run -d -p 3000:3000 --name wiki --restart unless-stopped wiki:latest

Эта команда запускает контейнер Docker с именем wiki на основе образа wiki:latest. Вот что делают различные параметры:

• -d: Запускает контейнер в фоновом режиме (detached mode).

• -p 3000:3000: Пробрасывает порт 3000 на хосте к порту 3000 в контейнере. Это позволяет получить доступ к приложению, работающему в контейнере, через порт 3000 на вашем компьютере.

• --name wiki: Присваивает контейнеру имя wiki.

• --restart unless-stopped: Автоматически перезапускает контейнер, если он остановится, за исключением случаев, когда он был остановлен вручную.

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

Если все прошло без ошибок, то на вашем компьютере, по адресу: http://localhost:3000 будет доступно окно создания Админ-записи.

Для начала укажем email (может быть фейковый) и два раза пароль. После этого жмем на кнопку «Install»

После откроется окно входа в систему. Для входа вводим логин и пароль, который вы создали на предыдущем шаге.

При успешном входе вы увидите следующее:

Так как была создана админ учетка у вас есть, как вариант работы с функционалом WikiJS (кнопка «CREATE HOME PAGE» - подробно рассмотрим далее), так и доступ в админ-панель.

Далее я коротко рассмотрю возможности внутренней админ-панели и основного функционала с акцентом на массового пользователя (на всех). В следующих статьях, если будет запрос от вас и позитивный отклик на эту статью, я рассмотрю уже с точки зрения программирования: внутреннее API, документация, подвязка сторонних хранилищ и прочее.

Знакомимся с админкой WikiJS

Для входа в админку кликаем на кнопку «Administration» и тут нас встретит такой экран:

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

Через админ-панель Wikijs можно выполнять множество задач для управления вашей вики. Вот основные возможности:

• Управление контентом: Создание, редактирование и удаление страниц, использование Markdown для форматирования текста.

• Управление пользователями: Добавление и удаление пользователей, назначение ролей и прав доступа.

• Настройка внешнего вида: Изменение тем, настройка светлого и темного режимов.

• Интеграции: Подключение внешних сервисов для аутентификации, хранения данных и поиска.

• Управление медиафайлами: Загрузка и управление изображениями, видео и другими файлами.

• Настройка системы: Конфигурация системных параметров, таких как почта, расширения и вебхуки.

• Добавление модулей (с коробки их 50 штук)

И многое другое. Делается все достаточно просто и интуитивно понятно для каждого. Вот пару простых примеров работы с админкой WikiJS.

Изменяем язык системы

• Переходим в locale

• В правом блоке находим нужный язык, я выберу русский и кликаем на «Загрузить»

Выбираем русский язык в блоке языка и жмем на «Apply» для сохранения.

Сменим тему на темную

• Переходим в «Тема»

• Ползунком меняем тему на темную

Остальные настройки меняются так-же просто.

Группы доступа и пользователи в WikiJS

Для пользователей предусмотрены группы доступа. Есть две группы системные: администраторы — у них полномочия делать все и гости — все не авторизованные в системе пользователи. Они могут только читать данные публичных страниц.

Для того чтоб создать новую группу достаточно перейти в «Группы» и там кликнуть на «New Group».

Далее дадим имя группы и можно приступить к настройке полномочий. Для этого нужно кликнуть на название созданной группы.

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

На вкладке «Пользователи» можно добавить нового пользователя. Давайте добавим его и привяжем к созданной группе.

После пользователь появится в списке пользователей.

Как видите, все просто. С остальными настройками админ-панели вы сможете разобраться самостоятельно или при помощи документации Wiki.JS. Кстати, реализована она через WikiJS и вы, после деплоя, сможете реализовать нечто похожее.

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

Пользовательская часть WikiJS

Пользовательская часть WikiJS позволяет вам легко и быстро создавать страницы и наполнять их необходимым контентом: фотографиями, видео, документацией и другими материалами.

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

Настроим главную страницу.

Для этого выходим с админки (кликая на «Выход»)

Далее кликаем на «Создать домашнюю страницу».

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

Кликаем и видим следующие варианты:

Вот что делает каждая опция:

• Markdown: Этот вариант позволяет форматировать текст с помощью синтаксиса Markdown, который является легким языком разметки для создания форматированного текста с использованием обычных символов.

• Visual Editor: Представленный значком с листом бумаги и форматирующими метками, этот редактор предоставляет WYSIWYG (What You See Is What You Get) интерфейс для редактирования текста, где вы видите конечный результат сразу при вводе.

• AsciiDoc: Кнопка с тремя горизонтальными линиями указывает на использование формата AsciiDoc, который также является текстовым форматом для написания документов.

• Code: Этот вариант с символами «< />» позволяет редактировать HTML‑код напрямую, что полезно для тех, кто знаком с веб‑разработкой.

• From Template: Значок с двумя перекрывающимися прямоугольниками указывает на использование готового шаблона для создания страницы, что может ускорить процесс создания контента.

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

В практике, чаще всего, вы будете использовать Markdown, поэтому, я создам первую страничку при его помощи.

Независимо от выбранной опции, первым экраном вас встретит:

Тут вы можете дать имя странице, короткое описание, прописать ее путь и добавить теги. На других экранах можно запланировать публикацию, добавить JS-сценарии и подключить стили.

Затем откроется очень удобный визуальный редактор, при помощи которого вы оформите свою страницу. При его помощи можно добавить медиа, текст, диаграммы и прочее.

Воспользуюсь редактором

В левой части мы пишем, а в правой уже можно посмотреть что из этого получилось. Редактор очень удобный. Лично мне понравился.

Далее сохраним страницу кликнув на «Создать».

Теперь, так как у нас была метка /home – при переходе по корневому пути (http://localhost:3000/) будет открываться только что созданная страница.

Примечательно то, что эта, как и прочие страницы, становится доступной всем пользователям, независимо от того авторизованы они или нет.

У меня получилась такая симпатичная страница

Для редактирования страницы можно воспользоваться иконкой карандаша в нижнем левом углу или иконкой в верхнем меню:

Для входа в панель администратора, если есть доступ, кликаем на шестеренку в верхнем левом углу.

Прежде чем мы начнем рассматривать другие опции пользовательской части, предлагаю сразу выполнить деплой. Это позволит сразу делиться своими страничками с любым пользователем, создавать свои группы и, в целом, самому оценить преимущества сервиса.

Подготовка к деплою

Чтобы избежать повторной установки, создания ролей, страниц, выбора языка и других настроек, логично перенести базу данных. Для этого сначала извлечем базу данных из контейнера, а затем привяжем её на этапе деплоя.

• Запуск shell в локальном контейнере:

docker exec -it wiki /bin/sh

• Поиск базы данных

 find / -name wiki.db

В моем случае путь выглядит так: /wiki/data/wiki.db.

• Копирование базы данных во временное хранилище:

cp /wiki/data/wiki.db /tmp/wiki.db

• Выход из shell:

 exit

Копирование файла базы данных на локальный компьютер:

docker cp wiki:/tmp/wiki.db ./

После копирования вы должны увидеть сообщение: Successfully copied + путь к файлу на локальном компьютере.

• Изменение пути к базе данных в Dockerfile:

 ENV DB_FILEPATH=/data/wiki.db

Теперь база данных будет сформирована в папке data, и Amvera сможет к ней подключиться. Это позволит использовать нашу базу данных в локальном проекте и избежать потери данных.

Выполним регистрацию на сайте Amvera Cloud, если вы ещё не зарегистрированы. Напоминаю, что за регистрацию вы получите 111 рублей.

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

Удаленный запуск проекта на Amvera Cloud

Без лишних слов, приступим к деплою.

• Авторизуемся на сайте Amvera Cloud

• Заходим в раздел с проектами

• Кликаем на «Создать проект».

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

• На новом экране кликаем на «Через интерфейс» и загружаем Dockerfile. Затем кликаем на «Далее».

• Формируем файл настроек. Тут нужно выбрать: окружение — docker, инструмент — docker, containerPort – 3000 или тот что вы указали в Dockerfile, значение EXPOSE. После жмем на «Завершить».

• Теперь активируем бесплатное доменное имя. Для этого необходимо зайти в проект, перейти на вкладку «Настройки» и сдвинуть ползунок возле доменного имени. Кроме того, если это требуется, вы можете привязать свое доменное имя в той же вкладке. Я использую бесплатное.

• Теперь закинем нашу базу данных с локального компьютера. Для этого переходим на вкладку «Репозиторий». Там выбираем Data и загружаем локальную базу данных.

Теперь, если все было выполнено корректно, остается подождать 5-7 минут и наш проект с локальными данными будет развернут и запущен в облаке (да, все так просто). После успешной сборки вы увидите сообщение «Приложение запущено».

Если после входа на сайт вас встретит форма для настройки админ-записи, то просто кликните на кнопку «Пересобрать проект». Это корректно подвяжет и доменное имя и локальную базу данных.

Сейчас я вижу информацию о том, что приложение запущено.

Следовательно, мне достаточно перейти по доменному имени, которое мне предоставил сервис Amvera Cloud и, если все пройдет корректно, то меня должна будет встретить главная страница, которую мы сделали на прошлом этапе.

Ссылка на проект, в моем случае, следующая: https://mywikiproject-yakvenalex.amvera.io/

Проверим.

Идеально! Тут я вижу, что при переходе на главную страницу — открывается та страница, что я делал на прошлом этапе. Сохранился русский интерфейс и темная тема проекта.

Так как меня не встретило генерации профиля администратора, как минимум, админ-запись существует. Попробую войти по своему логину и паролю.

Вход выполнен успешно, а значит, что с деплоем проблем не возникло и, хочу обратить ваше внимание, что сам процесс деплоя занял не больше 5-ти минут и это с учетом того, что я несколько минут ждал сборки и запуска. За это я и люблю Amvera Cloud.

Давайте добавим ещё одну страничку и будем на сегодня заканчивать.

При клике на иконку добавления страницы меня встречает такая форма.

На этом этапе можно выбрать иерархию и можно прописать путь к будущей странице

Я подготовил небольшую HTML страницу. Поэтому, при выборе типа страницы я выберу "code".

Далее необходимо стили закинуть в блок «Стили» и оставить HTML. Вот что у меня получилось: Хабр Матрица.

Как видите, вполне можно добавлять и стили. С остальным, думаю, вы сможете разобраться самостоятельно.

Заключение

Сегодня мы познакомились с достойной заменой Notion — Wiki.JS. Эта платформа не только бесплатна, но и превосходит Notion по ряду показателей. Убедитесь в этом сами, попробовав Wiki.JS в работе.

В статье я показал, как легко установить и выполнить деплой Wiki.JS на удаленный хостинг. Вы также узнали о контейнеризации через Docker и её преимуществах даже на таком простом примере.

Если эта статья оказалась для вас полезной, не забудьте поставить лайк, написать приятный комментарий или подписаться на меня на Хабре. Для тех, кто хочет получать больше эксклюзивного контента, который я не публикую на Хабре, приглашаю в свой телеграм-канал «Легкий путь в Python». Там уже более 500 участников, и у нас дружное сообщество, где мы обсуждаем не только программирование и Python, но и другие интересные темы.

До скорого! Удачи в освоении Wiki.JS и успешного деплоя!