Від файлу на комп'ютері до публічного посилання

Сторінка зібрана і відкрита в браузері. Має вигляд сайту, поводиться як сайт: посилання клікаються, кнопки натискаються. Ви надсилаєте її людині, а вона відповідає "не відкривається". Або відкривається, але без стилів і зображень. Нічого не зламалося. Сторінка живе лише в одному місці, на вашому диску, і адресний рядок браузера це показує - треба тільки знати, куди дивитися.

Запитання "як викласти сайт в інтернет" звучить так, ніби є кнопка, яку треба знайти. Корисніше спитати інакше: де сайт має жити, щоб його бачив не тільки я? Відповідь збирається частинами: сервер, дві адреси, 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 знову, на ту саму адресу, якщо вийде.

Другий запит чесний. "Якщо вийде" віддає агенту рішення, тимчасове це посилання чи постійне, і він скаже, яке вийшло. Відповіді агента не показую: вони свої для кожного хостингу і кожного skill.

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

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

Ключ має своє місце, звідки інструменти читають його самі: змінна середовища або файл, який skill деплою відкриває без вас. Запитає skill, куди зберегти ключ, - відповідайте місцем, не рядком у чаті.

Буває і навпаки: ключ приходить у розмову сам, відповіддю сервісу на запит агента. Тоді збережіть його в це місце і пам'ятайте, що листування вже бачило секрет.

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

10. Як це працює у зв'язці з Claude Code

Коли ви просите агента "виклади", відбувається приблизно таке.

• Агент дивиться на теку і бачить сторінку з готових файлів. Якщо skill для хостингу немає, запропонує встановити або запитає, куди викладати. Хостинг обираєте ви.
• Надсилання він робить командою. У режимах, де агент питає дозволу, команду видно до запуску: у ній написано, яку теку і куди він надсилає, і її варто прочитати, а не натиснути "так" за звичкою. Якщо підтверджень він не просить - такі режими є і бувають увімкнені з самого початку, - попросіть показати команду і теку до надсилання.
• Результат - посилання у відповіді агента. Відкривайте його з телефона: в агента немає другого пристрою, сам він цього не перевірить.
• Оновлення - те саме прохання, "виклади знову". На ту саму адресу вийде, тільки якщо хостинг упізнає вас за ключем. Інакше агент чесно поверне нове тимчасове посилання, і це не помилка.
• Email для тимчасового посилання агент запитати може, це не секрет. Ключ - ні: якщо запитав, відповідь - місце, звідки ключ можна прочитати, а не рядок у чаті.