Legjobb válasz
A GitHub Student Developer Pack biztosítja a forrásokat állítsa be saját utónévneve.me domain költségmentesen. Válaszom további részében arról rágódom, hogy miért volt kezdetben nehéz számomra, miért jelenthetett akadályt számodra a saját weboldal létrehozása. Rövid, kissé átfogó útmutatót adok a hallgatók számára, kevés technikai ismeret, egy elég nyilvános, személyes weboldal készítése saját magának (ennek akkor kell megjelennie, amikor valaki google-olja a nevét).
Miért nehéz saját webhelyet létrehozni
A webhelyek működéséről: Mint középiskolai technológiai rajongó, mindig kíváncsi voltam, hogy működnek a weboldalak, és valóban lenyűgözött azok az emberek, akiknek sajátjuk van. Kívülről nézve minden olyan egyszerűnek tűnt, de valahányszor googliztam a “hogyan működnek a weboldalak” és mélyebbre ásva, eltévednék ebben a furcsa rövidítések és bonyolult hangzású dolgok közepette. TCP, UDP, IP, DNS, IPv6, HTML, JS, CSS – a lista folytatódik. Ezeknek a vázolt fogalmaknak az általam ismert számítógépeken tapintható dolgokra való feltérképezése meglehetősen nehéz volt, és egyike azoknak a dolgoknak, amelyekre rendkívül sok motiváció szükséges, hogy üljünk és átmegyek.
Ha úgy dönt, hogy csak készít egy weboldalt, hogy kiderüljön, hogyan működik: Kérdés lehet, hogy néhány válogatós techcégnél megkeresheti, és megtalálhatja a a Glassdoor évkönyvei –
Mi történik, ha a böngészőjébe beírja a “google [dot] com” szót? ( Google interjúkérdés: Mi történik, amikor gépelsz …)
Még a számítógépes tudomány főiskolai tanulmányainak felénél is kicsit aggódott, hogy milyen keveset meséltek erről az egészről. Frusztráltságként a Google-n keresendő “visszalépés” az volt, hogy “hogyan készítsünk weboldalt”. A rengeteg marketingpénz felhasználásával rengeteg olyan weboldalt és kifejezést használtam fel, amelyeknek még mindig nem volt túl sok értelme – domainek, tárhely, GoDaddy, HostGator, útválasztás, CSS, HTML, Javascript, jQuery, WordPress , blogger stb. Ezt mutatja ez nekem most:
Hogy őszinte legyek, ezek a nevek nagyon átverően hangzottak y nekem, és érthetetlenségük meghaladta a motivációmat. Csak egy saját weboldalt szerettem volna a nevemmel – debarghyadas.com [figyelmen kívül hagyni az önreklámot], és megtanulják, hogyan lehet tartalmat feltenni rá.
Azért, hogy túl olcsó vagyok az interneten vásárolni: amikor a fejem köré néztem Ez egy kicsit értelmes. Weboldal készítéséhez meg kell vásárolnom egy “domaint”, egy webhely nevét és egy “tárhelyet”, egy helyet, amely tartalmazza a webhelyem tartalmát és megadja, “kiszolgálja”, erre a domainre. Vásárlás. Nem olyan szép szó, tekintettel a nem annyira mélyen gyökerező takarékosságomra Tudent, aki ingyenes szoftverekből él, nem voltam túl szívesen készpénzzel absztrakt dolgokat vásárolni. Évekbe telt, mire 1 dollárt fizettem a Whatsapp-ért, amikor elenyésző volt 4 dollárt robbantani arra a pazar csokoládéhabos süteményre, vaníliafagylalttal.
Ugyan – lehetne még csaló-y? “Felesszük a versenyt”? Oké, gator.
Sok diák (és ember) számára a pénz eléggé gátolja a belépést. Körülbelül 10 dollárba kerül évente egy domain megvásárlása (a GoDaddy-nál), és hasonló összegbe kerül a tárhely megvásárlása a HostGator-nál. És ez magában foglalta azt, hogy számos olyan terméken keresztül dolgozzon, amelyeknek nincs értelme. Látszott rajta, hogy Önnek is évente kell fizetnie – ez nem egyszeri vásárlás.
Annak érdekében, hogy ne legyek olcsó, hogy motiváljam: Végül egy hosszú fáradságos folyamaton keresztül kidobtam a pénzt, meggyőzve magam, hogy a beruházás motiválna a szükséges készségek elsajátítására. Úgy értem, mindenki mindig azt mondta, hogy a HTML egyszerű, és így is van, de a HTML-lel készített webhelyek is szarnak tűnnek. Nagy volt a zűrzavar.
Végül igazam volt – a domainbe és az 5 évre szóló tárhelybe történő befektetés arra késztetett, hogy rájöjjek, hogyan működnek a dolgok, és kaptam egy személyes weboldalt, és iteráltam volna rajta, ha van valamim Szabadidő.
Egy kissé átfogó útmutató saját weboldal készítéséhez ingyen
Eljutás a GitHub Student Developer Packhez .Igen, sok olyan dolgot tartalmaz, amit még soha nem használtam, de amit nem hirdet közvetlenül (és valószínűleg kell is), az az, hogy minden eszközt biztosít, hogy a domainjét a webhelye ingyen be tudja futtatni! Túl jól hangzik ahhoz, hogy most igaz legyen.
A kereskedelem eszközei Itt “általános irányelv. I személyesen még nem próbáltam ki, de úgy gondolom, ez egy jó módszer a dolgok folytatására. Használnia kell (vagy meg kell) használnia a következő fizetett szolgáltatásokat, amelyeket a Student Developer Pack nyújt (ingyen):
1. Github privát adattárak [opcionális]
2. Namecheap .me domain
3. Namecheap SSL [opcionális]
4. DigitalOcean tárhely
Ezenkívül
1. Bootstrap
2. Számos online oktatóanyag és eszköz – JSfiddle 3. Néhány online sablon webhely – StartBootstrap , BootstrapZero
Mi a teendő az említett eszközökkel Megpróbálom a lehető legegyszerűbben tartani ezt a mini-útmutatót . Könnyű eldobni a nagy kifejezéseket, ha tudod, mit jelentenek, de óriási visszatartó erőt jelenthet a tanácstalan olvasók számára. Kifejezettebben kifejthetném és kibővíthetem ezeket, ha kérik.
1. Állítson be egy privát Github adattár [opcionális]
Amikor Ön Ha sok kódot írunk egy projekthez, sok minden rosszul fordulhat elő.
- Törölhető a gépedről, és elcseszett
- Megpróbálhat új funkciót hozzáadni a régi verzió biztonsági mentése nélkül, és olyan állapotba kerülhet, ahol felejtsd el, hány Ctrl + Zs (undos) fájlra van szükséged ahhoz, hogy visszatérj a működő állapotba.
- Több ember dolgozhat rajta külön-külön a saját számítógépén, és fogalma sincs arról, hogyan integrálja mindkét fájlt. a projekt verziója.
Egy n00b kódoló javasolhatja a Dropbox használatát a kódprojektek megosztásához és szinkronizálásához, és ha “maga dolgozik rajta, lehet, hogy ez egy tisztességes megoldás. A fenti lista második problémájával azonban még mindig szembe kell néznie, és akkor válik igazán őrültté, ha több ember egyszerre próbál ugyanazon a kódbázison dolgozni.
A Git (és a régi időkben az SVN és a hipszterek számára a Mercurial) a kód “verziójához” használatos. Vegye figyelembe, hogy a git nem github. Vagyis változtatásokat végezhet, “upstream” felé tolhatja őket az internetes hálózatok, ahol állandóan az “adattárban” vannak tárolva (ingyen). A Git pusztán egy parancssori segédprogram is, ami azt jelenti, hogy meg kell nyitnia az egyik fekete, félelmetes megjelenésű hacker képernyőt az asztalon, és be kell írnia a parancsokat. Nem triviális a használata. A Github integrálódik a git-be, és lehetővé teszi, hogy megtekinthesse azokat az adattárakat, amelyeket felfelé tolott, és egy csomó GUI-t biztosít a git feladatok elvégzéséhez (úgy viselkedik, mint egy normál alkalmazás a számítógépen). A böngészőből böngészhet a kódbázisaiban (tárhelyeiben) az interneten, módosításokat végezhet, visszavonhatja az utolsó ellenőrző pont (véglegesítés) módosításait stb.
A Github mindig ingyenes nyilvános tárhelyeket biztosított – ami azt jelentette, hogy bárki láthatta a kódját és használhatta azt (igen, vannak nyílt forráskódú licencek, de tudod, mire gondolok). Lényegében, ha nagyon keményen dolgozna valami őrülten jó szar megtervezésében és újratalálná a Computer Science-t, a haverja csak elveszi a kódját, és felhasználja a saját weboldalán. Most az oktatási csomaggal 5 ingyenes privát tárhelyet kaphat (bár a Github korábban is szolgáltatta ezt a szolgáltatást .edu hallgatók számára). Keresse fel az online oktatóanyagokat, és derítse ki, hogyan állíthat be privát github-adattárat a webhely kódjához.
2. Szerezd meg ingyenes Namecheap .me domain
A leghosszabb ideig az egyetlen olyan domainértékesítő, akiről tudtam, a GoDaddy volt. A név mindig árnyékosnak tűnt, bár végül belevágtam, hogy ott vásároljak egy domaint. Most, a startupok korában van egy jobb tisztább olcsóbb alternatívánk – Namecheap.A Namecheap mindig olcsó volt, de most már ingyenesen kaphat domaint! Tehát most ingyen keresse oda a firstnamelastname.me domainjét, mielőtt a nagyon közönséges nevét ellopnák (ha még nem “). És próbáljon meg nem térni vissza a 90-es évek e-mail napjaira, és vásároljon egy raj2kul4skul.me oldalt. Don “t. Kérem. Az egyetlen ember, aki lenyűgözni fog, azok a barátok, akik nélkül jobban jár.
Megemlítettem, hogy ingyenes?
3 . Szerezzen Namecheap SSL [opcionális]
Ez opcionális, és még nem kaptam meg a webhelyemhez (mert a GoDaddy továbbra is pénzbe kerül). Az SSL (Secure Sockets Layer) divatos dolog ez alapvetően azt jelenti, hogy webtartalmát “biztonságosan” lehet kiszolgálni. Megkapja azt a hűvös zöld zárat is a webhelyén, van egy https webhely a http helyett, és nagyon hűvösnek és hitelesnek érzi magát:
Anélkül, hogy túl technikussá válna, tudnia kell – ez nem feltétlenül szükséges személyes webhelyéhez, ahol kétlem, hogy olyan szigorú biztonságot igénylő dolgokat fog csinálni. Ha azonban új dolgokat tanul az internetről, akkor az is megtörténhet. Végül is ingyenes?
4. Beállítás Digitális óceán tárhely.
Namecheap: GoDaddy :: DigitalOcean: HostGator.
A Namecheap a GoDaddy-t, mint a DigitalOcean a HostGator-ot – legitimebb, olcsóbb, jobban megtervezett és könnyebben használható indítás alternatív. Amikor egy domaint vásárol, mit szolgál (mutat) a felhasználó számára? A weboldalad, igaz? De nem mondhatja azt, hogy ezeket a fájlokat a számítógépemre veszi, és megmutatja nekik. Nos, megteheti, és így is. A DigitalOcean használatával ingyenes “tárhelyet” kap. A DigitalOcean egy tárhelyet “cseppnek” hív.
Ez azt jelenti, hogy feltöltheti webhelyét egy virtuális gépre (olvasható: számítógépre), és elmondhatja a namecheap tartományt a tartalom kiszolgálása ezen a számítógépen. Anélkül, hogy túl részletes részletekbe menne, sok olyan dolog történik középen, amelyekről a DigitalOcean-nak gondoskodnia kell – például a webszerver beállítása és kiválasztása – nginx vagy Apache , és a domainjére irányuló kérelmeket kifejezetten a fájlkészletre irányítja.
5. A tényleges webhely elkészítése.
Most következik a “HTML írása” rész. A weboldal készítése különböző nehézségekkel jár – a írd be a “Hello World” szót az Arialban egy Facebook vagy Google létrehozására. Általában egy int az adatokat igénylő és állapotot tartalmazó eraktív alkalmazás nehezen elkészíthető.
Amit csinálsz, az valószínűleg statikus oldalt fog létrehozni (egy csomó ugyanazon szöveg / kép, amelyet mindenkinek kiszolgálnak mindenkinek). Ez sokkal könnyebb. Valószínűleg nem nyertem és nem írhatok ehhez teljes oktatóanyagot, de amit az egyetemisták általában csinálnak, az az, hogy megtanulják és felhasználják a következő dolgokat –
- HTML – ez a szöveg / linkek / képek / videók tényleges tartalma
- CSS – ettől a fenti tartalom szép lesz
- Javascript (JS) – ez lehetővé teszi a dinamikus elemeket és a csinos animációkat. Tegyük fel, hogy olyan gombot szeretne készíteni, amely nem t a HTML-ben, vagy dinamikusan adhat hozzá tartalmat a HTML-hez. Ezután használja a JS-t. Rövid előzmények – A JS-t körülbelül 10 nap alatt feltörték a nap folyamán, és sok hibát tartalmaz, és nagyon részletes és nehézkes lehet, ha sokat írsz belőle. Általában egy kezdő olyan könyvtárat használ, mint a jQuery, hogy kevésbé bőbeszédű és könnyű legyen (bár a jQuery eleinte minden $ -jelével is megfélemlítőnek tűnhet).
- Bootstrap – A Bootstrap a Twitter által készített, a Frontendhez tartozó keretrendszer. A nyers HTML meglehetősen rossz alapértelmezett megjelenésű. A HTML gomb példátlan, és a CSS írása ehhez időbe és kísérletezésbe telik (mármint hogy legyünk valóságosak – senki TÉNYLEG “nem ismeri” a CSS-t). A Bootstrap magában foglal néhány fájlt letölt, egy sort hozzáad a HTML-hez, és esetleg el is olvas néhányat. dokumentáció és néhány általuk nyújtott CSS-osztály hozzáadása – és voila! Nem csak a webhelye tűnik automatikusan sokkal szebbnek, de kompatibilisvé tehető a mobileszközök számára is (ismételten egy nem triviális törekvés).
6. Webhelyének online elérhetővé tétele (telepítés) Miután elkészítette és tesztelte webhelyét helyben (a saját számítógépén) a helyi host aktiválásával (helyi webszerver – google.Előfordulhat, hogy erre nincs szükség statikus webhelyeknél), valamint a CSS tesztelésére és a keverésre a nagyon hasznos Chrome fejlesztői eszközök segítségével, és elégedett a kimenetével, folytathatja a Digitális Óceánt, feltöltheti webhelyét és elküldheti a szerver. Ha mindent jól csinált, várjon néhány másodpercet, és lépjen a utónévnév.me oldalra, és látnia kell a tartalmát. És mindenkinek képesnek kell lennie rá.
7. Nagyszerű webhelyének kereshetővé tétele (SEO)
Utolsó lépés a SEO – a keresőoptimalizálás. A végső cél az, hogy remélhetőleg szokatlan nevet kapjunk, és hogy a webhely a legjobb eredmények közé kerüljön, amikor valaki guglizza a nevét. Ez eltarthat egy ideig (de megtehető most pénzbeli költségekkel). Ennek sokféle módja van, és mindegyikhez Google-t kereshet. Van módja társítani a Facebook-ját, a régi G + -fiókját, amelyet soha nem használ, és egyéni metaadatokat adhat hozzá, amelyek megjelennek a Google Keresésben. stb. stb. Végül, néhány héten belül, kivéve, ha a neve rendkívül elterjedt, vagy sajnos megegyezik egy híres emberrel, Önnek kell lennie az egyik legfontosabb eredménynek a Google-on.
Egyéb tudnivalók
Parancsikonok készítésével egy szép oldal elkészítéséhez: Attól függően, hogy mennyi munkát szeretne elvégezni a webhelyén, mindig felvehet egy praktikus bootstrap sablont online, vagy kézi készítéssel elkészítheti saját CSS osztályait, ha szeretne egyedi megjelenés, vagy akár egyszerű is, és válassza az alapvető HTML / CSS-t (amit az akadémikusok nagy része tesz). Például Jon Kleinberg honlapja .
A PHP ismeretlenségéről és egyéb divatos dolgok: Mivel Ön statikus webhelyet tervez, nem ismeri azokat a fantáziadús dolgokat, mint egy háttérprogram létrehozása, sok oldal létrehozása és adatbázisok készítése. Igen, veled beszélek, olyan emberek, akik minden ok nélkül szeretnék használni a PHP-t és a MySQL-t (próbálkozzon távol a PHP-től, még ha szükséges is). Van egy csomó nagyszerű háttér-keretrendszer, amely más típusú bonyolult webhelyeket jelent a Ruby on Rails (rubinban) és a Django (Pythonban) Lejátszás! (Java és Scala nyelven) olyan könnyűsúlyúak, mint a CherryPy (Pythonban) vagy Lombik (Pythonban). Valójában vannak keretek szinte minden nyelvhez, amelyet csak el tudsz képzelni – A webalkalmazások keretrendszereinek összehasonlítása , de ne égesse el magát azzal, hogy még használja / megismeri őket.
Egyéb megfontolandó dolgokról a webhelyen: Egyéb dolgok, amelyeket érdemes megtenni a személyes webhelye érdekében –
- Tömörítse a képeket , ha sokat használ, akkor a webhelyét hosszú ideig tart a betöltése.
- Használjon közösségi bővítményeket a Facebook / Quora / Twitter oldalról
- A Google Analytics hozzáadása (ez valójában szinte kötelező). A Google Analytics segítségével többek között megnézheti, hogy hány ember látogat el az Ön weboldalára, honnan származik stb. Ez egy jó motivátor (remélhetőleg) webhelye frissítésére és naprakészen tartására. Ezenkívül nagyon könnyen használható – csak annyit jelent, hogy másolunk néhány kódsort az oldalra.
- Csökkentse a szkripteket. Sok webhely JS-je és CSS-je továbbra is mindenki számára látható lehet, aki ellátogat a webhelyére. Ha úgy gondolja, valami rettenetesen érdekes dolgot tett, amit el akar rejteni, minimalizálni a JS / CSS-t. Ellenkező esetben ez tönkreteszi a privát adattár célját. Ezenkívül gyorsabbá teszi webhelyét. b0a18fc001 “> Titkosítsa a HTML-kódját . Ismételten, ha nagyon nem akarja, hogy mások lássák, hogyan készítetted a webhelyedet, a HTML kódolásának módjai, így még a “Forrás megtekintése” gombra kattintva sem lesz semmi érdekes.
A válasz megírásakor: Sokan kérdezik, hogyan készítsenek saját weboldalt. Úgy gondoltam, hasznos lenne egy rövid (vitatható), könnyen érthető kis oktatóanyagot írni, amely mindenkinek segít. Ez valóban egyike azoknak a könnyű dolgoknak, amelyekre gondolnia kell. Ja, és már megemlítettem? Most már szabad?