Посвящается айтишникам и прочим встающим на этот скользкий путь анальной эквилибристики.
В жизни каждого человека бывает такой момент, когда он думает: “блин, хочу сайт”. Нет, не каждого?… Есть нормальные люди?… Ну ладно…
Поднятие сайта - чрезвычайно разнообразная задача, которая может сводиться как к установке XAMMP на свой домашний компьютер, так и к 10 кругам инвестирования по несколько лямов долларов каждый, аренде сети дата-центров и разработки кастомного серверного софта.
Этот гайд затрагивает уже тот уровень сайтов, которые из своей домашней сети с помощью ngrok или dyndns вести стыдно, и нужен адекватный, как можно более близкий к 100% uptime и относительно быстрая работа. Но, тем не менее, это всё ещё просто набор красивых статических страничек - будь то личный блог, визитка, резюме или документация.
Состоит этот гайд из двух частей о двух разных инструментах. Первая часть - о прекрасном хостинге Cloudflare Pages, который я для себя открыл, когда задался вопросом блога. Вторая часть - об инструменте (Quartz) для превращения Markdown заметок в минималистичный блог, с помощью которого и создан этот сайт.
Cloudflare Pages - хостинг мечты, моё открытие года
честно, мне не платили 15 долларов за эту часть статьи…
Для этой задачи идеален Cloudflare Pages. Знай бы я о нём в далеком 2019 году, когда только изучал как поднимать сайты - конца моей радости бы не было. Собственно именно на нём лежит этот сайт! И работа с ним на удивление приятна и проста, по крайней мере пока что.
Почему я считаю это хороший выбор:
- быстро по всему миру - это весь сайт лежащий на CDN самого Cloudflare, потому быстрее уже не будет
- удобно - можно просто загрузить папку с html файлами, а можно указать на GitHub/GitLab репозиторий. Всё это работает изнутри красивой и удобной панели управления Cloudflare
- гибко - можно загружать не только сразу готовые страницы, а любой статический генератор страниц
- БЕСПЛАТНО - карты не требуют, денег не просят, никаких данных им от вас не нужно и, как следствие, по стране вас не забанят
- абсолютно никаких ограничений по трафику
- бесплатный поддомен под pages.dev (этот сайт также доступен как slesarblog.pages.dev)
- SSL работающий по-умолчанию и не требующий никаких действий от вас для своей работы
- интеграция с DNS от того же Cloudflare - достаточно пары нажатий, чтобы добавить новый поддомен или направить основной на ваш сайт
- им абсолютно похуй что вы хостите - главное, чтобы это было законно и им никто не жаловался
К слову о бесплатности - у неё есть свои ограничения:
- до 500 билдов (обновлений) в месяц на один сайт
- один отдельно взятый файл должен весить до 25МБ
- 100 кастомных доменов на один сайт (кому-то нужно больше чем 10 для статического сайта…?)
Ограничения на мой взгляд крайне несущественные для инди-разработчика или даже небольшой команды.
P.S. если вы только начинаете учиться веб-разработке, но хотите уже что-то опубликовать, то это идеальный хостинг для вас - или просто загрузите архив с кодом, или создайте приватный репозиторий, привяжите его к Cloudflare по гайду ниже, но поэкспериментируйте с настройками
Впринципе, ничего не мешает вам хостить фронт-энд на этом сервисе, а бэк-энд крутить на другом поддомене с помощью другого сервиса. Так что по сути это даже ультимативное решение, если соблюдать определённые ограничения - только разве что большие файлы не захостишь и видео. Но это и так на одном сервере с фронтэндом не рекомендуется хостить, а на видео и файловом хостинге соотвественно.
Quartz - пишем нормальный сайт в блокноте
Нашёл я Quartz как интересное пересечение двух моих хотелок - с одной стороны найти простую и доступную альтернативу лагучему и не очень удобному Telegra.ph, с другой стороны максимально близко интегрировать процесс с моим любимым приложением для заметок на Markdown - Obsidian (крайне рекомендую!). Потому, какой-нибудь WordPress был бы излишен для этой задачи и требовал бы слишком много к себе внимания.
Quartz это такой статический генератор на node.js, который берёт папку с Markdown файлами, и делает из неё своего рода вики. Изначально, как я понял, этот проект и был создан человеком, который хотел свои конспекты из Obsidian опубликовать, но не хотел платить за это конские 10$ в месяц, которые просит официальный плагин Obsidian Publish.
Самое прекрасное в этом всём то, что Quartz одновременно и крайне прост, и, при этом, крайне гибок. Здесь можно как угодно настроить и/или отключить любой элемент сайта прямо в интуитивно понятном конфиге (выражение, которое вы услышите только от разработчика), а статьи писать можно буквально в блокноте, ведь это Markdown - и Obsidian здесь в основном для быстроты и красоты.
Также, эта чудесная программа прекрасно интегрируется с Cloudflare Pages - более того, он создан для этого сервиса, именно из документации Quartz я узнал про Pages.
Градкий гайд как поднять Quartz на Pages
В первую очередь вам нужен Node.js, причём поновее. Если вы на Debian-дистрибутиве или любом другом fixed release, то не забудьте подключиться к дополнительным репозиториям и скачать именно новейшую версию. На Windows просто качаете с сайта Node.js.
Далее, скачайте сам Quartz и инициализируйте его:
git clone https://github.com/jackyzha0/quartz.git
cd quartz
npm i
npx quartz create
Установщик в командной строке спросит вас все минимально необходимые вопросы для настройки.
После чего можете скопировать всё содержимое папки с заметками в quartz/content/. На что нужно обратить внимание при переносе своих заметок из Obsidian: теперь у вас есть index.md, который является главной страницей сайта, а название страницы можно задать через аттрибут title.
Вот как этот атрибут выглядит для этой статьи:
Если вам нужно двоеточие в названии, то оберните его кавычками.
Далее, если хотите, можете отправиться читать документацию и экспериментировать с конфигами, где можно задать уникальное название, поменять (или убрать) ссылки в футере, добавить или убрать содержание, граф, навигатор статей и многое другое.
Чтобы запустить превью сайта достаточно запустить команду из папки quartz:
npx quartz build --serve
Это превью будет доступно исключительно на локалхосте - где, собственно, и нужно выполнять эту команду. Quartz не предназначен для того, чтобы использоваться как сервер в production, это лишь генератор. Превью будет обновляться в реальном времени, что особенно приятно, пока копаешься в настройках и экспериментируешь с оформлением статей.
Когда вас полностью удовлетворяет полученный результат можно приступать к загрузке сайта на Cloudflare. Есть 2 способа - один быстрый и тупой, другой чуть замудрёнее, но правильнее. Первый это тупо папку quartz/public засунуть в .zip архив и залить в панель управления Pages - проще не придумаешь. Второй это подключить Pages к своему репозиторию на GitHub или GitLab, который он будет мониторить и обновляться автоматически в течение пары минут с каждым коммитом. Репозиторий, кстати, может быть приватным/закрытым, это никак не помешает процессу.
Здесь я рассмотрю правильный и долгий путь, с лёгким думаю сами как-нибудь разберётесь :)
Настройка репозитория и его синхронизация с Cloudflare
Если вы качали Quartz с помощью git clone, то локальный репозиторий у вас уже есть. Если нет, то создайте его с помощью git init, добавьте все файлы и продолжайте.
Теперь, вам необходимо настроить связь этого репозитория с GitHub (или GitLab) - для этого создайте новый пустой репозиторий в соотвествующем сервисе. Отметьте, что readme.md не нужен.
Далее, уберите предыдущий remote origin, что достался вам с репозиторием проекта, и добавьте новый - ваш собственный репозиторий.
git remote set-url origin [URL вашего репозитория]
Дело осталось за малым - сказать Quartz-у синхронизировать все изменения.
npx quartz sync --no-pull
Единственное, на что нужно обратить внимание - если вы пользуетесь GitHub и не настроили git over ssh, то вам нужно будет создать персональный токен доступа и ввести его вместо пароля, когда его спросят. Тоже самое необходимо сделать и в GitLab, если у вас включен OTP 2FA.
В будущем для обновления содержимого сайта используйте ту же самую команду, но без --no-pull:
npx quartz sync
Теперь нужно дать Pages доступ к репозиторию - всё делается интуитивно в браузере. Скриншоты, тем не менее, на всякий случай, приложены ниже. Важный момент - настройка того, как Cloudlfare “компилирует” сайт: какую команду он запустит и какую папку он сделает доступной по адресу сайта.
| Поле | Значение |
|---|---|
| production branch | v4 |
| framework preset | none |
| build command | npx quartz build |
| build output directory | public |
Вуаля! У вас есть сайт! Его имя будет зависеть от имени, что вы дали вашей “странице” в панели управления Cloudflare, но оно в любом случае будет заканчиваться на .pages.dev. Также, если у вас уже есть домен в Cloudflare вы можете абсолютно бесплатно подключить его в настройках вашего сайта. Про покупку домена лучше погуглите сами - рынок большой, вариантов много, свой навязывать не буду.
| покадрово… |
|---|
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |