Service professionnel

Как я создал многоязычный сайт с помощью Claude Code

Обратная связь: создайте сайт Hugo на 6 языках с помощью Claude Code. Что делает возможным ИИ — и что он не заменяет.

Контекст

Я работаю учеником разработчика цифрового бизнеса в CHUV в Сионе. Моя работа — понимать потребности бизнеса и находить правильные технические решения. Никакого кодирования по 8 часов в день в IDE.

Когда я хотел создать свой сайт-портфолио, у меня было два варианта: шаблон WordPress или что-то действительно индивидуальное. Я выбрал второй, с Клодом Коде в качестве технического партнера.

Самый важный момент этой статьи можно выразить в одном предложении: без моих навыков работы с компьютером она бы никогда не сработала.

Что мне пришлось освоить, ПРЕЖДЕ ЧЕМ прикоснуться к ИИ

Прежде чем задать что-либо Клоду Коду, я потратил месяцы на обучение:

  • DNS и доменные имена: поймите, как davidmerki.ch указывает на сервер, записи A, CNAME, распространение
  • Веб-хостинг: CloudPanel, SSH, SCP, права доступа к файлам, сертификаты SSL. – Безопасность: HTTPS, заголовки безопасности, защита от внедрения, лучшие практики OWASP.
  • Защита данных: LPD (швейцарский закон) и европейский RGPD, а также то, что конкретно это означает для контактной формы, аналитического файла cookie или календаря.
  • Веб-архитектура: разница между статическим и динамическим сайтом, почему Hugo, как работает сборка и развертывание.

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

Почему Hugo + Клод Код

Hugo — это сверхбыстрый генератор статических сайтов. Никакой базы данных, никакого сложного PHP-сервера, загрузка практически мгновенная. С другой стороны, кривая обучения будет крутой, если вы не знаете шаблонов Go.

Клод Код помог мне преодолеть эту кривую. Мой workflow выглядит следующим образом:

  1. Описываю желаемый результат на французском языке своими словами
  2. Клод анализирует существующий код и предлагает подход
  3. Я проверяю подход, потому что понимаю архитектуру
  4. Клод реализует полный код
  5. Тестирую и проверяю, что всё правильно: безопасность, доступность, производительность
  6. Повторяем, пока не станет чисто

Шаг 3 является ключевым. Если бы я не понимал, что мне предлагает Клод, я бы не смог это подтвердить. И именно здесь большинство людей ошибаются.

6 языков, включая 2 RTL

Сайт поддерживает 6 языков: французский, немецкий, арабский, русский, китайский и иврит. На арабском и иврите пишутся справа налево (RTL), что нарушает всю раскладку.

Для переводов я создал вместе с Клодом скрипт Python, который читает исходный Markdown на французском языке, сохраняет начальную часть YAML и HTML, переведенный через API DeepL (с Google Перевести на рельеф) и защищает глоссарий из 52 терминов, в основном имен собственных и сокращений.

Результат: ~57 автоматически переведенных файлов Markdown. Но опять же, мне нужно было понять, как API, квоты, резервные варианты и система i18n Hugo работают, чтобы все работало правильно.

Система бронирования

Самая большая часть — это полноценная система бронирования, интегрированная в статический сайт.

  • Интерактивный календарь с навигацией по месяцам.
  • 30-минутные слоты с понедельника по пятницу с 9:00 до 19:00.
  • Синхронизация с моим календарем Outlook (анализ ICS + RRULE)
  • Проверка форм в режиме реального времени
  • ~900 строк JavaScript

Клод Код сгенерировал все, включая бэкэнд PHP. Но именно мне пришлось настроить CORS, защитить конечную точку токеном, развернуть PHP в CloudPanel и проверить, правильно ли анализ ICS обрабатывает швейцарские часовые пояса.

Числа

Метрическая Значение
Всего файлов ~420
Шаблоны HTML 91
Компоненты (частичные) 23
Языки 6
JS линии (бронирование) ~900
Время сборки Hugo ~14 с

Инструменты, которые я использую

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

  • Клоду (Антропик) за все мои технические проекты. Клод Код в CLI для разработки, Клод в разговоре для размышлений и архитектуры. Это мой главный инструмент.
  • Euria для остального: написание, исследование, повседневные вопросы. Это европейский ИИ, плюс за бережное отношение к данным.

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

Что бы я сделал по-другому

  1. Начните с мобильных устройств. Сначала я разработал настольный компьютер, а затем адаптировал его; наоборот было бы более эффективно.
  2. Ограничьте анимацию. 12 модулей это слишком много. Четырёх-пяти хорошо выбранных было бы достаточно.
  3. Структурируйте переводы с самого начала. Я добавил языки позже, что создало ошибки.
  4. Настройте CLAUDE.md с первого дня. Этот файл конфигурации для Claude Code меняет все.

Настоящее сообщение

ИИ значительно ускоряет техническую работу. Больше никаких часов документации, переполнения стека и отладки синтаксиса. Это фантастический инструмент.

Но это не заменяет понимания. У ИИ нет сознания или обзора. Она не знает, что срок действия вашего SSL истекает через 3 дня, что ваша контактная форма не соответствует LPD или что на вашем хостинге нет резервной копии.

Вам нужен человек, который разбирается в компьютерных науках, стоящих за этим. Кто-то, способный при необходимости вдаваться в подробности, любопытный, желающий понять «почему», а не только «как».

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


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

Mes autres services

D'autres services qui pourraient vous intéresser