Statične web stranice postale su bijes i s razlogom su nevjerojatno brze i, sa sve većim brojem podržanih hosting usluga, prilično se lako postavljaju.
Neću ovdje ulaziti u sve tko, što, kada, gdje ili zašto statičnih stranica. Pretpostavljam da imate barem nejasnu predodžbu o tome što su oni ili samo želite stvoriti vlastitu web stranicu i da vas nije briga za ostale detalje. U svakom slučaju ovaj je post za vas.
Prvo, želim da znate da ovo pišem za što širu publiku; ne trebate nikakvo znanje programiranja da biste ga slijedili, ali neko poznavanje naredbenog retka i Gita puno će vam pomoći.
Pa kako možete stvoriti statičnu web lokaciju s GitHubom za 10 minuta?
Radit ćemo s dva specifična alata: GitHub Pages, koji je posebno dizajniran za posluživanje statičkog sadržaja, i generator statičkog sadržaja pod nazivom Jekyll.
Jekyll je Ruby dragulj za jednostavno stvaranje statičnih web stranica, pa ćete na računalu morati instalirati Ruby ako želite koristiti Jekyll. Ako imate OSX, najvjerojatnije već imate verziju Ruby (iako ćete je možda trebati ažurirati). Ako to niste ili ste na Windows računalu, ovdje možete saznati više o instaliranju: Instaliranje Ruby.
Otklonite to s puta, otvorite novu terminalnu udovicu i upišite gem install bundler jekyll. Ovo će instalirati Bundler (alat za upravljanje paketima Ruby) i Jekyll.
Nakon što se instaliraju oni dragulji (paketi Ruby), upišite Jekyll new my-static-site( dajte mu ime kako god želite) koji će pokretati Jekyll-ov generator za stvaranje vašeg projekta u novom direktoriju. Nakon stvaranja web mjesta, uskočite u novostvoreni direktorij web mjesta tako da upišete cd my-static-site(ili kako cdgod nazvali projektom).
Otvorite svoj projekt u uređivaču teksta i vidjet ćete nekoliko datoteka i mapa koje je Jekyll stvorio za vas. Trenutno se samo trebate baviti Gemfileom (a ne Gemfile.lock). Gemfile je Ruby datoteka koja upravlja svim povezanim Ruby paketima potrebnim za pokretanje projekta.
Datoteka će sadržavati redak s verzijom Jekyll, komentirajte:
#gem "jekyll", "~> 4.0.0" Zatim dodajte ovaj redak:
gem "github-pages", group: :jekyll_plugins Kad instalirate dragulj GitHub Pages može biti puno problema - ponekad su dragulji o kojima ovisi zastarjeli ili su dragulji koje ste lokalno instalirali previše moderni za GitHub stranice.
Otkrio sam da ovo može otežati lokalnu izgradnju i testiranje moje stranice Jekyll. Možda je najlakše lokalno testirati i spremiti izgradnju dok ne budete spremni za implementaciju. Međutim, u vrijeme pisanja ovog članka možete odrediti ove verzije ovisnosti u svom Gemfileu i Jekyll će raditi i lokalno i sa GitHub stranicama:
gem "jekyll", "~> 3.8.5" gem "github-pages","~> 202" , group: :jekyll_plugins group :jekyll_plugins do gem "jekyll-feed", "~> 0.11.0" end Zahvaljujem Alexu Waibelu na StackOverflowu na toj najnovijoj konfiguraciji.
Da biste vidjeli svoje mjesto na djelu, pokrenite se bundle exec Jekyll serveu naredbenom retku. Ovo će pokrenuti poslužitelj i svoju ćete stranicu moći vidjeti upisivanjem "localhost: 4000" u URL traku preglednika.
Voila! Stvorili ste statično mjesto s Jekyll-om i nalazite se u direktoriju projekta. Gotovo ste 50%.
Idemo to dobiti na mreži
Idite na GitHub.com i prijavite se, ili ako već imate račun, odaberite gumb "novo" i stvorite spremište. Važno je da svoje spremište imenujete po vezi koju će vaš GitHub Pages račun služiti, a to je vaše_korisničko ime.github.io. Na primjer, moje korisničko ime za GitHub je tfantina, a moj blog je tfantina.github.io, pa je moj GitHub repo ime nazvan: "tfantina.github.io".
Natrag u prozor terminala, gurnite Jekyll stranicu s računala na GitHub pokretanjem sljedećih naredbi:
git init git remote add origin [email protected]:/.git git commit -am “Setting up Jekyll!” git push -u origin master (Prilikom zamjene vašeg korisničkog imena i imena projekta ne trebaju vam otvaranje i zatvaranje).
Nakon što su vaše promjene gurnute u vaše spremište, trebali biste imati ispravno statično mjesto. To je zato što koristite dragulj GitHub Pages i svoje ste spremište imenovali na takav način da GitHub razumije da ga želite poslužiti s GitHub stranicama.
To možete potvrditi posjetom web mjestu ili odlaskom na karticu postavki na GitHubu i pomicanjem do odjeljka stranica. Trebali biste vidjeti zeleni okvir koji pokazuje gdje je objavljena vaša web lokacija:
Također ćete primijetiti da svoju temu možete lako promijeniti i ovdje. GitHub nudi nekoliko zadanih tema za Jekyll, ali naravno možete i sami napraviti svoje.
Ako vaša web lokacija kaže da je objavljena, ali izgleda prazno, možda ćete je trebati osvježiti ili pokušati pogledati svoju stranicu u privatnom prozoru. To se može činiti očitim, ali dobiva me gotovo svaki put kad postavim novu instancu Jekyll.
Ako se sve odvija prema planu, vaša bi stranica trebala izgledati otprilike ovako:
Tu ste - u samo nekoliko minuta stvorili ste i postavili statično web mjesto s GitHub stranicama. Ali vjerojatno želite biti u mogućnosti staviti neki sadržaj na svoju stranicu.
Obećao sam da će to trajati samo deset minuta, tako da neću zalaziti u sve detalje stranica, naslovnice ili jezika za izradu predložaka Liquid. To je post za drugi dan. Ali podijelit ću kako stvoriti svoj prvi post.
U svom uređivaču teksta otvorite mapu "_posts". Već postoji post koji vas pozdravlja na vašem novom blogu. Stvorite novu datoteku s oznakom i spremite je s imenom u ovom formatu: GODINA-MJESEC-DAN-NASLOV.markdown (vidi dolje):
Jekylllov post sadrži dva odjeljka: prednji dio i tijelo.
Naslovnica daje konkretne upute Jekyll-u poput onoga koji će biti naslov posta, koji raspored koristiti i kada je post napisan.
Prednja strana je vrlo prilagodljiva. Na primjer, želio sam da moji postovi imaju herojske slike, pa sam stvorio lead_imageoznaku i stavio sintaksu u svoj izgled kako bih posebno provjerio vodeće slike u prednjoj strani svakog posta. Jezik za predloške Liquid olakšava uvlačenje sadržaja s prednje strane u vašu temu.
Puno više možete učiniti s prednjim dijelom, ali krenimo od generičkog primjera.
Zadana prednja stvar izgleda ovako:
— layout: post title: "Welcome to Jekyll!" date: 2019-11-09 18:07:11 -0600 categories: jekyll update — - Izgled govori Jekyllu na kojem rasporedu želite da se sadržaj prikazuje. Možete imati više izgleda za različite stranice ili vrste postova.
- Naslov posta
- Datum objave
- Kategorije, koje su u osnovi oznake. Možete dodati onoliko malo ili koliko god želite razdvojenih razmacima.
Nakon početne teme, vaš se post može napisati u Markdown-u, što vam daje veliku fleksibilnost u pisanju sadržaja posta.
Nakon što završite s radom, spremite ga i otvorite prozor terminala.
git commit -am “Publishes first post git pushNakon minute (i možda osvježenja) moći ćete vidjeti svoj post.
Nadamo se da sada imate radno statično mjesto na GitHub stranicama stvoreno s Jekyll-om! Ako imate bilo kakvih problema ili pitanja, tweetujte @tfantina ili mi možete poslati e-mail na [email protected].