Paras vastaus
GitHub Student Developer Pack tarjoaa resurssit määritä oma etunimi.me verkkotunnus ilmaiseksi. Vastauksessani mietin, miksi minulle oli alun perin vaikeaa, miksi se on voinut olla este sinulle luoda oma verkkosivusto. Lisään lyhyen, hieman kattavan oppaan, joka on tarkoitettu opiskelijaryhmälle vähän tai ei lainkaan teknistä tietoa, tehdä melko julkinen henkilökohtainen verkkosivusto itsellesi (sen pitäisi näkyä, kun joku google nimesi).
Miksi oman verkkosivuston luominen on todella vaikeaa
Haluamme tietää, miten verkkosivustot toimivat: Lukion tekniikan harrastajana olin aina utelias tietämään, miten verkkosivustot toimivat, ja vaikuttamaan todella ihmisistä, joilla oli omat. Kaikki näytti ulkopuolelta niin yksinkertaiselta, mutta aina kun googlasin ”miten verkkosivustot toimivat” ja kaivasin syvemmälle, eksyin keskelle outoja lyhenteitä ja monimutkaisia kuulostavia asioita. TCP, UDP, IP, DNS, IPv6, HTML, JS, CSS – luetteloa jatketaan. Tehtävä kartoittaa nämä epäselvät käsitteet tuntettaviin asioihin tietokoneissa, joista tiesin, oli melko vaikea ja yksi niistä asioista, joka vaatii valtavasti motivaatiota istua ja käydä läpi.
Päätös vain tehdä verkkosivusto selvittääksesi heidän toimintansa: Kysymys saatat saada joistakin nirsoista teknologiayrityksistä ja löytää Glassdoorin annals –
Mitä tapahtuu, kun kirjoitat ”google [dot] com” selaimeesi? ( Google-haastattelukysymys: Mitä tapahtuu kirjoittaessasi …)
Jopa keskellä tietojenkäsittelytieteen opiskelua puolivälissä olin vähän huolestunut siitä, kuinka vähän he kertoivat minulle tästä kaikesta. Turhautuneina, etsiminen Googlesta oli ”miten luoda verkkosivusto”. Kun siihen oli asetettu runsaasti markkinointirahaa, kävin lukuisilla verkkosivustoilla ja termeillä, joista en silti voinut ymmärtää liikaa – verkkotunnukset, isännöinti, GoDaddy, HostGator, reititys, CSS, HTML, Javascript, jQuery, WordPress , bloggaaja jne. Tämän minulle näyttää nyt:
Ollakseni rehellinen, kaikki nämä nimet kuulostivat erittäin huijaavilta – y minulle, ja heidän käsittämättömyytensä ylitti motivaationi. Halusin vain oman verkkosivustoni nimelläni – debarghyadas.com [jättää huomiotta itse], ja opi lisäämään sisältöä siihen.
On liian halpaa ostaa tavaroita Internetistä: kun kietoin pääni joidenkin se on hieman järkevää. Sivuston luomiseksi minun on ostettava ”verkkotunnus”, verkkosivuston nimi ja ”isäntä”, paikka, joka sisältää verkkosivustoni sisällön ja antaa sille ”palvelee sitä”, tähän verkkotunnukseen. Osta. Ei kaunis sana, koska minun ei ole niin syvään juurtunut säästäväisyyteni Tudent, joka elää freeware, en ollut liian innokas doling ulos käteistä ostaa abstrakteja asioita. Kesti vuosia, kun maksoin 1 dollari Whatsappista, kun oli triviaali puhaltaa 4 dollaria tuohon runsas suklaamousse kakkuun vaniljajäätelöllä.
Tule – voisitko olla enää huijaus? ”Syömme kilpailun”? Okei, gator.
Monille opiskelijoille (ja ihmisille) raha on varsin este markkinoille pääsylle. Verkkotunnuksen (GoDaddy) ostaminen maksaa suunnilleen 10 dollaria vuodessa ja vastaava summa isännöinnin ostamisesta HostGatorilta. Ja siihen sisältyi työskentely läpi lukemattomia tuotteita, joista sinulla ei ollut järkeä. Se piti minua siitä, että joudut maksamaan myös vuosittain – se ei ollut kertaluonteinen hankinta.
Turvautumalla siihen, että ei ole halpaa motivoida minua: Lopulta, pitkän työlän prosessin kautta, nostin rahat ulos ja vakuutin itseni, että investointi motivoisi minua oppimaan tarvittavat taidot. Tarkoitan, että kaikki sanoivat aina HTML: n olevan yksinkertainen, ja se onkin, mutta HTML: llä tehdyt sivustot näyttävät myös paska. Oli paljon hämmennystä.
Lopulta olin kuitenkin oikeassa – investointi verkkotunnukseen ja hosting-palveluun viiden vuoden ajan sai minut selvittämään, miten asiat toimivat, ja sain henkilökohtaisen verkkosivuston ulos, ja toistuisin siinä aina, kun minulla oli joitain vapaa-aika.
Hieman kattava opas oman verkkosivuston luomiseen ilmaiseksi
Pääset GitHub Student Developer Packiin .Kyllä, se sisältää paljon asioita, joita en ole koskaan käyttänyt, mutta mitä se ei suoraan mainosta (ja luultavasti pitäisi), on se, että se tarjoaa kaikki työkalut, jotta verkkosivustosi verkkotunnuksellasi saadaan toimimaan ilmaiseksi! Se kuulostaa liian hyvältä ollakseen totta nyt.
Kaupan työkalut Here ”on yleinen ohje. I ei ole kokeillut sitä henkilökohtaisesti, mutta luulen, että tämä on hyvä tapa edetä asioissa. Sinun on (tai pitäisi) käyttää seuraavia maksullisia palveluita, joita Student Developer Pack tarjoaa (ilmaiseksi):
1. Githubin yksityiset arkistot [valinnainen]
2. Namecheap .me-verkkotunnus
3. Namecheap SSL [valinnainen]
4. DigitalOcean-isäntä
Ja lisäksi
1. Bootstrap
2. Useat verkko-oppaat ja työkalut – JSfiddle 3. Jotkut verkkomallisivustot – StartBootstrap , BootstrapZero
Mitä tehdä mainituilla työkaluilla Yritän pitää tämän mini-oppaan mahdollisimman yksinkertaisena . Isojen termien hylkääminen on helppoa, kun tiedät, mitä ne tarkoittavat, mutta se voi olla valtava pelottava asiaankuulumattomille lukijoille. Voisin olla selvempi ja laajentaa niitä, jos niin pyydetään.
1. Määritä yksityinen Github arkisto [valinnainen]
Kun olet kirjoittamalla paljon koodia projektille, siellä voi olla paljon asioita, jotka voivat mennä pieleen.
- Se voidaan poistaa koneeltasi ja sinua ruuvataan
- Voit yrittää lisätä uuden ominaisuuden varmuuskopioimatta vanhaa versiota ja päästä tilaan, jossa olet unohda, kuinka monta Ctrl + Zs: ää (undos) tarvitset mistä tiedostoista, jotta pääset takaisin toimintatilaan.
- Sinulla voi olla useita ihmisiä, jotka työskentelevät sen kanssa erikseen omilla tietokoneillaan, eikä sinulla ole aavistustakaan kuinka integroida molemmat tiedostot projektin versio.
N00b-kooderi voisi ehdottaa Dropbox -toiminnon käyttämistä koodiprojektien jakamiseen ja synkronointiin, ja jos ”Työskentelemällä sen kanssa itse, se voi olla kunnollinen ratkaisu. Kuitenkin kohtaat edelleen yllä olevan luettelon toisen ongelman ja se tulee todella hulluksi, kun useat ihmiset yrittävät työskennellä samalla kooditietokannalla samanaikaisesti.
Git (ja vanhaan aikaan SVN ja hipsterien Mercurial) ovat tottuneet koodin ”versioon”. Huomaa, että git ei ole github. Voit siis tehdä muutoksia, työntää ne ”ylävirtaan” verkkoyhteydet, joihin ne on tallennettu pysyvästi ”arkistoon” (ilmaiseksi). Git on myös puhtaasti komentorivi-apuohjelma, mikä tarkoittaa, että sinun on avattava yksi näistä mustista pelottavista hakkereista työpöydälläsi ja kirjoitettava komennot Sen käyttäminen ei ole triviaalia. Github integroituu gitin kanssa ja antaa sinun nähdä varastot, jotka olet työntänyt ylävirtaan, ja tarjoaa joukon graafisia käyttöliittymiä git-tehtävien suorittamiseen (käyttäytyminen kuin tavallinen tietokoneohjelmisto). Voit selata selaimesi kooditietokantoja (arkistoja) Internetissä, tehdä muutoksia, palauttaa muutokset viimeiseen tarkistuspisteeseen (sitoutuminen) ja niin edelleen.
Github toimitti aina ilmaisia julkisia arkistoja – mikä tarkoitti sitä, että kuka tahansa voisi nähdä koodisi ja käyttää sitä (kyllä, siellä on avoimen lähdekoodin lisenssejä, mutta tiedät mitä tarkoitan). Pohjimmiltaan, jos työskentelisit todella kovasti suunnitellessasi jotain mielettömän hienoa paskaa ja keksimällä uudestaan tietojenkäsittelytieteen, kaverisi vie vain koodisi ja käyttää sitä omalle verkkosivustolleen. Nyt koulutuspaketin avulla voit saada 5 ilmaista yksityistä arkistoa (vaikka Github toimitti kyseisen palvelun myös .edu-opiskelijoille aiemmin). Käy läpi verkko-oppaat ja selvitä, miten yksityinen github-arkisto voidaan asettaa verkkosivustokoodillesi.
2. Hanki ilmainen Namecheap .me-verkkotunnus
Pisin aikaa ainoa tuntemani verkkotunnuksen myyjä oli GoDaddy. Nimi vaikutti minusta aina varjoisalta, vaikka lopulta halusin ostaa verkkotunnuksen siellä. Nyt, startup-aikakaudella, meillä on parempi puhtaampi ja halvempi vaihtoehto – Namecheap.Namecheap oli aina halpaa, mutta nyt voit saada verkkotunnuksen ilmaiseksi! Joten hanki etunimi.sukunimi.me -verkkotunnuksesi sinne nyt ilmaiseksi, ennen kuin hyvin yleinen nimesi varastetaan (jos se ei jo ole). Ja yritä olla menemättä takaisin 90-luvun sähköpostipäiviin ja osta raj2kul4skul.me . Älä ”t”. Ole kiltti. Ainoa vaikuttava henkilö on ystävät, joiden kanssa olet paremmin.
Mainitsinko sen ilmaiseksi?
3 . Hanki Namecheap SSL [valinnainen]
Tämä on valinnainen, enkä ole vielä saanut sitä verkkosivustolleni (koska GoDaddy maksaa edelleen rahaa). SSL (Secure Sockets Layer) on hieno asia se tarkoittaa periaatteessa, että verkkosisältöäsi voidaan näyttää ”turvallisesti”. Saat myös viileän vihreän lukon verkkosivustollesi, sinulla on https -sivusto http: n sijaan ja tuntuu todella viileältä ja aidolta:
Menemättä liian tekniseksi sinun on tiedettävä, että se ei ole ehdottoman välttämätöntä henkilökohtaiselle verkkosivustollesi, jossa epäilen tekevän asioita, jotka edellyttävät niin tiukkaa suojausta. Jos kuitenkin opit asioita verkosta, saatat myös. Se on kuitenkin ilmainen?
4. Määritä Digitaalinen valtameri isännöinti.
Namecheap: GoDaddy :: DigitalOcean: HostGator.
Namecheap on GoDaddy kuin DigitalOcean on HostGator – oikeutetumpi, halvempi, paremmin suunniteltu ja helpompi käyttää käynnistys vaihtoehto. Kun ostat verkkotunnuksen, mitä se näyttää (näyttää) käyttäjälle? Verkkosivustosi, eikö? Mutta et voi vain sanoa, että otat nämä tiedostot tietokoneelleni ja näytä se heille. No, voit, ja näin. DigitalOceanin avulla saat ilmaisen ”isännöinnin”. DigitalOcean kutsuu yhtä isännöintiä ”pisaraksi”.
Tämä tarkoittaa, että voit ladata verkkosivustosi virtuaalikoneeseen (lue: tietokone) ja kertoa namecheap-verkkotunnuksellesi palvelemaan sisältöä tältä tietokoneelta. Kesken tapahtuu paljon asioita, joista DigitalOceanin tulisi huolehtia – esimerkiksi verkkopalvelimen määrittäminen ja valitseminen – nginx tai Apache , ja verkkotunnuksesi reitityspyynnöt nimenomaan tiedostoihisi.
5. Todellisen verkkosivuston luominen.
Nyt tulee ”kirjoita HTML” -osio. Sivuston luominen on vaihtelevaa vaikeustasoa – näyttämättä kirjoita ”Hello World” Arialissa Facebookin tai Googlen luomiseen tietoja vaativaa ja tilaa sisältävää eraktiivista sovellusta on vaikea tehdä.
Se, mitä teet, luultavasti tekee staattisen sivuston (joukko samaa tekstiä / kuvia, joita näytetään kaikille joka kerta). Tämä on paljon helpompaa. En luultavasti voittanut ”t ja ei voi kirjoittaa täydellistä opetusohjelmaa tälle, mutta mitä opiskelijat yleensä tekevät, on oppia ja käyttää seuraavia asioita –
- HTML – tämä on tekstin / linkkien / kuvien / videoiden todellinen sisältö
- CSS – tämä saa yllä olevan sisällön näyttämään kauniilta
- Javascript (JS) – tämä mahdollistaa dynaamiset elementit ja kauniit animaatiot. Oletetaan, että haluat tehdä painikkeen, joka lataa kuvan, jota ei ole ”t” tai lisää sisältöä dynaamisesti HTML-koodiin. Sitten käytät JS: ää. Lyhyt historia – JS hakkeroitiin päivällä noin 10 päivässä, ja se sisältää paljon vikoja, ja se voi olla hyvin yksityiskohtainen ja hankala, jos kirjoitat paljon sitä. Tyypillisesti aloittelija käyttää kirjastoa, kuten jQuery, jotta se olisi vähemmän täsmällinen ja helppo (vaikka jQuery voi aluksi näyttää pelottavalta myös kaikilla $ -merkeillä).
- Bootstrap – Bootstrap on Twitterin tekemä käyttöliittymän kehys. Raaka HTML sisältää melko huonot oletuksena näyttävät asiat. HTML-painike on ennennäkemätön, ja CSS: n kirjoittaminen siihen vie aikaa ja kokeiluja (tarkoitan, olkoon todellisia – kukaan TODELLA ”ei tunne” CSS: ää). Bootstrap sisältää joidenkin tiedostojen lataamisen, yhden rivin lisäämisen HTML: ään ja ehkä joidenkin lukemisen dokumentaatio ja joidenkin tarjoamien CSS-luokkien lisääminen – ja voila! Sivustosi näyttää paitsi niin kauniilta, että se voidaan tehdä yhteensopivaksi myös mobiililaitteille (jälleen ei-triviaalinen pyrkimys).
6. Verkkosivustosi asettaminen verkkoon (käyttöönotto) Kun olet luonut ja testannut verkkosivustosi paikallisesti (omalla tietokoneellasi) aktivoimalla paikallisen isännän (paikallinen verkkopalvelin – google it.Et ehkä tarvitse tätä staattisille sivustoille), ja testaamalla ja sekoittamalla CSS: äänsi erittäin hyödyllisten Chrome-kehittäjien työkalujen avulla, ja olet tyytyväinen tulokseesi, voit siirtyä Digitaaliseen valtamereen, vetää sivustosi ja lähettää sen omalle palvelin. Jos teit kaiken oikein, odota muutama sekunti ja siirry osoitteeseen etunimi.me ja sinun pitäisi nähdä sisältösi. Ja kaikkien muidenkin pitäisi pystyä.
7. Tehdä upea verkkosivustosi haettavaksi (SEO)
Viimeinen vaihe on hakukoneoptimointi – hakukoneoptimointi. Lopputavoitteena on toivottavasti harvinainen nimi, ja tee verkkosivustosi parhaiden tulosten joukossa, kun joku googlee nimesi. Tämä voi viedä jonkin aikaa (mutta se voidaan tehdä nyt rahallisilla kustannuksilla). Siellä on useita tapoja tehdä tämä, ja voit Googlen käyttää kaikkia. On tapoja liittää Facebookisi siihen, vanhaan G + -tiliisi, jota et koskaan käytä sen kanssa, lisäämällä mukautettuja metatietoja näkymään Google-haussasi. jne. jne. Viime kädessä muutaman viikon kuluessa, ellei nimesi ole äärimmäisen yleinen tai valitettavasti sama kuin kuuluisa henkilö, sinun pitäisi olla yksi parhaisimmista tuloksista Googlessa.
Muut asiat, jotka sinun pitäisi tietää
Pikanäppäimien tekeminen kauniille sivulle: Riippuen siitä, kuinka paljon työtä haluat tehdä verkkosivustollesi, voit aina noutaa kätevän bootstrap-mallin verkossa tai tehdä käsin omia CSS-luokkiasi, jos haluat ainutlaatuisen ilmeen tai jopa pitää sen yksinkertaisena ja siirry HTML / CSS-perusasetuksiin (mitä monet akateemikot tekevät). Esimerkiksi Jon Kleinbergin kotisivu .
PHP: n ei tarvitse tietää ja muita hienoja asioita: Koska suunnittelet staattista sivustoa, ei ole tietoa hienoista asioista, kuten backendin luomisesta, monien sivujen luomisesta ja tietokannoista. Kyllä, puhun sinulle, kaikki ihmiset, jotka haluavat käyttää PHP: tä ja MySQL: ää ilman mitään syytä (yritä pysyä kaukana PHP: stä, vaikka tarvitsetkin. Siellä on joukko hienoja taustajärjestelmiä, jotka on tarkoitettu muun tyyppisten monimutkaisten verkkosivustojen luomiseen Ruby on Rails (Ruby-muodossa) – Django (Pythonissa) Toista! (Java ja Scala) kevyet, kuten CherryPy (Pythonissa) tai Pullo (Pythonissa). Itse asiassa on olemassa kehyksiä lähes kaikille kielille, joita voit kuvitella – Verkkosovelluskehysten vertailu , mutta älä polta itsesi loppuun käyttämällä / oppia niitä vielä.
Muita asioita, jotka kannattaa harkita verkkosivustollesi lisäämistä: Muita asioita, jotka haluat ehkä tehdä henkilökohtaiselle verkkosivustollesi –
- Pakkaa kuvasi , jos käytät paljon niitä, verkkosivustoosi lataaminen kestää kauan.
- Käytä sosiaalisia laajennuksia Facebookista / Quorasta / Twitteristä
- Lisää Google Analytics (tämä on melkein pakko). Google Analyticsin avulla voit nähdä muun muassa, kuinka monta ihmistä vierailee verkkosivustollasi, mistä he ovat kotoisin jne. Se on mukava motivaattori (toivottavasti) päivittää sivustosi ja pitää se ajan tasalla. Lisäksi se on erittäin helppokäyttöinen – siihen liittyy vain kopiointi liittämällä joitain koodirivejä sivullesi.
- Pienennä komentosarjojasi. Monet sivuston JS- ja CSS-palvelut voivat silti olla näkyvissä kaikille sivustollasi vieraileville. Jos luulet olet tehnyt jotain hirvittävän mielenkiintoista, jonka haluat piilottaa, minimoida JS / CSS: n. Muuten se pilaa yksityisen tietovaraston tarkoituksen. Lisäksi se tekee sivustostasi nopeamman.
- Salaa HTML-koodisi . Jälleen, jos todella et halua ihmisten näkevän verkkosivustosi tekemistä, on olemassa tapoja salata HTML-koodisi, joten edes napsauttamalla ”Näytä lähde” -painiketta verkkosivusi ei paljasta mitään mielenkiintoista.
Kun kirjoitat tämän vastauksen: Monet ihmiset kysyvät, kuinka tehdä oma verkkosivusto. Ajattelin, että olisi hyödyllistä kirjoittaa lyhyt (kiistanalainen), helposti ymmärrettävä pieni opetusohjelma kaikkien auttamiseksi. Se on todella yksi niistä helpoista asioista, joihin sinun on asetettava mielesi. Voi, ja mainitsinko sen nyt ilmaiseksi?