{"id":49063,"date":"2023-02-27T14:00:07","date_gmt":"2023-02-27T13:00:07","guid":{"rendered":"https:\/\/kinqsta.com\/dk\/?p=49063&preview=true&preview_id=49063"},"modified":"2023-08-24T10:28:09","modified_gmt":"2023-08-24T09:28:09","slug":"github-pages","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/dk\/blog\/github-pages\/","title":{"rendered":"Klar, parat, klar, start: Oprettelse af et statisk websted med GitHub Pages"},"content":{"rendered":"

Med alle de aktuelle hotte webudviklingsv\u00e6rkt\u00f8jer og frameworks bliver det stadig mere kompliceret at skabe et websted. Men nogle gange har du ikke brug for en masse interaktivitet p\u00e5 dit websted. Hvis du fokuserer p\u00e5 at f\u00e5 informationerne ud til beskueren og ikke har brug for kompleks funktionalitet, kan et statisk websted v\u00e6re det rigtige valg.<\/p>\n\n

I denne vejledning l\u00e6rer du, hvad et statisk websted er, herunder dets fordele og begr\u00e6nsninger, og hvordan du gratis opretter og implementerer et simpelt personligt websted, der er oprettet med HTML og Bootstrap, ved hj\u00e6lp af GitHub Pages.

<\/div><\/kinsta-auto-toc><\/p>\n

Hvad er GitHub Pages?<\/h2>\n

GitHub<\/a> er en webbaseret platform til hosting af Git-repositorier og samarbejde om softwareprojekter. Den tilbyder v\u00e6rkt\u00f8jer til deling og sporing af kode\u00e6ndringer, administration og gennemgang af kode samt mulighed for at \u00e5bne og gennemg\u00e5 pull requests.<\/p>\n

Du m\u00e5 ikke forveksle Git og GitHub<\/a>! GitHub er en hostingtjeneste, der g\u00f8r det muligt for udviklere at samarbejde, mens Git er den lokale versionskontrolsoftware, du bruger til at gemme \u00f8jebliksbilleder af status for dit softwareprojekt.<\/p>\n

GitHub Pages<\/a> er en af de bedste funktioner i GitHub. Det er en tjeneste, der giver dig mulighed for at hoste et statisk websted <\/a>direkte fra et GitHub-repository. Det betyder, at du kan bruge dit repository til at gemme koden og filerne p\u00e5 dit websted, og GitHub vil automatisk offentligg\u00f8re dem som et websted, du kan f\u00e5 adgang til online.<\/p>\n

Sammenfattende er GitHub Pages en hurtig og nem m\u00e5de at f\u00e5 dit websted op at k\u00f8re p\u00e5, og det er is\u00e6r nyttigt til at fremvise din portef\u00f8lje<\/a>, open source-projekter eller andet statisk indhold.<\/p>\n

Statiske vs. dynamiske websteder<\/h3>\n

Som vi har set, giver GitHub Pages en m\u00e5de at implementere statiske websteder<\/a> p\u00e5. Men hvad er forskellen mellem et statisk websted og et dynamisk websted?<\/p>\n

Lad os starte med at diskutere indholdet p\u00e5 de n\u00e6vnte websteder.<\/p>\n

Statisk indhold henviser til de elementer p\u00e5 webstedet, der forbliver de samme for alle brugere, uanset hvem de er, eller hvilke handlinger de foretager p\u00e5 webstedet. Dette kan omfatte ting som tekst, billeder og layout p\u00e5 webstedet samt den underliggende kode og de filer, som webstedet best\u00e5r af. Et statisk websted leveres til brugeren pr\u00e6cis som det er gemt.<\/p>\n

Dynamisk indhold er derimod indhold, der \u00e6ndrer sig p\u00e5 baggrund af brugerens handlinger – f.eks. ved at logge ind, interagere med en betalingsmur eller kommentere et indl\u00e6g – eller andre faktorer som f.eks. det aktuelle tidspunkt eller den aktuelle placering.<\/p>\n

Et websted, der f.eks. viser et stillbillede af et produkt, vil altid vise det samme billede til alle brugere (statisk). P\u00e5 den anden side vil et websted, der viser den aktuelle tid, vise et andet tidspunkt for hver bruger afh\u00e6ngigt af deres placering (dynamisk).<\/p>\n

Generelt kan man sige, at et websted er statisk, hvis det kun indeholder HTML, CSS og JavaScript<\/a> p\u00e5 frontend<\/a>, og der ikke er serverteknologier som PHP eller Python<\/a>, der interagerer med en database.<\/p>\n

\"Kinstas
Twitter er et dynamisk websted.<\/figcaption><\/figure>\n

Selv om det ikke er muligt at bygge dynamiske websteder ved hj\u00e6lp af GitHub Pages, kan du nemt bygge dit eget ved hj\u00e6lp af et CMS<\/a> som WordPress<\/a> eller statiske webstedsgeneratorer som Gatsby<\/a> eller Hugo<\/a>.<\/p>\n

GitHub Pages vigtigste funktioner<\/h3>\n

Lad os se styrkerne ved GitHub Pages som en hosting-tjeneste:<\/p>\n

    \n
  1. Nem ops\u00e6tning og offentligg\u00f8relse:<\/strong> GitHub Pages g\u00f8r det nemt at komme i gang med f\u00e5 enkle trin. Du kan aktivere GitHub Pages for dit repository og angive kilden til dine webstedsfiler, hvorefter GitHub automatisk udgiver dit websted og g\u00f8r det tilg\u00e6ngeligt p\u00e5 en URL baseret p\u00e5 dit brugernavn og repository-navn.<\/li>\n
  2. Brugerdefinerede dom\u00e6ner:<\/strong> Med GitHub Pages kan du bruge et brugerdefineret dom\u00e6nenavn 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\u00f8re det lettere for brugerne at finde og f\u00e5 adgang til dit websted.<\/li>\n
  3. HTTPS-underst\u00f8ttelse:<\/strong> GitHub Pages tilbyder underst\u00f8ttelse af HTTPS, hvilket giver mulighed for sikre forbindelser til dit websted. Dette er afg\u00f8rende for at skabe tillid til dit websted.<\/li>\n
  4. Jekyll-underst\u00f8ttelse:<\/strong> GitHub Pages underst\u00f8tter Jekyll, en statisk sidegenerator, der giver dig mulighed for at oprette sofistikerede websteder ved hj\u00e6lp af skabeloner og andre funktioner. Dette g\u00f8r det nemt at oprette professionelt udseende websteder uden at skulle skrive al koden fra bunden.<\/li>\n<\/ol>\n

    Begr\u00e6nsninger<\/h3>\n

    Som n\u00e6vnt f\u00f8r kan du kun oprette statiske websteder med GitHub Pages. Hvis du \u00f8nsker at opbygge et komplekst projekt med mange funktionaliteter, skal du bruge andre hostingtjenester<\/a>. Du skal ogs\u00e5 huske p\u00e5, at du ikke kan bruge GitHub Pages til kommercielle form\u00e5l, f.eks. til at drive en onlineforretning eller e-handel<\/a>.<\/p>\n

    GitHub Pages tillader ikke, at dit websted er st\u00f8rre end 1 GB, hvilket betyder, at filerne i dit repository ikke kan overskride denne m\u00e6ngde hukommelse. Det meste af tiden er 1 GB mere end nok til et statisk websted; du skal blot s\u00f8rge for at komprimere dine billeder<\/a>.<\/p>\n

    Den har ogs\u00e5 en bl\u00f8d b\u00e5ndbreddegr\u00e6nse p\u00e5 100 GB pr. m\u00e5ned. Denne m\u00e6ngde b\u00e5ndbredde ville v\u00e6re nok til at distribuere dit websted til et par tusinde personer om m\u00e5neden, s\u00e5 medmindre du har et stort publikum, vil du v\u00e6re godt k\u00f8rende med denne metode.<\/p>\n

    Oprettelse og implementering med GitHub-sider: Trin-for-trin-guide<\/h2>\n

    Oprettelse af en GitHub-side er en enkel og ligetil proces til at hoste et statisk websted. Husk p\u00e5, at hvis du har brug for en form for databaseforbindelse, skal du have en ekstern databaseudbyder<\/a>.<\/p>\n

    I den f\u00f8lgende vejledning l\u00e6rer du, hvordan du opretter en GitHub-side fra bunden. Det omfatter oprettelse af et eksternt repository, opbygning af et responsivt personligt websted med HTML<\/a> og udrulning til internettet med GitHub.<\/p>\n

    Lad os komme i gang!<\/p>\n

    1. Tilmeld dig p\u00e5 GitHub<\/h3>\n

    For at starte med det hele skal du have en aktiv GitHub-konto. Hvis du ikke har en, kan du g\u00e5 til deres tilmeldingsside<\/a>. Det burde ikke tage mere end et par minutter at udfylde formularen.<\/p>\n

    \"GitHub
    GitHub tilmeldingsside.<\/figcaption><\/figure>\n

    N\u00e5r du har tilmeldt dig, b\u00f8r du kunne oprette et fjernrepository.<\/p>\n

    2. Opret et fjernrepository<\/h3>\n

    Et repository er en mappe, hvor du gemmer al den kode, der er relateret til et bestemt projekt.<\/p>\n

    Fra GitHub-hjemmesiden skal du klikke p\u00e5 knappen “New” eller “Create repository”, der er placeret i venstre panel p\u00e5 webstedet. Dette vil omdirigere dig til en formular, hvor du udfylder oplysningerne om dit repo.<\/p>\n

    \"GitHub-hjemmesiden
    Opret et GitHub-repositorium.<\/figcaption><\/figure>\n

    Disse n\u00e6ste trin er afg\u00f8rende:<\/p>\n

      \n
    1. Indstil navnet p\u00e5 dit repository til \"yourusername\".github.io<\/code>.<\/li>\n
    2. Mark\u00e9r knappen public (offentlig). Du skal indstille repositoryet til Public<\/strong> for at offentligg\u00f8re dit websted.<\/li>\n
    3. Tilf\u00f8j en README.<\/li>\n<\/ol>\n

      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<\/code> -dom\u00e6net. Senere vil vi se, hvordan du opretter et websted fra et repository.<\/p>\n

      Medmindre du har GitHub Pro, kan du kun udgive en GitHub-side, hvis repositoryet er offentligt. Husk dette, hvis du ikke \u00f8nsker at dele kildekoden til dit websted offentligt.<\/p>\n

      Herefter b\u00f8r du have noget i stil med f\u00f8lgende:<\/p>\n

      \"Opret
      Form af GitHub-repo.<\/figcaption><\/figure>\n

      Hvis du allerede har den fungerende kildekode til dit websted, kan du springe den almindelige Git-arbejdsgang<\/a> over og smide filerne direkte ind i repo’en i stedet.<\/p>\n

      For at g\u00f8re dette skal du klikke p\u00e5 menuen Add file<\/code> i dit repository og v\u00e6lge indstillingen Upload filer<\/strong>. V\u00e6lg derefter filerne p\u00e5 dit websted, med den vigtigste HTML-fil med navnet index.html<\/code>. Husk ogs\u00e5 at l\u00e6gge alle dine CSS- og JavaScript-filer i repositoryet.<\/p>\n

      Til sidst skal du trykke p\u00e5 knappen Commit changes (Indberet \u00e6ndringer)<\/strong>.<\/p>\n

      \"Upload
      Upload filer til GitHub.<\/figcaption><\/figure>\n

      I det f\u00f8lgende 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\u00e6ne.<\/p>\n

      3. Opbygning af et personligt websted<\/h3>\n

      Vi starter med at klone den GitHub-repo, vi lige har oprettet. For at g\u00f8re dette skal du s\u00f8rge for, at du allerede har Git-klienten<\/a> installeret p\u00e5 din computer. (Hvis du ikke har det, kan du tage et kig p\u00e5 vores vejledning om Git og GitHub<\/a>)<\/p>\n