Providing Official GitHub Actions to host on GitHub Pages quickly

[skanehira]

Is your feature request related to a problem? Please describe.
Thanks for this Great Project!
Currently, slidev is providing SPA that user can host it on GitHub Pages.
If slidev providing GitHub Actions to host on GitHub Pages, it would be more convenient I think.

Describe the solution you'd like
Providing GitHub Actions to host in GitHub Pages.

Describe alternatives you've considered
Nothing.
I'll do this :)

[dizys]

This is my current GitHub Actions workflow that I use for deploying slidev to Pages, if it can be of any help.

name: Deploy pages

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2.1.5
        with:
          node-version: '14'
      - uses: actions/cache@v2
        with:
          path: '**/node_modules'
          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
      - name: Install dependencies
        run: |
          yarn install
      - name: Build application
        run: |
          yarn build
          cp dist/index.html dist/404.html
      - name: Deploy pages
        uses: crazy-max/ghaction-github-pages@v2.3.0
        with:
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

[Ahacad]

Actually there are some problems with deploying to GitHub Pages, if you just add the ci.yml by @dizys and push to GitHub, the page would fail due to absolute path reference. For example in index.htmlthe /assets/motion.da9a2e19.js would goes to https://yourgithubname.github.io/assets/motion.da9a2e19.js, which should be https://yourgithubname.github.io/yourreponame/assets/motion.da9a2e19.js, you could fix that by using ./assets/motion.da9a2e19.js (caution the ./), but I would like to know how to fix this when packing.

[dizys]

Actually there are some problems with deploying to GitHub Pages, if you just add the ci.yml by @dizys and push to GitHub, the page would fail due to absolute path reference. For example in index.htmlthe /assets/motion.da9a2e19.js would goes to https://yourgithubname.github.io/assets/motion.da9a2e19.js, which should be https://yourgithubname.github.io/yourreponame/assets/motion.da9a2e19.js, you could fix that by using ./assets/motion.da9a2e19.js (caution the ./), but I would like to know how to fix this when packing.

Oh, I shoulda mentioned that Slidev CLI has an option called base. It comes straight from Vite and controls the base public path.

So, when I'm writing my build script in package.json, it goes something like this:

// package.json
{
  // ...
  "scripts": {
    "build": "slidev build --base /my-repo-name/",
    // ...
  },
  // ...
}

Or...

writing the base option into your workflow yaml file should also work fine.
In that case, for the build step, it would be something like this:

# .github/workflows/deploy-pages.yml

# ...
jobs:
  build:
    # ...
    steps:
      # ...
      - name: Build application
        run: |
          yarn build --base /my-repo-name/
          cp dist/index.html dist/404.html
      # ...

Thank you for pointing this out.

[maxiride]

I'd like to bring to your attention this action https://github.com/JamesIves/github-pages-deploy-action

• it is easily configurable
• ready made for likely any project which builds to a /dist (or the like)
• 1.6k stars and good users activity
• haven't tried to configure it for slidev yet but I've used it for so many different projects with different stacks without issue so I'm very much confident that it can be used for slidev too

[Ahacad]

Actually there are some problems with deploying to GitHub Pages, if you just add the ci.yml by @dizys and push to GitHub, the page would fail due to absolute path reference. For example in index.htmlthe /assets/motion.da9a2e19.js would goes to https://yourgithubname.github.io/assets/motion.da9a2e19.js, which should be https://yourgithubname.github.io/yourreponame/assets/motion.da9a2e19.js, you could fix that by using ./assets/motion.da9a2e19.js (caution the ./), but I would like to know how to fix this when packing.

Oh, I shoulda mentioned that Slidev CLI has an option called base. It comes straight from Vite and controls the base public path.

So, when I'm writing my build script in package.json, it goes something like this:

// package.json
{
  // ...
  "scripts": {
    "build": "slidev build --base /my-repo-name/",
    // ...
  },
  // ...
}

Or...

writing the base option into your workflow yaml file should also work fine.
In that case, for the build step, it would be something like this:

# .github/workflows/deploy-pages.yml

# ...
jobs:
  build:
    # ...
    steps:
      # ...
      - name: Build application
        run: |
          yarn build --base /my-repo-name/
          cp dist/index.html dist/404.html
      # ...

Thank you for pointing this out.

Thank you, it works like a charm now.

[Ahacad]

Maybe a GitHub gist would be enough for deploying slidev, its process is actually similar to deploying other static sites.

[chill-cod3r]

One additionally callout to make here is that if you want "pasteable" urls you need to use hash routing and not history based routing

[antfu]

One additionally callout to make here is that if you want "pasteable" urls you need to use hash routing and not history based routing

The line cp dist/index.html dist/404.html is doing that, 404.html as a fallback so it will work on history mode

[chill-cod3r]

Oh interesting! I didn't know that (it makes total sense though!). Thanks!

[fguisso]

This is my github actions that build each slides based on the commit message, deploy in github pages in the same repo and update main README.md to add the new link in my list of slides.

https://github.com/fguisso/talks/blob/main/.github/workflows/github-pages.yml