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/[email protected]
        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/[email protected]
        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.

[williamsxu]

Thank you, it works for me :)

[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

[dizys]

Dear Antfu/Dizys,
I copied index.html as 404.html and that's enough? or do I need to do something else, please? It's still complaining 404 not found for /1 URL for me.
Thanks!

It should be enough for pages hosted on GitHub or GitLab, since both of them recognize 404.html as default 404 page. Any chance you can share your repo? Or can you reproduce the problem with a demo repo? That would help better pinpoint the problem.

[antfu]

FYI, in the least version, slidev auto generates 404.html file.

[wey-gu]

Dear Antfu/Dizys,
I copied index.html as 404.html and that's enough? or do I need to do something else, please? It's still complaining 404 not found for /1 URL for me.
Thanks!

It should be enough for pages hosted on GitHub or GitLab, since both of them recognize 404.html as default 404 page. Any chance you can share your repo? Or can you reproduce the problem with a demo repo? That would help better pinpoint the problem.

Dear @dizys

Thanks! Now with the latest version, where the auto generated 404.html and _redirect files are there. It seems still to be with issues(404), there must be something wrong from my side I guess :-P

https://siwei.io/talks/2021-DoKC/
dist repo: https://github.com/siwei-io/talks/tree/gh-pages/2021-nMeetup

[dizys]

Dear Antfu/Dizys,
I copied index.html as 404.html and that's enough? or do I need to do something else, please? It's still complaining 404 not found for /1 URL for me.
Thanks!

It should be enough for pages hosted on GitHub or GitLab, since both of them recognize 404.html as default 404 page. Any chance you can share your repo? Or can you reproduce the problem with a demo repo? That would help better pinpoint the problem.

Dear @dizys

Thanks! Now with the latest version, where the auto generated 404.html and _redirect files are there. It seems still to be with issues(404), there must be something wrong from my side I guess :-P

https://siwei.io/talks/2021-DoKC/
dist repo: https://github.com/siwei-io/talks/tree/gh-pages/2021-nMeetup

Oh, I see the problem. This is because GitHub Pages only supports root custom 404 page, which means you can't have one 404 page for each of your sub folders, only the one existed at the root directory will work. So your mono repo way of managing all your slides unfortunately does not work well with faking SPA with 404 fallback. I don't see any easy solution to this. You might have to think about switching to one-repo-per-talk approach if you'd like.

[wey-gu]

Oh, I see the problem. This is because GitHub Pages only supports root custom 404 page, which means you can't have one 404 page for each of your sub folders, only the one existed at the root directory will work. So your mono repo way of managing all your slides unfortunately does not work well with faking SPA with 404 fallback. I don't see any easy solution to this. You might have to think about switching to one-repo-per-talk approach if you'd like.

Aha, got it @dizys thanks for the support!

[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

[ahandsel]

@fguisso Thank you for sharing your GitHub actions! It was very helpful for me to build out my own Talks repo with multiple Slidev slides.

However, I keep struggling with Slidev's inability to successfully create a SPA version of the slides when calling for a Markdown file in a subfolder.

Do you also experience this issue?

Details: #517

[fguisso]

@ahandsel try this line19