Kuinka luoda hyvä henkilökohtainen verkkosivusto

Olitpa tietojenkäsittelytieteen opiskelija, joka etsii ensimmäistä harjoittelupaikkaa, tai joku, joka haluaa murtautua teknologiateollisuuteen, henkilökohtainen verkkosivusto on hieno tapa saada nimesi yrityksille ja rekrytoijille. Henkilökohtainen verkkosivusto on kuitenkin paljon enemmän kuin yhteenveto; se edustaa omaa Internet-nurkkaasi, johon kävijät voivat olla vuorovaikutuksessa. Hyvät henkilökohtaiset verkkosivustot näyttävät hiottuilta ja välittävät tehokkaasti tärkeät tiedot itsestäsi ja saavutuksistasi.

Mistä aloitan?

Jos sinulla on kokemusta verkkokehityksestä tai olet jo luonut oman henkilökohtaisen verkkosivustosi, voit ohittaa tämän osan ja siirtyä Ohjeet-osioon.

Verkossa on monia resursseja, joiden avulla voit päästä alkuun verkkosivuston luomisen kaikissa vaiheissa mallin valinnasta luomuksen julkaisemiseen. Tässä on joitain tärkeitä asioita, jotka on otettava huomioon luotaessa oma henkilökohtainen verkkosivustosi ja asettamalla se julkisesti saataville Internetissä.

Pitäisikö minun käyttää mallia?

Jos yrität rakentaa verkkosivuston kokonaan tyhjästä, kesti tuntikausia työtä, jotta se näyttää hyvältä. Sinun on otettava käyttöön reagoiva suunnittelu mobiililaitteiden näytöihin, käsiteltävä CSS: n monien muotojen kanssa ja ajateltava sivuston jokaisen piirteen suunnittelua.

Sinun ei tarvitse tehdä kaikkea tätä työtä. Ellet ole todella kiinnostunut jokaisesta tyypillisestä etuosan pinosta, sinun tulee harkita aloittamista mallista. HTML5Up tarjoaa joukon korkealaatuisia malleja ilmaiseksi. Joillakin HTML- ja CSS-perustiedoilla voit mukauttaa mallia esittelemään ammattitaitoasi.

Pitäisikö minun käyttää staattista sivuston generaattoria?

Jekyll- ja Hugo-logot.

Jos arvelet, että HTML: n manuaalinen muokkaaminen on liian epämiellyttävää, ja olet valmis käyttämään jonkin aikaa oppia uusia asioita, tai jos suunnittelet myös blogin ylläpitämistä, sinun kannattaa harkita staattisen sivustogeneraattorin käyttöä. Staattiset sivustogeneraattorit ottavat Markdown- ja määritystiedostot ja soveltavat niitä teemaan - joka koostuu asetteluista ja malleista - HTML-tiedostojen rakenteen luomiseksi. David Walsh kirjoitti kattavan artikkelin, joka esitteli staattisen sivuston generaattorin käsitteen; se on luettava ennen kuin tutkitaan tätä vaihtoehtoa tarkemmin.

Kaksi suosituinta staattista laitosgeneraattorimoottoria ovat Jekyll ja Hugo. GitHubilla on sisäänrakennettu tuki Jekyllille ja monet bloggaajat käyttävät sitä, mutta se edellyttää Rubyn asentamista. Toisaalta, Hugo-moottori itsessään on yksinkertainen itsenäinen suoritettava tiedosto, mikä on yksi syy, miksi haluan käyttää Hugoa enemmän kuin Jekyll.

Minä itse haluaisin mieluummin käyttää staattista sivuston generaattoria kuin muokata HTML5-malleja käsin; viime kädessä sinun on kuitenkin päätettävä siitä.

Missä isännöin henkilökohtaista verkkosivustoani?

GitHub-sivut on helpoin tapa saada sisältöäsi verkkoon. Ne tarjoavat opetusohjelmia, jotta jopa kokonainen aloittelija voi saada verkkosivustonsa käyttöönottoon vähän aikaa. Voit jopa määrittää verkkosivustosi näkymään mukautetulla verkkotunnuksella GitHub-sivujen oletusverkkotunnuksen sijasta: $ {GITHUB_USERNAME} .github.io. Sitä varten sinun on rekisteröitävä verkkotunnus. Monet hakkerit tarjoavat ilmaisia ​​verkkotunnuksia Namecheapin, Domain.comin tai GoDaddyn kautta, mutta käytän henkilökohtaisesti Name.comia.

Jos et pääse pääsyyn ilmaiseen verkkotunnukseen, sen ostaminen ei ole mitenkään kohtuuttoman kallista. Tyypillisesti ne maksavat 10–20 dollaria etukäteen vastaavalla vuotuisella uusimismaksulla. Joskus saatat pystyä piiskaamaan alennuksia verkkotunnuksen rekisteröinnistä, joten etsi ympäri ennen verkkotunnuksesi ostamista.

suuntaviivat

Joten mikä tarkalleen tekee henkilökohtaisesta verkkosivustosta hyvää? Kammennutani neuvoja HH-verkkosivustoista ja jatkaa -ryhmän Facebook-ryhmästä, keksin nämä ohjeet. Niiden ei ole tarkoitus olla kovia sääntöjä, kuten ne on kivessä, ja näihin ohjeisiin on todennäköisesti olemassa poikkeuksia, mutta ne on yksinkertaisesti otettava huomioon luotaessa tai päivitettäessä henkilökohtaista verkkosivustoasi.

Anna linkit yhteenvetoon, LinkedIniin ja GitHubiin

Kaksi välttämätöntä verkkosivustoa online-läsnäolosi vahvistamiseksi teknologiateollisuudessa.

Linkit ammatilliseen läsnäoloasi verkossa ovat välttämättömiä kaikilla tekniikkakeskeisillä henkilökohtaisilla verkkosivustoilla. Teknologiateollisuudelle nämä olisivat linkit yhteenvetoon, LinkedIn-profiiliisi ja GitHub-tiliisi. Niin kauan kuin henkilökohtaisella verkkosivustollasi on nämä näkyvästi, rekrytoijat voivat helposti tarkistaa saavutuksesi yksityiskohtaisemmin.

Älä pelkää näyttää vähän persoonallisuutta

Tiivistelmässä olet rajoitettu suurelta osin vain tekstimuotoiseen esitykseen saavutuksistasi. Mutta nämä rajoitukset eivät koske verkkosivustoja. Henkilökohtaisella verkkosivustollasi on mahdollisuus ilmaista itseäsi ja kuratoida kiinnostuksiasi ja harrastuksiasi.

Otako hienoja kuvia DSLR-kamerallasi? Teetkö huijareita vapaa-ajallasi? Vai kirjoitatko inspiroivia blogin kirjoituksia tapahtumista elämässä? Näytä heidät verkkosivustollasi ja tarjoa myös asiaankuuluvia linkkejä! Olen nähnyt ihmisten sisältävän linkkejä profiileihin näillä verkkosivustoilla.

  • Viserrys
  • Quora
  • keskikokoinen
  • Dribbble
  • Instagram
  • VSCO
  • pinterest
  • Spotify

Tee verkkosivustosi mobiiliystävällinen

Google Analyticsin mukaan heinäkuussa 21% sivustoni kävijöistä oli mobiililaitteilla. Se on huomattava määrä ihmisiä, ja siihen voi kuulua myös joitain rekrytoijia. Joten on tärkeää, että verkkosivustosi näyttää hyvältä älypuhelimissa ja tablet-laitteissa sekä pöytätietokoneissa.

Onneksi voit testata verkkosivustosi helposti erilaisilla näytön kokoilla Chromen devtoolsilla. Jos verkkosivustosi näyttää ruma pieniltä näytöiltä, ​​sinun tulee tutkia näytön tyhjentämistä tai HTML- ja / tai CSS-asettelujen mukauttamista. Esimerkiksi sisällytin tämän CSS-säännön aloitussivulleni fonttikoon säätämiseksi näytöillä, joiden leveys on 420 pikseliä tai vähemmän.

@mediaruutu ja (laitteen suurin leveys: 420 kuvapistettä) {
    h1 {
        fonttikoko: 56px; / * Yleensä 70 kuvapistettä * /
    }
jos {
        / * Kohdista fonttimahtavia kuvakkeita * /
        kirjasinkoko: 22 kuvapistettä; / * Yleensä 26 kuvapistettä * /
        padding-left: 6px; / * Yleensä 12 kuvapistettä * /
        padding-right: 6px; / * Yleensä 12 kuvapistettä * /
    }
}

Vältä verkkosivustojen liikalihavuutta ja hitautta

Kuva Jr Casas.

Parin viime vuoden aikana verkkosivustojen sivukoko on kasvanut. Maciej Cegłowski selitti tämän ”verkkosivustojen liikalihavuuden” kriisin vuoden 2015 blogiviestissä; Hänen pääkohtinsa on, että yhä useammat tekstipohjaiset verkkosivustot, kuten henkilökohtaiset verkkosivustot, latautuvat liian hitaasti mobiiliyhteyksiin, koska ne kuluttavat liikaa kaistanleveyttä. Hän huomauttaa, että nämä verkkosivustot ovat usein suuremmat kuin venäläisen kirjallisuuden pisimmät kirjat, jotka tunnetaan "pondedrogisuudestaan".

Väitän, että tekstipohjaiset verkkosivustot eivät saa olla kooltaan suurempia kuin venäläisen kirjallisuuden tärkeimmät teokset. Tämä on runsas mittapuu. Olisin voinut valita ranskalaisen kirjallisuuden, täynnä ohuita pieniä kirjoja, mutta seurain tarkoituksella venäläisiä romaaneja ja heidän maineensa surkeutta.
- Maciej Cegłowski

Sivustosi varojen - kuvien, CSS: n ja JavaScriptin - kokojen pienentäminen parantaa ehdottomasti sivustosi latausaikaa. Sinulla ei pitäisi olla pieniä kuvakkeita, jotka painavat satoja kilotavuja, kun voit pienentää niitä, säästää ehkä 90% käytetystä kaistanleveydestä. Ja sinulla ei todellakaan pitäisi olla kymmenen megatavua animoitua taustakuvaa sivustollasi, kun pysäytyskuva kirjaimellisesti * prosentti * tästä koosta riittää.

Nyt sinun ei tarvitse hyperoptimoida kaistanleveyden käyttöä ja latausaikaa, ja vetää hiuksesi yrittäessäsi löytää kuvasi oikein JPG-pakkauslaatu, mutta ainakin yrittää olla huomaavainen kävijöille, joilla on huono Internet-yhteys.

Tässä on joitain ohjeita, joita on noudatettava verkkosivustojen liikalihavuuden ja hitauden torjumiseksi.

  • Pidä kuvat pieninä; niiden koot kasvavat melko nopeasti ja voivat kuluttaa paljon kaistanleveyttä, etenkin jos välimuisti on huono. Ihannetapauksessa kunkin kuvan tulisi painaa alle 150–200 kilotavua.
  • Käytä sisällönjakeluverkkoa (CDN), jotta verkkosivustosi latautuu nopeammin kävijöille ympäri maailmaa. Ehdotan Cloudflare, koska se on ilmainen ja aloittelijaystävällinen. Karan Thakkar kirjoitti FreeCodeCampissa hienon viestin verkkosivustosi asentamisesta Cloudflaren CDN: n avulla.
  • Pienennä CSS: tä ja JavaScriptiä, jotta ne painavat vähemmän ja kuluttavat vähemmän kaistanleveyttä. Karanin opetusohjelman tulisi myös kattaa tämä.
  • Älä tuo liian monta JavaScript-kirjastoa. Todennäköisesti sivustosi tarvitsee vain jQuery ja Bootstrap. Sinun ei todennäköisesti tarvitse käyttää reagoida, kulmikas tai jokin muu JavaScript-kehys du reisi sivustollesi.

Sisällytä Open Graph -tagi

Jos joku haluaa jakaa verkkosivustosi Facebookissa, linkin esikatselu näyttää ehdottoman kauhealta, ellet määrittänyt Open Graph -tageja verkkosivuston -tunnisteeseen. Tässä on viisi ominaisuutta, jotka ovat erityisen tärkeitä.

  • og: image - Määrittää esikatselukuvan absoluuttisen URL-osoitteen. Kuvan sijainti riippuu sen mitoista; sen käyttäytyminen on määritelty Facebookin jakamassa verkkosivustojen parhaita käytäntöjä.
  • og: title - Määrittää esikatselun otsikon.
  • og: description - Määrittää esikatselukuvan. Jos tyhjä, esikatselukuvaus on oletusarvo HTML-koodin ensimmäiseen kohtaan, joka ei välttämättä kuvaa oikein sivustosi sisältöä.
  • og: url - määrittää verkkosivuston URL-osoitteen ilman kyselyparametreja.
  • og: type - Määrittää tämän URL-osoitteen sisältötyypin. Henkilökohtaisissa verkkosivustoissa tämän pitäisi olla ”verkkosivusto”.
Oman verkkosivustoni, andrewyang.xyz, linkkien esikatselun selitettävä kaavio

Tämän esikatselun Open Graph -tagi näyttää tältä:





Voit testata Open Graph -tageja sivustossasi käyttämällä Facebookin kätevää Open Graph -korjaustyökalua. Se jopa näyttää miltä linkin esikatselu näyttää, jos joku jakaa sivun heti.

Määritä Google-jäsennelty data parempaan SEO-tasoon

Yleensä vain rekrytoijat näkevät verkkosivustosi. Jos haluat kuitenkin pyrkiä parantamaan sivustosi SEO: ta Googlessa, sinun on määritettävä strukturoidut tiedot JSON-LD: n (JSON linkitetyt tiedot) avulla -kohtaan; tag. Tässä on aloitussivuni jäsennellyt tiedot: