Hvordan lage et gratis statisk nettsted med GitHub Pages på 10 minutter

Statiske nettsteder har blitt raseri, og med god grunn - de er lynrask og med et stadig økende antall støttede hostingtjenester ganske enkle å sette opp.

Jeg kommer ikke til å gå inn på alle hvem, hva, når, hvor eller hvorfor av statiske nettsteder her. Jeg antar at du i det minste har en vag ide om hva de er eller bare vil lage ditt eget nettsted og ikke bryr deg om de andre detaljene. Uansett er dette innlegget for deg.

Først vil jeg at du skal vite at jeg skriver dette for et så bredt publikum som mulig; du trenger ikke noen programmeringskunnskap for å følge med, men litt kjennskap til kommandolinjen og Git vil hjelpe mye.

Så hvordan kan du opprette et statisk nettsted med GitHub på 10 minutter?

Vi vil jobbe med to spesifikke verktøy: GitHub Pages, som er spesielt designet for å betjene statisk innhold, og en statisk innholdsgenerator kalt Jekyll.

Jekyll er en Ruby-perle for å lage statiske nettsteder enkelt, så du må ha Ruby installert på datamaskinen din hvis du vil bruke Jekyll. Hvis du har OSX, har du sannsynligvis allerede en versjon av Ruby (selv om du kanskje må oppdatere den). Hvis du ikke har en Windows-datamaskin, kan du lære mer om å installere den her: Installere Ruby.

Når det er ute av veien, åpner du en ny terminal-enke og skriver gem install bundler jekyll. Dette installerer Bundler (et verktøy for Ruby-pakkehåndtering) og Jekyll.

Når disse perlene (Ruby-pakkene) er installert, skriver du inn Jekyll new my-static-site(gi den navnet du vil) som vil kjøre Jekylls generator for å lage prosjektet ditt i en ny katalog. Etter at nettstedet ditt er opprettet, kan du hoppe inn i den nyopprettede nettstedskatalogen ved å skrive cd my-static-site(eller cdhva du enn kalte for deg).

Åpne prosjektet i et tekstredigeringsprogram, og du vil se flere filer og mapper Jekyll opprettet for deg. Akkurat nå trenger du bare å bekymre deg for Gemfile (ikke Gemfile.lock). Gemfile er en Ruby-fil som administrerer alle tilknyttede Ruby-pakker som trengs for å kjøre et prosjekt.

Filen inneholder en linje med Jekyll-versjonen, kommenter den:

#gem "jekyll", "~> 4.0.0" 

Legg deretter til denne linjen:

gem "github-pages", group: :jekyll_plugins 

Det kan være mange gotchas når du installerer GitHub Pages-perlen - noen ganger er perlene det avhenger av er utdaterte, eller perlene du har installert lokalt er for moderne for GitHub Pages.

Jeg har funnet ut at dette kan gjøre det vanskelig å bygge og teste Jekyll-nettstedet mitt lokalt. Det kan være enklest bare å teste nettstedet ditt lokalt og lagre å bygge det til du er klar til å distribuere. På dette tidspunktet kan du imidlertid spesifisere disse avhengighetsversjonene i Gemfile, og Jekyll vil fungere både lokalt og med GitHub Pages:

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

Takk til Alex Waibel på StackOverflow for den siste konfigurasjonen.

For å se nettstedet ditt i aksjon, kjør bundle exec Jekyll servepå kommandolinjen. Dette starter en server, og du kan se nettstedet ditt ved å skrive "localhost: 4000" i URL-linjen i en nettleser.

Voila! Du har opprettet et statisk nettsted med Jekyll, og du er i prosjektkatalogen. Du er omtrent 50% ferdig.

Lar oss få dette online

Gå til GitHub.com og registrer deg, eller hvis du allerede har en konto, velg "ny" -knappen og opprett et depot. Det er viktig at du navngir depotet ditt etter lenken som GitHub Pages-kontoen din skal vises, som er ditt_brukernavn.github.io. For eksempel er mitt GitHub-brukernavn tfantina og bloggen min er tfantina.github.io, så mitt GitHub-repo heter: "tfantina.github.io".

Tilbake i terminalvinduet, skyv Jekyll-nettstedet ditt fra datamaskinen til GitHub ved å kjøre følgende kommandoer:

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

(Når du bytter ut brukernavn og prosjektnavn, trenger du ikke åpning og lukking).

Når endringene dine er blitt presset til depotet ditt, bør du ha et fungerende statisk nettsted. Dette er fordi du bruker GitHub Pages-perlen og navngir depotet ditt på en slik måte at GitHub forstår at du vil servere det med GitHub Pages.

Du kan bekrefte dette enten ved å besøke nettstedet ditt eller ved å gå til innstillingsfanen på GitHub og bla til sidene. Du bør se en grønn rute som viser hvor nettstedet ditt er publisert:

Du vil også merke deg at du også enkelt kan endre temaet herfra. GitHub gir noen standardtemaer for Jekyll, men selvfølgelig kan du også lage dine egne.

Hvis nettstedet ditt sier at det er publisert, men ser tomt ut, kan det hende du må gjøre en hard oppdatering eller prøve å se på nettstedet ditt i et privat vindu. Dette kan virke åpenbart, men det får meg nesten hver gang jeg setter opp en ny Jekyll-forekomst.

Hvis alt gikk etter planen, bør nettstedet ditt se slik ut:

Der går du - på bare noen få minutter har du opprettet og distribuert et statisk nettsted med GitHub-sider. Men du vil sannsynligvis kunne legge inn noe på siden din.

Jeg lovet at dette bare ville ta ti minutter, så jeg vil ikke dykke ned i detaljene på sider, forsiden eller flytende malespråk. Det er et innlegg for en annen dag. Men jeg vil dele hvordan du lager ditt første innlegg.

Tilbake i tekstredigeringsprogrammet, åpner du mappen «_posts». Det er allerede et innlegg som ønsker deg velkommen til din nye blogg. Opprett en ny markdown-fil og lagre den med et navn i dette formatet: YEAR-MONTH-DAY-TITLE. Markdown (se nedenfor):

Et Jekyll-innlegg inneholder to seksjoner: frontmateriale og kropp.

Forsiden gir spesifikke instruksjoner til Jekyll, for eksempel hva tittelen på innlegget skal være, hvilket layout du skal bruke, og når innlegget ble skrevet.

Forsiden er svært tilpassbar. For eksempel ønsket jeg at innleggene mine skulle ha heltebilder, så jeg opprettet en lead_imagetagg og plasserte litt syntaks i oppsettet mitt for å spesifikt se etter blybilder i hvert innlegg. Det flytende malspråket gjør det enkelt å trekke innhold fra forsiden inn i temaet ditt.

Det er mye mer du kan gjøre med frontmateriale, men la oss starte med et generisk eksempel.

Standard frontmateriale ser slik ut:

— layout: post title: "Welcome to Jekyll!" date: 2019-11-09 18:07:11 -0600 categories: jekyll update — 
  • Layout forteller Jekyll hvilket layout du vil at innholdet skal vises på. Du kan ha flere oppsett for forskjellige sider eller innleggstyper.
  • Innleggets tittel
  • Innleggsdatoen
  • Kategorier, som egentlig er koder. Du kan legge til så få eller så mange du vil atskilt med mellomrom.

Etter forsiden kan innlegget ditt skrives i Markdown, noe som gir deg stor fleksibilitet i å skrive innlegget ditt.

Når innlegget ditt er ferdig, lagre det og åpne terminalvinduet.

git commit -am “Publishes first post git push

Etter et øyeblikk (og kanskje en oppdatering) vil du kunne se innlegget ditt.

Forhåpentligvis har du nå et fungerende statisk nettsted på GitHub Pages opprettet med Jekyll! Hvis du har noen problemer eller spørsmål, vennligst tweet @tfantina, eller du kan skyte meg en e-post på [email protected]