Beste antwoord
De GitHub Student Developer Pack biedt de bronnen voor stel uw eigen firstnamelastname.me domein zonder kosten. In de rest van mijn antwoord ga ik tekeer over waarom het in eerste instantie moeilijk voor me was, waarom het voor jou een belemmering zou kunnen zijn om je eigen website te maken. Ik neem een korte, enigszins uitgebreide gids op die bedoeld is voor een studentenpubliek met weinig tot geen technische kennis, om een behoorlijk openbare persoonlijke website voor jezelf te maken (die zou moeten verschijnen als iemand je naam googelt).
Waarom het echt moeilijk is om uw eigen website te maken
Over willen weten hoe websites werken: Als technologieliefhebber op de middelbare school was ik altijd benieuwd hoe websites werkten en was ik echt onder de indruk van mensen die hun eigen website hadden. Het leek allemaal zo eenvoudig van buitenaf, maar telkens als ik googlede hoe werken websites, en dieper ging graven, raakte ik verdwaald in het midden van vreemde afkortingen en ingewikkeld klinkende dingen. TCP, UDP, IP, DNS, IPv6, HTML, JS, CSS – de lijst gaat maar door. De taak om deze duistere concepten in kaart te brengen in tastbare dingen in computers die ik kende, was vrij moeilijk en een van die dingen die een enorme hoeveelheid motivatie vereist om door te gaan.
Over het besluit om gewoon een website te maken om erachter te komen hoe ze werken: Er is een vraag die u kunt krijgen bij een aantal kieskeurige technologiebedrijven die u kunt vinden in de annalen van Glassdoor –
Wat gebeurt er als u “google [dot] com” typt in uw webbrowser? ( Interviewvraag Google: Wat gebeurt er als je typt …)
Zelfs halverwege mijn studie Computerwetenschappen op de universiteit, was ik een beetje bezorgd over hoe weinig ze me hierover vertelden. Gefrustreerd was het terugval ding om op Google op te zoeken “hoe maak je een website”. Met de vele marketinggeld die erin gestoken was, kwam ik toevallig een overvloed aan websites en termen tegen die ik nog steeds niet zo goed kon begrijpen – domeinen, hosting, GoDaddy, HostGator, routing, CSS, HTML, Javascript, jQuery, WordPress , blogger, etc. Dit is wat het me nu laat zien:
Eerlijk gezegd klonken al deze namen erg oplichterij. y voor mij, en hun onbegrijpelijkheid overtrof mijn motivatie. Ik wilde gewoon mijn eigen website hebben met mijn naam – debarghyadas.com [negeer de zelfpromotie], en leer hoe u er inhoud op kunt zetten.
Over te goedkoop zijn om dingen op internet te kopen: Toen ik mijn hoofd om een paar van het was een beetje logisch. Om een website te maken, zou ik een domein, een websitenaam en een hosting moeten kopen, een plaats die de inhoud van mijn website bevat en deze dient, tot dit domein. Aankoop. Geen mooi woord gezien mijn niet zo diepgewortelde zuinigheid. Voor as Een student die van freeware leeft, ik was er niet zo happig op om geld uit te delen om abstracte dingen te kopen. Het kostte me jaren om $ 1 te betalen voor Whatsapp, terwijl het triviaal was om $ 4 te blazen op die weelderige chocolademoussecake met vanille-ijs.
Kom op – zou je nog meer oplichterij kunnen zijn? “We eten de concurrentie op”? Oké, alligator.
Voor veel studenten (en mensen) is geld een behoorlijke toegangsdrempel. Het kost ongeveer $ 10 / jaar om een domein te kopen (bij GoDaddy) en een vergelijkbaar bedrag om hosting bij HostGator te kopen. En je moest je een weg banen door talloze producten die je niet kon begrijpen. Het irriteerde me dat je ook op jaarbasis moest betalen – het was geen eenmalige aankoop.
Over mijn toevlucht nemen om niet goedkoop te zijn om mij te motiveren: Uiteindelijk, na een lang, moeizaam proces, deelde ik het geld uit en overtuigde ik mezelf ervan dat de investering zou me motiveren om de nodige vaardigheden te leren. Ik bedoel, iedereen zei altijd dat HTML eenvoudig was, en dat is het ook, maar sites die met HTML zijn gemaakt, zien er ook slecht uit. Er was veel verwarring.
Uiteindelijk had ik echter gelijk: de investering in een domein en hosting gedurende 5 jaar zette me ertoe aan om uit te zoeken hoe de dingen werkten en ik kreeg een persoonlijke website die ik zou herhalen wanneer ik wat had vrije tijd.
Een enigszins uitgebreide gids om uw eigen website gratis te maken
Naar het GitHub Student Developer Pack .Ja, het bevat veel dingen die ik nog nooit heb gebruikt, maar wat het niet direct adverteert (en waarschijnlijk zou moeten doen) is dat het alle tools biedt om je website op je domein gratis aan de praat te krijgen! Het klinkt nu te mooi om waar te zijn.
Tools of the Trade Hier is een algemene richtlijn. I heb het niet persoonlijk uitgeprobeerd, maar ik kan me voorstellen dat dit een goede manier is om dingen aan te pakken. Je moet (of zou moeten) gebruik maken van de volgende betaalde services die het Student Developer Pack (gratis) biedt:
1. Github-privérepositorys [optioneel]
2. Namecheap .me domein
3. Namecheap SSL [optioneel]
4. DigitalOcean hosting
En bovendien
1. Bootstrap
2. Verschillende online tutorials en tools – JSfiddle 3. Sommige online sjabloonsites – StartBootstrap , BootstrapZero
Wat te doen met de genoemde tools Ik zal proberen deze minigids zo eenvoudig mogelijk te houden . Het is gemakkelijk om grote termen te laten vallen als je weet wat ze betekenen, maar het kan een enorm afschrikmiddel zijn voor lezers die geen idee hebben. Ik zou explicieter kunnen zijn en deze toelichten als daarom wordt gevraagd.
1. Stel een privé Github repository [optioneel]
Wanneer u Als je veel code schrijft voor een project, zijn er veel dingen die fout kunnen gaan.
- Het kan van uw computer worden verwijderd en u bent verneukt
- U kunt proberen een nieuwe functie toe te voegen zonder een back-up van de oude versie te maken en naar een staat gaan waarin u vergeet hoeveel Ctrl + Zs (ongedaan maken) je nodig hebt voor welke bestanden om terug te keren naar de werkende staat.
- Je zou meerdere mensen er afzonderlijk op hun eigen computer aan kunnen laten werken en geen idee hebben hoe je beide versie van het project.
Een n00b-coder zou kunnen voorstellen om Dropbox te gebruiken om codeprojecten te delen en te synchroniseren, en als je Als je er zelf aan werkt, is het misschien een goede oplossing. Je zult echter “nog steeds het tweede probleem in de bovenstaande lijst tegenkomen en het wordt echt gek als meerdere mensen tegelijkertijd proberen aan dezelfde codebase te werken.
Git (en vroeger SVN en Mercurial voor hipsters) worden gebruikt om je code te “versieren”. Merk op dat git geen github is. Dat wil zeggen, je kunt wijzigingen aanbrengen, ze “stroomopwaarts” naar de interwebs, waar ze permanent worden opgeslagen in je “repository” (gratis). Git is ook puur een opdrachtregelprogramma, wat betekent dat je een van die zwarte, eng uitziende hackerschermen op je bureaublad moet openen en commandos moet typen Het is niet triviaal om te gebruiken. Github integreert met git en stelt je in staat om de repositories te zien die je stroomopwaarts hebt gepusht en biedt een aantal GUIs om git-taken uit te voeren (gedraagt zich als een normale applicatie op je computer). U kunt vanuit uw browser door uw codebases (repositories) op internet bladeren, wijzigingen aanbrengen, wijzigingen terugdraaien naar het laatste controlepunt (commit), enzovoort.
Github leverde altijd gratis repositories die openbaar waren – wat betekende dat iedereen je code kon zien en gebruiken (ja, er zijn Open Source-licenties, maar je begrijpt wat ik bedoel). In wezen, als je heel hard zou werken om waanzinnig coole dingen te ontwerpen en computerwetenschappen opnieuw uit te vinden, zou je maatje gewoon je code kunnen nemen en deze voor zijn eigen website kunnen gebruiken. Met het onderwijspakket kun je nu 5 gratis privérepositorys krijgen (hoewel Github die service eerder ook voor .edu-studenten leverde). Doorloop de online tutorials en zoek uit hoe je een privé github-repository voor je websitecode opzet.
2. Ontvang uw gratis Namecheap .me domein
Voor de langste tijd was GoDaddy de enige domeinverkoper die ik kende. De naam kwam me altijd louche voor, ook al heb ik uiteindelijk toegegeven om daar een domein te kopen. Nu, in het tijdperk van startups, hebben we een beter, schoner, goedkoper alternatief – Namecheap.Namecheap was altijd goedkoop, maar nu kun je een domein gratis krijgen! Dus zorg dat uw firstnamelastname.me -domein daar nu gratis beschikbaar is, voordat uw veel voorkomende naam wordt gestolen (als dit nog niet het geval is). En probeer niet terug te gaan naar de e-maildagen van de jaren 90 en koop een raj2kul4skul.me . Don “t. Alstublieft. De enige persoon die indruk zal maken, zijn vrienden van wie u “beter af bent zonder.
Had ik al gezegd dat het gratis is?
3 . Namecheap ophalen SSL [optioneel]
Dit is optioneel, en ik heb het nog niet voor mijn website (omdat het nog steeds geld kost op GoDaddy). SSL (Secure Sockets Layer) is iets speciaals dat betekent in feite dat uw webinhoud “veilig” kan worden weergegeven. U krijgt ook dat coole groene slotje op uw website, u heeft een https -website in plaats van http, en voel me echt cool en authentiek:
Zonder te technisch te gaan, moet je weten dat – dit niet strikt noodzakelijk is voor uw persoonlijke website waarvan ik betwijfel of u dingen zult doen die zon strikte beveiliging vereisen. Als je echter dingen over internet leert, kun je net zo goed. Het is tenslotte gratis?
4. Digital Ocean hosting.
Namecheap: GoDaddy :: DigitalOcean: HostGator.
Namecheap is voor GoDaddy zoals DigitalOcean voor HostGator – een meer legitieme, goedkopere, beter ontworpen en gemakkelijker te gebruiken startup alternatief. Als u een domein koopt, wat zal het dan aan de gebruiker dienen (laten zien)? Uw website, toch? Maar je kunt niet zomaar zeggen: neem deze bestanden op mijn computer en laat het ze zien. Nou, dat kan, en dit is hoe. Met DigitalOcean krijg je gratis “hosting”. DigitalOcean noemt één hostinginstantie een “droplet”.
Dit betekent dat u uw website kunt uploaden naar een virtuele machine (lees: een computer), en uw namecheap-domein kunt vertellen om de inhoud van die computer te bedienen. Zonder al te gedetailleerd in te gaan, gebeuren er in het midden een heleboel dingen waar DigitalOcean voor moet zorgen – zaken als het configureren en kiezen van een webserver – nginx of Apache , en routeert verzoeken op uw domein specifiek naar uw set bestanden.
5. Het maken van de eigenlijke website.
Nu komt het “schrijf wat HTML” -gedeelte. Het maken van een website heeft verschillende moeilijkheidsgraden – van het tonen van de sms “Hello World” in Arial om een Facebook of Google aan te maken. Meestal een int Een actieve applicatie die gegevens nodig heeft en een staat bevat, is moeilijk te maken.
Wat je gaat doen, is waarschijnlijk het maken van een statische site (een hoop van dezelfde tekst / afbeeldingen die elke keer aan iedereen worden getoond). Dit is veel gemakkelijker. Ik zal het waarschijnlijk niet doen en kunnen hiervoor “geen volledige tutorial schrijven, maar wat studenten over het algemeen doen, is de volgende dingen leren en gebruiken:
- HTML – dit is de daadwerkelijke inhoud van tekst / links / afbeeldingen / videos
- CSS – hierdoor ziet de bovenstaande inhoud er mooi uit
- Javascript (JS) – dit zorgt voor dynamische elementen en mooie animaties. Stel dat u een knop wilt maken die een afbeelding laadt die niet in uw HTML, of voeg inhoud dynamisch toe aan uw HTML. Vervolgens gebruik je JS. Een korte geschiedenis – JS werd op de dag in ongeveer 10 dagen gehackt en het bevat veel bugs, en kan erg uitgebreid en log zijn als je er veel van schrijft. Normaal gesproken zou een beginner een bibliotheek zoals jQuery gebruiken om het minder uitgebreid en gemakkelijk te maken (hoewel jQuery er aanvankelijk ook intimiderend uit kan zien met al zijn $ -tekens).
- Bootstrap – Bootstrap is een go-to Frontend-framework gemaakt door Twitter. Raw HTML wordt geleverd met redelijk slechte standaard uitziende dingen. De HTML-knop kan niet worden weergegeven, en het schrijven van CSS ervoor kost tijd en experimenteren (ik bedoel, laten we echt zijn – niemand kent CSS ECHT). Bootstrap omvat het downloaden van enkele bestanden, het toevoegen van een regel aan uw HTML en misschien het lezen van wat documentatie en het toevoegen van enkele CSS-klassen die ze bieden – en voila! Niet alleen ziet uw site er automatisch zoveel mooier uit, maar hij kan ook compatibel worden gemaakt voor mobiel (nogmaals, een niet-triviale onderneming).
6. Uw website online zetten (implementeren) Als u klaar bent met het maken en testen van uw website lokaal (op uw eigen computer) door uw localhost te activeren (lokale webserver – google it.Je hebt dit misschien niet nodig voor statische sites), en testen en mengen met je CSS met behulp van de zeer nuttige Chrome Developer Tools, en als je tevreden bent met je output, kun je doorgaan naar Digital Ocean, je site dichtritsen en naar je server. Als je alles goed hebt gedaan, wacht dan een paar seconden en ga naar je firstnamelastname.me en je zou je inhoud moeten zien. En alle anderen zouden dat ook moeten kunnen.
7. Uw geweldige website doorzoekbaar maken (SEO)
Een laatste stap is SEO – zoekmachineoptimalisatie. Het uiteindelijke doel is om hopelijk een ongebruikelijke naam te hebben en uw website tot de topresultaten te maken wanneer iemand uw naam googelt. Dit kan enige tijd duren (maar het kan nu tegen geldelijke kosten worden gedaan). Er zijn een heleboel manieren om dit te doen, en je kunt voor ze allemaal googelen. Er zijn manieren om je Facebook eraan te koppelen, je oude G + -account dat je er nooit aan gebruikt, door aangepaste metadata toe te voegen om weer te geven in je Google Zoeken , etc etc. Uiteindelijk zou u binnen enkele weken, tenzij uw naam extreem vaak voorkomt of helaas dezelfde is als een beroemd persoon, een van de weinige resultaten op Google moeten zijn.
Diverse dingen die u moet weten
Over het nemen van snelkoppelingen om een mooie pagina te maken: Afhankelijk van hoeveel werk je in je website wilt steken, kun je altijd een handige bootstrap-sjabloon online kopen of je eigen CSS-klassen maken als je een unieke look, of houd het zelfs simpel en ga voor eenvoudige HTML / CSS (dat is wat een groot aantal academici doet). Bijvoorbeeld Jon Kleinberg “s Homepage .
Over het niet kennen van PHP en andere mooie dingen: omdat u “een statische site ontwerpt, is er geen kennis van mooie dingen zoals het maken van een backend, het maken van veel paginas en het hebben van databases. Ja, ik praat tegen u, alle mensen die zonder goede reden PHP en MySQL willen gebruiken (zelfs als dat nodig zou zijn, probeer weg te blijven van PHP). Er is “een hoop geweldige backend-frameworks die bedoeld zijn voor het maken van andere soorten gecompliceerde websites van Ruby on Rails (in Ruby) tot Django (in Python) naar Spelen! (in Java en Scala) lichtgewichten zoals CherryPy (in Python) of Flask (in Python). In feite zijn er frameworks voor zowat elke taal die je maar kunt bedenken – Vergelijking van frameworks voor webapplicaties maar “brand jezelf niet uit door ze nog te gebruiken / leren kennen.
Over andere dingen die u kunt overwegen om aan uw website toe te voegen: Andere dingen die u misschien wilt doen voor uw persoonlijke website –
- Comprimeer uw afbeeldingen als u er veel van gebruikt, uw website duurt lang om te laden.
- Gebruik sociale plug-ins van Facebook / Quora / Twitter
- Google Analytics toevoegen (dit is eigenlijk bijna een must). Met Google Analytics kunt u onder andere zien hoeveel mensen uw website bezoeken, waar ze vandaan komen, enz. Het is (hopelijk) een leuke motivator om uw site bij te werken en up-to-date te houden. Bovendien is het zeer eenvoudig te gebruiken – u hoeft alleen maar enkele regels code in uw pagina te kopiëren.
- Verklein uw scripts. Veel JS en CSS van een site kunnen nog steeds zichtbaar zijn voor iedereen die uw site bezoekt. Als u denkt je hebt iets vreselijk interessants gedaan dat je wilt verbergen, verklein je JS / CSS. Anders ruïneert het het doel van het hebben van een privérepository. Bovendien maakt het je site sneller.
- Versleutel uw HTML . Nogmaals, als u echt niet wilt dat mensen zien hoe u uw website heeft gemaakt, zijn er manieren om uw HTML te versleutelen, zodat zelfs als u op de knop “Bron bekijken” klikt, uw webpagina niets interessants onthult.
Bij het schrijven van dit antwoord: Veel mensen vragen zich af hoe ze hun eigen website kunnen maken. Ik dacht dat het nuttig zou zijn om een korte (discutabele), gemakkelijk te begrijpen kleine tutorial te schrijven om iedereen te helpen. Het is echt een van die gemakkelijke dingen waar je je zinnen op moet zetten. Oh, en had ik al gezegd dat het nu gratis is?