Lekcja 2

Tworzenie strony wizytówki

Strony wizytówki wyświetlają informacje przydatne dla odwiedzających — o właścicielu, jego portfolio i kontakcie. Jeśli nie chcesz pokazywać adresu e-mail w otwartej formie, możesz dodać formularz kontaktowy.

Będziemy korzystać z Next.js i Tailwind CSS. Gotową stronę opublikujemy za darmo na vercel.com z darmową domeną.

1.
Utwórz folder projektu
Stwórz folder na nowy projekt i otwórz go w edytorze Zed.
projekty/szkola-programistow/2-tworzenie-strony-wizytowki
2.
Utwórz nowy projekt Next.js
W terminalu Zed wpisz poniższe polecenie i odpowiedz na pytania kreatora. Gdy zapyta o nazwę projektu, wpisz kropkę (.) żeby utworzyć projekt w bieżącym folderze.
npx create-next-app@latest
3.
Wyczyść globals.css
W folderze app otwórz plik globals.css i usuń wszystko poza pierwszą linią:
@import "tailwindcss";
4.
Wyczyść layout.tsx i page.tsx
Usuń całą zawartość tagu <body> w app/layout.tsx (zostaw sam tag), oraz usuń całą zawartość return() w app/page.tsx.
5.
Utwórz podstrony
W folderze app utwórz kilka folderów z plikiem page.tsx w każdym. Na przykład:
- ▸app/o-mnie/page.tsx
- ▸app/kontakt/page.tsx
- ▸app/portfolio/page.tsx
6.
Uzupełnij treść
W każdym pliku page.tsx wpisz informacje o sobie — może to być zwykły tekst, agent zajmie się resztą.
7.
Wydaj polecenie agentowi
Otwórz Agent Panel w Zed (prawy dolny róg) i wpisz:
Ostyluj mi wszystkie strony
8.
Uruchom lokalnie
Sprawdź efekt w przeglądarce pod adresem http://localhost:3000
npm run dev

🚀

Deploy na GitLab + Vercel

Gdy strona wygląda dobrze lokalnie, wrzuć kod na GitLab i zaimportuj repozytorium na Vercel.

git initgit add --allgit commit -m "Moj commit"git remote add origin https://gitlab.com/twoj-nick/2-tworzenie-strony-wizytowki.gitgit push -u origin master

Dla kolejnych zmian wystarczy:

git add --allgit commit -m "Moj commit"git push

✓ Wejdź na vercel.com, zaimportuj repozytorium z GitLaba i sprawdź swoją stronę pod przydzielonym adresem.

← Spis treści Lekcja 3 →