Statiske hjemmesider er nemme at oprette og lynhurtige at bruge. Hvis du lærer at bruge Hugo, kan du generere temabaserede statiske websteder på Linux. At oprette hjemmesider er sjovt igen!
Indholdsfortegnelse
Hugo Website Generator
Et statisk websted er et, der ikke opretter eller ændrer websider i farten. Der er ingen baggrundsdatabase, e-handelsbehandling eller PHP. Alle websiderne er helt færdigbyggede og kan serveres til besøgende meget hurtigt.
Men det betyder ikke, at et statisk websted skal være kedeligt. De kan bruge alt, hvad HTML giver, plus cascading style sheets (CSS), og JavaScript. De kan også nemt få ting som billedkarruseller og websider til at glide hen over baggrundsbilleder.
Hugo-webstedsgeneratoren arbejder med en skabelon og alt indhold, du har oprettet, for at generere en færdig hjemmeside. Du kan derefter placere den på en hostingplatform og straks have en live hjemmeside.
Hugo bruger nedskrivning for de sider og blogindlæg, du opretter. Markdown er næsten det enkleste opmærkningssprog, der findes, hvilket gør det nemt at vedligeholde dit websted.
Hugos konfigurationsfiler er i Toms åbenlyse, minimale sprog (TOML) og YAML Ain’t Markup Language (YAML), som er lige så nemme. En anden bonus er, at Hugo er lynende hurtig – nogle websteder indlæses på mindre end et sekund. Den har mange skabeloner, du kan vælge imellem, og der kommer hele tiden flere til, så det er nemt at komme i gang. Du skal bare vælge en skabelon og tilføje noget indhold, der gør den til din.
Hugo fungerer også som en lillebitte webserver lige på din computer. Du kan se en liveversion af dit websted, mens du designer og opretter det, og hver gang du tilføjer et nyt indlæg. Den opdaterer også automatisk hver gang du “Gem” i editoren, så du med det samme kan se effekten af dine ændringer i din browser.
Hosting af dit websted
Når det kommer til at hoste dit statiske websted, er du forkælet med valg. De fleste virksomheder tilbyde gratis hosting til personlig eller open source brug. Du kan selvfølgelig også vælge et almindeligt webhostingfirma, som en af følgende:
Kunstflyvning
Amazon S3
Azure
CloudFront
DreamHost
Firebase
GitHub-sider
Kom så far
Google Cloud Storage
Heroku
GitLab-sider
Netlify
Rackspace
Surge
Installerer Hugo
Sammen med Hugo skal du have Git installeret. Git var allerede installeret på Fedora 32 og Manjaro 20.0.1. På Ubuntu 20.04 (Focal Fossa,) blev den tilføjet automatisk som en afhængig af Hugo.
For at installere Hugo på Ubuntu skal du bruge denne kommando:
sudo apt-get install hugo
På Fedora skal du skrive:
sudo dnf install hugo
Kommandoen til Manjaro er:
sudo pacman -Syu hugo
Oprettelse af en hjemmeside med Hugo
Når vi beder Hugo om at lave et nyt websted, opretter det et sæt mapper til os. Disse vil indeholde de forskellige elementer på vores hjemmeside. Dette er dog ikke den endelige hjemmeside, der vil blive uploadet til din hostingplatform. Disse mapper vil indeholde temaet, konfigurationsfilerne, indholdet og billederne, som Hugo vil bruge som input, når vi beder den om at bygge den faktiske hjemmeside.
Det er ligesom forskellen mellem kildekode og et kompileret program. Kildekoden er de ting, som compileren bruger til at generere det endelige produkt. På samme måde tager Hugo indholdet af disse mapper og genererer en fungerende hjemmeside.
Kommandoen, vi skal køre, vil oprette en mappe med samme navn som det websted, du vil oprette. Denne mappe vil blive oprettet i den mappe, hvor du kører kommandoen.
Så gå til den mappe, hvor du vil have din hjemmeside oprettet. Vi bruger vores hjemmemappe, så vi skriver følgende:
hugo new site geek-demo
Dette opretter en “nørd-demo”-mappe. Vi skriver følgende for at skifte til den mappe og køre ls:
cd geek-demo/
ls
Vi ser “config.toml”-konfigurationsfilen og de mapper, der er blevet oprettet. Disse er dog stort set tomme, da dette kun er stilladset til hjemmesiden.
Initialisering af Git og tilføjelse af et tema
Vi skal tilføje et tema, så Hugo ved, hvordan vi ønsker, at det færdige websted skal se ud. For at gøre dette skal vi initialisere Git. I rodmappen på dit websted (den, der indeholder filen “config.toml”), kør denne kommando:
git init
Der er hundredvis af temaer du kan vælge imellem, og hver enkelt har en webside, der beskriver det. Du kan køre en demo af et tema og finde ud af, hvad kommandoen er for at downloade det. Vi bruger en der hedder Meghna.
For at inkorporere dette tema på vores hjemmeside, skal vi skifte til vores “Themes” mappe og køre git clone kommandoen:
cd themes
git clone https://github.com/themefisher/meghna-hugo.git
Git viser nogle beskeder, efterhånden som det skrider frem. Når det er færdigt, bruger vi ls til at se den mappe, der indeholder temaet:
ls
Hugo-temaer inkluderer et fungerende eksempelwebsted. Du skal kopiere dette standardwebsted ind i mapperne på dit websted.
Først skal du vende tilbage til rodmappen på dit websted. Vi bruger muligheden -r (rekursiv) cp til at inkludere undermapper, og -f (force) mulighed for at overskrive eksisterende filer:
cd ..
cp themes/meghna-hugo/exampleSite/* -rf .
Lancering af dit websted lokalt
Vi har gjort nok for at lancere en ny hjemmeside lokalt. Det vil stadig indeholde pladsholderteksten og billederne, men det er blot kosmetiske ændringer. Lad os kontrollere, at de tekniske dele fungerer først.
Vi beder Hugo om at køre sin webserver og bruge muligheden -D (udkast) for at sikre, at alle filer, der kan være tagget med “udkast” er inkluderet på webstedet:
hugo server -D
Billedet nedenfor viser output fra vores hugo-kommando.
Vi får at vide, at Hugo byggede webstedet på 142 millisekunder (vi sagde, at det var hurtigt, ikke?). Den fortæller os også, at vi skal trykke på Ctrl+C for at stoppe serveren, men lade den køre indtil videre.
Åbn din browser og gå til localhost:1313 for at se dit websted.
Ændring af standardwebstedets indhold
Mens det kører sådan, serverer Hugo websiderne fra hukommelsen. Det har ikke skabt hjemmesiden på harddisken, men snarere en arbejdskopi i RAM. Det overvåger dog filerne og billederne på harddisken. Hvis nogen af dem ændres, opdaterer det webstedet i din browser – du behøver ikke engang at trykke på Ctrl+F5.
Åbn et andet terminalvindue og naviger til rodmappen på dit websted. Åbn filen “config.toml” i en editor. Skift “baseURL” til det domæne, som dit websted vil blive hostet på, og skift “titlen” til navnet på dit websted. Gem dine ændringer, men lad editoren være åben.
Hugo registrerer, at der har været ændringer i “config.toml”-filen, så den læser dem, genopbygger webstedet og opdaterer browseren.
Du bør nu se det navn, du valgte til dit websted, på browserfanen. At få øjeblikkelig visuel feedback på gemte ændringer fremskynder processen med at tilpasse et websted betydeligt.
Alle temaer er forskellige, men vi fandt dem, vi plejede at være ret enkle at følge. De forskellige sektioner af hjemmesiden har tydelige navne, ligesom indstillingerne i hver sektion, så det altid er tydeligt, hvad du ændrer.
Og igen, så snart du gemmer en ændring, kan du se, hvad du har ændret i din browser. Hvis du ikke kan lide det, skal du bare vende ændringen og gemme igen.
De forskellige konfigurationsfiler, der styrer webstedet, er hver især dedikeret til et enkelt job og mærket på en meningsfuld måde. Det er ikke svært at spore dem, da der ikke er for mange steder, de kan være i biblioteket. Typisk er de i mappen “Data”.
Fordi vi bruger en tosproget skabelon, er vores engelske konfigurationsfiler i undermappen “En”.
Hvis du åbner filen Data > En > banner.yml i en editor, vil du se samlingen af indstillinger, der styrer bannerområdet på webstedet.
Når du ændrer indstillingerne “Titel” og “Indhold”, ændrer du teksten på bannersiden.
Vi ændrede også “Etiket”-indstillingen, så knapteksten siger “Find ud af mere.” For dit websted vil du sikkert også ønske at ændre billedet.
Så snart du gemmer dine ændringer, vil du se dem i din browser.
Ændring af andre elementer på et websted
Du kan ændre alle de andre elementer på en lignende måde. Du skal bare spore den relevante konfigurationsfil og ændre indstillingerne og teksten, så den passer til dine behov.
Du vil også gerne ændre billederne. Standardbilledet vil blive refereret til i konfigurationsfilen. Du kan nemt finde og tage et kig på det originale billede for at se, hvad dets dimensioner er.
Billeder placeres i mappen “Statisk > Billeder” med undermapper til de forskellige sektioner af webstedet. Placer eventuelle favoritter og logoer direkte i mappen “Statisk > Billeder”.
Tilføjelse af nyt blogindhold
Indtil videre har vi kigget på at ændre det, der allerede er der. Men hvordan tilføjer vi et nyt blogindlæg? Hugo bruger et koncept kaldet “Arketyper” til at skabe nyt indhold. Hvis vi ikke opretter en arketype for vores blogindlæg, vil der blive oprettet en standardfil til os, hver gang vi beder Hugo om at oprette et nyt blogindlæg.
Det er fint, men med en arketype kan vi spare os selv for nogle kræfter og sørge for, at så meget af frontstoffet som muligt er indtastet for os på forhånd.
I dette tema er blogindlæg placeret i Indhold > Engelsk > Blog. Hvis vi åbner et eksisterende blogindlæg i en editor – som “simple-blog-post-1.md” – kan vi se fronten.
Vi skal kopiere den sektion, redigere de aktuelle poster, så den kan bruges som en arketypeskabelon, og derefter gemme den i mappen “Arketyper”. Hvis vi kalder det “blog.md”, vil det automatisk blive brugt som skabelon for nye blogindlæg.
I gedit kan vi gøre dette som følger:
gedit content/english/blog/simple-blog-post-1.md
Fremhæv den øverste sektion inklusive de to stiplede linjer, og tryk derefter på Ctrl+C for at kopiere den. Tryk på Ctrl+N for at starte en ny fil, og derefter Ctrl+V for at indsætte det, du kopierede.
Foretag nu følgende ændringer, og sørg for at efterlade et mellemrum efter kolon (:) i hver linje:
Titel: Skift dette til “{{ replace .Name “-” ” ” | title }}” (inkluder anførselstegnene). En titel for hvert nyt blogindlæg vil automatisk blive indsat. Det er dannet ud fra det filnavn, du sender til hugo new-kommandoen, som vi vil se.
Dato: Skift dette til {{ .Dato }}. Datoen og klokkeslættet for, hvornår bloggen oprettes, indtastes automatisk.
Image_webp: Dette er stien til bloggens overskriftsbillede i webp-format. Hvis temaet ikke kan finde et, vil det bruge billedet fra næste linje.
billede: Dette er stien til bloggens overskriftsbillede i JPEG-format. Du kan lige så godt lade disse pege på standardbillederne. Derefter vil alle blogindlæg have et mellemrumsbillede, selv før du finder, ændrer størrelsen på eller gemmer et brugerdefineret. Når du har gjort det, kan du nemt redigere filnavnet, så det matcher det på dit brugerdefinerede billede.
Forfatter: Skift dette til dit navn.
Beskrivelse: Du skriver en kort beskrivelse af hvert indlæg her. Hvis du ændrer dette til en tom streng (“”), kan du skrive en beskrivelse for hver ny blog uden at skulle redigere gammel tekst.
Gem denne nye fil som “archetypes/blog.md”, og luk derefter gedit. Hugo vil nu bruge denne nye arketype, når du vil oprette et nyt blogindlæg.
Bemærk, at vores fil skal have filtypenavnet “.md”, fordi vi vil bruge markdown til at skrive vores blogindlæg:
hugo new blog/first-new-blog-post-on-this-site.md
Nu vil vi åbne vores nye blogindlæg i en editor:
gedit content/english/blog/first-new-blog-post-on-this-site.md
Vores nye blogindlæg åbner i gedit.
Alle følgende stykker af den forreste sag er blevet tilføjet til os:
Titel: Dette blev udledt af filnavnet. Hvis det har brug for justeringer, kan du redigere det her.
Tid og dato: Disse tilføjes automatisk.
Standardbillede: Du vil sikkert gerne finde et relevant, royaltyfrit billede. Slip det i Statisk > Billeder > Blog. Du skal indtaste det faktiske filnavn på billedet her.
Forfatter: Dit navn tilføjes automatisk.
Beskrivelse: Dette er blevet redigeret.
Skriv bloggen ved hjælp af markdown og brug standardmarkeringen til overskrifter, fed, kursiv, billeder, links og så videre. Hver gang du gemmer din fil, genopbygger Hugo hjemmesiden og opdaterer den i din browser.
Billedet nedenfor viser, hvordan vores nye blogindlæg fremstår på hjemmesiden.
Billedet nedenfor viser, hvordan det nye blogindlæg ser ud på sin egen side.
Når du er færdig med at skrive dit blogindlæg, skal du gemme ændringerne og derefter lukke editoren. Du kan også lukke din browser, fordi vi stopper Hugo-serveren.
Tryk på Ctrl+C i terminalvinduet, hvor Hugo-serveren kører.
Opbygning af hjemmesiden
I rodmappen på dit websted skal du udstede følgende kommando for at bygge dit websted:
hugo
Hugo bygger hjemmesiden og viser antallet af sider og andre komponenter, den har oprettet. Det tog 134 millisekunder at skabe vores.
Hugo opretter en ny mappe kaldet “Offentlig” i rodmappen på din hjemmeside. I mappen “Offentlig” finder du alle de filer, du skal overføre til din hostingplatform.
Bemærk, at du skal uploade filerne og mapperne inde i “Public”-biblioteket til din hostingplatform, ikke selve “Public”-mappen.
Nu kender du det grundlæggende
Hvert tema vil kræve lidt udforskning for at finde ud af, hvordan du kan få det til at se ud, som du ønsker, men det er den sjove del! I betragtning af Hugos evne til at gengive ændringer med det samme i et browservindue, tager intet for lang tid.
Du vil sikkert opleve, at det at skrive din tekst og finde og trimme billeder er de dele af processen, der tager længst tid.
Hugoen dokumentationssiden er også nyttig, men omfattende. Forhåbentlig vil denne grundlæggende gennemgang være nok til at komme i gang.
Hvis du bruger Git og Github, GitLab, eller BitBucket, er der også tilgængelige integrationer til disse platforme. De overvåger dit fjerntliggende Hugo-lager og genopbygger dit live-websted, når du trykker på ændringer til det.