Publica Site-ul GRATIS!

Sa publici un site HTML/CSS real pe internet, gratuit, folosind Netlify sau GitHub Pages — si sa stii care metoda ti se potriveste.

Sa pregatesti un folder de site cu index.html ca fisier principal
Sa publici un site prin drag-and-drop pe Netlify (dupa logare)
Sa creezi un cont GitHub si un repository public
Sa activezi GitHub Pages si sa obtii URL-ul site-ului
Sa actualizezi un site publicat
Sa stii ce date personale NU trebuie incluse pe un site public

Atom 1

Doua metode sa publici un site

🎯 Ce vei invata

Metoda 1: Netlify Drop — Tragi folderul in browser si primesti un link in cateva secunde.
Metoda 2: GitHub Pages — Proiecte cu versionare si backup automat.
Ambele sunt 100% GRATUITE si profesionale.

Caracteristica	Netlify Drop	GitHub Pages
Dificultate	★ Foarte usor	★★ Mediu
Timp setup	2-3 minute	10-15 minute
Adresa site	nume-site.netlify.app	username.github.io/repo
Cont obligatoriu?	Da (gratuit)	Da (gratuit)
Actualizare site	Reincarci folderul	Upload fisier nou + Commit
Ideal pentru	Proiecte simple, teste rapide	Proiecte pe termen lung

⚠ Siguranta online — citeste inainte sa publici!

Site-ul publicat este vizibil pentru TOATA lumea de pe internet, inclusiv persoane necunoscute. Nu include niciodata pe site:

Numele tau complet (prenume + nume)
Adresa, scoala sau orasul
Numarul de telefon
Fotografii cu fata ta sau ale familiei
Varsta sau data nasterii

Intreaba un parinte sau profesor inainte de a crea un cont pe o platforma noua.

Atom 2

Metoda 1: Netlify Drop

Netlify Drop este cel mai rapid mod de a publica un site: tragi folderul in browser si primesti un link in cateva secunde.

1 Pregateste folderul cu site-ul

Asigura-te ca ai un folder cu toate fisierele:

site-ul-meu/
  |-- index.html   # Pagina principala (OBLIGATORIU!)
  |-- style.css    # Stilurile CSS
  +-- imagini/     # Folder cu imagini (optional)

⚠ Important!

Fisierul principal TREBUIE sa se numeasca exact index.html (litere mici, fara spatii).

2 Creeaza-ti cont gratuit pe Netlify

Netlify necesita un cont pentru a putea gestiona site-ul publicat. Contul este gratuit.

☁ Creeaza cont Netlify

Mergi la app.netlify.com/signup
Alege "Sign up with email" sau conecteaza-te cu GitHub
Confirma adresa de email

💡 Sfat

Dupa ce esti logat, mergi la app.netlify.com/drop. Daca nu esti logat, pagina te redirectioneaza catre autentificare.

3 Trage folderul pe pagina Netlify Drop

☁ Deschide Netlify Drop

Dupa logare, vei vedea zona "Drag and drop your site output folder here"
Deschide File Explorer (Windows Explorer)
Trage TOT folderul (nu fisierele individuale) pe zona din browser
Asteapta 10-30 de secunde...

4 Site-ul e LIVE!

Dupa upload, vei primi un link de genul:

https://random-name-12345.netlify.app

✔ Felicitari!

Copiaza link-ul si testeaza-l in browser. Daca se deschide corect, site-ul tau este live!
Aminteste-ti: site-ul este public — nu include date personale in continut.

5 Optional: Schimba numele site-ului

Implicit primesti un URL aleatoriu. Poti alege un nume mai usor de retinut:

Din dashboard-ul Netlify, click pe site-ul tau
Mergi la Site settings > Domain management
Click pe "Edit site name"
Scrie un nume nou (ex: proiect-tic-cls8)
Click "Save"

💡 Sfat pentru nume

Alege un nume descriptiv si neutru — evita includerea numelui tau real sau al scolii in URL.

☑ Lista de verificare Netlify

Am creat cont gratuit pe Netlify Sunt logat pe app.netlify.com Folderul meu contine index.html Am tras folderul pe zona de drop Am copiat si testat link-ul in browser Site-ul nu contine date personale

Atom 3

Metoda 2: GitHub Pages

💡 De ce GitHub Pages?

GitHub pastreaza istoricul tuturor modificarilor. Poti reveni oricand la o versiune anterioara. Folosit de programatori profesionisti din toata lumea!

1 Creeaza cont GitHub

🐙 github.com/signup

Introdu adresa de email
Alege o parola puternica (minim 8 caractere, litere + cifre)
Alege un username (va aparea in URL-ul site-ului)
Selecteaza tara/regiunea (camp obligatoriu)
Confirma emailul (GitHub trimite un cod de verificare)

⚠ Siguranta — alege cu grija username-ul!

Username-ul tau GitHub va aparea in adresa site-ului: username.github.io. Aceasta adresa este publica si permanenta (indexata de motoarele de cautare).
Alege un pseudonim, nu prenume+nume real. Exemple bune: proiect-tic-2026, site-cls8a. Exemple de evitat: ionpopescu, ion-popescu-cls8.
Varsta minima pentru GitHub este 13 ani. Daca esti mai mic, cere ajutorul unui parinte sau profesor.

2 Creeaza un Repository nou

Un repository este ca un folder online pentru proiectul tau.

Dupa logare, click pe "+" din coltul dreapta sus
Selecteaza "New repository"
La Repository name scrie: site-tic
Selecteaza "Public"
Bifeaza "Add a README file"
Click "Create repository"

💡 De ce Public?

GitHub Pages functioneaza gratuit doar pentru repository-uri Public. Nu include fisiere cu parole sau date personale!

3 Incarca fisierele site-ului

In repository, click pe "Add file"
Selecteaza "Upload files"
Trage fisierele (index.html, style.css, etc.) in zona de upload
La "Commit changes", in campul de mesaj scrie: Adaug site-ul
Click "Commit changes"

⚠ Atentie la structura!

Fisierul index.html trebuie sa fie in radacina repository-ului, NU intr-un subfolder!

4 Activeaza GitHub Pages

In repository, click pe tab-ul "Settings"
In meniul din stanga, click pe "Pages"
La "Source", selecteaza "Deploy from a branch"
La "Branch", selecteaza "main" si "/ (root)"
Click "Save"

5 Asteapta si verifica

GitHub construieste site-ul dupa ce salvezi. Poate dura pana la 10 minute — nu repeta pasii, mai asteapta si reincarca pagina.

Asteapta 2-10 minute
Reincarca pagina Settings > Pages
Cand site-ul este gata, apare butonul "Visit site"
Click pe buton pentru a vedea site-ul live!

ℹ Confirmarea publicarii

In sectiunea Settings > Pages apare un buton "Visit site" cand site-ul este publicat. Nu exista un mesaj verde separat — daca butonul este vizibil, site-ul e live.

💡 URL-ul site-ului

Adresa va fi de forma: https://username.github.io/site-tic/

6 Cum actualizezi site-ul

In repository, click pe fisierul pe care vrei sa-l modifici
Click pe iconita creion (Edit this file)
Fa modificarile
Click "Commit changes" si confirma
Site-ul se actualizeaza automat in cateva minute

💡 Pentru avansati: Git local

Programatorii profesionisti instaleaza Git pe calculator si sincronizeaza fisierele local cu GitHub: git push.

☑ Lista de verificare GitHub Pages

Am creat cont GitHub cu pseudonim (nu prenume+nume real) Am creat un repository Public Am incarcat index.html in radacina repository-ului Am activat GitHub Pages (Settings > Pages, Source: main) Am asteptat si am dat click pe butonul "Visit site" Site-ul nu contine date personale

Atom 4

Probleme frecvente si solutii

Site-ul nu se incarca / Eroare 404

Verifica daca fisierul se numeste exact index.html (nu Index.html sau index.HTML)
Asteapta mai mult: GitHub Pages poate dura pana la 10 minute
Verifica daca ai activat GitHub Pages corect (Settings > Pages, Source: main)
Asigura-te ca repository-ul este setat ca Public, nu Private

Imaginile nu apar

Verifica calea imaginii — foloseste cale relativa: src="imagini/foto.jpg"
Atentie la litere mari/mici: Foto.JPG NU e acelasi lucru cu foto.jpg
Asigura-te ca ai incarcat si folderul cu imagini in repository

CSS-ul nu se aplica

Verifica link-ul din HTML: <link rel="stylesheet" href="style.css">
Fisierul CSS trebuie sa fie in acelasi folder cu HTML
Apasa Ctrl+Shift+R pentru hard refresh (forteaza reincarcarea CSS)

Netlify Drop nu imi arata zona de drag-and-drop

Asigura-te ca esti logat pe Netlify inainte de a accesa app.netlify.com/drop
Incearca un alt browser (Chrome sau Firefox)
Dezactiveaza extensiile de browser (pot bloca zona de drop)

Atom 5

Resurse rapide

☁ Netlify Drop 🐙 GitHub

ℹ Trimite link-ul profesorului sau colegilor

Dupa ce ai publicat site-ul, copiaza URL-ul si trimite-l. Inainte de a trimite, verifica ca site-ul nu contine date personale.

Practica

Nivel Minim

Pregateste un folder cu un fisier index.html care contine un titlu si un paragraf despre un hobby (fara date personale). Creeaza cont Netlify si publica folderul prin Netlify Drop. Noteaza URL-ul obtinut.

Nivel Standard

Creeaza un site cu minim 2 pagini HTML si un fisier CSS separat. Publica-l prin ambele metode (Netlify si GitHub Pages) si noteaza cele doua URL-uri. Raspunde in scris: care metoda ti s-a parut mai usoara si de ce?

Nivel Performanta

Publica pe GitHub Pages un site cu minim 3 pagini, CSS propriu si cel putin o imagine. Dupa publicare, modifica titlul paginii principale direct pe GitHub (Edit file, Commit changes) si verifica ca actualizarea apare dupa cateva minute. Documenteaza pasii urmati intr-un fisier README.md adaugat in repository.

Recapitulare

Ce am invatat:

Netlify Drop si GitHub Pages sunt servicii gratuite pentru a publica site-uri HTML/CSS pe internet
Netlify Drop necesita cont gratuit; zona de drag-and-drop este disponibila dupa autentificare
GitHub Pages poate dura pana la 10 minute pana cand site-ul devine live dupa activare
Confirmarea publicarii pe GitHub Pages apare ca buton "Visit site" in Settings - Pages
Fisierul principal al site-ului trebuie sa se numeasca index.html
Username-ul GitHub apare in URL-ul public — foloseste pseudonim, nu prenume+nume real
Site-ul publicat este vizibil pentru toata lumea — nu include niciodata date personale in continut

Inapoi la materiale suplimentare