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.