Publica Site-ul GRATIS!

Sa inveti despre Publica Site-ul GRATIS!

Atom 1

Publica Site-ul GRATIS!

Navigation Header Intro

🎯 Ce vei invata

  • Metoda 1: Netlify - Cel mai simplu: tragi fisierele si gata!
  • Metoda 2: GitHub Pages - Pentru proiecte serioase, cu versionare
  • Ambele sunt 100% GRATUITE si profesionale!
Comparison Table
Caracteristica Netlify GitHub Pages
Dificultate ★ Foarte usor ★★ Mediu
Timp setup 2 minute 10 minute
Adresa site nume-site.netlify.app username.github.io/repo
Actualizare site Reincarci fisierele Git push (automat)
Ideal pentru Proiecte simple, teste Proiecte pe termen lung
METODA 1: NETLIFY
☁

Metoda 1: Netlify

Drag & Drop - Cel mai simplu mod de a publica un site

Usor
1
Pregateste fisierele site-ului

Asigura-te ca ai un folder cu toate fisierele site-ului tau:

site-ul-meu/ ├── index.html # Pagina principala (OBLIGATORIU!) ├── style.css # Stilurile CSS ├── despre.html # Alte pagini └── imagini/ # Folder cu imagini ├── logo.png └── banner.jpg
⚠ Important!

Fisierul principal TREBUIE sa se numeasca index.html (cu litere mici!)

2
Acceseaza Netlify Drop

Deschide browserul si mergi la:

🌐 app.netlify.com/drop

💡 Sfat

Nu ai nevoie de cont pentru a incerca! Poti face deploy fara autentificare.

3
Trage folderul pe pagina

Vei vedea o zona mare unde scrie "Drag and drop your site output folder here"

  1. Deschide File Explorer (Windows Explorer)
  2. Gaseste folderul cu site-ul tau
  3. Trage TOT folderul pe zona din browser
  4. Asteapta cateva secunde...
📷 Aici ar fi un screenshot cu zona de drag & drop din Netlify
4
Site-ul e LIVE!

Dupa cateva secunde, vei primi un link de genul:

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

Copiaza link-ul si trimite-l prietenilor! Site-ul e acum vizibil pentru toata lumea!

✔ Felicitari!

Ai publicat primul tau site pe internet!

5
Optional: Schimba numele site-ului

Daca vrei un nume mai frumos (nu random-12345), fa-ti cont gratuit:

  1. Click pe "Sign up" sau "Claim this site"
  2. Conecteaza-te cu email sau GitHub
  3. Mergi la Site settings > Domain management
  4. Click pe "Edit site name"
  5. Scrie numele dorit (ex: proiect-tic-ionescu)

Noul URL va fi: proiect-tic-ionescu.netlify.app

☑ Lista de verificare Netlify

METODA 2: GITHUB PAGES
🐙

Metoda 2: GitHub Pages

Pentru proiecte serioase, cu versionare si backup automat

Mediu
💡 De ce GitHub Pages?

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

1
Creeaza cont GitHub

Daca nu ai deja cont:

🐙 github.com/signup

  1. Introdu adresa de email
  2. Alege o parola puternica
  3. Alege un username (va aparea in URL-ul site-ului!)
  4. Confirma emailul
💡 Sfat pentru username

Alege un username profesional. Exemplu: daca te numesti Ion Popescu, poti alege ionpopescu sau ion-popescu. URL-ul site-ului va fi: ionpopescu.github.io

2
Creeaza un Repository nou

Un repository (repo) este ca un folder online pentru proiectul tau.

  1. Click pe "+" in coltul din dreapta sus
  2. Selecteaza "New repository"
  3. La Repository name scrie: site-tic (sau alt nume)
  4. Selecteaza "Public"
  5. Bifeaza "Add a README file"
  6. Click "Create repository"
📷 Screenshot cu formularul "New repository"
3
Incarca fisierele site-ului

Acum adauga fisierele HTML/CSS:

  1. In pagina repository-ului, click pe "Add file"
  2. Selecteaza "Upload files"
  3. Trage fisierele (index.html, style.css, etc.)
  4. La "Commit changes" 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

Acesta e pasul magic care face site-ul vizibil pe internet:

  1. Mergi la tab-ul "Settings" (in repository)
  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"
📷 Screenshot cu setarile GitHub Pages
5
Asteapta si verifica

GitHub construieste site-ul (dureaza 1-2 minute).

  1. Reincarca pagina Settings > Pages
  2. Vei vedea un mesaj verde: "Your site is live at..."
  3. Click pe link pentru a vedea site-ul!

URL-ul va fi de forma:

https://username.github.io/site-tic/
✔ Felicitari!

Site-ul tau e acum LIVE pe GitHub Pages!

6
Cum actualizezi site-ul

Cand vrei sa modifici ceva:

  1. In repository, click pe fisierul pe care vrei sa-l modifici
  2. Click pe iconita creion (Edit)
  3. Fa modificarile
  4. Click "Commit changes"
  5. In 1-2 minute, site-ul se actualizeaza automat!
💡 Pentru avansati: Git

Programatorii profesionisti folosesc Git (un program) pentru a sincroniza fisierele local cu GitHub. Asa pot edita fisierele pe computer si le incarca cu o singura comanda: git push

☑ Lista de verificare GitHub Pages

TROUBLESHOOTING

🔧 Probleme frecvente

Site-ul nu se incarca / Eroare 404
  • Verifica daca fisierul se numeste exact index.html (nu Index.html sau index.HTML)
  • Asteapta 2-3 minute - uneori serverul are nevoie de timp
  • Verifica daca ai activat GitHub Pages (Settings > Pages)
  • Asigura-te ca repository-ul e Public, nu Private
Imaginile nu apar
  • Verifica calea imaginii - e relativa? Exemplu corect: 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
CSS-ul nu se aplica
  • Verifica link-ul in HTML: <link rel="stylesheet" href="style.css">
  • Fisierul CSS trebuie sa fie in acelasi folder cu HTML (sau specifica calea corecta)
  • Fa Ctrl+Shift+R (hard refresh) pentru a forta reincarcarea CSS-ului
FINAL

🎉 Bravo! Acum stii sa publici site-uri gratuit!

Trimite link-ul site-ului tau profesorului sau colegilor pentru a-l vedea.

☁ Netlify Drop 🐙 GitHub

Practice Exercise

🎯 Exercitiu practic

Publica site-ul tau folosind AMBELE metode si compara rezultatele:

  1. Publica pe Netlify - noteaza URL-ul: _________________.netlify.app
  2. Publica pe GitHub Pages - noteaza URL-ul: _________________.github.io/_______
  3. Compara: Care metoda ti s-a parut mai usoara? De ce?
  4. Modifica ceva in site (ex: schimba titlul) si actualizeaza pe ambele platforme

Practica

Nivel Minim

Exercitiu minim: Descrie pe scurt ce ai invatat in aceasta lectie.

Nivel Standard

Exercitiu standard: Aplica conceptele din lectie intr-un exemplu practic.

Nivel Performanta

Exercitiu performanta: Creeaza un proiect care demonstreaza cunostintele dobandite.

Recapitulare

Ce am invatat:

  • Am invatat despre Publica Site-ul GRATIS!
Lectia urmatoare