Jak opublikować artifact z Claude jako prawdziwą stronę
Claude zbudował ci piękną stronę w artifactcie. Klikasz „Publish” i dostajesz link na claude.site w interfejsie Anthropic. Świetne do pokazania demo, ale to nie jest twoja strona. Oto jak opublikować stronę z Claude jako prawdziwą witrynę pod własnym adresem.
Claude naprawdę świetnie buduje strony. Poproś o landing, portfolio albo wizytówkę, a wyrenderuje kompletny artifact, który oglądasz na żywo w czacie. Kod, który tworzy, jest samodzielny: HTML, CSS i JavaScript w jednym pliku. To idealny format do natychmiastowej publikacji.
Problem to ostatni krok. Wbudowany przycisk Publish w Claude tworzy link w domenie Anthropic, w ich interfejsie. Nie podepniesz go pod własny adres, nie masz nad nim pełnej kontroli i widać, że to „demo z Claude”, a nie prawdziwa strona. Jeśli chcesz czegoś, czego naprawdę użyjesz, dla firmy, do portfolio, w projekcie, musisz przenieść ten HTML na prawdziwy hosting. Dobra wiadomość: zajmuje to około minuty.
Najpierw wyciągnij HTML z Claude
Claude daje kilka sposobów na wyciągnięcie surowego kodu z artifactu. Każdy działa:
- Przycisk kopiowania: w panelu artifactu po prawej kliknij ikonę kopiowania (w górnym rogu), żeby skopiować cały kod do schowka.
- Przycisk pobierania: poszukaj ikony pobierania (strzałka w dół); Claude zapisze artifact jako plik
.htmlw pobranych. - Po prostu poproś: napisz „Pokaż mi pełny HTML tego artifactu”, a Claude wklei cały kod do czatu. Zaznacz wszystko i skopiuj.
Wskazówka: poproś o jeden plik HTML
Jeśli Claude zbudował artifact w React, poproś: „daj mi to jako jeden samodzielny plik HTML z całym CSS i JavaScriptem w środku”. Jeden plik HTML najłatwiej hostować: nie ma czego budować ani składać, więc działa od razu po wklejeniu.
Krok po kroku: od artifactu z Claude do działającej strony
Skopiuj HTML artifactu
Użyj przycisku kopiowania albo pobierania w panelu artifactu, jak opisano wyżej. Upewnij się, że masz całą stronę: powinna zaczynać się od <!DOCTYPE html> i kończyć na </html>.
Załóż darmowe konto
Załóż darmowe konto w Hostilo. Zajmuje to około minuty i nie wymaga karty płatniczej. Wybierz nazwę strony: stanie się twoim publicznym adresem, np. twoja-nazwa.hostilo.page.
Wklej, zapisz i gotowe
Otwórz edytor, wklej HTML artifactu i kliknij Zapisz. Strona od razu działa pod twoim adresem, z darmowym certyfikatem HTTPS. Bez otoczki claude.site, bez interfejsu Anthropic: tylko twoja strona w otwartym internecie.
Publish w Claude a prawdziwy hosting: czym się różnią?
| „Publish” w Claude | Prawdziwy hosting | |
|---|---|---|
| Adres | claude.site/... (domena Anthropic) | Twoja nazwa / domena |
| Wygląda jak | Demo z Claude | Prawdziwa strona |
| Własna domena | Nie | Tak (w planach płatnych) |
| Formularze kontaktowe, statystyki | Nie | Tak |
| Pełna kontrola | Ograniczona | Tak, strona jest twoja |
Do szybkiego pokazania demo koledze Publish w Claude wystarczy. Do wszystkiego, co ma być prawdziwą stroną, czyli czegoś, co wpiszesz na wizytówkę albo wyślesz klientowi, potrzebujesz porządnego hostingu z własnym adresem.
Późniejsze zmiany
Artifact to jeden samodzielny plik, więc zmiany są proste. Chcesz coś poprawić? Masz dwie drogi: edytujesz kod bezpośrednio w edytorze Hostilo i zapisujesz albo wracasz do Claude, prosisz o zmianę, kopiujesz nową wersję i wklejasz w miejsce starej. Tak czy inaczej strona aktualizuje się od razu. Wiele osób po prostu iteruje w Claude i wkleja ponownie; to najszybsza pętla.
Bonus: niech Claude (albo agent AI) opublikuje za ciebie
Jeśli regularnie korzystasz z Claude, możesz w ogóle pominąć kopiowanie: dodaj https://hostilo.app/mcp jako własny konektor, zaloguj się i poproś Claude: „opublikuj to jako moja-strona” (instrukcja w dokumentacji). Jeśli korzystasz z Cursora albo Windsurfa, jest jeszcze jedna droga bez rąk. Hostilo ma API dla agentów AI, więc asystent może publikować i aktualizować strony w twoim imieniu: generujesz klucz API, przekazujesz go agentowi, a on wdraża bezpośrednio. Nie dotykasz panelu. Większości osób kopiuj-wklej w zupełności wystarczy, ale jeśli pracujesz w narzędziach AI do programowania, to całkowicie zamyka pętlę.
Gotowy, żeby opublikować swoją stronę z AI?
Wklej kod z ChatGPT albo Claude, kliknij Zapisz i w kilka sekund masz działający link z HTTPS. Za darmo, bez karty płatniczej.
Opublikuj stronę za darmo
