Med alla de aktuella verktygen och ramarna för webbutveckling så blir det alltmer komplicerat att skapa en webbplats. Ibland så behöver du dock inte ha så mycket interaktivitet på din webbplats. Om du exempelvis fokuserar på att få information till tittaren och inte behöver komplexa funktioner så kan en statisk webbplats vara rätt val.
I den här handledningen så får du veta vad en statisk webbplats är, inklusive dess fördelar och begränsningar. Du får dessutom lära dig hur du skapar och distribuerar en enkel personlig webbplats som har skapats med HTML och Bootstrap kostnadsfritt med GitHub Pages.
Vad är GitHub Pages?
GitHub är en webbaserad plattform för att hysa Git-arkiv och samarbeta i programvaruprojekt. Den erbjuder verktyg för att dela och spåra kodändringar och hantera och granska kod. Utöver detta så erbjuds dessutom möjligheten att öppna och granska pull requests.
Blanda inte ihop Git och GitHub! GitHub är en hosting-tjänst som möjliggör samarbete mellan utvecklare. Git är istället den lokala versionskontrollprogramvaran som du använder för att spara ögonblicksbilder av läget i ditt programvaruprojekt.
GitHub Pages är en av de bästa funktionerna i GitHub. Det är en tjänst som gör att du kan hosta en statisk webbplats direkt från ett GitHub-arkiv. Som ett resultat så kan du använda ditt arkiv för att lagra koden och filerna för din webbplats. GitHub publicerar dem sedan automatiskt som en webbplats som du kan komma åt på nätet.
Sammanfattningsvis så är GitHub Pages ett snabbt och enkelt sätt att få igång din webbplats. Det är dessutom särskilt användbart för att visa upp din portolio, projekt med öppen källkod eller annat statiskt innehåll.
Statiska vs. dynamiska webbplatser
Som vi har sett så erbjuder GitHub Pages ett sätt att distribuera statiska webbplatser. Men vad är skillnaden mellan en statisk webbplats och en dynamisk webbplats?
Låt oss börja med att diskutera innehållet på nämnda webbplatser.
Statiskt innehåll avser de delar av webbplatsen som förblir desamma för alla användare. Detta gäller oavsett vem de är eller vilka åtgärder som de utför på webbplatsen. Innehållet kan exempelvis vara text, bilder och layout på webbplatsen, liksom den underliggande koden och filerna som utgör webbplatsen. En statisk webbplats levereras till användaren exakt så som den är lagrad.
Dynamiskt innehåll ändras beroende på användarens handlingar – som att logga in, interagera med en betalvägg eller kommentera ett inlägg – eller andra faktorer, exempelvis aktuell tid eller plats.
En webbplats som visar en stillbild av en produkt visar exempelvis alltid samma bild för alla användare (statiskt innehåll). En webbplats som visar den aktuella tiden kommer däremot att visa en annan tid för varje användare beroende på var han eller hon befinner sig (dynamisk).
Generellt sett så kan man säga att en webbplats är statisk om den endast innehåller HTML, CSS och JavaScript på frontend, utan serverteknik som PHP eller Python som interagerar med en databas.
Även om det inte är möjligt att bygga dynamiska webbplatser med GitHub Pages så kan du enkelt bygga en egen webbplats med hjälp av ett CMS som WordPress eller statiska webbplats-generatorer som Gatsby eller Hugo.
GitHub Pages viktigaste funktioner
Låt oss se styrkorna hos GitHub Pages som hosting-tjänst:
- Enkel installation och publicering: GitHub Pages gör det exempelvis enkelt att komma igång med några få enkla steg. Du kan aktivera GitHub Pages för ditt arkiv och sedan ange källan för dina webbplatsfiler. GitHub publicerar därefter din webbplats automatiskt och gör den tillgänglig på en webbadress som är baserad på ditt användarnamn och arkivnamn.
- Anpassade domäner: Med GitHub Pages så kan du använda ett eget domännamn för din webbplats istället för den standard-webbadress som tillhandahålls av GitHub. Som ett resultat så kan du använda ditt eget varumärke och göra det lättare för användarna att hitta och komma åt din webbplats.
- HTTPS-stöd: GitHub Pages erbjuder stöd för HTTPS. Detta möjliggör exempelvis säkra anslutningar till din webbplats. Stödet är avgörande för att bygga upp förtroendet för din webbplats.
- Stöd för Jekyll: GitHub Pages stöder Jekyll, en statisk webbplats-generator. Den gör det möjligt att skapa sofistikerade webbplatser med hjälp av mallar och andra funktioner. Som ett resultat så blir det enkelt att skapa professionella webbplatser utan att behöva skriva all kod från grunden.
Begränsningar
Som tidigare nämnts så kan du bara skapa statiska webbplatser med GitHub Pages. Om du vill bygga ett komplext projekt med många funktioner så behöver du andra hosting-tjänster. Du bör dessutom komma ihåg att du inte kan använda GitHub Pages för kommersiella ändamål, exempelvis för att driva ett företag på nätet eller e-handel.
GitHub Pages tillåter inte att din webbplats är större än 1 GB. Detta innebär att filerna i ditt arkiv inte kan överstiga den mängden minne. Oftast är 1 GB mer än tillräckligt för en statisk webbplats; se bara till att komprimera dina bilder.
Den har dessutom en mjuk bandbreddsgräns på 100 GB per månad. Denna mängd bandbredd skulle räcka för att distribuera din webbplats till några tusen personer per månad, och duger om du inte har en så stor målgrupp.
Skapa och distribuera med GitHub Pages: Steg för steg-guide
Att skapa en GitHub-sida är en enkel och okomplicerad process för hosting av en statisk webbplats. Tänk på att om du behöver någon form av databas-anslutning, så bör du ha en extern databas-leverantör.
I följande guide så får du lära dig hur du skapar en GitHub-sida från grunden. Det inkluderar exempelvis skapandet av ett fjärrarkiv, byggandet av en responsiv personlig webbplats med HTML och distribuering till webben med GitHub.
Nu sätter vi igång!
1. Registrera dig på GitHub
För att börja så måste du ha ett aktivt GitHub-konto. Om du inte har något sådant så går du till deras registreringssida. Det borde sedan inte ta mer än ett par minuter att fylla i formuläret.
När du har loggat in så bör du kunna skapa ett fjärr-arkiv.
2. Skapa ett fjärr-arkiv
Ett arkiv är en katalog där du lagrar all kod som är relaterad till ett visst projekt.
Från GitHub’s startsida så klickar du på knappen ”Nytt” eller ”Skapa arkiv” som finns i den vänstra panelen på webbplatsen. Detta omdirigerar dig sedan till ett formulär där du fyller i information om ditt arkiv.
Följande steg är avgörande:
- Ange namnet på ditt arkiv till
"yourusername".github.io. - Markera knappen Offentligt. Du måste ställa in arkivet på Offentligt för att publicera din webbplats.
- Lägg till en README.
Du kan bara ha ett arkiv för ett visst personligt konto eller en viss organisation. Det är därför som namnet på arkivet är ditt användarnamn och domänen github.io. Därefter så kommer vi att se hur du konfigurerar en webbplats från ett arkiv.
Om du inte har GitHub Pro så kan du bara publicera en GitHub-sida om arkivet är offentligt. Tänk på detta om du inte vill dela källkoden för din webbplats offentligt.
Efter detta så bör du ha något som liknar följande:
Om du redan har den fungerande källkoden för din webbplats så kan du hoppa över det vanliga Git-arbetsflödet och släppa filerna direkt till arkivet.
Klicka på Add file
För att göra detta så klickar du på menyn Add file i ditt arkiv och väljer sedan alternativet Ladda upp filer. Välj sedan filerna på din webbplats, med den huvudsakliga HTML-filen med namnet index.html. Kom ihåg att även lägga till alla dina CSS- och JavaScript-filer i arkivet.
Slutligen så trycker du på knappen Bekräfta ändringar.
I följande avsnitt så ska vi bygga en enkel personlig webbplats med HTML och Bootstrap. Därefter så laddar vi upp den till GitHub och konfigurerar den som en offentlig GitHub-sida med en egen domän.
3. Bygg en personlig webbplats
Vi börjar med att klona GitHub-arkivet som vi just har skapat. För att göra detta så måste du se till att du redan har Git-klienten installerad på din dator. (Om du inte har detta så kan du ta en titt på vår handledning om Git och GitHub.)
Gå till fliken code i ditt arkiv och kopiera SSH-webbadressen i SHH-alternativet.
Öppna sedan en terminal eller en kommandorad. På de flesta Linux-distribueringar och macOS så kan du använda genvägen Ctrl + Alt + T, eller titta i systemets appmeny efter Terminal. På Windows så kan du använda Git BASH som installeras som standard med Git, CMD, PowerShell eller en GUI-klient.
I terminalen så skriver du sedan git clone och den kopierade webbadressen. Detta kommer att hämta och skapa en kopia av fjärr-arkivet på din lokala maskin så att du kan bygga din webbplats.
Skriv därefter in den nya mappen som heter yourusername.github.io med cd och ls. Du bör se mappen .git, som innehåller konfigurationen och metadata för ditt projekt, samt filen README.md om du har skapat en sådan.
Öppna din favorittextredigerare (t.ex. Sublime Text) och låt oss börja skapandet av din webbplats.
Vid roten av arkivet så skapar du en fil som heter index.html (detta namn krävs av GitHub Pages) och skriv in den typiska HTML-kodstrukturen:
<!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 sa tidigare så ska vi använda Bootstrap 5.0, ett CSS-ramverk med öppen källkod som hjälper oss att bygga responsiva webbplatser på ett enklare sätt. Som du kommer att se behöver vi inte använda anpassad CSS för just den här webbplatsen.
Nyttja ett CDN
För att få in Bootstrap i vår sida så måste vi inkludera den kompilerade CSS och JavaScript via ett CDN. Klistra in följande kod i HTML <head> för att kunna använda Bootstrap CSS:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">På samma sätt så ska vi även inkludera Devicon CDN för att kunna använda SVG-ikoner för populära programmeringsspråk och tekniker utan större problem:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">För att inkludera JavaScript så infogar du följande kod precis ovanför slutet av </body>-taggen:
<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 börjar med att skapa en rubrik för vår webbplats. Det blir en mörk rubrik med länkar till vår indexsida och två andra sidor – ”Projekt” och ”Läslogg” – som du kan skapa senare:
<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 använder Bootstrap-omslagen navbar och navbar-expand-lg för att skapa en responsiv container. Den fälls exempelvis ihop när visningsbredden är mindre än 992px. Detta sker på grund av rutnäts-alternativet lg. Om du vill veta mer om rutnäts-alternativ så kan du ta en titt på Bootstrap’s layoutsida.
Skapa två responsiva kolumner
Låt oss nu skapa två responsiva kolumner i en container: en för en kostnadsfri bild från Unsplash och en för en beskrivning av oss själva:
<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 så hämtar vi en bild från en lokal fil, så den måste finnas i arkivet när vi skickar våra ändringar till GitHub-arkivet.
Slutligen så använder vi SVG-ikoner från Devicon i vår Bootstrap-container, tillsammans med lite intern CSS för att få våra färdigheter att sticka ut:
<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>Behandla HTML-taggen som ett typsnitt
Eftersom vi använder HTML-taggen <i> så kan vi behandla den som ett typsnitt. Vi ställer alltså in storleken på våra logotyper till 4 em genom att deklarera den i style-taggen.
Här är slutresultatet av denna enkla personliga webbplats:
Visste du att över 50 % av trafiken på webbplatser kommer från mobila enheter? Eftersom vi använde Bootstrap så sparade vi mycket CSS-kodning och fick dessutom en responsiv webbplats, vilket du kan se nedan.
Du kan sedan anpassa den här sidan så mycket som du vill. Här finns hela källkoden på GitHub, till ditt förfogande.
Det går exempelvis att bifoga ett huvudlöst CMS som Ghost med hjälp av en av våra fullfjädrade Applikationshosting-lösningar. Du kan ansluta direkt till ditt GitHub-arkiv via din MyKinsta-instrumentpanel och få igång din nya webbplats på bara några minuter.
Det är dags att flytta dina filer. För att göra detta så kör du följande kommandon i din terminal, på den översta nivån i ditt projekt.
git add .
git commit -m "Added website source code and image"
git pushNu kan vi använda den här webbplatsen för att konfigurera vår GitHub-sida.
4. Publicera en GitHub-sida för en användare
Så snart som du flyttar index.html till fjärr-arkivet som heter som ditt användarnamn startar GitHub automatiskt en arbetsflödesprocess. Den används därefter för att konfigurera din sida på nätet. Det kan ta några minuter, men sedan så kommer din statiska webbplats igång automatiskt.
Webbplatsens webbadress kommer att se ut på följande sätt: https://kinstauser.github.io/
Om din webbplats inte är på nätet efter 10 minuter så kan du försöka att göra en dummy-ändring i din kod (t.ex. lägga till ett mellanslag) och återaktivera byggprocessen för GitHub Pages.
5. Publicera en GitHub-sida för ett arkiv
Hittills så har vi skapat en användarsida. Vad händer om vi vill ha flera publicerade GitHub-sidor? Då måste vi använda oss av en projektsida.
Som exempel så använder vi den HTML-teknologisida som vi skapade i handledningen Git för webbutveckling.
Det enklaste sättet är att gå till fliken Inställningar i vårt arkiv och sedan till alternativet Sidor i avsnittet ”Kod och automatisering”.
Välj källan Distribuera från en gren och klicka på den gren som du vill distribuera filerna från. Det rekommenderas starkt att du publicerar från huvudgrenen. Skapa därefter funktioner och åtgärda fel med hjälp av hjälpgrenar och slå sedan ihop dem. På så sätt introducerar du inte så lätt fel på den publicerade webbplatsen.
När du har valt gren så väljer du den mapp som du vill servera filerna ifrån – vanligtvis roten (/) – och klickar på spara.
Återigen så väntar du några minuter. Din webbplats bör vara tillgänglig på "yourusername".github.io/.
Om du vill avpublicera en arkiv-plats så kan du gå till Inställningar, sedan Sidor och klicka på alternativet med tre punkter. Du får då se en ruta med meddelandet Avpublicera webbplats.
Bra! Nu har du fått igång webbplatsen för ditt projekt med öppen källkod. Själva domännamnet är dock långt och säkert inte så lätt att komma ihåg. Låt oss se hur vi kan förbättra detta.
6. Konfigurera en anpassad domän
Det enklaste sättet att konfigurera en anpassad domän för en GitHub-sida och se till att den fungerar är att gå till din DNS-leverantör och skapa fyra A-poster för GitHub-sidornas IP-adresser:
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153Du måste dessutom skapa en CNAME-post med yourusername.github.io som mål. Vanligtvis är DNS-förändringar långsamma, så ha tålamod, det kan ta upp till en hel dag.
Gå till avsnittet Anpassad domän
När du har gjort detta så går du till avsnittet Anpassad domän i inställningarna för ditt arkiv, skriver in din domän, klickar på knappen Spara och väntar på att GitHub ska kontrollera din anpassade domän.
Om ditt DNS stöder detta så kan du dessutom kryssa i rutan Förstärk HTTPS för att endast servera din webbplats via HTTPS.
Grattis! Om du har följt med fram till den här punkten i handledningen så har du en statisk webbplats som finns i GitHub Pages kostnadsfritt.
Bästa praxis för GitHub Pages
Innan vi skiljs åt så kommer här några bästa praxis som du bör ta hänsyn till när du publicerar en GitHub-webbplats:
- Gör aldrig direkta utföranden till den gren som du distribuerar från. Skapa ändringar i andra grenar och skapa sedan en pull request.
- Välj en bra domän för din webbplats om du har råd med detta. Det är ett av de viktigaste besluten för ditt personliga varumärke eller ditt projekts varumärke.
- Använd inte GitHub Pages för kommersiella ändamål, exempelvis för att starta en e-handelsplats.
- Utvärdera dina behov. Det är visserligen bra att kunna publicera en statisk webbplats kostnadsfritt. Om du förväntar dig mycket trafik eller vill ha komplexa funktioner så är det däremot bäst att betala för en bra hosting-tjänst.
Sammanfattning
Webbutveckling blir mer och mer komplicerad för varje dag. Statiska webbplatser har funnits här sedan internets tillkomst, och de är ett utmärkt sätt att börja skapa projekt.
I den här handledningen så har du lärt dig vad statiska webbplatser är och hur du konfigurerar dem på nätet med GitHub Pages. Du skapade en enkel personlig webbplats med Bootstrap och publicerade den sedan som din GitHub-användarsida. Du lärde dig dessutom hur du får igång ett projekts webbplats och hur du avpublicerar den vid behov.
På det hela taget så är GitHub Pages ett bekvämt och kraftfullt sätt att hosta din statiska webbplats kostnadsfritt. Oavsett om du vill visa upp din portfolio, dela med dig av dina projekt med öppen källkod eller börja skapa en närvaro på nätet så är GitHub Pages ett utmärkt val. Och när du får tillräckligt med trafik eller är redo att skapa en komplett webbplats så kan du smidigt byta till andra applikationshosting-tjänster som Kinsta’s utan att missa något.
Lämna ett svar