Deploy Marp Markdown Presentations to GitHub Pages with GitHub Actions

Previously, I wrote about how to generate multiple Marp Markdown presentations in one go, just like most static site generators do.

This is the sequel to that post. To follow along, you need to implement the same project structure and build script.

Now that we can generate all Marp Markdown files to HTML, we can deploy them to any static site provider, including GitHub Pages.

By the end of this tutorial, you’ll have a dedicated website for all of your presentation files.

Deploy Marp to GitHub Pages with GitHub Actions

First, go to your GitHub repository, then click Settings > Pages. Under Build and deployment, choose GitHub Actions as the source.

Then create the deploy.yml file located at .github/workflows/deploy.yml.

Use the following YAML config to build and deploy your Marp presentations.

name: Build and Deploy Marp Slides

on:
  push:
    branches: [ main ]
  workflow_dispatch:

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

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '24'

      - name: NPM Install
        run: npm install

      - name: Build slides
        run: npm run publish

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

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

And that’s all.

Every time you push an update, GitHub will automatically build and deploy your HTML presentations.

You can check the final result on my GitHub Pages.

Conclusion

That’s it for today’s post. I hope it’s useful.

As usual, if you have any questions or a better method, leave a comment below. Thanks for reading, and see you next time!