Στατική Φιλοξενία

Build Single Page Applications (SPA)

Μπορείτε επίσης να μετατρέψετε τις διαφάνειες σε ένα αυτο-φιλοξενούμενο SPA:

$ slidev build

Η παραγόμενη εφαρμογή θα είναι διαθέσιμη στο dist/.

Μπορείτε να δοκιμάσετε την παραγόμενη εφαρμογή χρησιμοποιώντας έναν web server (Apache, NGINX, Caddy...κλπ.) ή στο project μπορείτε να εκτελέσετε απευθείας: npx vite preview.

Και στη συνέχεια μπορείτε να την φιλοξενήσετε στα GitHub Pages, Netlify, Vercel, ή όπου αλλού θέλετε. Τώρα μπορείτε να μοιραστείτε τις διαφάνειές σας με τον υπόλοιπο κόσμο με έναν μόνο σύνδεσμο.

Βασικό Path

Για να εγκαταστήσετε τις διαφάνειές σας κάτω από υποδιαδρομές, θα πρέπει να περάσετε την επιλογή --base. Το path --base πρέπει να αρχίζει και να τελειώνει με μια κάθετο /, για παράδειγμα:

$ slidev build --base /ομιλίες/η-cool-ομιλία-μου/

Ανατρέξτε στις οδηγίες χρήσης του Vite για περισσότερες πληροφορίες.

Παροχή PDF με δυνατότητα λήψης

Μπορείτε να παρέχετε ένα PDF με δυνατότητα λήψης στους θεατές του SPA σας με την ακόλουθη ρύθμιση:

---
download: true
---

Το Slidev θα δημιουργήσει ένα αρχείο PDF μαζί με την κατασκευή και ένα κουμπί λήψης θα εμφανιστεί στο SPA.

Μπορείτε επίσης να δώσετε μια προσαρμοσμένη διεύθυνση URL για το PDF. Σε αυτή την περίπτωση, η διαδικασία απεικόνισης θα παραλειφθεί.

---
download: 'https://myside.com/my-talk.pdf'
---

Αυτό μπορεί επίσης να γίνει με την επιλογή CLI --download (μόνο boolean).

$ slidev build --download

Όταν χρησιμοποιείτε την επιλογή λήψης, μπορείτε επίσης να παρέχετε τις επιλογές εξαγωγής:

• Χρησιμοποιώντας επιλογές εξαγωγής CLI
• Ή επιλογές εξαγωγής frontmatter

Φάκελος εξόδου

Μπορείτε να αλλάξετε τον φάκελο εξόδου χρησιμοποιώντας το --out.

$ slidev build --out my-build-folder

Λειτουργία watch

Δίνοντας την επιλογή --watch η εφαρμογή θα εκτελείται σε λειτουργία παρακολούθησης και θα ανακατασκευάζεται κάθε φορά που αλλάζει τα αρχεία σας.

$ slidev build --watch

Πολλαπλές καταχωρήσεις

Μπορείτε επίσης να εξάγετε πολλές διαφάνειες ταυτόχρονα.

$ slidev build slides1.md slides1.md

Ή

$ slidev build *.md

Σε αυτή την περίπτωση, κάθε αρχείο εισόδου θα δημιουργήσει έναν φάκελο που θα περιέχει το build στον φάκελο εξόδου.

Παραδείγματα

Ακολουθούν μερικά παραδείγματα εξαγομένων SPA:

• Πρότυπο Εκκίνησης
• Composable Vue του Anthony Fu

Για περισσότερα, δείτε τις Παρουσιάσεις.

Φιλοξενία

Συνιστούμε να χρησιμοποιήσετε το npm init slidev@latest για την δημιουργία του έργου σας, το οποίο περιέχει τα απαραίτητα αρχεία ρυθμίσεων για τις υπηρεσίες φιλοξενίας.

Netlify

• Netlify

Δημιουργήστε το αρχείο netlify.toml στη ρίζα του έργου σας με το ακόλουθο περιεχόμενο.

[build]
publish = 'dist'
command = 'npm run build'

[build.environment]
NODE_VERSION = '20'

[[redirects]]
from = '/*'
to = '/index.html'
status = 200

Στη συνέχεια, μεταβείτε στο πίνακα ελέγχου του Netlify και δημιουργήστε ένα νέο ιστότοπο με το repository.

Vercel

• Vercel

Δημιουργήστε το αρχείο vercel.json στη ρίζα του έργου σας με το ακόλουθο περιεχόμενο.

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Στη συνέχεια, μεταβείτε στο πίνακα ελέγχου του Vercel και δημιουργήστε ένα νέο ιστότοπο με το repository.

GitHub Pages

• GitHub Pages

Για να εγκαταστήσετε τις διαφάνειές σας στο GitHub Pages:

• ανεβάστε όλα τα αρχεία του έργου στο repo σας (π.χ. με το όνομα name_of_repo)
• δημιουργήστε το αρχείο .github/workflows/deploy.yml με το ακόλουθο περιεχόμενο για να εγκαταστήσετε τις διαφάνειές σας στο GitHub Pages μέσω των GitHub Actions. Σε αυτό το αρχείο, αντικαταστήστε το <name_of_repo> με το name_of_repo. Βεβαιωθείτε ότι αφήσατε τις επικεφαλής και τις τελικές κάθετους στη θέση τους.

name: Deploy pages

on:
  workflow_dispatch: {}
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    permissions:
      contents: read
      pages: write
      id-token: write

    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 'lts/*'

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build -- --base /<name_of_repo>/

      - uses: actions/configure-pages@v4

      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist

      - name: Deploy
        id: deployment
        uses: actions/deploy-pages@v4

• Στο repository σας, μεταβείτε στην επιλογή Settings>Pages. Στην ενότητα "Build and deployment", επιλέξτε "Deploy from a branch", επιλέξτε "Github Actions".
• Τέλος, αφού εκτελεστούν όλες οι διαδικασίες εργασιών, θα πρέπει να εμφανιστεί ένας σύνδεσμος προς τις διαφάνειες στο Settings>Pages.