Najlepsza odpowiedź
GitHub Student Developer Pack udostępnia zasoby załóż własne firstnamelastname.me domena bez żadnych kosztów. W pozostałej części mojej odpowiedzi narzekam na to, dlaczego początkowo było mi ciężko, dlaczego stworzenie własnej witryny internetowej mogło być dla Ciebie barierą. Załączam krótki, dość obszerny przewodnik przeznaczony dla uczniów z niewielka lub żadna wiedza techniczna, aby stworzyć całkiem publiczną, osobistą witrynę internetową (która powinna się pojawić, gdy ktoś wyszuka w Google Twoje imię).
Dlaczego naprawdę trudno jest stworzyć własną witrynę internetową
Chciałem wiedzieć, jak działają strony internetowe: Jako entuzjasta technologii w liceum zawsze byłem ciekawy, jak działają strony internetowe i naprawdę imponują mi ludzie, którzy mają własne. Z zewnątrz wszystko wydawało się takie proste, ale za każdym razem, gdy szukałem w Google „jak działają strony internetowe” i kopałem głębiej, gubiłem się pośród dziwnych skrótów i skomplikowanych dźwięków. TCP, UDP, IP, DNS, IPv6, HTML, JS, CSS – lista jest długa. Zadanie odwzorowania tych zawiłych pojęć na namacalne rzeczy w komputerach, o których wiedziałem, było dość trudne i jedna z tych rzeczy wymaga ogromnej motywacji, aby usiąść i przejść.
Decydując się po prostu na stworzenie witryny internetowej, aby dowiedzieć się, jak ona działa: Jest pytanie, które możesz zadać w niektórych wybrednych firmach technologicznych i znaleźć w annały Glassdoor –
Co się dzieje po wpisaniu w przeglądarce „google [dot] com”? ( Pytanie do wywiadu Google: Co się dzieje, gdy piszesz …)
Nawet w połowie studiów informatyki na uczelni byłem trochę martwiłem się, jak mało mi o tym wszystkim powiedzieli. Frustracja polega na tym, że jedyną rzeczą, którą trzeba było sprawdzić w Google, było „jak zrobić stronę internetową”. Z ogromną ilością pieniędzy na marketing, które włożyłem w to, natknąłem się na mnóstwo witryn i terminów, których nadal nie potrafiłem zrozumieć – domeny, hosting, GoDaddy, HostGator, routing, CSS, HTML, Javascript, jQuery, WordPress , blogger itp. Oto, co mi teraz pokazuje:
Szczerze mówiąc, wszystkie te nazwy brzmiały bardzo oszukańczo. y do mnie, a ich niezrozumiałość przerosła moją motywację. Chciałem tylko mieć własną witrynę internetową z moim imieniem – debarghyadas.com [zignoruj autopromocję] i dowiedz się, jak umieszczać na nim treści.
To, że jestem zbyt tani, by kupować w internecie: Kiedy zawinąłem głowę wokół niektórych trochę to miało sens. Aby stworzyć stronę internetową, musiałbym kupić „domenę”, nazwę witryny i „hosting”, czyli miejsce, które zawiera treść mojej witryny i udostępnia ją, „obsługuje”, do tej domeny. Zakup. Nie jest to ładne słowo, biorąc pod uwagę moją niezbyt głęboko zakorzenioną oszczędność tudent, który żyje darmowym oprogramowaniem, nie byłem zbyt chętny do wydawania gotówki na zakup abstrakcyjnych rzeczy. Zajęło mi lata, zanim zapłaciłem 1 dolara za Whatsappa, kiedy to trywialne było wydmuchanie 4 dolarów na ten wystawny tort z musem czekoladowym z lodami waniliowymi.
Daj spokój – czy mógłbyś być więcej oszustwem? „Zjadamy konkurencję”? Okej, gator.
Dla wielu studentów (i osób) pieniądze są sporą przeszkodą. Kupno domeny (w GoDaddy) kosztuje około 10 USD rocznie i podobną kwotę, aby kupić hosting w HostGator. A wymagało to przepracowania wielu produktów, których nie potrafiłeś zrozumieć. Złościło mnie, że musisz też płacić co roku – to nie był jednorazowy zakup.
Uciekając się do bycia tanim, aby mnie zmotywować: W końcu, po długim żmudnym procesie, rozdzieliłem pieniądze, przekonując się, że inwestycja zmotywowałaby mnie do zdobycia niezbędnych umiejętności. Chodzi mi o to, że wszyscy zawsze mówili, że HTML jest prosty i taki jest, ale strony utworzone w HTML również wyglądają jak gówno. Było dużo zamieszania.
W końcu miałem rację – inwestycja w domenę i hosting przez 5 lat sprawiła, że dowiedziałem się, jak to działa, i stworzyłem osobistą stronę internetową i powtarzałem ją, gdy tylko miałem jakąś czas wolny.
Nieco obszerny przewodnik po darmowym tworzeniu własnej witryny internetowej
Przechodzenie do pakietu studenckiego dla programistów GitHub .Tak, zawiera wiele rzeczy, których nigdy nie używałem, ale to, czego bezpośrednio nie reklamuje (a prawdopodobnie powinno), to to, że zapewnia wszystkie narzędzia do bezpłatnego uruchomienia witryny w Twojej domenie! Teraz brzmi zbyt dobrze, żeby było prawdziwe.
Narzędzia handlu Tutaj ”to ogólna wskazówka. I nie wypróbowałem tego osobiście, ale myślę, że to dobry sposób na załatwienie sprawy. Musisz (lub powinieneś) korzystać z następujących płatnych usług oferowanych przez Student Developer Pack (bezpłatnie):
1. Prywatne repozytoria Github [opcjonalnie]
2. Domena Namecheap .me
3. Namecheap SSL [opcjonalnie]
4. Hosting DigitalOcean
A ponadto
1. Bootstrap
2. Kilka samouczków i narzędzi online – JSfiddle 3. Niektóre witryny z szablonami online – StartBootstrap , BootstrapZero
Co zrobić z wymienionymi narzędziami Postaram się, aby ten mini-przewodnik był jak najprostszy . Łatwo jest porzucić duże terminy, gdy wiesz, co mają na myśli, ale mogą być ogromnym czynnikiem odstraszającym dla czytelników, którzy nie mają pojęcia. Mogę wyrazić się bardziej dosadnie i rozwinąć je, jeśli zostaniesz o to poproszony.
1. Skonfiguruj prywatny Github repozytorium [opcjonalne]
Kiedy jesteś pisząc dużo kodu do projektu, jest wiele rzeczy, które mogą się nie udać.
- Może zostać usunięty z twojego komputera i masz spieprzone
- Możesz spróbować dodać nową funkcję bez tworzenia kopii zapasowej starej wersji i dostać się do stanu, w którym zapomnij, ile klawiszy Ctrl + Z (cofnij) potrzebujesz, na których plikach przywrócisz działanie.
- Możesz mieć wiele osób pracujących nad tym oddzielnie na swoich komputerach i nie mieć pojęcia, jak zintegrować oba wersji projektu.
Koder n00b może zasugerować użycie Dropbox do udostępniania i synchronizowania projektów kodu, a jeśli „pracując nad tym samodzielnie, może to być przyzwoite rozwiązanie. Jednak nadal będziesz mieć do czynienia z drugim problemem z powyższej listy i robi się naprawdę szalony, gdy wiele osób próbuje jednocześnie pracować na tej samej bazie kodu.
Git (a dawniej SVN i Mercurial dla hipstersów) są używane do „wersjonowania” Twojego kodu. Pamiętaj, że git to nie github. międzysieciami internetowymi, gdzie są one na stałe przechowywane w Twoim „repozytorium” (za darmo). Git to również narzędzie wiersza poleceń, co oznacza, że musisz otworzyć jeden z tych czarnych, przerażająco wyglądających ekranów hakerów na pulpicie i wpisać polecenia używać go. Jest nietrywialny w użyciu. Github integruje się z git i pozwala zobaczyć repozytoria, które wypchnąłeś i dostarcza kilka GUI do wykonywania zadań git (zachowujących się jak normalna aplikacja na twoim komputerze). Możesz przeglądać swoje bazy kodów (repozytoria) w Internecie z poziomu przeglądarki, wprowadzać zmiany, cofać zmiany do ostatniego punktu kontrolnego (zatwierdzanie) i tak dalej.
Github zawsze zapewniał darmowe repozytoria, które były publiczne – co oznaczało, że każdy mógł zobaczyć Twój kod i go użyć (tak, są licencje Open Source, ale wiesz, o co mi chodzi). Zasadniczo, jeśli miałbyś naprawdę ciężko pracować nad projektowaniem niesamowicie fajnego gówna i odkrywaniem na nowo informatyki, twój kumpel może po prostu wziąć kod i użyć go na swojej własnej stronie internetowej. Teraz, z pakietem edukacyjnym, możesz otrzymać 5 bezpłatnych prywatnych repozytoriów (chociaż Github zapewniał tę usługę również wcześniej studentom .edu). Przejrzyj samouczki online i dowiedz się, jak skonfigurować prywatne repozytorium github dla kodu swojej witryny.
2. Pobierz bezpłatnie Namecheap .me domena
Najdłużej jedynym sprzedawcą domen, jakiego znałem, był GoDaddy. Nazwa zawsze wydawała mi się podejrzana, chociaż w końcu pogodziłem się z zakupem tam domeny. Teraz, w dobie startupów, mamy lepszą, czystszą i tańszą alternatywę – Namecheap.Namecheap zawsze było tanie, ale teraz możesz otrzymać domenę za darmo! Więc zdobądź swoją domenę firstnamelastname.me tam teraz za darmo, zanim Twoje bardzo popularne imię zostanie skradzione (jeśli jeszcze nie jest). I spróbuj nie wracać do dni e-mail lat 90. i kup raj2kul4skul.me . Nie t. Proszę. Jedyną osobą, która zrobi wrażenie, są przyjaciele, bez których lepiej sobie radzisz.
Wspominałem, że to nic nie kosztuje?
3 . Pobierz Namecheap SSL [opcjonalne]
To jest opcjonalne i nie mam go jeszcze dla mojej witryny (ponieważ w GoDaddy nadal kosztuje). SSL (Secure Sockets Layer) to fantazyjna rzecz Oznacza to, że Twoje treści internetowe mogą być obsługiwane „bezpiecznie”. Otrzymujesz również tę fajną zieloną blokadę w swojej witrynie, masz witrynę https zamiast http i czuć się naprawdę fajnie i autentycznie:
Nie wchodząc zbytnio w szczegóły techniczne, musisz wiedzieć, że – nie jest to absolutnie konieczne dla Twojej osobistej witryny internetowej, na której wątpię, że będziesz robić rzeczy wymagające tak ścisłego bezpieczeństwa. Jeśli jednak „dowiadujesz się czegoś o internecie, równie dobrze możesz to zrobić. To w końcu nic nie kosztuje?
4. Skonfiguruj Cyfrowy ocean hosting.
Namecheap: GoDaddy :: DigitalOcean: HostGator.
Namecheap jest dla GoDaddy tak, jak DigitalOcean jest dla HostGator – bardziej legalny, tańszy, lepiej zaprojektowany i łatwiejszy w użyciu startup alternatywny. Kiedy kupujesz domenę, co będzie ona służyć (pokazywać) użytkownikowi? Twoja witryna, prawda? Ale nie możesz po prostu powiedzieć, że weź te pliki na mój komputer i pokaż im je. Cóż, możesz, i oto jak. Dzięki DigitalOcean otrzymujesz darmowy „hosting”. DigitalOcean nazywa jedną instancję hostingową „kroplą”.
Oznacza to, że możesz przesłać swoją witrynę do maszyny wirtualnej (czytaj: komputer) i podać nazwę swojej domeny. aby udostępniać treści z tego komputera. Bez wchodzenia w szczegóły, w środku dzieje się wiele rzeczy, którymi DigitalOcean powinien się zająć – na przykład konfigurowanie i wybieranie serwera internetowego – nginx lub Apache i kierowanie żądań w Twojej domenie specjalnie do Twojego zestawu plików.
5. Tworzenie właściwej witryny.
Teraz przejdźmy do części „napisz trochę HTML”. Tworzenie witryny ma różny stopień trudności – od pokazania tekst „Hello World” w języku Arial do tworzenia Facebooka lub Google. Zazwyczaj int aplikacje, które wymagają danych i zawierają stan, są trudne do wykonania.
Prawdopodobnie będziesz robił statyczną witrynę (zbiór tego samego tekstu / obrazów, które są wyświetlane każdemu za każdym razem). Jest to o wiele łatwiejsze. Prawdopodobnie nie będę i nie mogą napisać pełnego samouczka, ale studenci zazwyczaj uczą się i wykorzystują następujące rzeczy –
- HTML – to jest rzeczywista zawartość tekstu / linków / obrazów / filmów
- CSS – dzięki temu powyższa treść wygląda ładnie
- Javascript (JS) – pozwala to na elementy dynamiczne i ładne animacje. Załóżmy, że chcesz utworzyć przycisk, który ładuje obraz, który nie był w kodzie HTML lub dynamicznie dodawaj zawartość do kodu HTML. Następnie używasz JS. Krótka historia – JS został zhakowany w ciągu dnia w około 10 dni i zawiera wiele błędów, a jeśli piszesz dużo, może być bardzo rozwlekły i nieporęczny. Zwykle początkujący użyłby biblioteki takiej jak jQuery, aby uczynić ją mniej szczegółową i łatwą (chociaż jQuery może na początku wyglądać onieśmielająco ze wszystkimi swoimi znakami $).
- Bootstrap – Bootstrap to podstawowy framework Frontend stworzony przez Twittera. Surowy HTML zawiera dość źle wyglądające elementy. Przycisk HTML jest nieprzedstawialny, a pisanie CSS wymaga czasu i eksperymentów (mam na myśli, bądźmy prawdziwi – nikt NAPRAWDĘ nie zna CSS). Bootstrap polega na pobraniu niektórych plików, dodaniu jednej linii do HTML i może przeczytaniu niektórych dokumentacji i dodając niektóre klasy CSS, które zapewniają – i voila! Twoja witryna nie tylko automatycznie wygląda o wiele ładniej, ale może być również dostosowana do urządzeń mobilnych (ponownie, nietrywialne przedsięwzięcie).
6. Umieszczenie witryny w trybie online (wdrażanie) Po zakończeniu tworzenia i testowania witryny lokalnie (na własnym komputerze) poprzez aktywację hosta lokalnego (lokalny serwer WWW – google it.Możesz nie potrzebować tego w przypadku witryn statycznych) oraz testować i mieszać z CSS za pomocą bardzo przydatnych narzędzi programistycznych Chrome. Jesteś zadowolony z wyników, możesz przejść do Digital Ocean, spakować witrynę i wysłać ją do serwer. Jeśli wszystko zrobiłeś dobrze, odczekaj kilka sekund i przejdź do swojego firstnamelastname.me i powinieneś zobaczyć swoją zawartość. I każdy inny też powinien.
7. Umożliwienie wyszukiwania Twojej wspaniałej witryny internetowej (SEO)
Ostatnim krokiem jest SEO – optymalizacja wyszukiwarek. Ostatecznym celem jest, miejmy nadzieję, uzyskanie niezwykłej nazwy i umieszczenie Twojej witryny wśród najlepszych wyników, gdy ktoś googleje Twoje imię. Może to zająć trochę czasu (ale można to zrobić teraz kosztem pieniężnym). Jest na to kilka sposobów, a dla nich wszystkich możesz skorzystać z Google. Istnieją sposoby na powiązanie z nim swojego Facebooka, starego konta Google+, którego nigdy z nim nie używasz, dodawanie niestandardowych metadanych, które pojawią się w wyszukiwarce Google itd. Ostatecznie w ciągu kilku tygodni, chyba że Twoje imię i nazwisko jest niezwykle powszechne lub niestety takie samo jak sławnej osoby, powinieneś znaleźć się na pierwszym miejscu wśród nielicznych wyników w Google.
Różne rzeczy, które warto wiedzieć
Skróty do stworzenia ładnej strony: W zależności od tego, ile pracy chcesz włożyć do swojej witryny, zawsze możesz wybrać przydatny szablon bootstrap online lub ręcznie stworzyć własne klasy CSS, jeśli chcesz unikalny wygląd, a nawet prostota i podstawowa wersja HTML / CSS (co robi wielu naukowców). Na przykład strona główna Jona Kleinberga .
O braku znajomości PHP i inne wymyślne rzeczy: ponieważ projektujesz witrynę statyczną, nie ma wiedzy na temat fantazyjnych rzeczy, takich jak tworzenie zaplecza, tworzenie wielu stron i posiadanie baz danych. Tak, rozmawiam z tobą, wszystkie ludzie, którzy chcą używać PHP i MySQL bez powodu (nawet jeśli trzeba, staraj się trzymać z daleka od PHP). Istnieje wiele świetnych struktur zaplecza przeznaczonych do tworzenia innych typów skomplikowanych witryn internetowych od Ruby on Rails (w języku Ruby) do Django (w Pythonie), aby Odtwórz! (w Javie i Scali) lekkie, takie jak CherryPy (w Pythonie) lub Flask (w Pythonie). W rzeczywistości istnieją frameworki dla prawie każdego języka, jaki możesz sobie wyobrazić – Porównanie frameworków aplikacji internetowych , ale nie wypalaj się jeszcze, używając / ucząc się o nich.
Inne rzeczy, które warto rozważyć, aby dodać do swojej witryny: Inne rzeczy, które warto zrobić dla swojej osobistej witryny internetowej –
- Kompresuj obrazy , jeśli używasz ich dużo, w swojej witrynie ładowanie zajmie dużo czasu.
- Użyj wtyczek społecznościowych z Facebooka / Quora / Twittera
- Dodaj Google Analytics (jest to właściwie prawie konieczne). Google Analytics pozwala między innymi zobaczyć, ile osób odwiedza Twoją witrynę, skąd pochodzą itp. Jest to miły motywator (miejmy nadzieję) do aktualizowania witryny i utrzymywania jej aktualności. bardzo łatwy w użyciu – polega po prostu na skopiowaniu i wklejeniu niektórych linii kodu na stronę.
- Zmniejsz skrypty. Wiele plików JS i CSS witryny może być nadal widocznych dla każdego, kto odwiedza Twoją witrynę. Jeśli myślisz, zrobiłeś coś strasznie interesującego, co chcesz ukryć, zminimalizować swój JS / CSS. W przeciwnym razie zrujnuje to cel posiadania prywatnego repozytorium. Dodatkowo przyspieszy to Twoją witrynę.
- Szyfruj swój kod HTML . Ponownie, jeśli naprawdę nie chcesz, aby ludzie widzieli, jak tworzysz swoją witrynę, są sposoby szyfrowania kodu HTML, więc nawet kliknięcie przycisku „Wyświetl źródło” nie ujawni nic interesującego.
Podczas pisania tej odpowiedzi: Wiele osób pyta o to, jak stworzyć własną witrynę internetową. Pomyślałem, że przydałoby się napisanie krótkiego (dyskusyjnego), łatwego do zrozumienia samouczka, który pomoże wszystkim. To naprawdę jedna z tych łatwych rzeczy, na które musisz się zdecydować. Och, czy wspominałem, że jest teraz za darmo?