Wprowadzenie

W dzisiejszym blogu stworzymy stronę statyczną (dokładnie tą) używając do tego tylko darmowych narzędzi. Uważam, że stworzenie strony teraz jest tak proste, że podstawową może przygotować każdy nie dotykając nawet linijki kodu. Dlatego teraz pokazuję najprostszy sposób jak możesz przygotować swoją praktycznie w 15 minut. Będzie to początek serii, na której będę sprawdzał co ciekawego można stworzyć darmowymi narzędziami idealnie pod swoje potrzeby lub swojej firmy. Kluczem ma być to żeby były przydatne. Dlatego zgrabnie przechodząc do tematu.

Co to jest strona statyczna?

Statyczna strona to najprostsza forma strony internetowej, idealna dla prostych wizytówek czy dokumentacji. Jej pliki są przechowywane i udostępniane bez żadnego przetwarzania po stronie serwera. Po prostu je przekazujemy użytkownikowi a jego przeglądarka je odczytuje takie jakie są.

Do przygotowania takiej strony przydadzą się nam dwie rzeczy.

1. Gemini (od Google) - Model AI, który jest w wersji darmowej i pokazuje również podgląd tego co tworzymy na bieżąco

2. Netlify - Hosting, który pozwoli nam upublicznić stronę. Wybrałem go dlatego, że ma darmowy plan, który idealnie wystarczy pod nasze potrzeby a pliki przenosimy do niego po prostu wgrywając je z pulpitu. Na tyle lubię jego darmowy plan, że sam używam go pod tego bloga

Pierwszą rzeczą, którą przygotujemy to polecenie do AI. Musimy w nim zawrzeć kilka rzeczy:

1. Co chcemy zbudować - stronę statyczną, jednostronicową (tylko strona główna).

2. Co chcemy zawrzeć na stronie - Informacje o naszej firmie. Ja zrobię stronę kawiarni, która jest pet friendly i specjalizuje się w kawie z mlekiem (wybitna specjalność). Tutaj wypisujemy wszystko co powinno się znaleźć na stronie. Wpisujemy to po prostu ludzkim językiem, nie musimy tu się martwić o składnie.

3. Dodatkowe potrzebne ograniczenia - nie chcemy na stronie żadnych zdjęć. Zdjęcia będą w kolejnej części. Miały być teraz ale jednak są one trochę bardziej wymagające

Dlatego moim promptem będzie:

Super! mamy gotowe polecenie. Możemy przejść do ustawienia Gemini pod tworzenie naszej strony. W chacie potrzebujemy zrobić dwie rzeczy.

W narzędziach musimy wybrać Canvas. To będzie pokazywać nam podgląd naszej strony. A jako model najlepiej wybrać aktualnie najmądrzejszy - obecnie jest to “Myślący w 3 Pro”

Kiedy mamy wszystko ustawione możemy wkleić nasze polecenie i je wysłać. Model powinien sobie trochę pomyśleć, około 2-3 minutki i po chwili powinniśmy zobaczyć pierwszy podgląd. Na początku możesz zobaczyć jakiś kod ale nie musisz na niego nawet patrzeć a wystarczy poczekać na podgląd. Moja prezentuje się tak.

“Mistrzowie kawy z mlekiem” - i taki tytuł mi się podoba 😎

Edytowanie naszej strony

Fajnie fajnie strona gotowa, ale teraz powiedzmy, że chcę jeszcze dodać cennik. Przygotowałem sobie taką piękną tabelkę z cenami kaw i chcę ją zamieścić na stronie.

Nic prostszego, po prostu kontynuujemy wpisywanie poleceń. Kopiuję moją tabelkę, wklejam do czatu i proszę aby ją umieścił na stronie. Zmień również model na szybki. Na prostszych zadaniach będzie się on już sprawdzał tak samo ale o wiele szybciej. Do tego ma większe limity dzięki temu model myślący zostanie nam na później.

Może polecenie wygląda brzydko ale powinien sobie spokojnie z tym poradzić.

Po chwili cennik został dodany i prezentuje się bardzo dobrze, wszystko zostało zawarte dokładnie tak jak chciałem. Taką stronę mamy już gotową do pobrania. Niestety w Gemini nie mamy prostego przycisku do pobrania dlatego musimy sobie po prostu skopiować zawartość i przekleić ją do siebie. Naciśnij w prawym górnym rogu przycisk udostępnij i skopiuj zawartość.

Utwórz na swoim komputerze nowy folder, który będzie tylko dla tego projektu. Utwórz w nim nowy plik tekstowy i wklej to co skopiowaliśmy. Zapisz i zamknij.

Zanim plik będzie jeszcze gotowy, musimy zmienić jego rozszerzenie.

W folderze kliknij ikonkę 3 kropek i wybierz opcje.

W okienku, które się pojawi, przejdź do zakładki widok i odznacz checkbox przy ukryj rozszerzenia znanych plików

Zastosuj i zamknij. Dzięki temu przy nazwach plików zobaczymy teraz rozszerzenie po kropce. W ten sposób różne narzędzia rozpoznają do czego jest ten plik. “.txt” oznacza, że to zwykły plik tekstowy natomiast “.xlsx” oznacza, że jest to arkusz kalkulacyjny Excela.

Teraz możemy całościowo zmienić nazwę naszego pliku wraz z rozszerzeniem co jest nam potrzebne. Zmień nazwę naszego pliku na “index.html”. Rozszerzenie “.html” oznacza nic innego dla przeglądarki jak to, że jest to strona internetowa.

Jeżeli już zmieniłeś nazwę to możesz z powrotem włączyć opcję aby schować rozszerzenia. Nie jest to potrzebne do codziennego użytkowania a przypadkowa zmiana rozszerzenia jakiegoś pliku, może go po prostu zniszczyć.

Po zmianie nazwy możemy spróbować otworzyć nasz plik. Strona powinna się otworzyć w Twojej domyślnej przeglądarce

Super, działa i mamy wszystko gotowe. Pozostało tylko wrzucić teraz nasz projekt na hosting aby był dostępny publicznie.

Hostowanie strony

Przechodzimy do Netlify, o którym wspomniałem na początku posta.

Aby móc na nim hostować musimy mieć założone konto. Wystarczy email i wypełnienie prostego formularza - można po prostu sobie przeklikać.

Kiedy mamy już konto to wejdźmy sobie na stronę główną i wybierzmy zakładkę projekty. Na samym środku zobaczymy tutaj miejsce, w którym możemy przekazać naszą stronę internetową na hosting.

Teraz nic prostszego. Łapiemy myszką nasz cały folder z pulpitu czy innego miejsca i przeciągamy go na zaznaczone miejsce (nie plik, który utworzyliśmy ale folder, czyli poziom nad nim).

Chwilę czekamy i gdy wszystko się skończy powinniśmy zobaczyć taką stronę .

To oznacza, że wszystko zakończyło się pomyślnie a nasza strona jest już dostępna publicznie pod zielonym linkiem. W moim przypadku jest to poetic-dragon.f9142a.netlify.app.

Jeżeli doszedłeś do końca to pewnie masz teraz swoją własną stronę statyczną. Super będzie zobaczyć jak ci poszło. Możesz do mnie wysłać wiadomość przez stronę kontaktu albo bezpośrednio na LinkedIn.

Widzimy się w następnych postach ;)