Bästa svaret
GitHub Student Developer Pack tillhandahåller resurserna för skapa din egen firstnamelastname.me domän utan kostnad. I resten av mitt svar berättar jag om varför det ursprungligen var svårt för mig, varför det kan ha varit ett hinder för dig att skapa din egen webbplats. Jag inkluderar en kort, något omfattande guide avsedd för en studentpublik med liten eller ingen teknisk kunskap, att skapa en ganska offentlig personlig webbplats för dig själv (som ska visas när någon googlar ditt namn).
Varför är det verkligen svårt att skapa din egen webbplats
Om jag ville veta hur webbplatser fungerar: Som teknikentusiast på gymnasiet var jag alltid nyfiken på hur webbplatser fungerade och verkligen imponerade av människor som hade sina egna. Det hela verkade så enkelt utifrån, men när jag googlade ”hur fungerar webbplatser” och grävde djupare skulle jag gå vilse mitt i konstiga förkortningar och komplicerade klingande saker. TCP, UDP, IP, DNS, IPv6, HTML, JS, CSS – listan fortsätter. Uppgiften att kartlägga dessa abstrakta begrepp till påtagliga saker på datorer som jag kände till var ganska svårt och en av de saker som kräver enorm motivation att sitta och gå igenom.
Om vi bestämmer dig för att bara skapa en webbplats för att ta reda på hur de fungerar: Det är en fråga du kan få hos några kräsna teknikföretag och hitta i annaler av Glassdoor –
Vad händer när du skriver in ”google [dot] com” i din webbläsare? ( Google-intervjufråga: Vad händer när du skriver …)
Även halvvägs in i att studera datavetenskap på college var jag lite orolig över hur lite de berättade för mig om allt detta. I frustration var fallet tillbaka att slå upp på Google ”hur man skapar en webbplats”. Med de massor av marknadsföringspengar som jag satsade på, såg jag en mängd webbplatser och villkor som jag fortfarande inte kunde göra för mycket mening – domäner, hosting, GoDaddy, HostGator, routing, CSS, HTML, Javascript, jQuery, WordPress , bloggare, etc. Detta är vad det visar mig nu:
För att vara ärlig lät alla dessa namn väldigt lurande y för mig, och deras obegriplighet överträffade min motivation. Jag ville bara ha min egen webbplats med mitt namn – debarghyadas.com [ignorera självreklam], och lära dig att sätta innehåll på det.
Att vara för billig för att köpa saker på internet: När jag slog huvudet runt några av det var lite vettigt. För att skapa en webbplats måste jag köpa en ”domän”, ett webbplatsnamn och ett ”värd”, en plats som innehåller innehållet på min webbplats och ger den, ”serverar den”, till den här domänen. Köp. Inte ett vackert ord med tanke på min inte så djupgående sparsamhet. För som studerande som lever av freeware, jag var inte så angelägen om att dela ut pengar för att köpa abstrakta saker. Det tog mig år att betala 1 dollar för Whatsapp när det var trivialt att blåsa 4 dollar på den överdådiga chokladmousskakan med vaniljglass.
Kom igen – kan du vara mer bluff? ”Vi äter upp tävlingen”? Okej, gator.
För många studenter (och människor) är pengar ett ganska inträdeshinder. Det kostar ungefär $ 10 / år att köpa en domän (på GoDaddy) och ett liknande belopp att köpa värd på HostGator. Och det innebar att du arbetade dig igenom många produkter som du inte kunde förstå. Det tyckte mig att du också måste betala på årsbasis – det var inte ett engångsköp.
Att använda sig av att inte vara billigt för att motivera mig: Så småningom, genom en lång mödosam process, drog jag ut pengarna och övertygade mig själv om att investeringen skulle motivera mig att lära mig nödvändiga färdigheter. Jag menar, alla sa alltid att HTML var enkelt, och det är det, men webbplatser som är gjorda med HTML ser också ut som skit. Det var mycket förvirring.
Så småningom hade jag rätt – investeringen på en domän och värd i fem år fick mig att räkna ut hur saker fungerade och jag fick en personlig webbplats ut och skulle upprepa den när jag hade några fritid.
En ganska omfattande guide för att skapa din egen webbplats gratis
Kommer till GitHub Student Developer Pack .Ja, den innehåller många saker som jag aldrig har använt, men vad den inte direkt annonserar (och förmodligen borde) är att den innehåller alla verktyg för att få din webbplats på din domän igång gratis! Det låter för bra för att vara sant nu.
Handelsverktyg Här är en allmän riktlinje. Jag har inte testat det personligen, men jag föreställer mig att det här är ett bra sätt att göra saker. Du måste (eller bör) använda följande betaltjänster som Student Developer Pack tillhandahåller (gratis):
1. Github privata arkiv [valfritt]
2. Namecheap .me-domän
3. Namecheap SSL [valfritt]
4. DigitalOcean-värd
Och dessutom
1. Bootstrap
2. Flera online-handledning och verktyg – JSfiddle 3. Vissa mallar online – StartBootstrap , BootstrapZero
Vad ska jag göra med verktygen Jag ska försöka hålla den här miniguiden så enkel som möjligt . Det är lätt att tappa stora villkor när du vet vad de menar, men kan vara en enorm avskräckande effekt för läsare som är utan aning. Jag skulle kunna vara mer tydlig och utöka dem om så begärs.
1. Skapa en privat Github förvar [valfritt]
När du är att skriva mycket kod för ett projekt, det finns många saker som kan gå fel.
- Det kan tas bort från din maskin och du är skruvad
- Du kan försöka lägga till en ny funktion utan att säkerhetskopiera den gamla versionen och komma till ett tillstånd där du glöm hur många Ctrl + Zs (ångrar) du behöver för vilka filer för att återgå till fungerande tillstånd.
- Du kan ha flera personer som arbetar på det separat på sina egna datorer och har ingen aning om hur du integrerar båda dina version av projektet.
En n00b-kodare kan föreslå att du använder Dropbox för att dela och synkronisera kodprojekt, och om du ”jobbar du själv med det, det kan vara en anständig lösning. Du kommer dock fortfarande att möta det andra problemet i listan ovan och det blir riktigt galet när flera personer försöker arbeta på samma kodbas samtidigt.
Git (och förr i tiden, SVN och Mercurial för hipsters) används för att ”versionera” din kod. Observera att git inte är github. Det vill säga du kan göra ändringar, trycka dem ”uppströms” till interwebs, där de lagras permanent i ditt ”förråd” (gratis). Git är också enbart ett kommandoradsverktyg, vilket innebär att du måste öppna en av de svarta läskiga hackerskärmarna på skrivbordet och skriva in kommandon att använda den. Det är inte trivialt att använda. Github integreras med git och låter dig se de förråd du har drivit uppströms och ger en massa GUI: er för att göra git-uppgifter (beter sig som ett normalt program på din dator). Du kan bläddra bland dina kodbaser (arkiv) på internet från din webbläsare, göra ändringar, återställa ändringar till den senaste kontrollpunkten (commit) och så vidare.
Github tillhandahöll alltid gratis arkiv som var offentliga – vilket innebar att någon kunde se din kod och använda den (ja det finns Open Source-licenser, men du vet vad jag menar). I grund och botten, om du skulle arbeta riktigt hårt för att designa en vansinnigt cool skit och återuppfinna datavetenskap, tar din kompis bara din kod och använder den för sin egen webbplats. Nu, med utbildningspaketet, kan du få 5 gratis privata arkiv (även om Github tillhandahöll den tjänsten för .edu-studenter tidigare också). Gå igenom onlinehandledningarna och ta reda på hur du skapar ett privat github-förvar för din webbplatskod.
2. Få din gratis Namecheap .me-domän
Under den längsta tiden var GoDaddy den enda domänförsäljaren jag kände till. Namnet slog mig alltid som skumt, trots att jag så småningom gick med på att köpa en domän där. Nu, i nystartad ålder, har vi ett bättre renare billigare alternativ – Namecheap.Namecheap var alltid billigt, men nu kan du få en domän gratis! Så få din firstnamelastname.me domän där nu gratis, innan ditt mycket vanliga namn blir stulet (om det inte redan är). Och försök att inte gå tillbaka till 90-talets e-postdagar och köp en raj2kul4skul.me . Inte. Snälla du. Den enda personen som kommer att imponera är vänner som du har det bättre utan.
Nämnde jag att det är gratis?
3 . Hämta Namecheap SSL [valfritt]
Detta är valfritt, och jag har inte det för min webbplats ännu (eftersom det fortfarande kostar pengar på GoDaddy). SSL (Secure Sockets Layer) är en fin sak det betyder i princip att ditt webbinnehåll kan serveras ”säkert”. Du får också det coola gröna låset på din webbplats, har en https webbplats, istället för http, och känn dig riktigt cool och autentisk:
Utan att gå för tekniskt är det du behöver veta att – detta är inte strikt nödvändigt för din personliga webbplats där jag tvivlar på att du gör saker som kräver så strikt säkerhet. Men om du lär dig saker om webben kan du lika gärna. Det är trots allt gratis?
4. Ställ in Digital Ocean värd.
Namecheap: GoDaddy :: DigitalOcean: HostGator.
Namecheap är för GoDaddy som DigitalOcean är för HostGator – en mer legitim, billigare, bättre utformad och lättare att använda start alternativ. Vad ska den betjäna (visa) till användaren när du köper en domän? Din webbplats, eller hur? Men du kan inte bara säga ta de här filerna på min dator och visa dem för dem. Det kan du, och så är det. Med DigitalOcean får du gratis ”hosting”. DigitalOcean kallar en värdinstans för ”droplet”.
Detta innebär att du kan ladda upp din webbplats till en virtuell maskin (läs: en dator) och berätta för din namecheap-domän för att betjäna innehållet från den datorn. Utan att gå in för mycket i detalj finns det många saker som händer i mitten som DigitalOcean bör ta hand om – saker som att konfigurera och välja en webbserver – nginx eller Apache och dirigeringsförfrågningar på din domän specifikt till din uppsättning filer.
5. Att skapa den faktiska webbplatsen.
Nu kommer till ”skriv lite HTML” -delen. Att skapa en webbplats har olika svårighetsgrader – från att visa text ”Hello World” i Arial för att skapa en Facebook eller Google. Vanligtvis en int eraktiv applikation som kräver data och innehåller tillstånd är svår att göra.
Det du kommer att göra kommer antagligen att göra en statisk webbplats (en massa samma text / bilder som serveras till alla varje gång). Det här är mycket lättare. Jag kommer förmodligen inte och kan inte skriva en komplett handledning för detta, men vad studenter i allmänhet gör är att lära sig och använda följande saker –
- HTML – detta är det faktiska innehållet i text / länkar / bilder / videor
- CSS – det här gör att innehållet ovan ser vackert ut
- Javascript (JS) – detta möjliggör dynamiska element och vackra animationer. Antag att du vill skapa en knapp som laddar en bild som inte var i din HTML, eller lägg till innehåll dynamiskt i din HTML. Sedan använder du JS. En kort historia – JS hackades upp på dagen på cirka tio dagar, och den innehåller många buggar och kan vara väldigt detaljerad och omständlig om du skriver mycket av det. Normalt skulle en nybörjare använda ett bibliotek som jQuery för att göra det mindre detaljerat och enkelt (även om jQuery i början också kan se skrämmande ut med alla sina $ -tecken).
- Bootstrap – Bootstrap är ett gå till Frontend-ramverk som görs av Twitter. Raw HTML kommer med ganska dåliga saker som ser standard ut. HTML-knappen är otänkbar och att skriva CSS för det tar tid och experimentering (jag menar, låt oss vara riktiga – ingen vet verkligen ”CSS). Bootstrap innebär att du laddar ner några filer, lägger till en rad i din HTML och kanske läser några dokumentation och lägga till några CSS-klasser som de tillhandahåller – och voila! Inte bara ser din webbplats automatiskt så mycket snyggare ut utan den kan också göras kompatibel för mobilen (igen, en icke-trivial strävan).
6. Sätta din webbplats online (distribuera) När du är klar med att skapa och testa din webbplats lokalt (på din egen dator) genom att aktivera din lokala värd (lokal webbserver – google det.Du kanske inte behöver detta för statiska webbplatser), och testa och mingla med din CSS med de mycket användbara Chrome Developer Tools, och är nöjda med din produktion, du kan gå vidare till Digital Ocean, zip upp din webbplats och skicka den till din server. Om du gjorde allt rätt, vänta några sekunder och gå till firstnamelastname.me så ser du ditt innehåll. Och alla andra borde kunna också.
7. Gör din fantastiska webbplats sökbar (SEO)
Ett sista steg är SEO – sökmotoroptimering. Slutmålet är att förhoppningsvis ha ett ovanligt namn och göra din webbplats bland de bästa resultaten när någon googlar ditt namn. Detta kan ta lite tid (men det kan göras till nu monetär kostnad). Det finns många sätt att göra detta, och du kan Google för dem alla. Det finns sätt att associera din Facebook med det, ditt gamla G + -konto du aldrig använder med det, lägga till anpassade metadata för att visas i din Google-sökning osv. Till sist, inom några veckor, såvida inte ditt namn är extremt vanligt eller tyvärr detsamma som en känd person, borde du vara en av de bästa resultaten på Google.
Diverse saker du borde veta
Att ta genvägar till att skapa en vacker sida: Beroende på hur mycket arbete du vill lägga till på din webbplats kan du alltid plocka upp en praktisk bootstrapmall online eller handgjorda dina egna CSS-klasser om du vill ha en unikt utseende, eller till och med hålla det enkelt och gå till grundläggande HTML / CSS (vilket är ett stort antal akademiker gör). Till exempel Jon Kleinbergs hemsida .
Om du inte behöver veta PHP och andra snygga saker: Eftersom du utformar en statisk webbplats finns det ingen kunskap om snygga saker som att skapa en backend, skapa många sidor och ha databaser. Ja, jag pratar med dig, alla människor som inte vill använda PHP och MySQL utan goda skäl (även om du behövde, försök att hålla dig borta från PHP). Det ”är en massa bra backend-ramar där ute för att skapa andra typer av komplicerade webbplatser från Ruby on Rails (i Ruby) till Django (i Python) till Spela! (i Java & Scala) lätta som CherryPy (i Python) eller Flaska (i Python). Det finns faktiskt ramar för nästan alla språk du kan föreställa dig – Jämförelse av webbapplikationsramar men bränn dig inte ut genom att använda / lära dig om dem ännu.
Om andra saker att överväga att lägga till på din webbplats: Andra saker du kanske vill göra för din personliga webbplats –
- Komprimera dina bilder om du använder många av dem, din webbplats tar lång tid att ladda.
- Använd sociala plugins från Facebook / Quora / Twitter
- Lägg till Google Analytics (detta är faktiskt nästan ett måste). Google Analytics låter dig, bland många andra saker, se hur många som besöker din webbplats, var de kommer ifrån, etc. Det är en bra motivator (förhoppningsvis) för att uppdatera din webbplats och hålla den uppdaterad. Dessutom är den väldigt lätt att använda – det handlar bara om att kopiera klistra in några rader kod på din sida.
- Förminska dina skript. Mycket av webbplatsens JS och CSS kan fortfarande vara synliga för alla som besöker din webbplats. Om du tror du har gjort något väldigt intressant som du vill dölja, minifiera din JS / CSS. Annars förstör det syftet att ha ett privat arkiv. Dessutom gör det din webbplats snabbare.
- Kryptera din HTML . Återigen, om du verkligen inte vill att folk ska se hur du skapade din webbplats finns det sätt att kryptera din HTML så att även om du klickar på knappen ”Visa källa” kommer din webbsida att avslöja inget intressant.
När du skriver detta svar: Många människor frågar sig om hur man skapar sin egen webbplats. Jag trodde att det skulle vara användbart att skriva en kort (diskutabel), lättförståelig liten handledning för att hjälpa alla. Det är verkligen en av de enkla sakerna du måste tänka på. Åh, och nämnde jag att det nu är gratis?