Nejlepší odpověď
GitHub Student Developer Pack poskytuje zdroje nastavte si vlastní firstnamelastname.me doména bez nákladů. Ve zbytku mé odpovědi chci přemýšlet o tom, proč to pro mě bylo zpočátku těžké, proč by to pro vás mohlo být překážkou při vytváření vlastních webových stránek. Zahrnuji krátký, poněkud komplexní průvodce určený pro studentské publikum s malé až žádné technické znalosti, vytvořit si docela veřejnou osobní webovou stránku (to by se mělo ukázat, když někdo vygooglí vaše jméno).
Proč je opravdu těžké vytvořit si vlastní web
O tom, jak chtít vědět, jak fungují webové stránky: Jako nadšenec středoškolské technologie jsem byl vždy zvědavý, jak fungují webové stránky, a opravdu na mě zapůsobili lidé, kteří měli své vlastní. Z vnějšku to všechno vypadalo tak jednoduše, ale kdykoli jsem vygooglil „jak fungují webové stránky“ a hlouběji jsem se propadl, ztratil jsem se uprostřed podivných zkratek a komplikovaně znějících věcí. TCP, UDP, IP, DNS, IPv6, HTML, JS, CSS – seznam pokračuje. Úkol zmapovat tyto nevkusné koncepty na hmatatelné věci v počítačích, o kterých jsem věděl, bylo docela obtížné a jedna z těch věcí, která vyžaduje obrovskou motivaci sedět a procházet.
Když se rozhodnete vytvořit web, abyste zjistili, jak fungují: Existuje otázka, na kterou se můžete obrátit u vybíravých technologických firem a najít v anály Glassdoor –
Co se stane, když ve svém webovém prohlížeči zadáte „google [dot] com“? ( Otázka rozhovoru Google: Co se stane, když zadáte …)
Dokonce v polovině studia informatiky na vysoké škole jsem byl trochu strach, jak málo mi o tom všem řekli. Frustrováním bylo, že vyhledávání na Googlu spočívalo v tom, „jak vytvořit web“. Když jsem do toho vložil spoustu marketingových peněz, narazil jsem na nepřeberné množství webů a výrazů, které mi stále příliš nedávají smysl – domény, hosting, GoDaddy, HostGator, směrování, CSS, HTML, Javascript, jQuery, WordPress , blogger, atd. Nyní mi to ukazuje:
Abych byl upřímný, všechna tato jména zněla velmi podvodně – y ke mně a jejich nepochopitelnost překročila mou motivaci. Chtěl jsem mít pouze vlastní web se svým jménem – debarghyadas.com [ignorovat vlastní propagaci] a Naučte se, jak na něj umístit obsah.
O tom, že je příliš levné nakupovat věci na internetu: Když jsem si omotal hlavu kolem některých to, trochu to dávalo smysl. Abych vytvořil web, musel bych si koupit „doménu“, název webu a „hosting“, místo, které obsahuje obsah mého webu a dává mu „slouží“, na tuto doménu. Nákup. Není to hezké slovo vzhledem k mé ne tak hluboce zakořeněné šetrnosti tudent, který žije z freeware, nebyl jsem příliš zájem o rozdávání hotovosti na nákup abstraktních věcí. Trvalo mi roky, než jsem zaplatil 1 $ za Whatsapp, když bylo triviální vyhodit 4 $ za ten přepychový čokoládový mousse dort s vanilkovou zmrzlinou.
No tak – mohl bys být dalším podvodem? „Jíme konkurenci“? Dobře, gator.
Pro mnoho studentů (a lidí) jsou peníze docela překážkou vstupu. Nákup domény (u GoDaddy) stojí zhruba 10 $ ročně a podobná částka za nákup hostingu u HostGator. A zahrnovalo to propracování mnoha produktů, které jste nemohli pochopit. Rozumělo mi, že musíte platit také ročně – nebyl to jednorázový nákup.
Když jsem se uchýlil k tomu, abych nebyl levný, aby mě motivoval: Nakonec jsem dlouhým pracným procesem vydělal peníze a přesvědčil sám sebe, že investice by mě motivovala naučit se potřebné dovednosti. Myslím tím, že každý vždycky říkal, že HTML je jednoduchý, a je, ale stránky vytvořené pomocí HTML také vypadají jako hovno. Došlo k velkému zmatku.
Nakonec jsem měl pravdu – investice do domény a hostování po dobu 5 let mě vedla k tomu, abych zjistil, jak to funguje, a dostal jsem osobní web, který by na něm mohl kdykoli iterovat volný čas.
Nějaký komplexní průvodce vytvořením vlastního webu zdarma
Přechod na GitHub Student Developer Pack .Ano, obsahuje spoustu věcí, které jsem nikdy nepoužil, ale to, co přímo neinzeruje (a pravděpodobně by mělo), je to, že poskytuje všechny nástroje k tomu, aby vaše webové stránky na vaší doméně fungovaly zdarma! Zní to příliš dobře, než aby to teď byla pravda.
Nástroje obchodu zde uvádíme obecné zásady. I osobně jsem to nevyzkoušel, ale domnívám se, že je to dobrý způsob, jak jít do věcí. Musíte (nebo byste měli) využít následující placené služby, které Student Developer Pack poskytuje (zdarma):
1. Soukromá úložiště Github [volitelně]
2. Doména Namecheap .me
3. Namecheap SSL [volitelně]
4. Hostování DigitalOcean
A navíc
1. bootstrap
2. Několik online výukových programů a nástrojů – JSfiddle 3. Některé weby se šablonami online – StartBootstrap , BootstrapZero
Co dělat s uvedenými nástroji Pokusím se o to, aby byl tento mini průvodce co nejjednodušší . Je snadné upustit od velkých pojmů, když víte, co to znamená, ale může to být velkým odstrašujícím prostředkem pro čtenáře, kteří jsou bezradní. Mohl bych být jasnější a na požádání je rozšířit.
1. Nastavit soukromý Github úložiště [volitelně]
Když jste při psaní spousty kódu pro projekt existuje spousta věcí, které se mohou pokazit.
- Může být odstraněn z vašeho počítače a vy jste zašroubovaní
- Můžete zkusit přidat novou funkci bez zálohování staré verze a dostat se do stavu, kdy zapomeňte na to, kolik Ctrl + Z (zpět) potřebujete, na kterých souborech se dostanete zpět do funkčního stavu.
- Mohli byste mít více lidí, kteří by na tom pracovali samostatně na svých vlastních počítačích, a nemáte tušení, jak integrovat oba vaše verze projektu.
Kodér n00b může navrhnout použití Dropboxu ke sdílení a synchronizaci kódových projektů, a pokud „pracujete na tom sami, mohlo by to být slušné řešení. Stále však budete čelit druhému problému ve výše uvedeném seznamu a bude opravdu šílené, když se více lidí pokouší pracovat na stejné základně kódů současně.
Git (a za starých časů SVN a Mercurial pro boky) se používají k „verzi“ vašeho kódu. Všimněte si, že git není github. To znamená, že můžete provádět změny, posílat je „proti proudu“ do interwebové stránky, kde jsou trvale uloženy ve vašem „úložišti“ (zdarma). Git je také čistě obslužný program příkazového řádku, což znamená, že musíte na ploše otevřít jednu z těch černých děsivě vypadajících hackerských obrazovek a zadávat příkazy používat. Používání je netriviální. Github se integruje s git a umožňuje vám zobrazit úložiště, která jste poslali proti proudu, a poskytuje spoustu grafických uživatelských rozhraní pro provádění úkolů git (chujících se jako běžná aplikace ve vašem počítači). Ve svém prohlížeči můžete procházet své databáze kódů (úložiště) na internetu, provádět změny, vrátit změny posledního kontrolního bodu (potvrzení) atd.
Github vždy poskytoval bezplatná úložiště, která byla veřejná – což znamenalo, že někdo mohl vidět váš kód a používat ho (ano, existují licence Open Source, ale víte, co tím myslím). V podstatě, pokud byste měli opravdu tvrdě pracovat na navrhování nějakých šíleně chladných sraček a objevování informatiky, váš kamarád coud prostě vezme váš kód a použije ho pro své vlastní webové stránky. Se vzdělávacím balíčkem nyní můžete získat 5 bezplatných soukromých úložišť (ačkoli Github tuto službu dříve poskytoval i studentům .edu). Projděte si online výukové programy a zjistěte, jak nastavit soukromé úložiště github pro kód vašeho webu.
2. Získejte zdarma Namecheap .me doména
Nejdelší dobu byl jediným prodejcem domén, o kterém jsem věděl, GoDaddy. Název mi vždy připadal temný, i když jsem se nakonec propadl k nákupu domény. Nyní, ve věku startupů, máme lepší čistší levnější alternativu – Namecheap.Namecheap byl vždy levný, ale nyní můžete získat doménu zdarma! Získejte tedy zdarma svoji doménu firstnamelastname.me , než dojde ke krádeži vašeho velmi běžného jména (pokud již není). A zkuste se nevrátit do 90. dnů e-mailu a kupte si raj2kul4skul.me . Prosím. Jedinou osobou, která udělá dojem, jsou přátelé, bez kterých se máte lépe.
Zmínil jsem se, že je to zdarma?
3 . Získejte Namecheap SSL [volitelně]
Toto je volitelné a pro svůj web jej zatím nemám (protože stále stojí peníze na GoDaddy). SSL (Secure Sockets Layer) je fantastická věc to v zásadě znamená, že váš webový obsah lze poskytovat „bezpečně“. Tento skvělý zelený zámek získáte také na svém webu, místo webu http máte https web a cítit se opravdu skvěle a autenticky:
Aniž byste šli příliš technicky, potřebujete vědět, že – to není nezbytně nutné pro váš osobní web, kde pochybuji, že budete dělat věci, které vyžadují takové přísné zabezpečení. Pokud se však naučíte něco o webu, můžete také. Je to přece zdarma?
4. Nastavit Digitální oceán hosting.
Namecheap: GoDaddy :: DigitalOcean: HostGator.
Namecheap je pro GoDaddy, protože DigitalOcean je pro HostGator – legitimnější, levnější, lépe navržený a snadněji použitelný startup alternativní. Když kupujete doménu, co bude uživateli sloužit (zobrazit)? Váš web, že? Ale nemůžete „jen říct, vzít tyto soubory do mého počítače a ukázat jim to. No, můžete, a takhle. S DigitalOceanem získáte„ hosting “zdarma. DigitalOcean nazývá jednu hostitelskou instanci„ kapičkou “.
To znamená, že můžete svůj web nahrát na virtuální počítač (číst: počítač) a sdělit doménu namecheap. sloužit obsahu z tohoto počítače. Aniž bychom se dostali do přílišných podrobností, uprostřed se děje spousta věcí, o které by se DigitalOcean měl postarat – věci jako konfigurace a výběr webového serveru – nginx nebo Apache a směrování požadavků ve vaší doméně konkrétně na vaši sadu souborů.
5. Tvorba skutečného webu.
Nyní přichází část „napsat nějaký HTML“. Tvorba webu má různé stupně obtížnosti – od zobrazení pošlete text „Hello World“ v Arialu na vytvoření Facebooku nebo Google. Obvykle int eraktivní aplikace, která vyžaduje data a obsahuje stav, je těžké udělat.
To, co budete dělat, bude pravděpodobně tvorba statického webu (spousta stejných textů / obrázků, které jsou pokaždé poskytovány všem). To je mnohem jednodušší. Pravděpodobně nevyhrám a nemůže k tomu napsat kompletní výukový program, ale to, co se vysokoškolští studenti obvykle dělají, je naučit se a používat následující věci –
- HTML – toto je skutečný obsah textu / odkazů / obrázků / videí
- CSS – díky tomu bude výše uvedený obsah vypadat hezky
- Javascript (JS) – to umožňuje dynamické prvky a hezké animace. Předpokládejme, že chcete vytvořit tlačítko, které načte obrázek, který nebyl ve vašem HTML, nebo dynamicky přidávat obsah do svého HTML. Pak použijete JS. Stručná historie – JS byl hacknut zpět za den asi za 10 dní a obsahuje spoustu chyb a může být velmi upovídaný a nepraktický, pokud toho napíšete hodně. Začátečník by obvykle používal knihovnu jako jQuery, aby byl méně podrobný a snadný (i když jQuery může na první pohled vypadat také zastrašující se všemi znaky $).
- Bootstrap – Bootstrap je rámec rozhraní Frontend vytvořený společností Twitter. Raw HTML přichází s poměrně špatně vypadajícími výchozími věcmi. Tlačítko HTML je nepředstavitelné a psaní CSS vyžaduje čas a experimentování (chci říct, ať je „reálné – nikdo SKUTEČNĚ“ nezná „CSS). Bootstrap zahrnuje stažení některých souborů, přidání jednoho řádku do HTML a možná i přečtení některých dokumentace a přidání některých tříd CSS, které poskytují – a voila! Nejen, že váš web automaticky vypadá mnohem hezčí, ale může být také kompatibilní s mobilními zařízeními (opět netriviální snaha).
6. Uvedení vašeho webu do režimu online (nasazení) Jakmile budete hotovi, vytvořte a otestujte svůj web lokálně (na svém počítači) aktivací svého localhost (místní webový server – google.Možná to nebudete potřebovat pro statické stránky) a testování a míchání s CSS pomocí velmi užitečných nástrojů pro vývojáře Chrome a jste spokojeni s vaším výstupem, můžete přejít na Digital Ocean, zkomprimovat svůj web a odeslat jej na váš serveru. Pokud jste udělali vše správně, počkejte několik sekund a přejděte do svého firstnamelastname.me a měl by se zobrazit váš obsah. A všichni ostatní by také měli být schopni.
7. Zajistit, aby váš skvělý web mohl být vyhledáván (SEO)
Posledním krokem je SEO – optimalizace vyhledávače. Konečným cílem je doufejme, že budete mít neobvyklé jméno a vaše stránka bude mezi nejlepšími výsledky, když někdo vyhledá vaše jméno. To může nějakou dobu trvat (ale nyní to lze provést za peněžní cenu). Existuje spousta způsobů, jak toho dosáhnout, a pro všechny můžete použít Google. Existují způsoby, jak k němu přiřadit váš Facebook, váš starý účet G +, který s ním nikdy nepoužíváte, a přidat vlastní metadata, která se zobrazí ve vašem vyhledávání Google. atd. atd. Nakonec, během několika týdnů, pokud vaše jméno není extrémně běžné nebo bohužel stejné jako známá osoba, byste měli být jedním z mála nejlepších výsledků na Googlu.
Různé věci, které byste měli vědět
Postup při vytváření zkratek k vytvoření hezké stránky: V závislosti na tom, kolik práce chcete na svém webu věnovat, můžete si vždy vybrat šikovnou šablonu bootstrap online nebo si ručně vytvořit vlastní CSS kurzy, pokud chcete jedinečný vzhled, nebo dokonce zjednodušit a jít na základní HTML / CSS (což dělá velký počet akademiků). Například Domovská stránka Jon Kleinberga .
O tom, že nemusíte znát PHP a další zajímavé věci: Protože navrhujete statický web, nemáte znalosti o fantastických věcech, jako je vytváření back-endu, vytváření mnoha stránek a vytváření databází. Ano, mluvím s vámi, lidé, kteří chtějí používat PHP a MySQL bez dobrého důvodu (I když jste to potřebovali, snažte se držet dál od PHP). Existuje spousta skvělých backendových rámců určených pro vytváření dalších typů komplikovaných webů od Ruby on Rails (v Ruby) po Django (v Pythonu) do Přehrát! (v Javě a Scale) lehké jako CherryPy (v Pythonu) nebo Baňka (v Pythonu). Ve skutečnosti existují rámce téměř pro každý jazyk, který si dokážete představit – Porovnání rámců webových aplikací , ale ještě se nespalujte tím, že se o nich ještě nebudete učit.
O dalších věcech, které byste měli zvážit, přidat na svůj web: Další věci, které byste mohli udělat pro svůj osobní web –
- Komprimujte své obrázky , pokud jich používáte hodně, vaše webové stránky načtení bude trvat dlouho.
- Použít sociální pluginy z Facebooku / Quory / Twitteru
- Přidat Google Analytics (to je vlastně téměř nutnost). Google Analytics vám mimo jiné umožňuje zjistit, kolik lidí navštíví váš web, odkud pochází atd. „Je to pěkný motivátor (doufejme) pro aktualizaci vašeho webu a jeho aktualizaci. Navíc je to velmi snadné použití – zahrnuje pouze zkopírování vložení některých řádků kódu na vaši stránku.
- Minifikujte své skripty. Mnoho JS a CSS stránek může stále vidět každý, kdo váš web navštíví. Pokud si myslíte udělali jste něco strašně zajímavého, co chcete skrýt, minifikujte svůj JS / CSS. V opačném případě to zničí účel mít soukromé úložiště. Navíc váš web zrychluje.
- Zašifrujte svůj HTML . Opět platí, že pokud opravdu nechcete, aby lidé viděli, jak jste vytvořili svůj web, existují způsoby šifrování HTML, takže ani kliknutím na tlačítko „Zobrazit zdroj“ vaše webová stránka neodhalí nic zajímavého.
Při psaní této odpovědi: Mnoho lidí se kolem ptá, jak vytvořit vlastní web. Myslel jsem, že by bylo užitečné napsat krátký (diskutabilní), snadno pochopitelný malý návod, který pomůže všem. Je to opravdu jedna z těch snadných věcí, na které si musíte myslet. A zmínil jsem se o tom, že je nyní zdarma?