От файла на компьютере до публичной ссылки

Страница собрана и открыта в браузере. Выглядит как сайт, ведёт себя как сайт: ссылки кликаются, кнопки нажимаются. Вы отправляете её человеку, а он отвечает "не открывается". Или открывается, но без стилей и картинок. Ничего не сломалось. Страница живёт ровно в одном месте, на вашем диске, и адресная строка браузера это показывает - нужно только знать, куда смотреть.

Вопрос "как выложить сайт в интернет" звучит так, будто есть кнопка, которую надо найти. Полезнее спросить иначе: где сайт должен жить, чтобы его видел не только я? Ответ собирается по частям: сервер, два адреса, path, хостинг и деплой. Потом - как обновить выложенное, зачем хостингу ключ и что делает агент, когда вы просите его "выложи".

1. Файл живёт на одном компьютере

Посмотрите на адресную строку, когда страница открыта с диска. Там не ссылка, а путь к файлу:

file:///C:/projects/landing/index.html    # путь к файлу на вашем диске
https://landing-demo.tiiny.site/          # адрес на другом компьютере

Первая строка - это ваш диск. Браузер здесь работает как программа для просмотра: открыл файл, прочитал, показал. Никуда по сети он не ходил. Вторая строка - адрес другого компьютера. Первое откроется только у вас, второе с любого устройства, где есть интернет.

Отсюда и "не открывается". Отправить файл и опубликовать страницу - разные вещи. Страница обычно не один файл, а папка: index.html, рядом style.css и картинки. Отправили один index.html - у получателя он откроется, но стили и картинки искать будет негде. Вот и "открывается, но криво".

И второе ограничение, попроще. Вечером вы закрыли ноутбук, убрали в сумку и унесли домой. Всё, он спит и никому ничего отдать не может. Чтобы страницу видели все и всегда, её файлы должны лежать не у вас.

"Работает у меня" и "открывается у всех" - это два разных состояния. Дальше статья про то, что между ними.

2. Сервер

Главное слово - сервер. Это не загадочная коробка с лампочками, а просто компьютер, который всегда включён и отдаёт файлы другим. В этом весь его смысл: быть на связи, когда вас нет.

Кажется, что бывает и без него. Отправляете другу картинку в мессенджере - она же летит с вашего телефона прямо ему? Нет. Сначала она попадает на сервер мессенджера и уже оттуда к другу. Поэтому можно отправить, выключить телефон и пойти спать, а друг откроет её через два часа. Сервер стоит посередине даже там, где его не видно.

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

3. Домен и IP

Серверов в мире много, и к нужному надо как-то обратиться. По адресу. Адресов у сервера два, как у обычного дома: координаты и вывеска.

Первый - IP. Числовой адрес вроде 192.0.2.1: точный, но для человека нечитаемый, голые координаты. Компьютеры общаются между собой именно так.

Второй - домен. Имя для людей, вроде example.com. Это вывеска: вы же не говорите другу "встретимся у здания по координатам пятьдесят сорок пять, тридцать пятьдесят два". Вы говорите "у кофейни на углу".

192.0.2.1        # IP: числовой адрес сервера, для машин
example.com      # домен: то же место, с именем для людей

Как одно связано с другим: когда вы вводите имя, браузер сначала спрашивает у справочника имён, какой IP за ним стоит, и только потом идёт по цифрам. Справочник называется DNS, и больше о нём сейчас знать не нужно: вы вводите имя, остальное происходит само.

И ещё одна часть адреса, которую легко не заметить: https:// в самом начале. Это не часть имени, а способ связи: разговор с сервером зашифрован. Браузеры показывают это по-разному, а вот http:// без s все помечают как небезопасный. Хостинги дают шифрование сами.

4. Path и файл по умолчанию

На сервере обычно лежит куча файлов. Какой именно нужен, говорит path - путь, часть адреса после домена. Если домен это здание, то path - какой прилавок внутри.

Адрес читается слева направо, и это не магическая строка, а три ответа. https://example.com/about/team.html значит "на сервере example.com открой файл about/team.html".

Path - это буквально путь к файлу на диске сервера: папка about, в ней team.html, как путь к папке на вашем компьютере. У больших сайтов страницы часто собираются на лету, но логика та же: адрес ведёт к конкретному месту.

А если path пустой? Вы набираете https://example.com/ - какой файл открыть? Ответ давно договорённый: сервер отдаёт index.html из корневой папки сайта, так делают почти все хостинги. Отсюда правило, которое скоро пригодится: index.html лежит в корне папки, которую вы публикуете, а не во вложенной.

5. Маршрут целиком

Теперь все части на месте, и их можно собрать в одну цепочку.

Вы вводите адрес. Браузер узнаёт у справочника имён IP по домену, обращается к серверу, тот находит файл по path и отдаёт его. Браузер получает тот же HTML-текст, который мог бы лежать у вас на диске, и рисует страницу.

Главное здесь: разметку и стили браузер рисует одинаково, пришёл файл с диска или с сервера. Разница в том, кто ещё может до этого файла дойти. Правда, часть возможностей JavaScript браузер с диска ограничивает, поэтому на сервере страница иногда ведёт себя полнее, чем та же страница локально.

6. Хостинг

Сервера в дата-центре у вас нет, и не нужно. Есть хостинг - сервер напрокат: вы отдаёте ему папку со страницей, он кладёт её на свой всегда включённый сервер и возвращает публичную ссылку. Всё.

Ссылка будет на домене хостинга, а ваше имя стоит слева: landing-demo.tiiny.site, имя.github.io. Домен принадлежит хостингу, вам достаётся имя перед ним: иногда его выбираете вы, иногда хостинг выдаёт сам. Свой домен вроде mysite.com тоже можно, но про его покупку и настройку сейчас не будем: чтобы показать страницу, он и не нужен.

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

7. Деплой

И слово, ради которого всё затевалось. Деплой, от английского deploy: вы копируете свои файлы туда, где они доступны не только вам, - с вашего диска на сервер хостинга. Папка остаётся у вас и появляется там.

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

Что именно едет:

landing/
  index.html
  style.css
  img/
    hero.png

Публикуется landing/ целиком, поэтому style.css и картинки по-прежнему лежат рядом с index.html и находятся по тем же путям. А index.html - в корне этой папки. Опубликуете папку уровнем выше - по ссылке откроется список папок или пустота.

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

Два слова отсюда встречаются постоянно. Локально - на вашей машине, для вас одного. Наружу - на сервере, для всех. Деплой - мост между ними, и он короче, чем кажется: одна папка и одна её копия.

8. Как обновить опубликованное

Вы поправили заголовок в index.html, обновили страницу в телефоне - там старый. Так и должно быть. на хостинге лежит копия с момента деплоя, а вы правили оригинал. Чтобы по ссылке появилось новое, папку нужно отправить снова: обновление - это повторный деплой.

Тут есть тонкость. Отправить снова на тот же адрес можно, только если хостинг вас узнаёт. Отсюда два вида ссылок.

Временная. Некоторые хостинги дают ссылку вообще без аккаунта - чтобы показать и обсудить. Живёт она недолго: у Tiiny Host, например, около часа. Хостинг может попросить email даже для неё, это не регистрация, а способ привязать загрузку хоть к чему-то. Обновить такую ссылку нельзя, только выложить папку заново под новым адресом.

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

Если деплой делает агент, разница между первым разом и обновлением - в одной фразе:

Выложи папку landing на хостинг. Нужна ссылка, которую можно открыть с телефона.

Я поправил заголовок в index.html. Выложи landing снова, на тот же адрес, если получится.

Второй запрос честный. "Если получится" отдаёт агенту решение, временная это ссылка или постоянная, и он скажет, какая вышла. Ответы агента не показываю: они у каждого хостинга и навыка свои.

9. Ключ доступа

Аккаунт на хостинге даёт ключ доступа: длинную строку из букв и цифр, по которой хостинг узнаёт вас. Руками он не нужен: вы вошли в аккаунт на сайте, перетащили папку, нажали деплой - хостинг и так знает, кто вы. Ключ нужен агенту: через сайт он не пойдёт, он отправляет папку командой, а команду хостинг узнаёт только по ключу. С ним деплой кладёт файлы под ваш постоянный адрес, без него - только временная ссылка.

У ключа есть своё место, откуда инструменты читают его сами: переменная окружения или файл, который навык деплоя открывает без вас. Спросит навык, куда сохранить ключ, - отвечайте местом, не строкой в чате.

Бывает и наоборот: ключ приходит в разговор сам, ответом сервиса на запрос агента. Тогда сохраните его в это место и помните, что переписка секрет уже видела.

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

10. Как это работает в связке с Claude Code

Когда вы просите агента "выложи", происходит примерно следующее.

• Агент смотрит на папку и видит страницу из готовых файлов. Если навыка для хостинга нет, предложит поставить или спросит, куда выкладывать. Хостинг выбираете вы.
• Отправку он делает командой. В режимах, где агент спрашивает разрешение, команду видно до запуска: в ней написано, какую папку и куда он отправляет, и её стоит прочитать, а не нажать "да" по привычке. Если подтверждений он не просит - такие режимы есть и бывают включены с самого начала, - попросите показать команду и папку до отправки.
• Результат - ссылка в ответе агента. Открывайте её с телефона: у агента нет второго устройства, сам он этого не проверит.
• Обновление - та же просьба, "выложи снова". По тому же адресу получится, только если хостинг вас узнаёт по ключу. Иначе агент честно вернёт новую временную ссылку, и это не ошибка.
• Email для временной ссылки агент спросить может, это не секрет. Ключ - нет: если спросил, ответ - место, откуда ключ можно прочитать, а не строка в чате.