Med alle de aktuelle hotte webudviklingsværktøjer og frameworks bliver det stadig mere kompliceret at skabe et websted. Men nogle gange har du ikke brug for en masse interaktivitet på dit websted. Hvis du fokuserer på at få informationerne ud til beskueren og ikke har brug for kompleks funktionalitet, kan et statisk websted være det rigtige valg.
I denne vejledning lærer du, hvad et statisk websted er, herunder dets fordele og begrænsninger, og hvordan du gratis opretter og implementerer et simpelt personligt websted, der er oprettet med HTML og Bootstrap, ved hjælp af GitHub Pages.
Hvad er GitHub Pages?
GitHub er en webbaseret platform til hosting af Git-repositorier og samarbejde om softwareprojekter. Den tilbyder værktøjer til deling og sporing af kodeændringer, administration og gennemgang af kode samt mulighed for at åbne og gennemgå pull requests.
Du må ikke forveksle Git og GitHub! GitHub er en hostingtjeneste, der gør det muligt for udviklere at samarbejde, mens Git er den lokale versionskontrolsoftware, du bruger til at gemme øjebliksbilleder af status for dit softwareprojekt.
GitHub Pages er en af de bedste funktioner i GitHub. Det er en tjeneste, der giver dig mulighed for at hoste et statisk websted direkte fra et GitHub-repository. Det betyder, at du kan bruge dit repository til at gemme koden og filerne på dit websted, og GitHub vil automatisk offentliggøre dem som et websted, du kan få adgang til online.
Sammenfattende er GitHub Pages en hurtig og nem måde at få dit websted op at køre på, og det er især nyttigt til at fremvise din portefølje, open source-projekter eller andet statisk indhold.
Statiske vs. dynamiske websteder
Som vi har set, giver GitHub Pages en måde at implementere statiske websteder på. Men hvad er forskellen mellem et statisk websted og et dynamisk websted?
Lad os starte med at diskutere indholdet på de nævnte websteder.
Statisk indhold henviser til de elementer på webstedet, der forbliver de samme for alle brugere, uanset hvem de er, eller hvilke handlinger de foretager på webstedet. Dette kan omfatte ting som tekst, billeder og layout på webstedet samt den underliggende kode og de filer, som webstedet består af. Et statisk websted leveres til brugeren præcis som det er gemt.
Dynamisk indhold er derimod indhold, der ændrer sig på baggrund af brugerens handlinger – f.eks. ved at logge ind, interagere med en betalingsmur eller kommentere et indlæg – eller andre faktorer som f.eks. det aktuelle tidspunkt eller den aktuelle placering.
Et websted, der f.eks. viser et stillbillede af et produkt, vil altid vise det samme billede til alle brugere (statisk). På den anden side vil et websted, der viser den aktuelle tid, vise et andet tidspunkt for hver bruger afhængigt af deres placering (dynamisk).
Generelt kan man sige, at et websted er statisk, hvis det kun indeholder HTML, CSS og JavaScript på frontend, og der ikke er serverteknologier som PHP eller Python, der interagerer med en database.
Selv om det ikke er muligt at bygge dynamiske websteder ved hjælp af GitHub Pages, kan du nemt bygge dit eget ved hjælp af et CMS som WordPress eller statiske webstedsgeneratorer som Gatsby eller Hugo.
GitHub Pages vigtigste funktioner
Lad os se styrkerne ved GitHub Pages som en hosting-tjeneste:
- Nem opsætning og offentliggørelse: GitHub Pages gør det nemt at komme i gang med få enkle trin. Du kan aktivere GitHub Pages for dit repository og angive kilden til dine webstedsfiler, hvorefter GitHub automatisk udgiver dit websted og gør det tilgængeligt på en URL baseret på dit brugernavn og repository-navn.
- Brugerdefinerede domæner: Med GitHub Pages kan du bruge et brugerdefineret domænenavn til dit websted i stedet for den standard-URL, der leveres af GitHub. Dette giver dig mulighed for at bruge dit eget branding og gøre det lettere for brugerne at finde og få adgang til dit websted.
- HTTPS-understøttelse: GitHub Pages tilbyder understøttelse af HTTPS, hvilket giver mulighed for sikre forbindelser til dit websted. Dette er afgørende for at skabe tillid til dit websted.
- Jekyll-understøttelse: GitHub Pages understøtter Jekyll, en statisk sidegenerator, der giver dig mulighed for at oprette sofistikerede websteder ved hjælp af skabeloner og andre funktioner. Dette gør det nemt at oprette professionelt udseende websteder uden at skulle skrive al koden fra bunden.
Begrænsninger
Som nævnt før kan du kun oprette statiske websteder med GitHub Pages. Hvis du ønsker at opbygge et komplekst projekt med mange funktionaliteter, skal du bruge andre hostingtjenester. Du skal også huske på, at du ikke kan bruge GitHub Pages til kommercielle formål, f.eks. til at drive en onlineforretning eller e-handel.
GitHub Pages tillader ikke, at dit websted er større end 1 GB, hvilket betyder, at filerne i dit repository ikke kan overskride denne mængde hukommelse. Det meste af tiden er 1 GB mere end nok til et statisk websted; du skal blot sørge for at komprimere dine billeder.
Den har også en blød båndbreddegrænse på 100 GB pr. måned. Denne mængde båndbredde ville være nok til at distribuere dit websted til et par tusinde personer om måneden, så medmindre du har et stort publikum, vil du være godt kørende med denne metode.
Oprettelse og implementering med GitHub-sider: Trin-for-trin-guide
Oprettelse af en GitHub-side er en enkel og ligetil proces til at hoste et statisk websted. Husk på, at hvis du har brug for en form for databaseforbindelse, skal du have en ekstern databaseudbyder.
I den følgende vejledning lærer du, hvordan du opretter en GitHub-side fra bunden. Det omfatter oprettelse af et eksternt repository, opbygning af et responsivt personligt websted med HTML og udrulning til internettet med GitHub.
Lad os komme i gang!
1. Tilmeld dig på GitHub
For at starte med det hele skal du have en aktiv GitHub-konto. Hvis du ikke har en, kan du gå til deres tilmeldingsside. Det burde ikke tage mere end et par minutter at udfylde formularen.
Når du har tilmeldt dig, bør du kunne oprette et fjernrepository.
2. Opret et fjernrepository
Et repository er en mappe, hvor du gemmer al den kode, der er relateret til et bestemt projekt.
Fra GitHub-hjemmesiden skal du klikke på knappen “New” eller “Create repository”, der er placeret i venstre panel på webstedet. Dette vil omdirigere dig til en formular, hvor du udfylder oplysningerne om dit repo.
Disse næste trin er afgørende:
- Indstil navnet på dit repository til
"yourusername".github.io. - Markér knappen public (offentlig). Du skal indstille repositoryet til Public for at offentliggøre dit websted.
- Tilføj en README.
Du kan kun have et repository for en given personlig konto eller organisation. Det er derfor, at repositoryets navn er dit brugernavn og github.io -domænet. Senere vil vi se, hvordan du opretter et websted fra et repository.
Medmindre du har GitHub Pro, kan du kun udgive en GitHub-side, hvis repositoryet er offentligt. Husk dette, hvis du ikke ønsker at dele kildekoden til dit websted offentligt.
Herefter bør du have noget i stil med følgende:
Hvis du allerede har den fungerende kildekode til dit websted, kan du springe den almindelige Git-arbejdsgang over og smide filerne direkte ind i repo’en i stedet.
For at gøre dette skal du klikke på menuen Add file i dit repository og vælge indstillingen Upload filer. Vælg derefter filerne på dit websted, med den vigtigste HTML-fil med navnet index.html. Husk også at lægge alle dine CSS- og JavaScript-filer i repositoryet.
Til sidst skal du trykke på knappen Commit changes (Indberet ændringer).
I det følgende afsnit vil vi bygge et simpelt personligt websted med HTML og Bootstrap. Derefter uploader vi det til GitHub og opretter det som en GitHub public page med et brugerdefineret domæne.
3. Opbygning af et personligt websted
Vi starter med at klone den GitHub-repo, vi lige har oprettet. For at gøre dette skal du sørge for, at du allerede har Git-klienten installeret på din computer. (Hvis du ikke har det, kan du tage et kig på vores vejledning om Git og GitHub)
Gå til fanen code i dit repository, og kopier SSH-URL’en i SHH-indstillingen.
Start derefter en terminal eller en kommandolinje. På de fleste Linux-distributioner og macOS kan du bruge genvejen Ctrl + Alt + T, eller kigge i dit systems app-menu efter Terminal. På Windows kan du bruge Git BASH, der er installeret som standard med Git, CMD, PowerShell eller en GUI-klient.
På din terminal skal du skrive git clone og den URL, du har kopieret. Dette vil downloade og oprette en kopi af fjernrepositoriet på din lokale maskine, så du kan bygge dit websted.
Indtast derefter den nye mappe med navnet yourusername.github.io med cd og ls. Du bør se .git-mappen, som indeholder konfigurationen og metadataene for dit projekt samt README.md-filen, hvis du har oprettet en sådan.
Åbn din foretrukne teksteditor (f.eks. Sublime Text), og lad os begynde at oprette dit websted.
I roden af repositoriet skal du oprette en fil ved navn index.html (dette navn er påkrævet af GitHub Pages) og skriv den typiske HTML-kodestruktur:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kinsta User</title>
</head>
<body>
</body>
</html>Som vi sagde tidligere, skal vi bruge Bootstrap 5.0, en open source CSS-ramme, der hjælper os med at bygge responsive websteder lettere. Som du vil se, behøver vi ikke at bruge brugerdefineret CSS til dette særlige websted.
For at få Bootstrap ind på vores side skal vi inkludere den kompilerede CSS og JavaScript via en CDN. Indsæt følgende kode inde i HTML <head> for at kunne bruge Bootstrap CSS:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">På samme måde skal vi også inkludere Devicon CDN’en for at kunne bruge SVG-ikoner fra populære programmeringssprog og teknologier uden de store problemer:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">For at inkludere JavaScript skal du indsætte følgende kode lige over slutningen af </body> -tagget:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>Vi starter med at oprette en header til vores websted. Det bliver en mørk overskrift med links til vores indeksside og to andre sider – “Projekter” og “Læselog” – som du kan oprette senere:
<nav class="navbar navbar-dark navbar-expand-lg bg-dark ">
<div class="container-fluid">
<div class="mx-4">
<a class="navbar-brand" href="#">Kinsta User</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reading Log</a>
</li>
</ul>
</div>
</div>
</nav>Vi bruger Bootstrap-wrapperen navbar og navbar-expand-lg til at skabe en responsiv container, der klapper sammen, når displaybredden er mindre end 992px. Dette sker på grund af gridindstillingen lg. Hvis du vil vide mere om gitterindstillinger, kan du tage et kig på Bootstraps layout-side.
Lad os nu oprette to responsive kolonner inden for en container: en til et gratis billede fra Unsplash og en anden til en beskrivelse af os selv:
<div class="container my-4 ">
<div class="row justify-content-center">
<div class="col-lg mb-lg-4">
<img src="image.jpg" class="img-fluid" alt="" srcset="">
</div>
<div class="col-lg mx-2 align-self-center">
<div class="my-3">
<h1 class="text-center">I'm a Kinsta User</h1>
<p>As a passionate software developer, I am deeply enthusiastic about creating and
developing software applications. I am constantly learning and experimenting with new
technologies and approaches, and I have a strong desire to create innovative and effective
solutions to complex problems. I am driven by my curiosity and love for problem-solving, and
I
am committed to producing high-quality, well-designed software that meets the needs of
users.
</p>
</div>
</div>
</div>
</div>Som du kan se, får vi et billede fra en lokal fil, så det skal være i repositoriet, når vi skubber vores ændringer til GitHub-repo’en.
Endelig bruger vi SVG-ikoner fra Devicon inde i vores Bootstrap-container sammen med en smule intern CSS for at få vores færdigheder til at skille sig ud:
<div class="my-4">
<div class="text-center mb-4">
<h1>My Skills</h1>
</div>
<div class="row ">
<style>
I {
font-size: 4em;
}
</style>
<div class="col">
<div class="text-center">
<h4>WordPress</h4>
<i class="devicon-wordpress-plain"></i>
</div>
</div>
<div class="col">
<div class="text-center">
<h4>Django</h4>
<i class="devicon-django-plain"></i>
</div>
</div>
<div class="col">
<div class="text-center">
<h4>Python</h4>
<i class="devicon-python-plain"></i>
</div>
</div>
<div class="col">
<div class="text-center">
<h4>GitHub</h4>
<i class="devicon-github-original" ></i>
</div>
</div>
</div>
</div>Da vi bruger HTML-tagget <i>, kan vi behandle det som en skrifttype. Vi indstiller således størrelsen på vores logoer til 4 em ved at deklarere den i style -tagget.
Her er det endelige resultat af dette enkle personlige websted:
Vidste du, at over 50% af trafikken på websites kommer fra mobile enheder? Fordi vi brugte Bootstrap, sparede vi en masse CSS-kodning og fik også et responsivt website, som du kan se nedenfor.
Du kan tilpasse denne side så meget som du vil. Her er den fulde kildekode på GitHub, til din rådighed.
Du kan endda vedhæfte et headless CMS som Ghost ved hjælp af en af vores fuldt udbyggede Applikation Hosting-løsninger. Du kan oprette forbindelse direkte til dit GitHub-repositorium via dit MyKinsta-dashboard og få dit nye websted op at køre på få minutter.
Det er tid til at skubbe dine filer. For at gøre dette skal du køre følgende kommandoer i din terminal på det øverste niveau i dit projekt.
git add .
git commit -m "Added website source code and image"
git pushNu kan vi bruge dette websted til at opsætte vores GitHub-side.x
4. Udgivelse af en bruger GitHub-side
Så snart du skubber index.html til det eksterne repository, der er opkaldt efter dit brugernavn, vil GitHub automatisk starte en arbejdsgang for at oprette din side online. Det kan tage et par minutter, men du får automatisk dit statiske websted op at køre.
URL’en for dit websted vil være noget i retning af følgende: https://kinstauser.github.io/
Hvis dit websted ikke er online efter 10 minutter, kan du prøve at foretage en dummy-ændring i din kode (f.eks. tilføje et mellemrum) og skubbe igen for at genaktivere GitHub Pages’ opbygningsproces.
5. Udgivelse af en GitHub-side på et repoitory
Indtil nu har vi oprettet en brugerside, men hvad nu hvis vi vil have flere offentliggjorte GitHub-sider? Så skal vi gå med et projektwebsted.
Som eksempel bruger vi det HTML-teknologisite, som vi oprettede i Git for webudvikling-tutorialen.
Den nemmeste måde er at gå til fanen Indstillinger i vores repository og derefter til indstillingen Sider inde i afsnittet “Code and automation” (kode og automatisering).
Vælg kilden Deploy from a branch, og klik på den gren, du ønsker at distribuere filerne fra. Det anbefales i høj grad at udgive fra hovedgrenen, men opret funktioner og rette fejl ved hjælp af hjælpeforgreninger og derefter flette dem sammen. På denne måde introducerer du ikke så let fejl på det offentliggjorte websted.
Når du har valgt gren, skal du vælge den mappe, du vil servere filerne fra – normalt roden (/) – og klikke på gem.
Igen skal du vente i et par minutter. Dit websted skulle være tilgængeligt på "yourusername".github.io/.
Hvis du vil afpublicere et repository-site, kan du gå til Settings, derefter Pages og klikke på indstillingen med de tre prikker. Du vil se en boks med meddelelsen Unpublish site (Afpublér websted).
Godt! Du har fået webstedet for dit open source-projekt op at køre, men selve domænenavnet er langt og bestemt ikke let at huske. Lad os se, hvordan vi kan forbedre dette.
6. Opsætning af et brugerdefineret domæne
Den nemmeste måde at oprette et brugerdefineret domæne til en GitHub-side på og sikre, at det fungerer, er at gå til din DNS-udbyder og oprette fire A-records for IP-adresserne på GitHub-siderne:
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153Du skal også oprette en CNAME-record med yourusername.github.io som mål. Normalt er DNS-ændringer langsomme, så vær tålmodig, det, kan tage op til en hel dag.
Når du har gjort dette, skal du gå til afsnittet Custom domain (Brugerdefineret domæne) i indstillingerne for dit repo, skrive dit domæne, klikke på knappen Save (Gem) og vente på, at GitHub kontrollerer dit brugerdefinerede domæne.
Hvis din DNS understøtter det, skal du også markere feltet Enforce HTTPS for kun at servere dit websted over HTTPS.
Tillykke! Hvis du har fulgt med indtil dette punkt i vejledningen, har du et statisk websted, der er hostet gratis i GitHub Pages.
Bedste fremgangsmåder for GitHub Pages
Inden vi skilles, er her nogle bedste praksis, som du bør tage hensyn til, når du udgiver et GitHub-websted:
- Du må aldrig lave direkte commits til den gren, du udgiver fra. Lav ændringer i andre grene, og opret derefter en pull request.
- Vælg et godt domæne til dit websted, hvis du har råd til det. Det er en af de vigtigste beslutninger for dit personlige brand eller projektbrand.
- Brug ikke GitHub Pages til kommercielle formål, f.eks. til at oprette et e-handelssite.
- Vurder dine behov. Det er dejligt at kunne udgive et statisk websted gratis, men hvis du forventer meget trafik eller ønsker komplekse funktioner, er det bedst at betale for en god hostingtjeneste.
Opsummering
Webudvikling bliver mere og mere kompliceret for hver dag, der går. Statiske websteder har været her siden internettets opståen, og de er en fantastisk måde at starte med at skabe projekter på.
I denne vejledning har du lært, hvad statiske websteder er, og hvordan du opretter dem online ved hjælp af GitHub Pages. Du oprettede et simpelt personligt websted ved hjælp af Bootstrap og offentliggjorde det som dit GitHub-brugerwebsted. Du lærte også, hvordan du får et projektwebsted op at køre, og hvordan du afpublicerer det om nødvendigt.
Alt i alt er GitHub Pages en praktisk og effektiv måde at hoste dit statiske websted gratis på. Uanset om du ønsker at vise din portefølje frem, dele dine open source-projekter eller begynde at skabe en online tilstedeværelse, er GitHub Pages et glimrende valg. Og når du får nok trafik eller er klar til at oprette et komplet websted, kan du problemfrit skifte til andre applikation hosting-tjenester som Kinsta uden at gå glip af noget.
Daniel er en selvlært Python-udvikler, teknisk skribent og langtidslærer. Han nyder at skabe software fra bunden og forklare denne proces gennem fantastiske artikler. Følg ham på X: @DaniDiazTech
Skriv et svar