Gdje objaviti web stranicu koju je napravio AI (besplatne i plaćene opcije)

Najbrži besplatni način da objaviš web stranicu koju je napravio AI je Netlify Drop: mapu s datotekama povučeš na web stranicu i ona je odmah uživo, bez računa. Ako želiš nešto trajno s vlastitom adresom, poput tvojeime.com, jednostavan plaćeni put je hosting paket kao što je Bluehost (plaćena poveznica). U oba slučaja prvo trebaš sve datoteke na okupu u jednoj mapi, a besplatna ekstenzija AI Code Harvester to napravi jednim klikom.

Prvo, što točno imaš

Kad ChatGPT ili Gemini naprave web stranicu, daju ti kod: obično jednu HTML datoteku (sama stranica), često CSS datoteku (boje i raspored) i JavaScript datoteku (gumbi i radnje). Za sada postoje samo u tvom chatu ili na tvom računalu. Da bi stranicu mogli vidjeti i drugi, datoteke moraju biti na web poslužitelju, a to je jednostavno računalo koje je stalno uključeno i pokazuje tvoju stranicu svakome tko upiše njezinu adresu. To je cijelo „objavljivanje“.

Dobra vijest: ovakva je stranica „statična“. To znači da su to samo datoteke, bez baze podataka i prijava koje rade iza nje. Statične stranice najlakše je objaviti, a nekoliko servisa to radi besplatno. Ako tvoja stranica treba pamtiti posjetitelje, primati narudžbe ili spremati podatke, to je veći projekt i obični host za datoteke nije dovoljan.

Koja je opcija za tebe?

• Želiš je nekome pokazati danas: Netlify Drop (besplatno, najbrže).
• Želiš besplatno i trajno, a nekoliko koraka više ti ne smeta: Cloudflare Pages ili GitHub Pages (besplatno).
• Želiš vlastitu adresu i sve na jednom mjestu: hosting paket, na primjer Bluehost (plaćeno).
• Radije uopće ne diraš datoteke: graditelj web stranica (plaćeno).

Nulti korak: stavi datoteke u jednu mapu

Što god odabrao, kreni odavde. Glavna datoteka mora se zvati index.html, jer je to datoteka koju poslužitelj pokaže prvu. Ostale datoteke (CSS i JavaScript) idu u istu mapu, s istim imenima koja HTML spominje. Ako ti je AI dao kod u nekoliko komada, ručno kopiranje je mjesto gdje ljudi zapnu.

Prečac je AI Code Harvester, besplatna Chrome ekstenzija (mali dodatak koji pregledniku daje jednu novu mogućnost). Pronađe kod u chatu i pretvori ga u imenovane datoteke. Pritisni Skini ZIP za mapu datoteka ili otvori Workspace i odaberi Jedna stranica (.html), koja spoji stilove i skripte u jednu datoteku koju je teško pokvariti. Kratki video pokazuje kako.

1. Nabavi datoteke. Skini ZIP iz AI Code Harvestera i raspakiraj ga u novu mapu.
2. Glavnu datoteku nazovi index.html. Ako ju je AI nazvao drukčije, preimenuj je.
3. Isprobaj na svom računalu. Dvaput klikni index.html. Ako stranica izgleda kako treba, spreman si.
4. Izbaci sve privatno. Pregledaj kod ima li zaporki ili API ključeva. Kod objavljene stranice može pročitati svatko.

Opcija 1: Netlify Drop (besplatno, najbrže)

Netlify Drop je web stranica na koju povučeš mapu i tvoj je sajt uživo. Netlify kaže da za korištenje ne treba račun, pa je to najbolji izbor za „samo želim ovo nekome pokazati“.

1. U pregledniku otvori app.netlify.com/drop.
2. Povuci svoju mapu (ili ZIP s njom) na stranicu.
3. Pričekaj trenutak. Dobiješ adresu uživo koja završava s netlify.app.
4. Otvori tu adresu u privatnom prozoru da provjeriš, pa je podijeli.

Kvaka: ako mapu ispustiš a da se nisi prijavio, Netlify projekt štiti privremenom zaporkom dok ga ne preuzmeš registracijom (besplatno). Dakle, ako želiš da ga vide drugi, napravi račun, preuzmi stranicu i provjeri je li postavljena kao javna. Za kasnije ažuriranje opet ispustiš mapu. Netlify preporučuje da objava ostane ispod otprilike 50 MB.

Opcija 2: Cloudflare Pages (besplatno, za dugo)

Cloudflare je velika tvrtka koja vodi dio infrastrukture interneta, a njezin servis Pages besplatno hosta statične stranice. Mapu ili ZIP učitaš u njezinoj nadzornoj ploči (upravljačkoj stranici na njezinu webu). Treba besplatan Cloudflare račun, a tvoja adresa izgleda kao tvojprojekt.pages.dev.

1. Napravi besplatan Cloudflare račun i otvori Workers & Pages.
2. Odaberi Create application, zatim Get started, pa Drag and drop your files.
3. Daj projektu ime, povuci mapu ili ZIP i pritisni Deploy site.

Kvaka: izbornici se s vremena na vrijeme mijenjaju, pa se gumbi mogu zvati malo drukčije kad pogledaš. Ograničenje učitavanja je 1000 datoteka i 25 MiB po datoteci, što je više nego dovoljno za stranicu koju je napravio AI. Ažuriranje znači ponovno učitavanje.

Opcija 3: GitHub Pages (besplatno, ako voliš GitHub)

GitHub je web stranica na kojoj programeri čuvaju kod u „repozitorijima“, to jest mapama datoteka pohranjenima online. GitHub Pages pretvara repozitorij u web stranicu. Besplatan je i dugogodišnji favorit, ali ima najviše koraka od besplatnih opcija.

1. Napravi besplatan GitHub račun i novi repozitorij naziva tvojekorisnickoime.github.io.
2. Učitaj svoje datoteke, s index.html na vrhu.
3. Otvori Settings repozitorija, zatim Pages, i pod Build and deployment odaberi Deploy from a branch i svoju glavnu granu.
4. Pričekaj nekoliko minuta, pa otvori https://tvojekorisnickoime.github.io.

Kvaka: promjene mogu trebati do 10 minuta da se pojave. Zapamti i da sve što staviš u javni repozitorij svatko može vidjeti, pa pregledaj datoteke prije učitavanja.

Opcija 4: Vlastiti hosting i domena (Bluehost)

Dva izraza koja ćeš ovdje sresti. Web hosting znači iznajmljivanje prostora na web poslužitelju, pa tvoje datoteke ostaju online danonoćno. Domena je tvoja adresa, poput tvojeime.com. S hostingom i domenom sam biraš kako se tvoja stranica zove, možeš je koristiti za posao i nisi vezan pravilima besplatnog servisa.

Bluehost (plaćena poveznica) je hosting tvrtka s kojom mnogi počinju. Na njezinoj stranici o zajedničkom hostingu navedeni su besplatni SSL (lokot zbog kojeg adresa počinje s https), jedna besplatna domena za prvu godinu (moraš je preuzeti u 90 dana, a vrijedi za određene nastavke domena) i 30 dana jamstva povrata novca na hosting. Prije kupnje provjeri trenutnu ponudu i cijenu obnove na njihovoj stranici.

1. Odaberi hosting paket i svoju domenu.
2. Otvori upravljačku ploču hostinga i pronađi mapu u kojoj su glavne datoteke tvoje stranice (često se zove public_html). Pomoć tvog hostinga pokazuje gdje je.
3. Učitaj ondje svoje datoteke, s index.html na vrhu, i otvori svoju domenu u privatnom prozoru.

Kvaka: ovo je jedina opcija ovdje koja košta, a cijene nakon prvog razdoblja mogu se promijeniti, pa pročitaj uvjete obnove. Zauzvrat dobivaš vlastitu adresu, mjesto za još stranica poslije i lak način da dodaš e-poštu na svojoj domeni.

Želiš vlastitu adresu? Kako radi domena

Domena je ime koje ljudi upišu da te pronađu, poput tvojeime.com. Ima dio s imenom i nastavak (.com, .org i mnogi drugi). Ne kupuješ je zauvijek: iznajmljuješ je, obično na godinu dana, i obnavljaš.

Postoje tri uobičajena načina da je dobiješ:

• Zajedno s hostingom. Bluehost (plaćena poveznica) uz svoj hosting navodi jednu besplatnu domenu za prvu godinu (moraš je preuzeti u 90 dana, a vrijedi za određene nastavke). To je najjednostavniji put ako ionako kupuješ hosting.
• Od prodavača domena (zove se „registrar“). Kupuješ samo ime i povezuješ ga s mjestom gdje tvoja stranica živi. Neki su registrari jeftiniji od drugih: Cloudflare Registrar kaže da ne dodaje maržu na cijene domena, a i Netlify prodaje domene.
• Domena koju već imaš. Tada ti treba samo korak povezivanja u nastavku.

Moraš li plaćati hosting da bi koristio vlastitu domenu? Ne nužno. Netlify, Cloudflare Pages i GitHub Pages svi ti dopuštaju povezati vlastitu domenu s besplatnom stranicom. Na stranici s cijenama svakog od njih provjeri što ti uključuje tvoj paket.

1. Nabavi domenu od registrara ili uz hosting paket.
2. Dodaj domenu u upravljačkoj ploči svog hosta. Kod Netlifyja koristi Domains, kod Cloudflare Pagesa otvori projekt i odaberi Custom domains, kod GitHub Pagesa koristi postavke Pages repozitorija.
3. Napravi zapis koji host traži. To je mali redak u DNS postavkama tvoje domene (imeniku koji kaže na koje računalo ime pokazuje). Obično je to CNAME zapis za verziju s www i A ili ALIAS zapis za običan tvojeime.com. Host ti pokaže točne vrijednosti za kopiranje.
4. Pričekaj, pa provjeri. Može trebati do 48 sati da proradi, iako često ide brže. Otvori svoju domenu u privatnom prozoru.

Dvije napomene. Cloudflare Pages traži da tvoja domena koristi Cloudflareove poslužitelje imena ako želiš običnu verziju bez www. A ako su ti i domena i hosting kod Bluehosta, obično je manje toga za postaviti jer su u istom računu; njihove stranice pomoći pokazuju korake.

Opcija 5: Graditelj web stranica (bez ikakvih datoteka)

Ako te već i čitanje o mapama, učitavanju i imenima datoteka umara, graditelj web stranica omogućuje da do stranice dođeš klikanjem: biraš blokove, upisuješ tekst i pritisneš objavi. S graditeljem obično iznova složiš stranicu od njegovih blokova, umjesto da učitaš AI-jev kod. Bluehostov Website Builder (plaćena poveznica) i Weblium (plaćena poveznica) su dva koja možeš pogledati. To je najsporiji način ako već imaš AI-jevu stranicu, ali najlakši ako ćeš stvari stalno mijenjati ručno.

Četiri provjere prije nego podijeliš link

• Otvori je u privatnom prozoru. Tako vidiš što vidi stranac, bez spremljenih prijava i datoteka u predmemoriji.
• Provjeri slike i poveznice. Ako nešto pokazuje na putanju poput C:\Users na tvom računalu, kod svih ostalih će puknuti. Koristi datoteke koje stoje uz index.html.
• Pogledaj je na mobitelu. Većina posjetitelja bit će tamo. U pregledu AI Code Harvestera možeš prvo prebacivati između širina Računalo, Tablet i Mobitel.
• Drži tajne podalje. Nikad ne objavljuj stranicu koja sadrži zaporku ili API ključ, jer kod može pročitati svatko.

Nabavi ekstenziju

AI Code Harvester je besplatan i radi s ChatGPT-om i Geminijem. Pronađe kod u chatu, omogući pregled stranice u sigurnom sandboxu i preuzme sve kao ZIP, kao jednu stranicu ili zajedno s chatom. Radi na tvom računalu: tvoj kod se nikad ne učitava k nama. Dodaj ga iz Chrome web-trgovine.

Dobro je znati prije nego počneš

FAQ