Kuidas luua head isiklikku veebisaiti

Ükskõik, kas olete arvutiteaduse tudeng, kes otsib esimest praktikakohta, või keegi, kes soovib tungida tehnikavaldkonda, on isikliku veebisaidi olemasolu suurepärane võimalus oma nime ettevõtetele ja värbajatele välja tuua. Isiklik veebisait on siiski palju enamat kui kokkuvõte; see tähistab teie enda Interneti-nurka, millega külastajad saavad suhelda. Head isiklikud veebisaidid näevad välja poleeritud ja annavad tõhusalt põhiteavet enda ja oma saavutuste kohta.

Kust ma alustan?

Kui teil on kogemusi veebiarenduses või olete juba loonud oma isikliku veebisaidi, võite selle jaotise vahele jätta ja minna jaotisse „Juhised”.

Veebisaidil on palju ressursse, mis aitavad teil alustada veebisaidi loomise igal sammul, alates malli valimisest kuni loomingu avaldamiseni. Siin on mõned olulised asjad, mida tuleks oma isikliku veebisaidi loomisel ja selle Internetis avalikkusele kättesaadavaks tegemisel arvestada.

Kas ma peaksin malli kasutama?

Kui proovite veebisaiti täielikult nullist üles ehitada, kulub selle kena väljanägemiseks tunde ja tunde vaeva. Peaksite rakendama mobiiliekraanide jaoks tundliku disaini, tegelema paljude CSS-idega ja mõtlema saidi iga aspekti kujundamisele.

Te ei pea kogu seda tööd tegema. Kui te pole tüüpilise esipaneeli virna igast huvitavusest tõeliselt huvitatud, peaksite kaaluma mallist alustamist. HTML5Up pakub tasuta hunniku kvaliteetseid malle. Mõnede HTML-i ja CSS-i põhiteadmiste abil saate malli kohandada nii, et see kajastaks teie professionaalseid saavutusi.

Kas ma peaksin kasutama staatilist saidigeneraatorit?

Jekylli ja Hugo logod.

Kui arvate, et HTML-i käsitsi redigeerimine on liiga ebameeldiv ja kui olete nõus mõne uue asja õppimiseks aega panema või kui plaanite ka ajaveebi pidamist, peaksite kaaluma staatilise saidigeneraatori kasutamist. Staatilised saidigeneraatorid võtavad Markdown- ja konfiguratsioonifailid ning rakendavad neid HTML-failide struktuuri genereerimiseks teema - mis koosneb paigutustest ja mallidest. David Walsh kirjutas põhjaliku artikli, mis tutvustas staatilise saidigeneraatori kontseptsiooni; enne selle valiku edasist uurimist tuleb kindlasti läbi lugeda.

Kaks kõige populaarsemat staatilise saidi generaatori mootorit on Jekyll ja Hugo. GitHubil on sisseehitatud tugi Jekyllile ja paljud ajaveebid kasutavad seda, kuid see nõuab Ruby installimist. Teisest küljest on Hugo mootor ise lihtne eraldiseisev käivitatav fail, mis on üks põhjusi, miks eelistan Hugo kasutamist Jekylli asemel.

Mina isiklikult kasutaksin pigem staatilist saidigeneraatorit, kui HTML5-mallide käsitsi redigeerimist; siiski on lõpuks teie otsustada.

Kus ma oma isiklikku veebisaiti majutan?

GitHubi lehed on lihtsaim viis oma sisu võrku saamiseks. Nad pakuvad õpetusi, nii et isegi täielik algaja saab oma veebisaidi vähese ajaga üles töötada. Saate isegi oma veebisaidi konfigureerida kuvama kohandatud domeenis, mitte GitHubi lehtede vaikedomeenis: $ {GITHUB_USERNAME} .github.io. Selleks peate registreerima domeeninime. Paljud hackatonid pakuvad tasuta domeene Namecheap, Domain.com või GoDaddy kaudu, kuid ma kasutan isiklikult Name.com.

Kui te ei pääse tasuta domeeninimele juurde, pole selle ostmine niikuinii liiga kallis. Tavaliselt maksavad need 10–20 dollarit ette, makstes samalaadset iga-aastast pikendamistasu. Mõnikord võiksite domeenide registreerimisel allahindlusi teha, nii et enne oma domeeninime ostmist otsige ringi.

Juhised

Mis teeb isiklikust veebisaidist täpselt kasu? Pärast kampaaniat Facebooki grupis “HH veebisaidid ja jätkamine” sain välja need juhised. Need ei ole mõeldud rangeteks reegliteks, nagu need on kivisse pandud, ja ilmselt on nendest juhistest ka erandeid, kuid neid tuleks isikliku veebisaidi loomisel või värskendamisel lihtsalt arvestada.

Esitage linke oma kokkuvõtte, LinkedIni ja GitHubi juurde

Kaks olulist veebisaiti, et tuvastada teie veebivaldkond tehnoloogiaharudes.

Lingid teie veebis olevale ametialasele kohalolekule on kohustuslikud mis tahes tehnoloogiale orienteeritud isiklikul veebisaidil. Tehnikatööstuse jaoks oleks need lingid teie kokkuvõtte, LinkedIni profiili ja GitHubi kontoga. Kuni teie isiklik veebisait neid silmapaistvalt iseloomustab, saavad värbajad hõlpsalt teie saavutusi üksikasjalikumalt kontrollida.

Ärge kartke näidata natuke isiksust

Kokkuvõttes piirdutakse teie saavutuste suures osas ainult teksti esitamisega. Kuid need piirangud ei kehti veebisaitide kohta. Oma isiklikul veebisaidil on teil võimalus end väljendada ning kureerida oma huvisid ja hobisid.

Kas teete oma DSLR-kaameraga lahedaid fotosid? Kas teete vabal ajal dope lööke? Või kirjutate inspireerivaid blogipostitusi elusündmustest? Näita neid oma veebisaidil ja paku ka asjakohaseid linke! Olen näinud, et inimesed lisavad linke profiilidele nendel veebisaitidel.

  • Twitter
  • Quora
  • Keskmine
  • Tibutav
  • Instagram
  • VSCO
  • Pinterest
  • Spotify

Muutke oma veebisait mobiilisõbralikuks

Google Analyticsi andmetel viibis 21% juuli minu saidi külastajatest mobiilseadmetes. See on märkimisväärne arv inimesi ja see võib hõlmata ka mõnda värbajat. Seega on oluline, et teie veebisait näeks hea välja nii nutitelefonides ja tahvelarvutites kui ka lauaarvutites.

Õnneks saate oma veebisaiti Chrome'i tööriistade abil hõlpsalt testida erineva suurusega ekraanidel. Kui teie veebisait tundub väikestel ekraanidel inetu, peaksite uurima ekraani kustutamist või HTML-i ja / või CSS-i paigutuse kohandamist. Näiteks lisasin selle CSS-i reegli oma sihtlehele, et kohandada fondi suurust ekraanidel, mille laius on 420 pikslit või vähem.

@media ekraan ja (seadme maksimaalne laius: 420 pikslit) {
    h1 {
        kirjasuurus: 56 pikslit; / * Tavaliselt 70 pikslit * /
    }
i.fa {
        / * Sihib font-vingeid ikoone * /
        kirjasuurus: 22 pikslit; / * Tavaliselt 26 pikslit * /
        polster-vasak: 6px; / * Tavaliselt 12 pikslit * /
        polster-paremal: 6px; / * Tavaliselt 12 pikslit * /
    }
}

Vältige veebisaidi rasvumist ja loidust

Illustratsioon Jr Casas.

Viimase paari aasta jooksul on veebisaitide lehtede suuruse kasv olnud trend. Maciej Cegłowski selgitas seda veebisaidi rasvumise kriisi 2015. aasta ajaveebipostituses; tema peamine mõte on see, et üha enam tekstil põhinevaid veebisaite, näiteks isiklikke veebisaite, laadivad mobiilsed ühendused liiga aeglaselt, kuna need tarbivad liiga palju ribalaiust. Ta märgib, et need veebisaidid kaaluvad sageli üles vene kirjanduse pikimad raamatud, mis on tuntud oma "vaevalisuse" poolest.

Olen seisukohal, et tekstipõhised veebisaidid ei tohiks ületada vene kirjanduse peamisi teoseid. See on helde mõõdupuu. Oleksin võinud valida prantsuse kirjanduse, mis oli täis õhukesi väikeseid raamatuid, kuid käisin teadlikult kaasas vene romaanide ja nende mainega.
- Maciej Cegłowski

Saidi varade - piltide, CSS ja JavaScripti - suuruse vähendamine parandab kindlasti teie saidi laadimisaega. Teil ei tohiks olla väikseid ikoone, mis kaaluvad sadu kilobaite, kui saaksite neid vähendada, säästes ehk 90% kasutatud ribalaiusest. Ja kindlasti ei tohiks teie saidil olla kümne megabaidi suurust animeeritud taustpilti, kui pildist piisab sõna otseses mõttes * ühe protsendi * suurusest.

Nüüd ei pea te ribalaiuse kasutamist ja laadimisaega hüperoptimeerima ning tõmmake oma juuksed välja, et leida oma piltide jaoks täpselt JPG tihenduskvaliteet, vaid vähemalt proovige olla kehva Interneti-ühendusega külastajate suhtes tähelepanelik.

Siin on mõned juhised, mida tuleb veebisaidi rasvumise ja aegluse vastu võitlemiseks järgida.

  • Hoidke oma pildid väikesed; nende suurused liituvad üsna kiiresti ja võivad tarbida palju ribalaiust, eriti halva vahemälu korral. Ideaalis peaks iga pilt kaaluma vähem kui 150–200 kilobaiti.
  • Kasutage sisu edastamise võrku (CDN), nii et teie veebisait laadiks külastajaid kogu maailmas kiiremini. Soovitan Cloudflare'i, kuna see on tasuta ja algajasõbralik. Karan Thakkar kirjutas FreeCodeCamp'is suurepärase postituse selle kohta, kuidas oma veebisaiti seadistada Cloudflare'i CDN-iga.
  • Minimeerige oma CSS ja JavaScript nii, et need kaaluksid vähem ja tarbiksid vähem ribalaiust. Karani õpetus peaks seda ka katma.
  • Ärge importige liiga palju JavaScripti teeke. Suure tõenäosusega peaks teie sait vajama ainult jQuery ja Bootstrap-i. Tõenäoliselt ei pea te oma saidil kasutama React, Angular või mõnda muud JavaScripti raamistikku.

Kaasa Open Graph sildid

Kui keegi soovib teie veebisaiti Facebookis jagada, näeks lingi eelvaade täiesti õudne, kui te pole veebisaidi sildil määranud Open Graphi silte. Siin on viis omadust, mis on eriti olulised.

  • og: image - määrab eelvaate pildi absoluutse URL-i. Kujutise paigutus sõltub selle mõõtmetest; selle käitumine on määratletud Facebooki veebisaitide parimate tavade jagamises.
  • og: title - määrab eelvaate pealkirja.
  • og: description - määrab eelvaate kirjelduse. Kui see on tühi, vaikimisi kuvatakse eelvaate kirjelduses HTML-i esimene tekst, mis ei pruugi teie saidi sisu täpselt kajastada.
  • og: url - määrab veebisaidi URL-i ilma päringupäringu parameetriteta.
  • og: type - määrab selle URL-i sisu tüübi. Isiklike veebisaitide puhul peaks see olema „veebisait”.
Minu isikliku veebisaidi andrewyang.xyz lingi eelvaate märkustega skeem

Selle eelvaate avatud graafikute sildid näeksid välja järgmised:





Saate oma saidil Open Graphi silte testida, kasutades Facebooki käepärast silumisriista Open Graph. See näitab isegi seda, kuidas lingi eelvaade välja näeks, kui keegi seda lehte kohe jagaks.

SEO paremaks muutmiseks täpsustage Google'i struktureeritud andmed

Tavaliselt näevad teie veebisaiti ainult värbajad. Kui soovite siiski oma saidi SEO parandamiseks Google'is pingutada, peaksite määrama jaotises struktureeritud andmed, kasutades JSON-LD (JSON lingitud andmete jaoks); silt. Siin on minu sihtlehe struktureeritud andmed:


Selles näites on deklareeritud kaks struktureeritud andmete objekti: üks sisaldab teavet minu kohta, kasutades skeemi “Isik”, ja teine ​​sisaldab teavet veebisaidi kohta, kasutades skeemi “Veebisait”. Oma ajaveebi sihtlehe ja postituste jaoks kasutan skeemi „WebSite” asemel vastavalt skeeme „Blog” ja „WebPage”.

Kui teete seda õigesti, võimaldab Google teie veebisaiti paremini sõeluda ja muuta see Google'i otsingutulemustes paremaks.

Eriline tänu Abhinav Seelanile selle soovituse eest!

Õigekirja kontroll

Viimane, kuid mitte vähem tähtis - kontrollige oma veebisaidil kõike õigekirja. Te ei tahaks oma elulookirjelduses midagi valesti kirjutada ja samamoodi ei tahaks te oma veebisaidil midagi valesti kirjutada. Kaaluge mõne sõbra kaasamist abistamiseks.

Loodan, et see juhend aitab! Ma mõtlesin seda postitust kirjutada juba suve algusest peale, kuid olen alles hiljuti hakanud seda kirjutama. Postitasin selle oma ajaveebist uuesti, nii et ärge unustage seda tellida ja jälgida mind keskkonnas!

Ressursid

  • Hackathon häkkerite isiklikud veebisaidid - teie inspiratsiooni saamiseks Hackathon häkkerite liikmete esitatud isiklike veebisaitide loend
  • HTML5Up - HTML5 mallide loend
  • GitHubi lehtedega alustamine - juhend GitHubi lehtede seadistamiseks Jekylli abil algajatele
  • Jekylli teemad - Jekylli teemade loend
  • Hugo Quickstart - Hugo algaja juhend
  • Hugo teemad - Hugo teemade loend
  • Kuidas kasutada Chrome'i arendaja tööriistu - põhjalik juhend Chrome'i arendaja tööriistade kasutamise kohta teie veebisaidi silumiseks
  • Mozilla arendajavõrgu CSS-i viide - kõigi asjade CSS-i viide: atribuudid, valijad jne.
  • Kohandatud domeeni kasutamine GitHubi lehtedel - juhend oma veebisaidi konfigureerimiseks kohandatud domeeni kasutamiseks
  • Facebooki avatud graafikute silumisriist - suurepärane silumisriist, et näha teie saidi eelvaadet, kui keegi seda Facebookis jagab
  • Struktureeritud andmete tutvustus - Google'i struktureeritud andmete algaja juhend
  • Google'i struktureeritud andmete testimise tööriist - suurepärane silumisriist struktureeritud andmete kinnitamiseks
  • Google PageSpeed ​​Insights - Google'i veebitoimetuse analüüsi tööriist, mis soovitab teie veebisaidi optimeerimist
  • Pingdomi veebisaidi kiirustest - tööriist teie veebisaidi laadimisaja ja ribalaiuse kasutamise analüüsimiseks väga detailselt
  • Illustreeritud juhend oma veebisaidi seadistamiseks Githubi ja Cloudflare'i abil - juhend oma GitHub Pages veebisaidi seadistamiseks CloudFlare kasutamiseks hõlpsaks HTTPS-i toeks ja saidi paremaks toimimiseks ... tasuta!
  • HH veebisaidid ja resümeerid - isiklik veebisait ja kokkuvõtlik kriitika