Kuinka luoda ilmainen staattinen sivusto GitHub-sivuilla 10 minuutissa

Staattisista sivustoista on tullut raivoa, ja hyvästä syystä - ne ovat räjähtävän nopeita, ja jatkuvasti kasvavien tuettujen isännöintipalvelujen kanssa niiden asennus on melko helppoa.

En aio käsitellä kaikkia staattisten sivustojen ketä, mitä, milloin, missä tai miksi. Oletan, että sinulla on ainakin epämääräinen käsitys siitä, mitä he ovat, tai haluat vain luoda oman sivuston etkä välitä muista yksityiskohdista. Joko niin, tämä viesti on sinulle.

Ensinnäkin haluan sinun tietävän, että kirjoitan tämän mahdollisimman laajalle yleisölle; et tarvitse mitään ohjelmointitaitoa seurataksesi mukana, mutta jonkinlainen tuntemus komentoriviltä ja Gitiltä auttaa paljon.

Joten miten voit luoda staattisen sivuston GitHubilla 10 minuutissa?

Työskentelemme kahdella erityisellä työkalulla: GitHub Pages, joka on erityisesti suunniteltu palvelemaan staattista sisältöä, ja staattisen sisällön generaattori nimeltä Jekyll.

Jekyll on Ruby-helmi staattisten sivustojen luomiseen helposti, joten sinun on asennettava Ruby tietokoneellesi, jos haluat käyttää Jekylliä. Jos sinulla on OSX, sinulla on todennäköisesti jo Ruby-versio (vaikka sinun on ehkä päivitettävä se). Jos et ole tai olet Windows-tietokoneella, voit oppia lisää sen asentamisesta täältä: Rubyn asentaminen.

Kun tämä on poissa, avaa uusi päätelaite ja kirjoita gem install bundler jekyll. Tämä asentaa Bundlerin (Ruby-paketinhallintatyökalun) ja Jekyllin.

Kun nuo helmet (Ruby-paketit) on asennettu, kirjoita Jekyll new my-static-site(nimeä se mitä haluat), joka ajaa Jekyllin generaattorin luomaan projektisi uuteen hakemistoon. Kun sivustosi on luotu, hyppää äskettäin luotuun sivustohakemistoon kirjoittamalla cd my-static-site(tai cdmitä tahansa kutsut projektiksi).

Avaa projekti tekstieditorissa ja näet useita Jekyllin luomia tiedostoja ja kansioita sinulle. Tällä hetkellä sinun tarvitsee huolehtia vain Gemfile-tiedostosta (ei Gemfile.lock). Gemfile on Ruby-tiedosto, joka hallitsee kaikkia siihen liittyviä Ruby-paketteja, joita tarvitaan projektin suorittamiseen.

Tiedosto sisältää rivin Jekyll-versiolla, kommentoi se:

#gem "jekyll", "~> 4.0.0" 

Lisää sitten tämä rivi:

gem "github-pages", group: :jekyll_plugins 

Asennettaessa GitHub Pages -helmiä voi olla paljon gotchoja - joskus riippuvat helmet ovat vanhentuneita tai paikallisesti asentamasi helmet ovat liian moderneja GitHub-sivuille.

Olen huomannut, että tämä voi vaikeuttaa Jekyll-sivustoni rakentamista ja testaamista paikallisesti. Se voi olla helpointa vain testata sivustoasi paikallisesti ja tallentaa sen rakentaminen, kunnes olet valmis ottamaan käyttöön. Tämän kirjoituksen aikana voit kuitenkin määrittää nämä riippuvuusversiot Gemfile-tiedostossa ja Jekyll toimii sekä paikallisesti että GitHub-sivujen kanssa:

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

Kiitos StackOverflow-palvelun Alex Waibelille viimeisimmistä määrityksistä.

Jos haluat nähdä sivustosi toiminnassa, suorita bundle exec Jekyll servekomentorivillä. Tämä käynnistää palvelimen ja näet sivustosi kirjoittamalla "localhost: 4000" selaimen URL-palkkiin.

Voila! Olet luonut staattisen sivuston Jekyllin kanssa ja olet projektihakemistossa. Olet noin 50% valmis.

Saamme tämän verkkoon

Siirry osoitteeseen GitHub.com ja kirjaudu sisään, tai jos sinulla on jo tili, valitse uusi-painike ja luo arkisto. On tärkeää, että nimeät arkiston linkin jälkeen, jota GitHub Pages -tilisi käyttää, eli käyttäjänimi.github.io. Esimerkiksi GitHub-käyttäjätunnukseni on tfantina ja blogini on tfantina.github.io, joten GitHub-repo-nimeni on "tfantina.github.io".

Palaa pääteikkunaan ja työnnä Jekyll-sivustosi tietokoneeltasi GitHubiin suorittamalla seuraavat komennot:

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

(Kun vaihdat käyttäjänimesi ja projektinimesi, et tarvitse avaamista ja sulkemista).

Kun muutokset on siirretty arkistoon, sinulla on oltava toimiva staattinen sivusto. Tämä johtuu siitä, että käytät GitHub Pages -helmiä ja nimeit arkiston siten, että GitHub ymmärtää, että haluat palvella sitä GitHub Pagesin kanssa.

Voit vahvistaa tämän joko käymällä sivustollasi tai siirtymällä GitHubin Asetukset-välilehteen ja vierittämällä sivuosioon. Sinun pitäisi nähdä vihreä ruutu, josta näkyy, missä sivustosi on julkaistu:

Huomaa myös, että voit vaihtaa teeman helposti myös täältä. GitHub tarjoaa muutaman oletusteeman Jekyllille, mutta tietysti voit myös tehdä oman.

Jos sivustosi sanoo, että se on julkaistu, mutta näyttää tyhjältä, sinun on ehkä päivitettävä kovasti tai yritettävä tarkastella sivustoasi yksityisessä ikkunassa. Tämä saattaa tuntua itsestään selvältä, mutta se saa minut melkein joka kerta kun perustan uuden Jekyll-instanssin.

Jos kaikki meni suunnitelmien mukaan, sivustosi pitäisi näyttää tältä:

Siellä menet - muutamassa minuutissa olet luonut ja ottanut käyttöön staattisen verkkosivuston GitHub-sivuilla. Mutta luultavasti haluat pystyä lisäämään sisältöä sivullesi.

Lupasin, että tämä vie vain kymmenen minuuttia, joten en aio sukeltaa sivujen, etusivun tai Liquid-mallikielen yksityiskohtiin. Se on viesti toiselle päivälle. Mutta jaan kuinka luoda ensimmäinen viesti.

Palaa tekstieditoriin ja avaa _posts-kansio. On jo viesti, joka toivottaa sinut tervetulleeksi uuteen blogiisi. Luo uusi markdown-tiedosto ja tallenna se nimellä tässä muodossa: YEAR-MONTH-DAY-TITLE.markdown (katso alla):

Jekyll-viesti sisältää kaksi osaa: etuosa ja runko.

Aine antaa Jekyllille tarkat ohjeet, kuten mitä viestin otsikko tulee olemaan, mitä asettelua käytetään ja milloin viesti kirjoitettiin.

Etupuoli on erittäin muokattavissa. Halusin esimerkiksi, että viesteissäni olisi sankarikuvia, joten loin lead_imagetunnisteen ja sijoitin syntaksin asetteluni tarkistaakseni erityisesti lyijykuvia jokaisen viestin etuosasta. Nestemäisen mallikielen avulla sisältöä on helppo vetää aiheeseen.

Etumateriaalilla voi tehdä paljon enemmän, mutta aloitetaan yleisestä esimerkistä.

Oletusarvoinen etuosa näyttää tältä:

— layout: post title: "Welcome to Jekyll!" date: 2019-11-09 18:07:11 -0600 categories: jekyll update — 
  • Asettelu kertoo Jekyllille, millä asettelulla haluat sisällön näkyvän. Sinulla voi olla useita asetteluja eri sivuille tai postityyppeille.
  • Viestin otsikko
  • Lähetyksen päivämäärä
  • Luokat, jotka ovat lähinnä tunnisteita. Voit lisätä niin vähän tai niin monta kuin haluat välilyönneillä erotettuna.

Etunimen jälkeen viesti voidaan kirjoittaa Markdown-tiedostoon, mikä antaa sinulle paljon joustavuutta kirjoittaessasi viestisi sisältöä.

Kun viesti on valmis, tallenna se ja avaa pääteikkuna.

git commit -am “Publishes first post git push

Minuutin (ja ehkä päivityksen) jälkeen voit nähdä viestisi.

Toivottavasti sinulla on nyt toimiva staattinen sivusto GitHub-sivuilla, jotka on luotu Jekyllillä! Jos sinulla on ongelmia tai kysymyksiä, lähetä twiitti @tfantina, tai voit ampua minulle sähköpostia osoitteeseen [email protected]