{"id":50579,"date":"2023-02-27T13:05:36","date_gmt":"2023-02-27T13:05:36","guid":{"rendered":"https:\/\/kinsta.com\/se\/?p=50579&preview=true&preview_id=50579"},"modified":"2023-09-21T09:51:07","modified_gmt":"2023-09-21T09:51:07","slug":"github-pages","status":"publish","type":"post","link":"https:\/\/kinsta.com\/se\/blog\/github-pages\/","title":{"rendered":"Klara, f\u00e4rdiga, g\u00e5: Skapa en statisk webbplats med GitHub Pages"},"content":{"rendered":"

Med alla de aktuella verktygen och ramarna f\u00f6r webbutveckling s\u00e5 blir det alltmer komplicerat att skapa en webbplats. Ibland s\u00e5 beh\u00f6ver du dock inte ha s\u00e5 mycket interaktivitet p\u00e5 din webbplats. Om du exempelvis fokuserar p\u00e5 att f\u00e5 information till tittaren och inte beh\u00f6ver komplexa funktioner s\u00e5 kan en statisk webbplats vara r\u00e4tt val.<\/p>\n\n

I den h\u00e4r handledningen s\u00e5 f\u00e5r du veta vad en statisk webbplats \u00e4r, inklusive dess f\u00f6rdelar och begr\u00e4nsningar. Du f\u00e5r dessutom l\u00e4ra dig hur du skapar och distribuerar en enkel personlig webbplats som har skapats med HTML och Bootstrap kostnadsfritt med GitHub Pages.

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

Vad \u00e4r GitHub Pages?<\/h2>\n

GitHub<\/a> \u00e4r en webbaserad plattform f\u00f6r att hysa Git-arkiv och samarbeta i programvaruprojekt. Den erbjuder verktyg f\u00f6r att dela och sp\u00e5ra kod\u00e4ndringar och hantera och granska kod. Ut\u00f6ver detta s\u00e5 erbjuds dessutom m\u00f6jligheten att \u00f6ppna och granska pull requests.<\/p>\n

Blanda inte ihop Git och GitHub<\/a>! GitHub \u00e4r en hosting-tj\u00e4nst som m\u00f6jligg\u00f6r samarbete mellan utvecklare. Git \u00e4r ist\u00e4llet den lokala versionskontrollprogramvaran som du anv\u00e4nder f\u00f6r att spara \u00f6gonblicksbilder av l\u00e4get i ditt programvaruprojekt.<\/p>\n

GitHub Pages<\/a> \u00e4r en av de b\u00e4sta funktionerna i GitHub. Det \u00e4r en tj\u00e4nst som g\u00f6r att du kan hosta en statisk webbplats <\/a>direkt fr\u00e5n ett GitHub-arkiv. Som ett resultat s\u00e5 kan du anv\u00e4nda ditt arkiv f\u00f6r att lagra koden och filerna f\u00f6r din webbplats. GitHub publicerar dem sedan automatiskt som en webbplats som du kan komma \u00e5t p\u00e5 n\u00e4tet.<\/p>\n

Sammanfattningsvis s\u00e5 \u00e4r GitHub Pages ett snabbt och enkelt s\u00e4tt att f\u00e5 ig\u00e5ng din webbplats. Det \u00e4r dessutom s\u00e4rskilt anv\u00e4ndbart f\u00f6r att visa upp din portolio<\/a>, projekt med \u00f6ppen k\u00e4llkod eller annat statiskt inneh\u00e5ll.<\/p>\n

Statiska vs. dynamiska webbplatser<\/h3>\n

Som vi har sett s\u00e5 erbjuder GitHub Pages ett s\u00e4tt att distribuera statiska webbplatser<\/a>. Men vad \u00e4r skillnaden mellan en statisk webbplats och en dynamisk webbplats?<\/p>\n

L\u00e5t oss b\u00f6rja med att diskutera inneh\u00e5llet p\u00e5 n\u00e4mnda webbplatser.<\/p>\n

Statiskt inneh\u00e5ll avser de delar av webbplatsen som f\u00f6rblir desamma f\u00f6r alla anv\u00e4ndare. Detta g\u00e4ller oavsett vem de \u00e4r eller vilka \u00e5tg\u00e4rder som de utf\u00f6r p\u00e5 webbplatsen. Inneh\u00e5llet kan exempelvis vara text, bilder och layout p\u00e5 webbplatsen, liksom den underliggande koden och filerna som utg\u00f6r webbplatsen. En statisk webbplats levereras till anv\u00e4ndaren exakt s\u00e5 som den \u00e4r lagrad.<\/p>\n

Dynamiskt inneh\u00e5ll \u00e4ndras beroende p\u00e5 anv\u00e4ndarens handlingar – som att logga in, interagera med en betalv\u00e4gg eller kommentera ett inl\u00e4gg – eller andra faktorer, exempelvis aktuell tid eller plats.<\/p>\n

En webbplats som visar en stillbild av en produkt visar exempelvis alltid samma bild f\u00f6r alla anv\u00e4ndare (statiskt inneh\u00e5ll). En webbplats som visar den aktuella tiden kommer d\u00e4remot att visa en annan tid f\u00f6r varje anv\u00e4ndare beroende p\u00e5 var han eller hon befinner sig (dynamisk).<\/p>\n

Generellt sett s\u00e5 kan man s\u00e4ga att en webbplats \u00e4r statisk om den endast inneh\u00e5ller HTML, CSS och JavaScript<\/a> p\u00e5 frontend<\/a>, utan serverteknik som PHP eller Python<\/a> som interagerar med en databas.<\/p>\n

\"Twitter
Twitter \u00e4r en dynamisk webbplats.<\/figcaption><\/figure>\n

\u00c4ven om det inte \u00e4r m\u00f6jligt att bygga dynamiska webbplatser med GitHub Pages s\u00e5 kan du enkelt bygga en egen webbplats med hj\u00e4lp av ett CMS<\/a> som WordPress<\/a> eller statiska webbplats-generatorer som Gatsby<\/a> eller Hugo<\/a>.<\/p>\n

GitHub Pages viktigaste funktioner<\/h3>\n

L\u00e5t oss se styrkorna hos GitHub Pages som hosting-tj\u00e4nst:<\/p>\n

    \n
  1. Enkel installation och publicering:<\/strong> GitHub Pages g\u00f6r det exempelvis enkelt att komma ig\u00e5ng med n\u00e5gra f\u00e5 enkla steg. Du kan aktivera GitHub Pages f\u00f6r ditt arkiv och sedan ange k\u00e4llan f\u00f6r dina webbplatsfiler. GitHub publicerar d\u00e4refter din webbplats automatiskt och g\u00f6r den tillg\u00e4nglig p\u00e5 en webbadress som \u00e4r baserad p\u00e5 ditt anv\u00e4ndarnamn och arkivnamn.<\/li>\n
  2. Anpassade dom\u00e4ner:<\/strong> Med GitHub Pages s\u00e5 kan du anv\u00e4nda ett eget dom\u00e4nnamn f\u00f6r din webbplats ist\u00e4llet f\u00f6r den standard-webbadress som tillhandah\u00e5lls av GitHub. Som ett resultat s\u00e5 kan du anv\u00e4nda ditt eget varum\u00e4rke och g\u00f6ra det l\u00e4ttare f\u00f6r anv\u00e4ndarna att hitta och komma \u00e5t din webbplats.<\/li>\n
  3. HTTPS-st\u00f6d:<\/strong> GitHub Pages erbjuder st\u00f6d f\u00f6r HTTPS. Detta m\u00f6jligg\u00f6r exempelvis s\u00e4kra anslutningar till din webbplats. St\u00f6det \u00e4r avg\u00f6rande f\u00f6r att bygga upp f\u00f6rtroendet f\u00f6r din webbplats.<\/li>\n
  4. St\u00f6d f\u00f6r Jekyll:<\/strong> GitHub Pages st\u00f6der Jekyll, en statisk webbplats-generator. Den g\u00f6r det m\u00f6jligt att skapa sofistikerade webbplatser med hj\u00e4lp av mallar och andra funktioner. Som ett resultat s\u00e5 blir det enkelt att skapa professionella webbplatser utan att beh\u00f6va skriva all kod fr\u00e5n grunden.<\/li>\n<\/ol>\n

    Begr\u00e4nsningar<\/h3>\n

    Som tidigare n\u00e4mnts s\u00e5 kan du bara skapa statiska webbplatser med GitHub Pages. Om du vill bygga ett komplext projekt med m\u00e5nga funktioner s\u00e5 beh\u00f6ver du andra hosting-tj\u00e4nster<\/a>. Du b\u00f6r dessutom komma ih\u00e5g att du inte kan anv\u00e4nda GitHub Pages f\u00f6r kommersiella \u00e4ndam\u00e5l, exempelvis f\u00f6r att driva ett f\u00f6retag p\u00e5 n\u00e4tet eller e-handel<\/a>.<\/p>\n

    GitHub Pages till\u00e5ter inte att din webbplats \u00e4r st\u00f6rre \u00e4n 1 GB. Detta inneb\u00e4r att filerna i ditt arkiv inte kan \u00f6verstiga den m\u00e4ngden minne. Oftast \u00e4r 1 GB mer \u00e4n tillr\u00e4ckligt f\u00f6r en statisk webbplats; se bara till att komprimera dina bilder<\/a>.<\/p>\n

    Den har dessutom en mjuk bandbreddsgr\u00e4ns p\u00e5 100 GB per m\u00e5nad. Denna m\u00e4ngd bandbredd skulle r\u00e4cka f\u00f6r att distribuera din webbplats till n\u00e5gra tusen personer per m\u00e5nad, och duger om du inte har en s\u00e5 stor m\u00e5lgrupp.<\/p>\n

    Skapa och distribuera med GitHub Pages: Steg f\u00f6r steg-guide<\/h2>\n

    Att skapa en GitHub-sida \u00e4r en enkel och okomplicerad process f\u00f6r hosting av en statisk webbplats. T\u00e4nk p\u00e5 att om du beh\u00f6ver n\u00e5gon form av databas-anslutning, s\u00e5 b\u00f6r du ha en extern databas-leverant\u00f6r<\/a>.<\/p>\n

    I f\u00f6ljande guide s\u00e5 f\u00e5r du l\u00e4ra dig hur du skapar en GitHub-sida fr\u00e5n grunden. Det inkluderar exempelvis skapandet av ett fj\u00e4rrarkiv, byggandet av en responsiv personlig webbplats med HTML<\/a> och distribuering till webben med GitHub.<\/p>\n

    Nu s\u00e4tter vi ig\u00e5ng!<\/p>\n

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

    F\u00f6r att b\u00f6rja s\u00e5 m\u00e5ste du ha ett aktivt GitHub-konto. Om du inte har n\u00e5got s\u00e5dant s\u00e5 g\u00e5r du till deras registreringssida<\/a>. Det borde sedan inte ta mer \u00e4n ett par minuter att fylla i formul\u00e4ret.<\/p>\n

    \"GitHub's
    GitHub’s registreringssida.<\/figcaption><\/figure>\n

    N\u00e4r du har loggat in s\u00e5 b\u00f6r du kunna skapa ett fj\u00e4rr-arkiv.<\/p>\n

    2. Skapa ett fj\u00e4rr-arkiv<\/h3>\n

    Ett arkiv \u00e4r en katalog d\u00e4r du lagrar all kod som \u00e4r relaterad till ett visst projekt.<\/p>\n

    Fr\u00e5n GitHub’s startsida s\u00e5 klickar du p\u00e5 knappen ”Nytt” eller ”Skapa arkiv” som finns i den v\u00e4nstra panelen p\u00e5 webbplatsen. Detta omdirigerar dig sedan till ett formul\u00e4r d\u00e4r du fyller i information om ditt arkiv.<\/p>\n

    \"Skapa
    Skapa ett GitHub-arkiv.<\/figcaption><\/figure>\n

    F\u00f6ljande steg \u00e4r avg\u00f6rande:<\/p>\n

      \n
    1. Ange namnet p\u00e5 ditt arkiv till \"yourusername\".github.io<\/code>.<\/li>\n
    2. Markera knappen Offentligt. Du m\u00e5ste st\u00e4lla in arkivet p\u00e5 Offentligt <\/b>f\u00f6r att publicera din webbplats.<\/li>\n
    3. L\u00e4gg till en README.<\/li>\n<\/ol>\n

      Du kan bara ha ett arkiv f\u00f6r ett visst personligt konto eller en viss organisation. Det \u00e4r d\u00e4rf\u00f6r som namnet p\u00e5 arkivet \u00e4r ditt anv\u00e4ndarnamn och dom\u00e4nen github.io<\/code>. D\u00e4refter s\u00e5 kommer vi att se hur du konfigurerar en webbplats fr\u00e5n ett arkiv.<\/p>\n

      Om du inte har GitHub Pro s\u00e5 kan du bara publicera en GitHub-sida om arkivet \u00e4r offentligt. T\u00e4nk p\u00e5 detta om du inte vill dela k\u00e4llkoden f\u00f6r din webbplats offentligt.<\/p>\n

      Efter detta s\u00e5 b\u00f6r du ha n\u00e5got som liknar f\u00f6ljande:<\/p>\n

      \"Formul\u00e4r
      Formul\u00e4r f\u00f6r GitHub-arkiv.<\/figcaption><\/figure>\n

      Om du redan har den fungerande k\u00e4llkoden f\u00f6r din webbplats s\u00e5 kan du hoppa \u00f6ver det vanliga Git-arbetsfl\u00f6det<\/a> och sl\u00e4ppa filerna direkt till arkivet.<\/p>\n

      Klicka p\u00e5 Add file<\/h3>\n

      F\u00f6r att g\u00f6ra detta s\u00e5 klickar du p\u00e5 menyn Add file<\/code> i ditt arkiv och v\u00e4ljer sedan alternativet Ladda upp filer<\/strong>. V\u00e4lj sedan filerna p\u00e5 din webbplats, med den huvudsakliga HTML-filen med namnet index.html<\/code>. Kom ih\u00e5g att \u00e4ven l\u00e4gga till alla dina CSS- och JavaScript-filer i arkivet.<\/p>\n

      Slutligen s\u00e5 trycker du p\u00e5 knappen Bekr\u00e4fta \u00e4ndringar<\/strong>.<\/p>\n

      \"Ladda
      Ladda upp filer till GitHub.<\/figcaption><\/figure>\n

      I f\u00f6ljande avsnitt s\u00e5 ska vi bygga en enkel personlig webbplats med HTML och Bootstrap. D\u00e4refter s\u00e5 laddar vi upp den till GitHub och konfigurerar den som en offentlig GitHub-sida med en egen dom\u00e4n.<\/p>\n

      3. Bygg en personlig webbplats<\/h3>\n

      Vi b\u00f6rjar med att klona GitHub-arkivet som vi just har skapat. F\u00f6r att g\u00f6ra detta s\u00e5 m\u00e5ste du se till att du redan har Git-klienten<\/a> installerad p\u00e5 din dator. (Om du inte har detta s\u00e5 kan du ta en titt p\u00e5 v\u00e5r handledning om Git och GitHub<\/a>.)<\/p>\n