Aktivera GitHub Pages

Nu när du har en webbplats färdig så vill vi aktivera GitHub Pages så att du kan visa upp webbpaltsen via en riktigt webbserver.

Din webbplats kommer att vara privat så att endast den som har länken kan komma åt den.

Starta GitHub pages

Börja med att gå till ditt repos hemsida på GitHub. Välj “Settings -> Pages”.

det kan se ut så här.

Image description — Bild: Inställningar för att sätta igång GitHub Pages.

Välj i dropdown menyn att bygga och deploya via “GitHub Actions”.

Du får fram en sida som ser ut likt denna.

Nu har du slagit på funktionen att visa din webbplats på GitHub Pages, som en privat webbplats med en dold länk.

Konfigurationsfil för att deploya

För att din webbplats skall “byggas och deployas” behöver vi skapa en konfigurationsfil som vet hur det skall ske.

Gör så här i terminalen, utgå från att du står i rooten av ditt repo.

mkdir -p .github/workflows
touch .github/workflows/pages.yaml

Öppna din texteditor och leta reda på filen du nyss skapade. Den är tom. Placera följande kod i den och spara filen.

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload the public directory
          path: 'public'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Det kan se ut så här när du är klar.

När du har sparat så gör du commit och pushar filen till GitHub.

Nu kommer GitHub att läsa konfigurationsfilen för att publicera din webbplats.

GitHub Actions

Du kan se status på hur GitHub arbetar om du väljer “Actions” i ditt repo. När din action är grön så är allt klart.

Hitta länken till din webbplats

När GitHub Actions är klar så kan du hitta länken till webbplatsen, antingen via detaljer i GitHub Actions, eller om du går till “Settings -> Pages”. Du kan se att webblänken ser lite “hemlig” ut.

Glöm inte att lägga till me.html i slutet av länken för att visa en av dina sidor.

Webbplatsen publiceras automatiskt

I fortsättningen så publiceras din webbplats på nytt vid varje ny commit som du pushar till GitHub.

Det kan ta ett par minuter för GitHub att jobba igenom sin action, men därefter ser du resultatet.

Lägg till en index.html

För att slippa skriva in me.html i slutet av länken så kan du skapa en index.html som pekar på din startsida. Detta kan vi göra med hjälp av en symbolisk länk.

Gör så här i terminalen, utgå från att du står i rooten av ditt repo.

# Gå till rooten av ditt repo
cd public
ln -s me.html index.html

Du kan se hur filen ser ut med ls.

ls -l index.html

Du kan nu se att filen index.html pekar på (symbolisk länk till) me.html. Följande är hur utskriften från kommandot ls -l kan se ut.

lrwxrwxrwx 1 mos mos 14 sep  3 09:49 index.html -> me.html

Nu har du skapat en symbolisk länk som heter index.html som pekar på me.html. När du nu går till din webbplats utan att ange en specifik sida så kommer index.html att laddas och den i sin tur visar me.html. På detta sättet så räcker det nu att du anger webblänken du får i GitHub Pages utan att behöva lägga till me.html i slutet.