Как запустить быстро гибкий сайт-визитку за 0$ без опыта в web-разработке: компромисс между гибкостью и простотой

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

Я разработчик мобильных приложений. Про web-разработку имею исключительно поверхностные знания и за плечами не имею практики. Когда появилась навязчивая идея наконец-то довести свои мобильные приложения до релиза в Google Play — сразу задумался о том, как сделать свой сайт-визитку, где была бы информация обо всех моих проектах. При этом мне не хотелось, чтобы в самом начале или в перспективе я тратил значительное время на создание или поддержку, да и требования к сайту были не самые тривиальные. С самого начала я понимал, что конкретно мне нужно от сайта. При этом не смотрел в сторону создания чего-то неповоротливого: мысленно я готов был руками прописывать различные абстракции для упрощения выкладывания тех же статей, но не хотел возиться с настройкой чего-то до такой степени громоздкого, как условные CMS с модулями и подобные решения.

Поэтому немного о том, какие критерии у меня созрели и почему я их сформулировал именно так:

Минимум усилий на разработку и поддержку и при этом гибкая кастомизация: изначально хотелось, чтобы были шаблоны, но в которые смогу в случае чего «подлезть» и реализовать то, что требуется, а не то, что позволяет система;
Дружелюбная к SEO настройка: всегда хочется, чтобы сайт играл роль и доставщика трафика в мои мобильные приложения;
Поддержка Markdown: так как понимал, что нужна будет возможность сформировать некий шаблон, по которому получится оборачивать свои мысли в форму, а верстать с нуля (пусть и зачастую копипастой каждую страницу) — та еще боль;
Легкая поддержка мультиязычности: здесь снова, как и в предыдущем пункте — идея трафика. Почему бы не охватить запросы по другим языкам, которые теоретически могут быть менее конкурентны?
Чем меньше стоимость — тем лучше: это не был прямой критерий, но это всегда приятный бонус, особенно для инди-разработчиков.

Исследование вариантов и выбор Astro и Cloudflare Pages

Тут скажу кратко и без упоминания того, что конкретно пробовал: разные сайты для визиток и генераторы шаблонов. Бесплатные тарифы оказались сильно урезанными: где-то не было возможности управления SEO, где-то сразу понимаешь, что без покупки тарифа никуда. Но главная причина отсечения вариантов с генерацией шаблонов — меня не удовлетворила механика их создания. В некоторых вариантах было неочевидно даже то, как просто создать базовую страницу. Отчасти, может, у меня было такое настроение и не было мотивации досконально разбираться, да и подсознательно в голове сидела мысль: «Хоть я и не web-разработчик и мало что знаю про эту область, но что если вооружиться ИИ-помощником и попробовать сделать удобные абстракции для ведения шаблонной структуры, которая была бы удобна для меня и моих задач?» Было опасение, что можно закопаться в технической стороне и прогореть по итогу с идеей, так как можно упереться в неопределенности, которые будут долго решаться, а от этого пропадет мотивация (думаю, многим знакома боязнь потери мотивации).

И вот в один из вечеров обсуждения вариантов с ИИ мне был предложен вариант Astro и Cloudflare Pages.

Как пробовал связку Astro и Cloudflare Pages

Из общения с ИИ осознал, что данная связка полностью удовлетворяет моим критериям и даже больше. Топовые преимущества, которые шли бонусом:

Никакой возни с докером, сборкой проекта и деплоем: даешь Cloudflare Pages доступ к git-репозиторию, делаешь push в master-ветку, и сервис берет на себя сборку и развертывание. То есть после пуша совсем ничего делать не нужно.
Локальная проверка: проверка того, что сделал локально, — буквально одной командой. Проверил, протестировал, снова push.

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

Astro и мои критерии

Повторяться и озвучивать легкодоступные в Google похвалы про этот framework не буду, опишу лишь то, как Astro решил мои личные проблемы:

Минимум усилий и гибкая кастомизация: кривой-косой и в спешке сделанный черновик сайта был сгенерирован за вечер.
SEO-настройка: в Astro вся страница по умолчанию — это чистый HTML, а как следствие — все SEO в моих руках.
Поддержка Markdown: у Astro она реализована отлично. Можно сделать структуру, где есть веб-страница-шаблон, отдельно прописать минимальные условия для отображения контента, который будет подтягиваться из md или mdx-файлов. Для создания новой страницы в дальнейшем создается только md-файл. Никакой html-копипасты.
Мультиязычность: реализована в Astro в виде механизма i18n. Достаточно правильно заложить структуру на уровне папок. Я пришел к тому, что храню строки по каждой странице в массиве в json-формате. Перевод markdown-файлов тоже поддерживается — достаточно лишь заложить структуру.
Стоимость: Cloudflare Pages оказался механизмом с щедрыми лимитами в бесплатном тарифе (до 500 сборок проекта в месяц). Как итог — оплатил только домен.

Учитывая скорость развития web-разработки, Astro и Cloudflare Pages наверняка не единственные подобные решения. Я просто в один вечер случился «match», мои запросы были удовлетворены, и это все, что мне было нужно. Если у вас схожие цели — определенно рекомендую.

Напутствия

Немного о том, о чем я пожалел или что не учел сразу (мысли для тех, кто впервые погружается в web):

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

Вывод

На мой взгляд, не имея опыта в web-разработке, со связкой Astro и Cloudflare Pages можно создать гибкие и мощные сайты. Вооружившись ИИ-инструментами, большинство проблем сегодня абсолютно решаемы. И что важно — это будет бесплатно (если не считать плату за домен, которую я считаю оправданной инвестицией).