# 静的ホスティング

# シングルページアプリケーション(SPA)を構築する

スライドをセルフホスティング可能なSPAとして構築することができます：

$ slidev build

生成されたアプリケーションはdist/の配下に配置され、GitHub Pages、Netlify、Vercelなど、好きな場所にホストすることができます。これでリンク1つで世界中の人とスライドを共有することできます。

# ベースパス

サブルート下にスライドをデプロイするには、--baseオプションを指定する必要があります。例：

$ slidev build --base /talks/my-cool-talk/

詳細はViteのドキュメントを参照してください。

# ダウンロード可能なPDFを提供する

以下の設定により、SPAの閲覧者向けにダウンロード可能なPDFを提供することができます：

---
download: true
---

Slidevはビルドと一緒にPDFファイルを生成し、SPAにダウンロードボタンが表示されます。

またPDFに対してカスタムURLを指定することもできます。その場合、レンダリング処理はスキップされます。

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

# サンプル

以下はSPAとしてエクスポートされた例です：

• Starter Template
• Composable Vue by Anthony Fu

詳しくはショーケースを参照してください。

# ホスティング

npm init slidev@lastestを使って、サービスをそのままホスティングするために必要な設定ファイルが含まれたプロジェクトの雛形を生成することを推奨します。

# Netlify

• Netlify

プロジェクトルートに以下の内容でnetlify.tomlを作成します。

[build.environment]
  NODE_VERSION = "14"

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

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

Netlifyのダッシュボードを開き、リポジトリを指定して新しいサイトを作成してください。

# Vercel

• Vercel

プロジェクトルートに以下の内容でvercel.jsonを作成します。

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

Vercelのダッシュボードを開き、リポジトリを指定して新しいサイトを作成してください。

# GitHub Pages

• GitHub Pages

GitHub Actionsを使用してGitHub Pagesにスライドをデプロイするために、以下の内容で.github/workflows/deploy.ymlを作成してください。

name: Deploy pages
on: push
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '14'
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Deploy pages
        uses: crazy-max/ghaction-github-pages@v2
        with:
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}