Sådan oprettes et gratis statisk sted med GitHub Pages på 10 minutter

Statiske websteder er blevet raseri, og med god grund - de er lynhurtigt hurtige og med et stadigt voksende antal understøttede hostingtjenester ret nemme at oprette.

Jeg vil ikke gå ind på alle de, hvem, hvad, hvornår, hvor eller hvorfor af statiske steder her. Jeg antager, at du i det mindste har en vag idé om, hvad de er, eller bare vil oprette dit eget websted og ikke er ligeglad med de andre detaljer. Uanset hvad dette indlæg er til dig.

Først vil jeg have dig til at vide, at jeg skriver dette til et så bredt publikum som muligt; du har ikke brug for nogen programmeringsviden for at følge med, men noget fortrolighed med kommandolinjen og Git hjælper meget.

Så hvordan kan du oprette et statisk sted med GitHub på 10 minutter?

Vi arbejder med to specifikke værktøjer: GitHub Pages, som er specielt designet til at tjene statisk indhold, og en statisk indholdsgenerator kaldet Jekyll.

Jekyll er en Ruby-perle til nemt at oprette statiske websteder, så du bliver nødt til at have Ruby installeret på din computer, hvis du vil bruge Jekyll. Hvis du har OSX, har du sandsynligvis allerede en version af Ruby (selvom du muligvis skal opdatere den). Hvis du ikke gør det, eller hvis du er på en Windows-computer, kan du lære mere om installation af det her: Installation af Ruby.

Når det er ude af vejen, skal du åbne en ny terminalenke og skrive gem install bundler jekyll. Dette installerer Bundler (et Ruby-pakkehåndteringsværktøj) og Jekyll.

Når disse ædelstene (Ruby-pakker) er installeret, skal du skrive Jekyll new my-static-site(navngiv det, hvad du vil), som kører Jekylls generator for at oprette dit projekt i en ny mappe. Når dit websted er oprettet, skal du hoppe ind i dit nyoprettede stedbibliotek ved at skrive cd my-static-site(eller cdhvad du end kalder dig projekt).

Åbn dit projekt i en teksteditor, og du vil se flere filer og mapper, Jekyll oprettet til dig. Lige nu behøver du kun at bekymre dig om Gemfile (ikke Gemfile.lock). Gemfilen er en Ruby-fil, der administrerer alle tilknyttede Ruby-pakker, der er nødvendige for at køre et projekt.

Filen indeholder en linje med Jekyll-versionen, kommenter den:

#gem "jekyll", "~> 4.0.0" 

Tilføj derefter denne linje:

gem "github-pages", group: :jekyll_plugins 

Der kan være mange gotchas, når du installerer GitHub Pages-perlen - nogle gange er de perler, det afhænger af, forældede, eller de perler, du har installeret lokalt, er for moderne til GitHub Pages.

Jeg har fundet ud af, at dette kan gøre det vanskeligt at opbygge og teste mit Jekyll-sted lokalt. Det kan være nemmest bare at teste dit websted lokalt og gemme at bygge det, indtil du er klar til implementering. På tidspunktet for denne skrivning kan du dog specificere disse afhængighedsversioner i din Gemfile, og Jekyll fungerer 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 

Tak til Alex Waibel på StackOverflow for den seneste konfiguration.

For at se dit websted i aktion skal du køre bundle exec Jekyll servei din kommandolinje. Dette starter en server, og du kan se dit websted ved at skrive "localhost: 4000" i en browsers URL-linje.

Voila! Du har oprettet et statisk sted med Jekyll, og du er i projektmappen. Du er omkring 50% færdig.

Lad os få dette online

Gå til GitHub.com og tilmeld dig, eller hvis du allerede har en konto, skal du vælge knappen "ny" og oprette et lager. Det er vigtigt, at du navngiver dit lager efter det link, som din GitHub Pages-konto skal tjene, hvilket er dit_brugernavn.github.io. For eksempel er mit GitHub-brugernavn tfantina og min blog er tfantina.github.io, så mit GitHub-repo hedder: "tfantina.github.io".

Tilbage i dit terminalvindue skal du skubbe dit Jekyll-sted fra din computer op til GitHub ved at kø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 erstatter dit brugernavn og projektnavn, behøver du ikke åbne og lukke).

Når dine ændringer er skubbet til dit arkiv, skal du have et fungerende statisk sted. Dette skyldes, at du bruger GitHub Pages-perlen og navngiver dit arkiv på en sådan måde, at GitHub forstår, at du vil servere det med GitHub Pages.

Du kan bekræfte dette enten ved at besøge dit websted eller ved at gå til indstillingsfanen på GitHub og rulle til siderne. Du skal se et grønt felt, der viser, hvor dit websted er blevet offentliggjort:

Du vil også bemærke, at du også nemt kan ændre dit tema herfra. GitHub giver et par standardtemaer til Jekyll, men du kan selvfølgelig også lave dine egne.

Hvis dit websted siger, at det er offentliggjort, men ser tomt ud, skal du muligvis gøre en hård opdatering eller prøve at se på dit websted i et privat vindue. Dette kan synes åbenlyst, men det får mig næsten hver gang jeg opretter en ny Jekyll-instans.

Hvis alt gik efter planen, skulle dit websted se sådan ud:

Derefter - på få minutter har du oprettet og implementeret et statisk websted med GitHub-sider. Men du vil sandsynligvis være i stand til at lægge noget indhold på din side.

Jeg lovede, at dette kun ville tage ti minutter, så jeg dykker ikke ned i alle detaljerne på siderne, forsiden eller det flydende skabelonsprog. Det er et indlæg til en anden dag. Men jeg vil dele, hvordan du opretter dit første indlæg.

Tilbage i din teksteditor åbner du mappen “_posts”. Der er allerede et indlæg, der byder dig velkommen til din nye blog. Opret en ny markdown-fil, og gem den med et navn i dette format: YEAR-MONTH-DAY-TITLE. Markdown (se nedenfor):

Et Jekyll-indlæg indeholder to sektioner: forside og krop.

Forsiden giver specifikke instruktioner til Jekyll, såsom hvad titlen på indlægget skal være, hvilket layout der skal bruges, og hvornår indlægget blev skrevet.

Forsiden er meget tilpasselig. For eksempel ville jeg have, at mine indlæg skulle have heltebilleder, så jeg oprettede et lead_imagetag og placerede en syntaks i mit layout for specifikt at kontrollere om blybilleder i hvert indlægs forreste sag. Det flydende skabelonsprog gør det nemt at trække indhold fra forsiden ind i dit tema.

Der er meget mere, du kan gøre med frontmateriale, men lad os starte med et generisk eksempel.

Standardforsiden ser sådan ud:

— layout: post title: "Welcome to Jekyll!" date: 2019-11-09 18:07:11 -0600 categories: jekyll update — 
  • Layout fortæller Jekyll, hvilket layout du vil have indholdet vist på. Du kan have flere layouts til forskellige sider eller indlægstyper.
  • Postens titel
  • Postdatoen
  • Kategorier, som i det væsentlige er tags. Du kan tilføje så få eller så mange som du vil adskilt af mellemrum.

Efter forsiden kan dit indlæg skrives i Markdown, hvilket giver dig masser af fleksibilitet i at skrive dit indlægs indhold.

Når dit indlæg er færdigt, skal du gemme det og åbne dit terminalvindue.

git commit -am “Publishes first post git push

Efter et minut (og måske en opdatering) kan du se dit indlæg.

Forhåbentlig har du nu et fungerende statisk sted på GitHub-sider oprettet med Jekyll! Hvis du har problemer eller spørgsmål, kan du tweete @tfantina, eller du kan skyde mig en e-mail på [email protected]