Przygotowanie środowiska programistycznego

Zanim napiszesz pierwszą linię kodu, przygotuj narzędzia. Poniżej znajdziesz wszystko, co potrzebne — wykonaj kroki po kolei.

Narzędzia do zainstalowania

1. 1.

   NodeJS Version Manager (NVM)

   Pozwala instalować i przełączać się między wersjami Node.js.

   Instrukcja dla Windows →
2. 2.

   Claude Desktop

   AI asystent z integracją Claude.

   claude.com/download →
3. 3.

   Folder na projekty

   Utwórz dedykowany folder: D:\projekty lub C:\Users\<twój-login>\projekty jeśli nie masz partycji D:

4. 4.

   Git

   System kontroli wersji — niezbędny w każdym projekcie programistycznym.

   git-scm.com →
5. 5.

   Konto GitLab

   Repozytorium kodu w chmurze — tutaj będziesz trzymać swoje projekty. Możesz zapoznać się z manualem: https://docs.gitlab.com/user/get_started/

   gitlab.com →
6. 6.

   Konto Vercel

   Platforma do hostowania aplikacji Next.js — wdrożenie jednym kliknięciem.

   vercel.com →
7. 7.

   Edytor Zed (opcjonalnie)

   Szybki edytor kodu z integracją AI — darmowy i wydajny.

   zed.dev →
8. 8.

   KeePass (opcjonalnie)

   Menedżer haseł. Przechowuj w nim klucze API, loginy i hasła. Plik bazy danych zapisz w chmurze (np. OneDrive: C:\Users\<twój-login>\OneDrive).

   keepass.info →
9. 9.

   Notepad++ (opcjonalnie)

   Lekki edytor tekstu — przydatny do szybkiej edycji plików konfiguracyjnych.

   notepad-plus-plus.org →

Zbudujemy pierwszą wizytówkę, wyślemy ją na GitLab i opublikujemy na Vercel.

1. 1.

   Uruchom PowerShell (terminal w Windowsie): Start → Wyszukaj → PowerShell.

   
2. 2.

   Przejdź na partycję D: i do folderu projektów. Utwórz foldery na swoją wizytówkę i wejdź do nich:

   d:cd d:\projektymkdir wizytowkicd wizytowkimkdir moja-wizytowkacd moja-wizytowka
3. 3.

   Sprawdźmy, czy mamy Node.js:

   node --version
4. 4.

   Jeśli nie znaleziono polecenia, zainstaluj Node.js. Jeśli nie ma też komendy nvm, wróć do kroku instalacji NVM.

   nvm install stable
5. 5.

   Wróć do Claude Desktop i wybierz z menu File → Settings.

   
6. 6.

   Następnie wybierz Connectors → Discover → wpisz filesystem.

   
7. 7.

   Wybierz folder moja-wizytowka i zapisz klikając Save. Pamiętaj żeby przełączać ten folder, gdy pracujesz nad innym projektem. Możesz też ustawić tool permissions na always allow (żeby nie wkurzało).

   
8. 8.

   Teraz wpisz prompt (czyli polecenie) do Claude Desktop:

   Korzystając z filesystem MCP stwórz plik public/index.html w folderze moja-wizytowka. Jestem początkującym programistą i potrzebuję zrobić swoją wizytówkę. Nazywam się [Twoje imię] i interesuję się programowaniem.
9. 9.

   Wróć do terminala i otwórz folder w eksploratorze (kropka oznacza bieżący katalog). Powinien się otworzyć folder moja-wizytowka z folderem public. Sprawdź, czy jest w nim plik index.html — kliknij go dwukrotnie, aby otworzyć w przeglądarce.

   explorer .
10. 10.

    Jeśli jest ok, zapisz projekt w lokalnym repozytorium git:

    git initgit add --allgit commit -m "Pierwsza wizytowka"
11. 11.

    Wejdź na gitlab.com i utwórz nowe puste repozytorium bez pliku README.md.

    
12. 12.

    Wróć do PowerShella i wykonaj polecenia:

    git remote add origin git@gitlab.com:[twoj-nick]/[nazwa-repozytorium].gitgit push -u origin master

    
13. 13.

    Jeśli robisz push po raz pierwszy, mogą wystąpić problemy z autoryzacją. W takim przypadku wygeneruj klucz SSH, a następnie otwórz klucz publiczny, by skopiować go do GitLaba. Tylda (~) oznacza katalog domowy użytkownika (klawisz pod ESC). Pomoże Ci też klawisz Tab — PowerShell podpowie.

    ssh-keygen -t ed25519notepad ~/.ssh/id_ed25519.pub

    

    Wklej klucz w ustawieniach SSH w GitLabie. Osobiście sugeruję, żeby klucz nigdy nie wygasał — kliknij X przy Expiration date. Wróć do PowerShella i ponownie wykonaj git push -u origin master.

14. 14.

    Jeśli kod jest już w repozytorium, możesz go podejrzeć na gitlab.com w zakładce Projects.

    
15. 15.

    Na vercel.com zarejestruj się i wejdź w Projects → Add new project.

    

    Następnie wybierz GitLab i swoje repozytorium.

16. 16.

    Zaimportuj repozytorium i zatwierdź szczegóły projektu.

    
17. 17.

    Powinno pojawić się Congratulations — przejdź dalej klikając "Continue to Dashboard". Owoce naszej pracy są dostępne pod adresem URL projektu:

    
18. 18.

    Teraz nanieśmy jakieś zmiany. Przejdź do Claude Desktop i napisz prompt:

    Zmień tytuł strony na 'Moja strona' i dodaj paragraf z opisem strony.
19. 19.

    W PowerShellu otwórz eksplorator, przejdź do folderu public i kliknij dwa razy index.html, aby sprawdzić zmiany:

    explorer .

    Jeśli wszystko jest ok, zaktualizuj „produkcję”, czyli wersję dostępną w internecie dla wszystkich:

20. 20.

    Wyślij zmiany do repozytorium:

    git add --allgit commit -m "Zmiana tytułu i dodanie opisu"git push

    Odśwież stronę moja-wizytowka-xxxx.vercel.app i zobacz, że zmiany zostały zastosowane.