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

Build Single Page Applications (SPA) #

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

$ slidev build

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

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

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

Βασικό 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.environment]
  NODE_VERSION = "14"

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

[[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: push
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '14'
      - name: Install dependencies
        run: npm install
      - name: Install slidev
        run:  npm i -g @slidev/cli
      - name: Build
        run: slidev build --base <name_of_repo>
      - name: Deploy pages
        uses: crazy-max/ghaction-github-pages@v2
        with:
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

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