Hogyan hozhat létre ingyenes statikus webhelyet a GitHub Pages segítségével 10 perc alatt

A statikus webhelyek dühöngővé váltak, és jó okkal - lángolóan gyorsak, és a támogatott tárhelyszolgáltatások egyre növekvő számával meglehetősen könnyen beállíthatók.

Nem fogok kitérni az összes statikus oldalra, hogy ki, mit, mikor, hol vagy miért. Feltételezem, hogy van legalább homályos elképzelése arról, hogy mik ők, vagy csak saját webhelyet szeretne létrehozni, és nem érdekli a többi részlet. Akárhogy is, ez a bejegyzés neked szól.

Először is szeretném, ha tudnád, hogy ezt a lehető legszélesebb közönségnek írom; nem kell semmilyen programozási ismeret a követéshez, de a parancssor és a Git némi ismerete sokat segít.

Tehát hogyan hozhat létre statikus oldalt a GitHub segítségével 10 perc alatt?

Két speciális eszközzel fogunk dolgozni: a kifejezetten statikus tartalmak kiszolgálására tervezett GitHub Pages-szel és a Jekyll nevű statikus tartalom-generátorral.

A Jekyll egy Ruby drágakő statikus oldalak könnyű létrehozásához, ezért a Jekyll használatához a Ruby-ra telepítve kell lennie a számítógépén. Ha OSX van, akkor valószínűleg már van egy Ruby verziója (bár lehet, hogy frissítenie kell). Ha nem, vagy Windows rendszerű számítógépet használ, itt többet megtudhat a telepítésről: A Ruby telepítése.

Ezzel az útból nyisson meg egy új terminál özvegyet, és gépeljen gem install bundler jekyll. Ez telepíti a Bundlert (egy Ruby csomagkezelő eszközt) és a Jekyll-t.

Miután ezek a drágakövek (Ruby csomagok) települtek, írja be Jekyll new my-static-site(nevezze el, amit csak akar), amely a Jekyll generátorát futtatja, hogy létrehozza a projektet egy új könyvtárban. Miután létrehozta a webhelyét, ugorjon az újonnan létrehozott webhelykönyvtárba gépeléssel cd my-static-site(vagy cdbármi mással, amit projektnek nevezett).

Nyissa meg a projektet egy szövegszerkesztőben, és több fájlt és mappát láthat, amelyeket a Jekyll készített Önnek. Jelenleg csak a Gemfile-val kell foglalkoznia (nem a Gemfile.lock). A Gemfile egy Ruby fájl, amely a projekt futtatásához szükséges összes kapcsolódó Ruby csomagot kezeli.

A fájl egy sort tartalmaz a Jekyll verzióval, kommentelje:

#gem "jekyll", "~> 4.0.0" 

Ezután adja hozzá ezt a sort:

gem "github-pages", group: :jekyll_plugins 

A GitHub Pages gem telepítésekor nagyon sok gotcha lehet - néha a függő drágakövek elavultak, vagy a helyileg telepített drágakövek túl modernek a GitHub Pages számára.

Megállapítottam, hogy ez megnehezítheti Jekyll webhelyem helyi felépítését és tesztelését. A legegyszerűbb lehet, ha csak helyileg teszteli a webhelyét, és megtakarítja annak kiépítését, amíg készen áll a telepítésre. Az írás idején azonban megadhatja ezeket a függőségi verziókat a Gemfile-ban, és Jekyll mind lokálisan, mind a GitHub oldalakkal együtt fog működni:

gem "jekyll", "~> 3.8.5" gem "github-pages","~> 202" , group: :jekyll_plugins group :jekyll_plugins do gem "jekyll-feed", "~> 0.11.0" end 

Köszönet Alex Waibelnek a StackOverflow-n a legutóbbi konfigurációért.

Ha látni szeretné webhelyét működés közben, futtassa bundle exec Jekyll servea parancssorban. Ez elindítja a szervert, és megtekintheti webhelyét, ha beírja a "localhost: 4000" szót egy böngésző URL-sávjába.

Voálá! Létrehozott egy statikus oldalt Jekyll-lel és benne van a projekt könyvtárban. Körülbelül 50% -a kész.

Letöltheti ezt online

Látogasson el a GitHub.com oldalra, és regisztráljon, vagy ha már rendelkezik fiókkal, kattintson az „új” gombra, és hozzon létre egy adattárat. Fontos, hogy a tárhelyet annak a linknek a neve után nevezze el, amelyet a GitHub Pages-fiókja fog szolgáltatni, amely az Ön_felhasználónév.github.io. Például a GitHub felhasználónevem tfantina, a blogom pedig tfantina.github.io, így a GitHub repóm a következő nevet kapta: "tfantina.github.io".

Vissza a terminál ablakába, a következő parancsok futtatásával tolja Jekyll webhelyét a számítógépéről a GitHub-ra:

git init git remote add origin [email protected]:/.git git commit -am “Setting up Jekyll!” git push -u origin master 

(Felhasználónév és projektnév cseréjéhez nincs szükség a nyitóra és a záróra).

Miután a módosítások átkerültek a tárába, rendelkeznie kell egy működő statikus webhellyel. Ennek az az oka, hogy a GitHub Pages gem-et használja, és a tárházat úgy nevezte el, hogy a GitHub megértse, hogy a GitHub Pages szolgáltatással szeretné kiszolgálni.

Ezt megerősítheti, ha meglátogatja webhelyét, vagy belép a GitHub beállításai fülre, és görgessen az oldalak szakaszához. Látnia kell egy zöld négyzetet, amely megmutatja, hol jelent meg webhelye:

Azt is megjegyzi, hogy a témáját innen is könnyen megváltoztathatja. A GitHub néhány alapértelmezett témát kínál a Jekyll számára, de természetesen saját maga is elkészítheti.

Ha webhelye azt állítja, hogy közzétették, de üresnek tűnik, előfordulhat, hogy kemény frissítést kell végrehajtania, vagy privát ablakban kell megpróbálnia megtekinteni a webhelyet. Ez nyilvánvalónak tűnhet, de szinte minden alkalommal elkap, amikor új Jekyll példányt állítok fel.

Ha minden a tervek szerint alakult, akkor a webhelyének ilyennek kell kinéznie:

Itt van - mindössze néhány perc alatt létrehozott és telepített egy statikus GitHub-oldalakat tartalmazó weboldalt. De valószínűleg azt szeretné, hogy tartalmat tudjon felvenni az oldalára.

Megígértem, hogy ez csak tíz percet vesz igénybe, ezért nem merülök el az oldalak, az első anyag vagy a Liquid sablonnyelv minden részletében. Ez egy újabb nap bejegyzése. De megosztom az első hozzászólásod létrehozásának módját.

Vissza a szövegszerkesztőbe nyissa meg a „_posts” mappát. Már van egy bejegyzés, amely az új blogodba fogad. Hozzon létre egy új jelölőfájlt, és mentse el egy névvel a következő formátumban: YEAR-MONTH-DAY-TITLE.markdown (lásd alább):

Egy Jekyll-bejegyzés két részt tartalmaz: az első anyagot és a testet.

A címlap konkrét utasításokat ad Jekyllnek, például, hogy mi lesz a bejegyzés címe, milyen elrendezést kell használni, és mikor írták a bejegyzést.

Az első anyag nagyon testreszabható. Például azt akartam, hogy a bejegyzéseim hős képekkel legyenek, ezért létrehoztam egy lead_imagecímkét, és elhelyeztem némi szintaxist az elrendezésemben, hogy kimondottan ellenőrizzem az ólomképeket az egyes bejegyzések homlokterében. A Liquid sablonnyelv megkönnyíti az első anyag tartalmának a témába történő behúzását.

Sokkal többet tehet a frontanyaggal, de kezdjük egy általános példával.

Az alapértelmezett első anyag így néz ki:

— layout: post title: "Welcome to Jekyll!" date: 2019-11-09 18:07:11 -0600 categories: jekyll update — 
  • Az Elrendezés megmondja Jekyllnek, hogy melyik elrendezésen szeretné megjeleníteni a tartalmat. Különböző elrendezéseket használhat különböző oldalakhoz vagy bejegyzés típusokhoz.
  • A bejegyzés címe
  • A feladás dátuma
  • Kategóriák, amelyek lényegében címkék. Hozzáadhat annyit vagy annyit, amennyit csak akar szóközökkel elválasztva.

Az előadás után a bejegyzését Markdownba lehet írni, ami nagy rugalmasságot biztosít a bejegyzés tartalmának megírásához.

Miután a bejegyzés elkészült, mentse el, és nyissa meg a terminál ablakát.

git commit -am “Publishes first post git push

Egy perc (és talán egy frissítés) után láthatja a bejegyzését.

Remélhetőleg van egy működő statikus webhelye a GitHub Oldalakon, amelyet Jekyll készített! Ha bármilyen problémája vagy kérdése van, kérjük, tweeteljen @tfantina, vagy lőhet nekem egy e-mailt a [email protected] címre.