Search code examples
deploymentgithub-actionsrenderinggithub-pagesastrojs

Astro.js deployment: Media files not rendering

I've recently tried to deploy my 1st portfolio on github pages which is being built with Astro.js.

Everything looks as it should on dev mode, and the build doesn't start any errors, but when I access the page where my portfoli was deployed the images are not rendering. All the images are SVGs and I also have a video that plays on the backgroud which is in .mp4 format. For the HTML I'm using and tags for the images and the video respectively.

For deployment I followed Astro's documentation

And basicly coipied they're yaml file.

.github/workflows/main.yaml:

name: Deploy Astro to GitHub Pages

    on:
      # Trigger the workflow every time you push to the `main` branch
      # Using a different branch name? Replace `main` with your branch’s name
      push:
        branches: [ main ]
      # Allows you to run this workflow manually from the Actions tab on GitHub.
      workflow_dispatch:

    # Allow this job to clone the repo and create a page deployment
    permissions:
      contents: read
      pages: write
      id-token: write

    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
          - name: Checkout your repository using git
            uses: actions/checkout@v2          
          - name: Install, build, and upload your site
            uses: withastro/action@v0
            with:
                # path: . # The root location of your Astro project inside the repository. (optional)
                # node-version: 16 # The specific version of Node that should be used to build your site. Defaults to 16. (optional)
              package-manager: npm # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)


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

For more detailed information you can find

EDIT: clearly I didn't read the documents well enough as the error was solved by this warning warning

Solution

  • For a complete answer, and in addition to the base config that you mentioned in your question, as you're using github pages for deployment, it is important to add a .nojekyll file in your /public/ directory or ensure it is placed in your repo root or the static folder to be deployed by github

    references :