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.

Obiectivul lectiei

Dupa aceasta lectie vei putea:

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.
CaracteristicaNetlify DropGitHub Pages
Dificultate★ Foarte usor★★ Mediu
Timp setup2-3 minute10-15 minute
Adresa sitenume-site.netlify.appusername.github.io/repo
Cont obligatoriu?Da (gratuit)Da (gratuit)
Actualizare siteReincarci folderulUpload fisier nou + Commit
Ideal pentruProiecte simple, teste rapideProiecte 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
  1. Mergi la app.netlify.com/signup
  2. Alege "Sign up with email" sau conecteaza-te cu GitHub
  3. 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
  1. Dupa logare, vei vedea zona "Drag and drop your site output folder here"
  2. Deschide File Explorer (Windows Explorer)
  3. Trage TOT folderul (nu fisierele individuale) pe zona din browser
  4. 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:

  1. Din dashboard-ul Netlify, click pe site-ul tau
  2. Mergi la Site settings > Domain management
  3. Click pe "Edit site name"
  4. Scrie un nume nou (ex: proiect-tic-cls8)
  5. 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

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
  1. Introdu adresa de email
  2. Alege o parola puternica (minim 8 caractere, litere + cifre)
  3. Alege un username (va aparea in URL-ul site-ului)
  4. Selecteaza tara/regiunea (camp obligatoriu)
  5. 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.

  1. Dupa logare, click pe "+" din coltul dreapta sus
  2. Selecteaza "New repository"
  3. La Repository name scrie: site-tic
  4. Selecteaza "Public"
  5. Bifeaza "Add a README file"
  6. 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

  1. In repository, click pe "Add file"
  2. Selecteaza "Upload files"
  3. Trage fisierele (index.html, style.css, etc.) in zona de upload
  4. La "Commit changes", in campul de mesaj scrie: Adaug site-ul
  5. Click "Commit changes"
⚠ Atentie la structura!

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

4 Activeaza GitHub Pages

  1. In repository, click pe tab-ul "Settings"
  2. In meniul din stanga, click pe "Pages"
  3. La "Source", selecteaza "Deploy from a branch"
  4. La "Branch", selecteaza "main" si "/ (root)"
  5. 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.

  1. Asteapta 2-10 minute
  2. Reincarca pagina Settings > Pages
  3. Cand site-ul este gata, apare butonul "Visit site"
  4. 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

  1. In repository, click pe fisierul pe care vrei sa-l modifici
  2. Click pe iconita creion (Edit this file)
  3. Fa modificarile
  4. Click "Commit changes" si confirma
  5. 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

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.

Vezi rezolvarea

Model de rezolvare (Netlify Drop):

  1. Creez folderul site-ul-meu si in el fisierul index.html (litere mici, exact).
  2. Continut minim in index.html: <h1>Pasiunea mea: fotbalul</h1><p>Joc fotbal de trei ani, la antrenamente de doua ori pe saptamana.</p> - fara nume, scoala sau oras.
  3. Merg la app.netlify.com/signup, aleg "Sign up with email", confirm adresa.
  4. Dupa logare, merg la app.netlify.com/drop si trag TOT folderul (nu doar fisierul) pe zona de drop.
  5. Astept 10-30 de secunde pana apare link-ul, de forma https://random-name-12345.netlify.app.
  6. Notez URL-ul si il testez intr-un tab nou de browser ca sa confirm ca site-ul se deschide.

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?

Vezi rezolvarea

Model de rezolvare:

  1. Folder cu 3 fisiere: index.html (pagina principala), despre.html (a doua pagina, cu link inapoi spre index.html), style.css (culori si fonturi comune, legat in ambele pagini prin <link rel="stylesheet" href="style.css">).
  2. Netlify: cont pe app.netlify.com, apoi drag-and-drop pe app.netlify.com/drop → URL de forma nume-ales.netlify.app.
  3. GitHub Pages: cont pe github.com (pseudonim, nu nume real), repository Public site-tic, upload fisiere in radacina, Settings > Pages > Source: main > Save → URL username.github.io/site-tic/ dupa cateva minute.
  4. Raspuns scris (exemplu): Netlify mi s-a parut mai usor pentru ca nu am nevoie de pasii Settings > Pages si linkul apare imediat; GitHub Pages a durat mai mult (asteptare pana la 10 minute) dar pastreaza istoricul modificarilor prin Commit changes.

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.

Vezi rezolvarea

Schita de rezolvare (nu produsul de-a gata):

  1. Structura: minim 3 pagini HTML legate prin meniu (ex. index.html, despre.html, contact.html), un style.css comun, un folder imagini/ cu cel putin o poza (fara persoane identificabile, conform regulii din lectie).
  2. Publicare pe GitHub Pages: repository Public, index.html in radacina, Settings > Pages > Source: main, astept butonul "Visit site".
  3. Actualizare: din repository deschid index.html, click pe creion (Edit this file), modific titlul, Commit changes cu un mesaj descriptiv (ex. "Actualizez titlul"), astept 2-10 minute si reincarc pagina live ca sa confirm schimbarea.
  4. README.md: descriu in ordine pasii (cont, repository, upload, activare Pages, editare, verificare), cu data si observatii (cat a durat propagarea).
  5. Capcane: repository ramas Private nu functioneaza cu Pages; cale gresita la imagine (litere mari/mici) o face sa nu apara; nerabdarea de a repeta pasii inainte de cele 10 minute.
  6. Criterii de evaluare: cele 3 pagini exista si sunt legate intre ele; CSS-ul se aplica pe toate; imaginea se vede; modificarea prin Commit changes apare live; README.md documenteaza real pasii, nu doar copiaza lectia.

Recapitulare

Ce am invatat:

Vrei mai mult?

Provocare: Ai deja un repository pe GitHub cu site-ul tau. Pe Netlify alege "Add new site" apoi "Import an existing project" si conecteaza-l la acelasi repository de pe GitHub. Dupa import, modifica un text in index.html direct pe GitHub ("Edit file", "Commit changes") si asteapta 1-2 minute. Deschide tab-ul Deploys din Netlify: trebuie sa apara un deploy NOU, pornit singur de commit-ul tau, fara sa mai tragi niciun folder.

Inapoi la materiale suplimentare