Cel mai bun răspuns
The GitHub Student Developer Pack oferă resursele pentru configurați-vă propriul dvs. firstnamelastname.me domeniu fără costuri. În restul răspunsului meu, mă gândesc de ce mi-a fost inițial greu, de ce ar putea fi „o barieră pentru tine, să îți creezi propriul site web. Includ un ghid scurt, oarecum cuprinzător, destinat unui public studențesc cu puține sau deloc cunoștințe tehnice, pentru a crea un site personal personal pentru dvs. (care ar trebui să apară atunci când cineva vă googleează numele).
De ce este foarte greu să-ți creezi propriul site web
În ceea ce privește dorința de a ști cum funcționează site-urile web: În calitate de pasionat de tehnologie de liceu, am fost mereu curios să știu cum funcționează site-urile web și cu adevărat impresionat de oamenii care au propriile lor. Totul mi s-a părut atât de simplu din exterior, dar ori de câte ori am căutat pe Google „cum funcționează site-urile web” și m-am săpat mai adânc, m-aș pierde în mijlocul unor abrevieri ciudate și lucruri de sunet complicate. TCP, UDP, IP, DNS, IPv6, HTML, JS, CSS – lista continuă. Sarcina de mapare a acestor concepte abstruse la lucruri palpabile din computerele pe care le știam era destul de dificilă și unul dintre acele lucruri care necesită o motivație extraordinară pentru a sta și a trece prin.
Atunci când vă decideți să creați un site web pentru a afla cum funcționează: Există o întrebare pe care o puteți primi la unele firme de tehnologie pretențioasă și găsiți în analele Glassdoor –
Când introduceți „google [dot] com” în browserul dvs. web, ce se întâmplă? ( Întrebarea Google Interview: Ce se întâmplă când tastați …)
Chiar și la jumătatea studiului informatic la facultate, eram puțin îngrijorat de cât de puțin mi-au spus despre toate acestea. În frustrare, ceea ce trebuie să căutăm pe Google a fost „cum să creăm un site web”. Odată cu încărcătura de bani de marketing, m-am confruntat cu o mulțime de site-uri și termeni pe care încă nu i-am putut da prea mult sens – domenii, găzduire, GoDaddy, HostGator, rutare, CSS, HTML, Javascript, jQuery, WordPress , blogger etc. Acesta este ceea ce îmi arată acum:
Pentru a fi sincer, toate aceste nume au sunat foarte înșelătorie- pentru mine, iar neînțelegerea lor mi-a depășit motivația. Am vrut doar să am propriul meu site web cu numele meu – debarghyadas.com [ignorați auto-promovarea] și aflați cum să puneți conținut pe ea.
Despre faptul că sunt prea ieftin pentru a cumpăra lucruri de pe internet: Când mi-am înfășurat capul în jurul unor Pentru un site web, ar trebui să achiziționez un „domeniu”, un nume de site web și un „hosting”, un loc care conține conținutul site-ului meu web și îl oferă „îl servește”, către acest domeniu. Achiziționare. Nici un cuvânt frumos, având în vedere frugalitatea mea nu atât de profundă Tudent care trăiește din freeware, nu eram prea dornic să obțin bani pentru a cumpăra lucruri abstracte. Mi-au trebuit ani de zile să plătesc 1 USD pentru Whatsapp când a fost banal să arunc 4 USD pe acel somptuos tort de mousse de ciocolată cu înghețată de vanilie.
Haide – ai putea să mai fii vreo înșelătorie? „Mâncăm concurența”? Bine, domnule.
Pentru mulți studenți (și oameni), banii reprezintă o barieră de intrare. Costă aproximativ 10 USD / an pentru a cumpăra un domeniu (la GoDaddy) și o sumă similară pentru a cumpăra găzduire de la HostGator. Și a implicat să-ți faci drum prin numeroase produse pe care nu le puteai da sens. M-a înspăimântat că trebuie să plătești și anual – nu era o achiziție unică.
Recurând la a nu fi ieftin pentru a mă motiva: În cele din urmă, printr-un lung proces laborios, am repartizat banii, convingându-mă că investiția m-ar motiva să învăț abilitățile necesare. Adică, toată lumea a spus întotdeauna că HTML este simplu, și este, dar site-urile realizate cu HTML arată, de asemenea, ca un rahat. A existat multă confuzie.
În cele din urmă, am avut dreptate – investiția pe un domeniu și găzduirea timp de 5 ani m-a determinat să-mi dau seama cum au funcționat lucrurile și am obținut un site personal afară și l-aș repeta ori de câte ori am timp liber.
Un ghid oarecum cuprinzător pentru crearea propriului site web gratuit
Acces la GitHub Student Developer Pack .Da, conține o mulțime de lucruri pe care nu le-am folosit niciodată, dar ceea ce nu face publicitate direct (și probabil ar trebui) este că oferă toate instrumentele pentru ca site-ul dvs. de pe domeniul dvs. să funcționeze gratuit! Sună prea bine ca să fie adevărat acum.
Instrumente comerciale Aici „o linie directoare generală. I Nu l-am încercat personal, dar îmi imaginez că acesta este un mod bun de a face lucruri. Trebuie (sau ar trebui) să utilizați următoarele servicii cu plată oferite de Student Developer Pack (gratuit):
1. Depozite private Github [opțional]
2. Domeniul Namecheap .me
3. Namecheap SSL [opțional]
4. Găzduire DigitalOcean
Și în plus,
1. Bootstrap
2. Mai multe tutoriale și instrumente online – JSfiddle 3. Unele site-uri de șabloane online – StartBootstrap , BootstrapZero
Ce să fac cu instrumentele menționate Voi încerca să păstrez acest mini-ghid cât mai simplu posibil . Este ușor să renunțați la termeni mari atunci când știți ce înseamnă, dar poate fi un factor de descurajare imens pentru cititorii care sunt lipsiți de idee. Aș putea fi mai explicit și să le extind dacă vi se solicită acest lucru.
1. Configurați un privat Github depozit [opțional]
Când sunteți scriind o mulțime de coduri pentru un proiect, există o mulțime de lucruri care pot merge prost.
- Poate fi șters de pe mașină și sunteți înșurubat
- Puteți încerca să adăugați o caracteristică nouă fără a face backup la versiunea veche și a ajunge la o stare în care uitați de câte Ctrl + Z (undos) aveți nevoie pentru fișierele pentru a reveni la starea de funcționare.
- Puteți avea mai multe persoane care lucrează la el separat pe propriile computere și nu aveți nicio idee cum să vă integrați atât versiunea proiectului.
Un coder n00b ar putea sugera să utilizați Dropbox pentru a partaja și sincroniza proiecte de cod și, dacă „lucrați singur la asta, ar putea fi o soluție decentă. Cu toate acestea, veți întâmpina în continuare a doua problemă din lista de mai sus și devine cu adevărat nebunesc atunci când mai multe persoane încearcă să lucreze simultan pe aceeași bază de cod.
Git (și în vremurile de demult, SVN și Mercurial pentru hipsteri) sunt folosite pentru „versiunea” codului dvs. Rețineți că git nu este github. Adică puteți face modificări, împingeți-le „în amonte” la interweb-urile, unde sunt stocate permanent în „depozitul” dvs. (gratuit). Git este, de asemenea, pur un utilitar de linie de comandă, ceea ce înseamnă că trebuie să deschideți unul dintre acele ecrane de hacker negri înfricoșători de pe desktop și să tastați comenzile să-l utilizați. Nu este banal de utilizat. Github se integrează cu git și vă permite să vedeți depozitele pe care le-ați împins în amonte și vă oferă o grămadă de interfețe grafice pentru a face sarcini git (comportându-vă ca o aplicație normală pe computer). Puteți să vă răsfoiți bazele de cod (depozite) de pe internet din browser, să faceți modificări, să reveniți la ultimul punct de control (commit) și așa mai departe.
Github a furnizat întotdeauna depozite gratuite care erau publice – ceea ce însemna că oricine poate vedea codul dvs. și îl poate folosi (da, există licențe Open Source, dar știți la ce mă refer). În esență, dacă ai lucra din greu la proiectarea unor rahaturi nebunești și la reinventarea informaticii, prietenul tău ar putea să ia codul tău și să îl folosească pentru propriul său site web. Acum, cu pachetul educațional, puteți obține 5 depozite private gratuite (deși Github a oferit serviciul respectiv și pentru studenții .edu). Consultați tutorialele online și aflați cum să configurați un depozit github privat pentru codul site-ului dvs. web.
2. Obțineți gratuit Namecheap .me domain
Pentru cea mai lungă perioadă de timp, singurul vânzător de domeniu pe care îl știam era GoDaddy. Numele mi s-a părut întotdeauna umbros, chiar dacă în cele din urmă am cedat la cumpărarea unui domeniu acolo. Acum, în era startup-urilor, avem o alternativă mai bună și mai ieftină – Namecheap.Namecheap a fost întotdeauna ieftin, dar acum puteți obține un domeniu gratuit! Așadar, obțineți domeniul dvs. firstnamelastname.me acum gratuit, înainte ca numele dvs. foarte comun să fie furat (dacă nu este deja). Și încercați să nu vă întoarceți în zilele de e-mail din anii 90 și cumpărați un raj2kul4skul.me . Nu faceți acest lucru. Vă rog. Singura persoană care va impresiona sunt prietenii fără care ai mai bine.
Am menționat că este gratuit?
3 . Obțineți Namecheap SSL [opțional]
Acest lucru este opțional și încă nu l-am primit pentru site-ul meu web (deoarece încă costă bani pe GoDaddy). SSL (Secure Sockets Layer) este un lucru extraordinar asta înseamnă, în esență, că conținutul dvs. web poate fi difuzat „în siguranță”. De asemenea, obțineți blocarea verde rece pe site-ul dvs., aveți un site https , în loc de http și simțiți-vă foarte cool și autentic:
Fără a merge prea tehnic, ceea ce trebuie să știți este că – acest lucru nu este strict necesar pentru site-ul dvs. personal în care mă îndoiesc că veți face lucruri care necesită o securitate atât de strictă. Totuși, dacă înveți lucruri despre web, s-ar putea la fel de bine. La urma urmei este gratuit?
4. Configurați Ocean digital hosting.
Namecheap: GoDaddy :: DigitalOcean: HostGator.
Namecheap este către GoDaddy pe măsură ce DigitalOcean este către HostGator – un start mai legitim, mai ieftin, mai bine conceput și mai ușor de utilizat alternativă. Când cumpărați un domeniu, ce va servi (arăta) utilizatorului? Site-ul dvs., nu? Dar nu puteți spune doar să luați aceste fișiere pe computerul meu și să le arătați. Ei bine, puteți, și așa este. Cu DigitalOcean, veți obține „găzduire” gratuită. DigitalOcean numește o instanță de găzduire „picătură”.
Aceasta înseamnă că puteți încărca site-ul dvs. web pe o mașină virtuală (citiți: un computer) și spuneți domeniului dvs. namecheap pentru a difuza conținutul de pe acel computer. Fără a intra în prea multe detalii, există o mulțime de lucruri care se întâmplă în mijloc pe care DigitalOcean ar trebui să le aibă grijă – lucruri precum configurarea și alegerea unui server web – sau Apache și solicitările de rutare de pe domeniul dvs. în mod specific către setul de fișiere.
5. Crearea site-ului web actual.
Acum se ajunge la partea „Scrieți ceva HTML”. Crearea unui site web are diferite grade de dificultate – de la afișarea trimiteți mesajul „Hello World” în Arial pentru a crea un Facebook sau Google. De obicei, un int aplicația eractivă care necesită date și conține starea este greu de realizat.
Ceea ce veți face este probabil să creați un site static (o grămadă din același text / imagini care sunt difuzate tuturor de fiecare dată). Acest lucru este mult mai ușor. Probabil că nu am câștigat și nu pot scrie un tutorial complet pentru aceasta, dar ceea ce fac în general studenții este să învețe și să utilizeze următoarele lucruri –
- HTML – acesta este conținutul real al textului / linkurilor / imaginilor / videoclipurilor
- CSS – acest lucru face ca conținutul de mai sus să arate destul de
- Javascript (JS) – aceasta permite elemente dinamice și animații frumoase. Să presupunem că doriți să creați un buton care să încarce o imagine care nu era „t în HTML sau adăugați conținut dinamic în HTML. Apoi, utilizați JS. O scurtă istorie – JS a fost spart în acea zi în aproximativ 10 zile și conține o mulțime de bug-uri și poate fi foarte detaliat și dificil dacă scrii o mulțime de el. În mod obișnuit, un începător ar folosi o bibliotecă precum jQuery pentru a o face mai puțin detaliată și mai ușoară (deși jQuery poate părea intimidant la început și cu toate semnele sale $).
- Bootstrap – Bootstrap este un cadru Frontend realizat de Twitter. HTML brut vine cu lucruri implicite destul de proaste. Butonul HTML nu poate fi prezentat, iar scrierea CSS necesită timp și experimentare (adică, să fie real – nimeni nu știe „CSS”). Bootstrap implică descărcarea unor fișiere, adăugarea unui singur rând la codul HTML și poate citirea unor documentație și adăugarea unor clase CSS pe care le oferă – și voilă! Site-ul dvs. nu numai că arată automat atât de frumos, dar poate fi compatibil și pentru dispozitive mobile (din nou, un efort non-banal).
6. Punerea site-ului dvs. online (implementare) Odată ce ați terminat crearea și testarea site-ului dvs. local (pe propriul computer) activând localhost (server web local – google it.S-ar putea să nu aveți nevoie de acest lucru pentru site-urile statice) și pentru a testa și amesteca cu CSS-ul dvs. folosind instrumentele foarte utile pentru dezvoltatori Chrome și sunteți mulțumit de rezultatele obținute, puteți accesa Digital Ocean, arhivați site-ul și îl puteți trimite la Server. Dacă ați făcut totul bine, așteptați câteva secunde și accesați firstnamelastname.me și ar trebui să vă vedeți conținutul. Și toți ceilalți ar trebui să poată și ei.
7. Realizarea căutării site-ului dvs. excelent (SEO)
Un ultim pas este SEO – optimizarea motorului de căutare. Scopul final este să sperăm că aveți un nume neobișnuit și să vă faceți site-ul web printre cele mai bune rezultate atunci când cineva vă googlează numele. Acest lucru poate dura ceva timp (dar se poate face acum la costul monetar). Există „o grămadă de modalități de a face acest lucru și puteți să le folosiți pe Google pentru toate. Există modalități de a vă asocia Facebook-ul cu acesta, vechiul cont G + pe care nu îl utilizați niciodată, adăugând metadate personalizate pentru a apărea în Căutarea Google etc etc. În cele din urmă, în decurs de câteva săptămâni, cu excepția cazului în care numele dvs. este extrem de obișnuit sau, din păcate, la fel ca o persoană celebră, ar trebui să fiți unul dintre primele câteva rezultate de pe Google.
Diverse lucruri pe care ar trebui să le știți
Când luați comenzi rapide pentru a crea o pagină drăguță: În funcție de cât de multă muncă doriți să puneți pe site-ul dvs. web, puteți alege întotdeauna un șablon de bootstrap la îndemână sau să creați manual propriile clase CSS dacă doriți un aspect unic, sau chiar păstrați-l simplu și alegeți HTML / CSS de bază (ceea ce fac un număr mare de cadre universitare). De exemplu, Pagina principală a lui Jon Kleinberg .
Dacă nu trebuie să știți PHP și alte lucruri fanteziste: Deoarece proiectați un site static, nu există cunoștințe despre lucruri fantastice, cum ar fi crearea unui backend, crearea multor pagini și având baze de date. Da, vorbesc cu dvs., toate oameni care doresc să utilizeze PHP și MySQL fără un motiv întemeiat (Chiar dacă ați avut nevoie, încercați să stați departe de PHP). Există „o grămadă de cadre de backend grozave pentru a crea alte tipuri de site-uri web complicate de la Ruby on Rails (în Ruby) până la Django (în Python) la Joacă! (în Java și Scala) ușoare precum CherryPy (în Python) sau Flask (în Python). De fapt, există cadre pentru aproape orice limbă pe care ți-o poți imagina – Comparația cadrelor de aplicații web , dar nu vă ardeți folosind / învățând despre ele încă.
Cu privire la alte lucruri pe care trebuie să le adăugați la site-ul dvs. web: Alte lucruri pe care ați putea dori să le faceți pentru site-ul dvs. personal –
- Comprimă-ți imaginile dacă folosești multe dintre ele, site-ul tău va dura mult timp pentru încărcare.
- Utilizați pluginuri sociale de pe Facebook / Quora / Twitter
- Adăugați Google Analytics (aceasta este de fapt aproape o necesitate). Google Analytics vă permite să vedeți, printre multe alte lucruri, câte persoane vă vizitează site-ul web, de unde provin, etc. Este un motivator frumos (sperăm) pentru actualizarea site-ului dvs. și menținerea acestuia la zi. În plus, este foarte ușor de utilizat – implică doar copierea lipirii unor linii de cod în pagina dvs.
- Reduceți scripturile. O mulțime de site-uri JS și CSS pot fi în continuare vizibile pentru oricine vă vizitează site-ul. Dacă credeți ați făcut ceva teribil de interesant pe care doriți să îl ascundeți, reduceți-vă JS / CSS. În caz contrar, acesta distruge scopul de a avea un depozit privat. În plus, vă face site-ul mai rapid.
- Criptați codul HTML . Din nou, dacă într-adevăr nu doriți ca oamenii să vadă cum ați creat site-ul dvs., există modalități de a vă cripta codul HTML, astfel încât chiar dacă faceți clic pe butonul „Vizualizați sursa”, pagina dvs. web nu va dezvălui nimic interesant.
La scrierea acestui răspuns: Mulți oameni întreabă despre cum să își creeze propriul site web. M-am gândit că ar fi util să scriu un mic tutorial scurt (discutabil), ușor de înțeles, care să ajute pe toată lumea. Este cu adevărat unul dintre acele lucruri ușoare pe care trebuie să-ți pui capul. Oh, și am menționat că acum este gratuit?